.view.is-enter > * { animation: masuk var(--dur-micro) var(--ease-out) both; }
.view.is-enter > *:nth-child(2) { animation-delay: 15ms; }
.view.is-enter > *:nth-child(3) { animation-delay: 30ms; }
.view.is-enter > *:nth-child(4) { animation-delay: 45ms; }
.view.is-enter > *:nth-child(n+5) { animation-delay: 60ms; }
@keyframes masuk { from { opacity: 0.4; transform: translateY(4px); } }
.view > * + * { margin-top: var(--space-8); }
.view > .backlink + * { margin-top: 0; }
@media (max-width: 767px) { .view > * + * { margin-top: var(--space-6); } .view > .backlink + * { margin-top: 0; } }    

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.page-head > div:first-child { display: flex; flex-direction: column; min-width: 0; }
 
.page-head.page-head--tab, .kom-head.kom-head--tab { justify-content: flex-end; align-items: center; }
.view > .sr-only:first-child + * { margin-top: 0; }    
.view > .kom-head--tab + .pseg { margin-top: var(--space-3); }
.page-head h1 { order: -1; color: var(--c-accent-text); }    
.page-head .kicker { display: block; margin-top: 2px; }
.h-sm { font-size: var(--text-lg); }
 
.backlink {
  display: inline-flex; align-items: center; gap: 4px; min-height: 38px; max-width: 100%; margin-bottom: var(--space-4); padding: 6px 14px 6px 8px;
  border-radius: var(--r-pill); border: 1px solid var(--c-rule-2); background: var(--c-card); box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
  color: var(--c-ink); text-decoration: none; white-space: nowrap; font-size: var(--text-sm); font-weight: 600;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.backlink > .ic { color: var(--c-accent-text); }
.backlink > span { overflow: hidden; text-overflow: ellipsis; }
.backlink:hover { border-color: var(--c-accent); color: var(--c-accent-text); }
.backlink:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.avatar-row { display: inline-flex; align-items: center; }
.avatar-more { margin-left: 6px; font-size: var(--text-xs); font-weight: 700; color: var(--c-faint); }
.delta.up, .vs__delta.up { color: var(--c-win); }
.delta.down, .vs__delta.down { color: var(--c-loss); }
.delta { min-width: 2.6rem; text-align: right; }

 
.arena-hero {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  background:
    radial-gradient(80% 120% at 100% 0%, var(--c-accent-dim), transparent 60%),
    linear-gradient(160deg, var(--c-paper-3), var(--c-paper-2));
}
@media (min-width: 768px) { .arena-hero { padding: var(--space-8); } }
.arena-hero__head { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 860px) { .arena-hero__head { grid-template-columns: minmax(0, 1fr) auto; } }
.arena-hero__venue { display: flex; align-items: center; gap: 6px; }
.hud-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.hud-stats div { padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: color-mix(in oklch, var(--c-paper) 55%, transparent); border: 1px solid var(--c-rule); border-top: 2px solid var(--pal, var(--c-rule)); min-width: 0; }
@media (min-width: 860px) { .hud-stats div { min-width: 92px; padding: var(--space-3); } }
.hud-stats dt { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pal, var(--c-faint)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
:is(.hud-stats, .tiles) > div:nth-child(5n+1):not([data-pal], .tip-out) { --pal: var(--c-pal-1); }
:is(.hud-stats, .tiles) > div:nth-child(5n+2):not([data-pal], .tip-out) { --pal: var(--c-pal-2); }
:is(.hud-stats, .tiles) > div:nth-child(5n+3):not([data-pal], .tip-out) { --pal: var(--c-pal-3); }
:is(.hud-stats, .tiles) > div:nth-child(5n+4):not([data-pal], .tip-out) { --pal: var(--c-pal-4); }
:is(.hud-stats, .tiles) > div:nth-child(5n+5):not([data-pal], .tip-out) { --pal: var(--c-pal-5); }
 
:is(.hud-stats, .tiles) > [data-tip] {
  position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
:is(.hud-stats, .tiles) > [data-tip]::after {  
  content: ""; position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--pal, var(--c-faint)); opacity: 0.55; transition: opacity var(--dur-micro) var(--ease-out);
}
:is(.hud-stats, .tiles) > [data-tip]:hover { border-color: var(--pal, var(--c-rule-2)); transform: translateY(-1px); }
:is(.hud-stats, .tiles) > [data-tip]:hover::after { opacity: 1; }
:is(.hud-stats, .tiles) > [data-tip]:active { transform: translateY(0) scale(0.98); }
:is(.hud-stats, .tiles) > [data-tip]:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
:is(.hud-stats, .tiles) > [data-tip][aria-expanded="true"] { border-color: var(--pal, var(--c-accent-line)); background: color-mix(in oklch, var(--pal, var(--c-accent)) 10%, var(--c-paper-2)); }
:is(.hud-stats, .tiles) > [data-tip][aria-expanded="true"]::after { opacity: 1; }
:is(.hud-stats, .tiles) > .tip-out {
  grid-column: 1 / -1; min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-md);
  background: var(--c-paper-2); border: 1px solid var(--c-rule); border-left: 3px solid var(--c-pal-2);
  font-size: var(--text-sm); line-height: 1.45; color: var(--c-muted); box-shadow: var(--c-shadow-card);
}
.arena-hero__when { gap: var(--space-2) var(--space-3); }
.arena-hero__when .ses-time { margin: 0; }
.ses-time { color: var(--c-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.ses-time .ic { color: var(--c-pal-2); }
 
.ses-meta { gap: var(--space-2); }
.ses-meta--head { margin-top: var(--space-3); }
.ses-card .ses-meta { gap: 4px 6px; }    
.ses-card .ses-meta .chip { padding: 2px 8px; gap: 4px; font-size: 11px; }
.ses-meta .chip .ic { color: var(--c-pal-2); }
.ses-meta .chip .num { font-variant-numeric: tabular-nums; }
 
.lvl-chip { --lvc: var(--c-pal-1); color: color-mix(in oklab, var(--lvc) 78%, var(--c-ink)); border-color: color-mix(in oklch, var(--lvc) 40%, transparent); background: color-mix(in oklch, var(--lvc) 10%, transparent); }
.lvl-chip[data-level="pemula"] { --lvc: var(--grade-f); }
.lvl-chip[data-level="menengah"] { --lvc: var(--grade-e); }
.lvl-chip[data-level="lanjutan"] { --lvc: var(--grade-d); }
.seat-chip.is-full { color: color-mix(in oklab, var(--c-pal-4) 78%, var(--c-ink)); border-color: color-mix(in oklch, var(--c-pal-4) 40%, transparent); background: color-mix(in oklch, var(--c-pal-4) 10%, transparent); }
.ses-meta .seat-chip.is-full .ic { color: currentColor; }
 
.fee-chip { white-space: normal; max-width: 100%; line-height: 1.3; border-radius: 14px; }
.fee-chip .ic { flex: none; }
 
.foto-mb { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.foto-mb__stage {
  --fm-h: max(240px, calc(100vh - 340px));
  position: relative; align-self: center; width: min(100%, calc(var(--fm-h) * 0.8)); aspect-ratio: 4 / 5;
  border-radius: var(--r-md); overflow: hidden; background: var(--s-bg); box-shadow: var(--c-shadow-card);
  -webkit-user-select: none; user-select: none;
}
@supports (height: 100dvh) { .foto-mb__stage { --fm-h: max(240px, calc(100dvh - 340px)); } }
.foto-mb__stage[data-ratio="1:1"] { width: min(100%, var(--fm-h)); aspect-ratio: 1; }
.foto-mb__stage canvas { display: block; width: 100%; height: 100%; }
.foto-mb__out { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; }    
.foto-mb__stage[data-pan="x"] { touch-action: pan-y; cursor: grab; }
.foto-mb__stage[data-pan="y"] { touch-action: pan-x; cursor: grab; }
.foto-mb__stage.is-drag { cursor: grabbing; }
.foto-mb__stage:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.foto-mb__pick {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  padding: 0 var(--space-3) 24%;    
  border: 0; background: color-mix(in oklch, var(--s-bg) 45%, transparent); color: var(--s-ink); cursor: pointer; font-family: var(--font-display); line-height: 1.25;
}
.foto-mb__pick .ic { width: 22px; height: 22px; padding: 11px; margin-bottom: var(--space-1); box-sizing: content-box; border-radius: 50%; color: var(--s-accent); background: var(--s-dim); border: 1px dashed var(--s-line); transition: transform var(--dur-micro) var(--ease-out); }
.foto-mb__pick:hover .ic { transform: scale(1.06); }
.foto-mb__pick:active .ic { transform: scale(0.96); }
.foto-mb__pick:disabled { cursor: progress; }
.foto-mb__pick:focus-visible { outline: 2px solid var(--s-accent); outline-offset: -6px; }
.foto-mb__pick b { font-size: var(--text-md); font-weight: 800; }
.foto-mb__pick small { font-size: var(--text-xs); color: var(--s-muted); }
.foto-mb__re { position: absolute; top: var(--space-2); right: var(--space-2); --btn-bg: color-mix(in oklch, var(--s-bg) 72%, transparent); --btn-fg: var(--s-ink); --btn-bd: var(--s-line); }
.foto-mb__re:hover { --btn-bg: var(--s-bg); }
.foto-mb__re:focus-visible { outline-color: var(--s-accent); }
.foto-mb__opts { gap: var(--space-3) var(--space-4); }
 
.foto-mb__tip {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill); background: color-mix(in oklch, var(--s-bg) 78%, transparent); border: 1px solid var(--s-line);
  color: var(--s-ink); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; pointer-events: none; animation: fmTipIn var(--dur-long) var(--ease-out);
}
.foto-mb__tip .ic { color: var(--s-accent); }
@keyframes fmTipIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .foto-mb__pick .ic { transition: none; } }
.attr-picks { gap: var(--space-2); }
.attr-picks .label { min-width: 7.5em; }
.chip.attr-pick { color: var(--c-ink); font-weight: 500; }
.chip.attr-pick b { font-size: var(--text-sm); font-weight: 700; }
@media (max-width: 420px) { .attr-picks .label { min-width: 0; width: 100%; } }
.hud-stats dd { margin: 4px 0 0; font-weight: 900; font-stretch: var(--wide); font-size: clamp(1rem, 5vw, var(--text-2xl)); line-height: 1; white-space: nowrap; }
 
@media (max-width: 859px) { .arena-hero__head { display: contents; } .arena-hero .hud-stats { order: 2; } }
@media (max-width: 479px) { .arena-hero { padding: var(--space-5) var(--space-3); gap: var(--space-4); } .hud-stats div { padding: var(--space-2); } }
.hud-stats dd small, .tiles dd small { font-size: 0.5em; color: var(--c-muted); margin-left: 2px; font-weight: 700; }
.arena-live { display: flex; flex-direction: column; gap: var(--space-3); }
.arena-live .kicker { display: inline-flex; align-items: center; gap: 8px; }
.arena-recap { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.arena-recap__txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 46ch; }
.mvp { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; padding: var(--space-4); border-radius: var(--r-lg); background: var(--c-paper-2); border: 1px solid var(--c-accent-line); box-shadow: var(--c-shadow-card); transition: transform var(--dur-short) var(--ease-out); }
.mvp:hover { transform: translateY(-2px); }
.mvp .kicker { display: inline-flex; align-items: center; gap: 6px; }
.mvp b { display: block; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 900; font-size: var(--text-xl); text-transform: uppercase; line-height: 1.1; }
.mvp small { display: block; }
.attend-strip { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

.lb-mini { list-style: none; margin: 0; padding: 0; }
.lb-mini li + li { border-top: 1px solid var(--c-rule); }
.lb-pos { width: 1.6rem; flex: none; text-align: center; font-weight: 900; font-stretch: var(--wide); color: var(--c-faint); }
.lb-mini li:first-child .lb-pos { color: var(--c-accent-text); }
.lb-elo { min-width: 3.2rem; text-align: right; font-weight: 900; font-stretch: var(--wide); }
@media (max-width: 420px) { .lb-mini .tier { display: none; } }
.lb-mini .list-item__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-mini li.is-pending :is(.list-item__title, .lb-elo) { color: var(--c-muted); }    
.lb-mini li.is-pending .avatar { opacity: 0.75; }
@media (max-width: 359px) { .lb-mini .grade { display: none; } }

.dues-teaser {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4); padding: var(--space-4) var(--space-5); text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.dues-teaser:hover { border-color: var(--c-accent-line); transform: translateY(-1px); }
.dues-teaser .kicker { display: block; }
.dues-teaser b { display: block; font-weight: 900; font-stretch: var(--wide); font-size: var(--text-2xl); line-height: 1.15; }
.dues-teaser small { display: block; font-size: var(--text-xs); }

.card-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(46%, 200px); gap: var(--space-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px 2px var(--space-3);
  scrollbar-width: thin; scrollbar-color: var(--c-rule-2) transparent;
}
.card-rail > * { scroll-snap-align: start; }
.card-rail:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; border-radius: var(--r-md); }

 
.live-view__top { margin-bottom: var(--space-4); }
.live-view__top .backlink { margin-bottom: 0; }
.vs {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background:
    radial-gradient(70% 90% at 50% 120%, var(--c-accent-dim), transparent 70%),
    linear-gradient(170deg, var(--c-paper-3), var(--c-paper-2));
  border: 1px solid var(--c-rule); box-shadow: var(--c-shadow-card);
  margin-top: 0 !important;
}
.vs__bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-rule); font-size: var(--text-xs); }
.vs__bar .kicker { color: var(--c-ink); }
.vs__rules { margin-left: auto; }
.vs__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.vs__team { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-3); text-align: center; min-width: 0; transition: opacity var(--dur-short) var(--ease-out); }
.vs__players { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.vs__p { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; min-width: 0; max-width: 128px; border-radius: var(--r-md); padding: 4px; }
.vs__p:hover .vs__pn { color: var(--c-accent-text); }
.vs__pn { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-sm); text-transform: uppercase; line-height: 1.1; overflow-wrap: anywhere; transition: color var(--dur-micro) var(--ease-out); }
.vs__delta { font-family: var(--font-display); font-weight: 800; font-size: 10.5px; letter-spacing: 0.06em; }
.vs__pts { font-weight: 900; font-stretch: var(--wide); font-size: var(--text-score); line-height: 0.88; letter-spacing: -0.02em; }
.vs__pts.bump { animation: bump var(--dur-short) var(--ease-out); }
.vs__tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--c-paper); border: 1px solid var(--c-rule); color: var(--c-muted);
  font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.serve-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 10px var(--c-accent); }
.vs__team.is-serving .vs__pts { color: var(--c-accent-text); text-shadow: 0 0 34px color-mix(in oklch, var(--c-accent) 35%, transparent); }
.vs__team.is-serving .vs__tag { color: var(--c-accent-text); border-color: var(--c-accent-line); }
.vs__team.is-winner { background: radial-gradient(80% 70% at 50% 100%, var(--c-accent-dim), transparent 75%); }
.vs__team.is-winner .vs__pts, .vs__team.is-winner .vs__tag { color: var(--c-accent-text); }
.vs__team.is-winner .vs__tag { border-color: var(--c-accent-line); }
.vs__team.is-loser { opacity: 0.6; }
.vs__mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4) var(--space-3); border-inline: 1px solid var(--c-rule); }
.vs__x { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 900; font-size: var(--text-xl); letter-spacing: 0.1em; color: var(--c-faint); }
.vs__games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vs__games li { display: grid; grid-template-columns: auto 2.4ch 2.4ch; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.vs__games span { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); white-space: nowrap; }
.vs__games b { font-family: var(--font-display); font-weight: 800; text-align: center; color: var(--c-faint); font-variant-numeric: tabular-nums; }
.vs__games b.w { color: var(--c-ink); }
.vs__games li.is-cur b { color: var(--c-accent-text); }
.vs__flag { padding: var(--space-3) var(--space-4); text-align: center; background: var(--c-accent); color: var(--c-accent-ink); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; }
.vs__flag.is-info { background: var(--c-paper-4); color: var(--c-ink); }
@media (max-width: 639px) {
  .vs__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "mid mid"; }
  .vs__team[data-side="A"] { grid-area: a; border-right: 1px solid var(--c-rule); }
  .vs__team[data-side="B"] { grid-area: b; }
  .vs__mid { grid-area: mid; flex-direction: row; flex-wrap: wrap; border-inline: 0; border-top: 1px solid var(--c-rule); padding: var(--space-3); }
  .vs__x { display: none; }
  .vs__games { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
  .vs__team { padding: var(--space-5) var(--space-2); }
  .vs__rules { margin-left: 0; width: 100%; }
}

 
body.tv .topbar, body.tv .tabbar, body.tv .demo-banner, body.tv .live-view__top .backlink, body.tv .live-view > section:not(.vs) { display: none; }
body.tv .view { padding-block: var(--space-3); }
body.tv .live-view { width: 100%; max-width: none; }
body.tv .live-view__top { margin-bottom: var(--space-3); justify-content: flex-end; }
body.tv .vs { min-height: calc(100dvh - 80px); display: flex; flex-direction: column; }
body.tv .vs__grid { flex: 1; }
body.tv .vs__pts { font-size: clamp(6rem, 24vw, 20rem); }
body.tv .vs__pn { font-size: var(--text-lg); }

 
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.toolbar + * { margin-top: 0 !important; }
.toolbar__sort .select { min-width: 150px; }
.toolbar__search { position: relative; flex: 1 1 180px; min-width: 0; }
.toolbar__search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-faint); pointer-events: none; }
.toolbar__search .input { padding-left: 36px; }
@media (max-width: 767px) { .toolbar { gap: var(--space-2); margin-bottom: var(--space-4); } }    




.bc {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); padding: 10px; margin-top: 0 !important;
  color: var(--s-ink);
  background:
    radial-gradient(26% 20% at 10% 0%, var(--s-flare), transparent 70%),
    radial-gradient(26% 20% at 90% 0%, var(--s-flare), transparent 70%),
    radial-gradient(90% 45% at 50% 112%, var(--s-floor), transparent 70%),
    linear-gradient(180deg, var(--s-bg-2), var(--s-bg) 62%);
  box-shadow: var(--c-shadow-card);
}
.bc::before {  
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.75;
  background:
    radial-gradient(circle, var(--s-bokeh-1) 0 1.2px, transparent 2px) 0 0 / 29px 23px,
    radial-gradient(circle, var(--s-bokeh-2) 0 1px, transparent 1.8px) 13px 9px / 41px 37px;
  -webkit-mask: radial-gradient(75% 60% at 50% 45%, transparent 35%, black 90%); mask: radial-gradient(75% 60% at 50% 45%, transparent 35%, black 90%);
}
.bc__frame {
  position: relative; border-radius: 14px; padding: 14px 12px 16px;
  background: var(--s-frame); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px var(--s-line), inset 0 0 44px -14px var(--s-holo), 0 0 34px -12px var(--s-holo);
}
.bc__frame::before {  
  content: ""; position: absolute; inset: -4px; z-index: 3; pointer-events: none;
  --b: 3px; --l: 38px; --k: var(--t);
  background:
    linear-gradient(var(--k) 0 0) left top / var(--l) var(--b), linear-gradient(var(--k) 0 0) left top / var(--b) var(--l),
    linear-gradient(var(--k) 0 0) right top / var(--l) var(--b), linear-gradient(var(--k) 0 0) right top / var(--b) var(--l),
    linear-gradient(var(--k) 0 0) left bottom / var(--l) var(--b), linear-gradient(var(--k) 0 0) left bottom / var(--b) var(--l),
    linear-gradient(var(--k) 0 0) right bottom / var(--l) var(--b), linear-gradient(var(--k) 0 0) right bottom / var(--b) var(--l);
  background-repeat: no-repeat; filter: drop-shadow(0 0 6px color-mix(in oklch, var(--t) 60%, transparent));
}
.bc__side { display: none; }
.bc__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 8px 10px; margin-bottom: 12px; text-align: center; }
.bc__head::after { content: ""; position: absolute; bottom: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--s-accent), transparent); }
.bc__title { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: clamp(0.82rem, 3.6vw, 1.15rem); letter-spacing: 0.12em; text-transform: uppercase; }
.bc__sub { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--s-holo); }
.bc__grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "id" "facts" "skill" "power"; }
.bc__photo {
  grid-area: photo; position: relative; display: grid; place-items: end center; aspect-ratio: 1 / 0.95; overflow: hidden; border-radius: 10px;
  background: radial-gradient(70% 60% at 50% 72%, color-mix(in oklch, var(--tf) 34%, transparent), transparent 70%), linear-gradient(180deg, var(--s-photo-top), var(--s-photo-bot));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--t) 45%, transparent), inset 0 0 30px -10px var(--s-holo);
}
.bc__photo::after {  
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, var(--s-scan) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, var(--s-dim) 0 1px, transparent 1px 9px) 12px 30% / 22% 40% no-repeat;
}
.bc__photo img { position: relative; width: 90%; height: 94%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 12px 20px var(--s-shadow)); }
.bc__photo > svg { width: 55%; height: auto; color: color-mix(in oklch, var(--s-ink) 18%, transparent); }
.bc__ovr { position: absolute; z-index: 2; top: 10px; left: 12px; display: flex; flex-direction: column; line-height: 0.9; }
.bc__ovr b { font-weight: 900; font-stretch: var(--wide); font-size: 2.6rem; color: var(--s-accent); text-shadow: 0 0 20px color-mix(in oklch, var(--s-accent) 40%, transparent); }
.bc__ovr span { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 10px; letter-spacing: 0.22em; color: var(--s-holo); margin-top: 4px; }
.bc__ovr .grade { align-self: flex-start; margin-top: 9px; padding: 3px 8px; border-radius: 7px; font-size: 15px; font-weight: 900; letter-spacing: 0.02em; color: var(--g); }    
.bc__photo .tier { position: absolute; z-index: 2; top: 14px; right: 12px; }
.bc__id { grid-area: id; min-width: 0; padding: 2px 0 2px 14px; border-left: 4px solid var(--t); box-shadow: -8px 0 16px -10px var(--t); }
.bc__name { font-size: clamp(1.9rem, 8.5vw, 2.8rem); line-height: 0.95; letter-spacing: 0.01em; }
.bc__nat { margin-top: 6px; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-muted); }
.bc__facts { grid-area: facts; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.bc__facts div { min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--s-panel); box-shadow: inset 0 0 0 1px var(--s-line), inset 0 0 16px -8px var(--s-holo); }
.bc__facts dt { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-holo); }
.bc__facts dd { margin: 3px 0 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 900; font-size: clamp(0.9rem, 3.8vw, 1.35rem); text-transform: uppercase; line-height: 1.1; }
.bc__facts dd small { font-size: 0.62em; color: var(--s-muted); font-weight: 700; }
.bc__facts dd .ic { color: var(--s-accent); }
.bc__panel { min-width: 0; padding: 12px; border-radius: 10px; background: var(--s-panel); box-shadow: inset 0 0 0 1px var(--s-line), inset 0 0 26px -10px var(--s-holo); }
.bc__skill { grid-area: skill; display: flex; flex-direction: column; gap: 6px; }
.bc__power { grid-area: power; }
.bc__ptitle { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--text-md); letter-spacing: 0.06em; text-transform: uppercase; color: var(--s-accent); }
.bc__ptitle b { color: var(--s-ink); font-size: var(--text-xl); font-weight: 900; }
.bc .radar { max-width: 340px; margin-inline: auto; }
.bc .radar .ring { stroke: var(--s-dim); }
.bc .radar .ring-outer { stroke: var(--s-line); }
.bc .radar .axis { stroke: var(--s-dim); }
.bc .radar .lbl { fill: var(--s-ink); }
.bc .radar .val { fill: var(--lv, var(--s-accent)); }
.bc .radar .vtx { fill: var(--lv, var(--s-accent)); stroke: var(--s-bg); }
.bc__readout { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--s-line); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-holo); }
.bc__readout b { margin-left: 4px; color: var(--s-ink); }
.pbars { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pbar { border-radius: 6px; transition: background-color var(--dur-micro) var(--ease-out); }
.pbar:hover { background: color-mix(in oklch, var(--lv, var(--c-ink)) 8%, transparent); }
.pbar__lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.pbar__lbl small { font-size: 0.85em; color: var(--c-muted); font-weight: 600; letter-spacing: 0.04em; }
.pbar__lbl b { font-size: 1rem; font-weight: 900; }
.pbar .segbar { margin-inline: 4px; }
@media (min-width: 640px) {
  .bc { padding: 16px; max-width: 920px; margin-inline: auto; }
  .bc__frame { padding: 18px 22px 22px 34px; }
  .bc__side { display: block; position: absolute; left: 8px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9px; letter-spacing: 0.3em; color: var(--s-holo); opacity: 0.6; }
  .bc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "photo skill" "id skill" "facts power"; gap: 12px 16px; }
  .bc__facts { grid-template-columns: minmax(0, 1fr); }
}
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tiles div { padding: var(--space-3); border-radius: var(--r-md); background: var(--c-paper-2); border: 1px solid var(--c-rule); border-top: 2px solid var(--pal, var(--c-rule)); min-width: 0; }
.tiles dt { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pal, var(--c-faint)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles dd { margin: 6px 0 0; font-weight: 900; font-stretch: var(--wide); font-size: var(--text-2xl); line-height: 1; }
.tiles dd.is-pts { font-size: var(--text-xl); }    
.tiles dd.is-msk { font-size: var(--text-lg); white-space: nowrap; }    
.tiles dd.is-msk.is-long { font-size: var(--text-sm); }
@media (min-width: 480px) { .tiles dd.is-pts { font-size: var(--text-2xl); } .tiles dd.is-msk { font-size: var(--text-xl); } .tiles dd.is-msk.is-long { font-size: var(--text-md); } }
.tierbar .hint { margin: 0; }
.tierbar { display: flex; flex-direction: column; gap: var(--space-2); }
.tierbar i { display: block; height: 8px; border-radius: 99px; background: var(--c-paper-4); overflow: hidden; }
.tierbar i b { display: block; height: 100%; width: var(--v); background: linear-gradient(90deg, var(--tf), var(--t)); box-shadow: 0 0 12px color-mix(in oklch, var(--t) 60%, transparent); border-radius: inherit; transform-origin: left center; animation: miniIn var(--dur-long) var(--ease-out) both; }
.radar-legend { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3) !important; }
.legend-line { width: 22px; border-top: 2px dashed var(--c-faint); flex: none; }
.rel { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-md); background: var(--c-paper); border: 1px solid var(--c-rule); text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out); }
a.rel:hover { border-color: var(--c-accent-line); }
.rel__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rel__txt .label { display: inline-flex; align-items: center; gap: 6px; }
.rel__txt b { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel.is-empty { opacity: 0.6; }
.statbars { display: flex; flex-direction: column; gap: var(--space-2); }
.statbars .label { margin-bottom: 2px; }
.hist-row .chip { min-width: 70px; justify-content: center; }

 
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: end; max-width: 640px; margin-inline: auto; }
.podium__slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: var(--space-4) var(--space-2) var(--space-4); text-decoration: none; text-align: center;
  background: linear-gradient(180deg, color-mix(in oklch, var(--tf) 30%, transparent), var(--c-glass) 60%);
  border: 1px solid color-mix(in oklch, var(--t) 40%, transparent); border-bottom: 3px solid var(--t); border-radius: var(--r-md);
  box-shadow: var(--c-shadow-card);
  transition: transform var(--dur-short) var(--ease-out);
}
.podium__slot:hover { transform: translateY(-3px); }
.podium__slot.is-empty { visibility: hidden; }
.podium__slot[data-pos="1"] { padding-top: var(--space-8); border-color: var(--c-accent-line); border-bottom-color: var(--c-accent); background: linear-gradient(180deg, var(--c-accent-dim), var(--c-glass) 65%); }
.podium__pos { position: absolute; top: 6px; left: 10px; font-weight: 900; font-stretch: var(--wide); font-size: var(--text-xl); color: var(--t); }
.podium__slot[data-pos="1"] .podium__pos { color: var(--c-accent-text); font-size: var(--text-2xl); }
.podium__photo { width: 72%; aspect-ratio: 1 / 1.05; display: grid; place-items: end center; }
.podium__slot[data-pos="1"] .podium__photo { width: 86%; }
.podium__photo img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 8px 12px var(--c-photo-shadow)); }
.podium__photo svg { width: 78%; color: var(--c-silhouette); }
.podium__name { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 900; font-size: var(--text-sm); text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__elo { font-weight: 900; font-stretch: var(--wide); font-size: var(--text-xl); line-height: 1; }
.podium__slot[data-pos="1"] .podium__elo { color: var(--c-accent-text); }
.podium__msk { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--c-muted); }
@media (max-width: 420px) { .podium__slot .tier { font-size: 9px; padding: 2px 6px 2px 5px; letter-spacing: 0.08em; } .podium__elo { font-size: var(--text-lg); } }

.lb { border: 1px solid var(--c-rule); border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper-2); box-shadow: var(--c-shadow-card); }
.lb-row {
  display: grid; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; min-width: 0;
  grid-template-columns: 1.4rem 32px minmax(0, 1fr) 2.5rem 2.8rem;    
}
.lb-row .avatar { --sz: 32px; }
.lb-row + .lb-row { border-top: 1px solid var(--c-rule); }
a.lb-row:hover { background: var(--c-paper-3); }
.lb-head { padding-block: var(--space-2); background: var(--c-paper); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-faint); }
.lb-row .lb-pos { width: auto; }
.lb-row:nth-child(2) .lb-pos { color: var(--c-accent-text); }
.lb-row:nth-child(3) .lb-pos, .lb-row:nth-child(4) .lb-pos { color: var(--c-ink); }
 
.lb-name { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 6px; row-gap: 3px; min-width: 0; }
.lb-name b { grid-column: 1 / -1; }
.lb-sub { font-size: var(--text-xs); font-weight: 600; color: var(--c-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 359px) { .lb-sub-n { display: none; } }    
.lb-main, .lb-msk, .lb-wide { display: none; }
.lb-row .lb-diff { min-width: 0; }
.lb.is-muted .lb-pos, .lb-row.is-pending .lb-pos { color: var(--c-faint) !important; }
.lb-row.is-pending :is(.lb-name b, .lb-elo) { color: var(--c-muted); }
.lb-row.is-pending .avatar { opacity: 0.75; }
.lb-name b { font-family: var(--font-display); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lb-col { color: var(--c-muted); font-weight: 700; text-align: right; white-space: nowrap; }
.lb-wr, .lb-form { display: none; }
.lb-row .lb-elo { min-width: 0; }
@media (max-width: 420px) {
  .lb-row { gap: var(--space-2); padding-inline: var(--space-3); }
  .lb-name .tier { font-size: 0; letter-spacing: 0; gap: 0; padding: 4px; }    
}
@media (min-width: 560px) {    
  .lb-row { grid-template-columns: 1.8rem 40px minmax(0, 1fr) 2.6rem 4.4rem 3.2rem 3.6rem; }
  .lb-row .avatar { --sz: 40px; }
  .lb-main, .lb-msk { display: block; }
  .lb-sub { display: none; }
  .lb-name { grid-template-columns: minmax(0, max-content) auto; justify-content: start; column-gap: var(--space-2); }
  .lb-name b { grid-column: auto; }
}
@media (min-width: 720px) {
  .lb-row { grid-template-columns: 2.2rem 40px minmax(0, 1fr) 3.4rem 5.6rem 4.4rem 4.4rem; }
  .lb-wide { display: inline; } .lb-narrow { display: none; }
}
.tier-legend .row { gap: var(--space-2); }
.lg-pick .select { min-width: min(100%, 250px); }
.lg-meta { font-size: var(--text-sm); }
.lb-pending .section-head { margin-bottom: 0; }
.lb-pending .hint { margin: 0; }

 
.ses-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--r-lg); background: var(--c-paper-2); border: 1px solid var(--c-rule); box-shadow: var(--c-shadow-card); text-decoration: none; min-width: 0; transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.ses-card:hover { border-color: var(--c-accent-line); transform: translateY(-1px); }
.ses-card > .ic { color: var(--c-faint); }
.ses-card__date { width: 58px; height: 62px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--c-paper); border: 1px solid var(--c-rule-2); }
.ses-card__date b { font-weight: 900; font-stretch: var(--wide); font-size: var(--text-2xl); line-height: 1; color: var(--c-accent-text); }
.ses-card__date span { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }
.ses-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ses-card__main .row { gap: var(--space-2); }
.ses-card__sub { font-size: var(--text-sm); }

.mini-table { border: 1px solid var(--c-rule); border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper-2); box-shadow: var(--c-shadow-card); }
.mini-table__row { display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem 3.6rem 2.6rem; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-4); text-decoration: none; min-height: 48px; }
.mini-table__row + .mini-table__row { border-top: 1px solid var(--c-rule); }
a.mini-table__row:hover { background: var(--c-paper-3); }
.mini-table__row > span:not(:first-child) { text-align: center; }
.mini-table__row .row { flex-wrap: nowrap; gap: var(--space-2); min-width: 0; }
.mini-table__row .row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-table__row.is-head { min-height: 0; background: var(--c-paper); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-faint); }

 
.dues__pick .select { min-width: min(100%, 260px); }
.bill { padding: var(--space-6) var(--space-5); background: radial-gradient(90% 90% at 100% 0%, var(--c-accent-dim), transparent 60%), linear-gradient(160deg, var(--c-paper-3), var(--c-paper-2)); display: flex; flex-direction: column; gap: var(--space-2); }
.bill__amt { font-weight: 900; font-stretch: var(--wide); font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: 1; color: var(--c-accent-text); }
.bill__lines { margin: var(--space-3) 0 0; display: flex; flex-direction: column; }
.bill__lines div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: 1px dashed var(--c-rule); font-size: var(--text-sm); }
.bill__lines dt { display: flex; align-items: center; gap: 8px; color: var(--c-muted); min-width: 0; }
.bill__lines dd { margin: 0; text-align: right; white-space: nowrap; }
.bill__lines dd:nth-of-type(1) { color: var(--c-faint); }
.bill__lines .is-total { border-top: 1px solid var(--c-rule-2); font-weight: 800; }
.bill__lines .is-total dt { color: var(--c-ink); }
@media (max-width: 400px) {    
  .bill__lines div { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .bill__lines dd:nth-of-type(1) { grid-column: 1; grid-row: 2; text-align: left; font-size: var(--text-xs); padding-left: 23px; }    
  .bill__lines dd:nth-of-type(1):empty { display: none; }
  .bill__lines dd:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; }
}
.paym { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-md); background: var(--c-paper); border: 1px solid var(--c-rule); }
.paym__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paym__main b { font-size: var(--text-lg); font-weight: 800; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.paidbar { height: 8px; border-radius: 99px; background: var(--c-paper-4); overflow: hidden; margin-top: calc(-1 * var(--space-2)) !important; }
.paidbar b { display: block; height: 100%; width: var(--v); background: var(--c-win); border-radius: inherit; transition: width var(--dur-long) var(--ease-out); }
.dues-list { border: 1px solid var(--c-rule); border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper-2); box-shadow: var(--c-shadow-card); }
.due-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); }
.due-row + .due-row { border-top: 1px solid var(--c-rule); }
.due-row__main { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.due-row__main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.due-row__sub { flex-basis: 100%; font-size: var(--fs-xs, 12px); line-height: 1.3; }    
.due-row__amt { font-weight: 800; white-space: nowrap; }
.due-row.is-paid .due-row__amt { color: var(--c-faint); }
@media (max-width: 479px) {
  .due-row { grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: var(--space-2); padding-inline: var(--space-3); }
  .due-row .avatar { --sz: 34px; }
  .due-row .btn span { display: none; }
  .due-row .btn { width: 36px; padding: 0; }
}
.pay-confirm { display: flex; flex-direction: column; gap: var(--space-4); }
.pay-confirm__who { display: flex; align-items: center; gap: var(--space-3); }
.pay-confirm__who > div { display: flex; flex-direction: column; min-width: 0; }
.pay-confirm__amt { margin-left: auto; font-size: var(--text-xl); white-space: nowrap; }

 
.head-act { gap: var(--space-2); }
.acct-view .acct { max-width: 460px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6) var(--space-5); }
@media (min-width: 560px) { .acct-view .acct { padding: var(--space-8); } }
.acct-note { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); border: 1px solid var(--c-accent-line); background: var(--c-accent-dim); color: var(--c-ink); font-size: var(--text-sm); line-height: 1.45; }
.acct-note > .ic { margin-top: 2px; color: var(--c-accent-text); }
.acct-note > span { min-width: 0; overflow-wrap: anywhere; }
.acct-note[data-kind="err"] { border-color: color-mix(in oklch, var(--c-loss) 45%, transparent); background: color-mix(in oklch, var(--c-loss) 9%, transparent); }
.acct-note[data-kind="err"] > .ic { color: var(--c-loss); }
.acct-note[data-kind="ok"] { border-color: color-mix(in oklch, var(--c-win) 45%, transparent); background: color-mix(in oklch, var(--c-win) 9%, transparent); }
.acct-note[data-kind="ok"] > .ic { color: var(--c-win); }
.acct-note a, .acct-links a, .admin-login .muted a { color: var(--c-accent-text); font-weight: 700; }
.acct-links > :only-child { margin-inline: auto; }    
.acct-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--c-muted); }
.acct-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.empty .btn .ic { width: 18px; height: 18px; color: inherit; }    
.empty .btn .ic-sm { width: 15px; height: 15px; }
.acct-invite { display: flex; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px dashed var(--c-rule-2); font-size: var(--text-sm); line-height: 1.5; }
.acct-invite > .ic { flex: none; margin-top: 2px; color: var(--c-accent-text); }
.acct-demo { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
.acct-demo > .ic { flex: none; margin-top: 1px; }
.acct-mail, .acct-who { overflow-wrap: anywhere; }
.acct-who { font-size: var(--text-sm); margin: 0; }
.acct-alt { justify-content: space-between; }
.pw-field { position: relative; }
.pw-field .input { padding-right: 50px; }
.pw-eye {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 42px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-muted); cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.pw-eye:hover { color: var(--c-ink); background: var(--c-paper-3); }
.pw-eye:active { background: var(--c-paper-4); }
.pw-eye:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.pw-eye[aria-pressed="true"] { color: var(--c-accent-text); }
.consent { align-items: flex-start; font-size: var(--text-sm); line-height: 1.45; }
.consent input { margin-top: 1px; }
.acct-sent { align-items: flex-start; }
.acct-sent p { margin: 0; }
.acct-sent__ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent-dim); color: var(--c-accent-text); }
.acct-sent__ic .ic { width: 24px; height: 24px; }
 
.acct-sent form, .acct-sent > .btn { align-self: stretch; }
.acct-code { font-size: var(--text-2xl); font-weight: 700; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; }
.acct-code::placeholder { font-size: var(--text-md); font-weight: 400; letter-spacing: 0; }
.claim-who { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.claim-who .avatar { --sz: 64px; }
.claim-who h1 { font-size: var(--text-xl); line-height: 1.25; overflow-wrap: anywhere; }
.claim-tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
 
.me-view .savebar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .me-view .savebar { bottom: 0; } }
@media (max-width: 479px) { .me-view .savebar > .hint { display: none; } }
.me-facts { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--c-paper); border: 1px solid var(--c-rule); }
.me-facts div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--space-3); font-size: var(--text-sm); min-width: 0; }
.me-facts dt { color: var(--c-muted); flex: none; }
.me-facts dd { margin: 0 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 700; text-align: right; max-width: 100%; overflow-wrap: break-word; }    
@media (max-width: 399px), (min-width: 900px) { .me-view .photo-tools { grid-template-columns: minmax(0, 1fr); } }        
.me-file:focus-visible + label { outline: 2px solid var(--c-focus); outline-offset: 2px; }    
.input-pre { position: relative; }
.input-pre > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-faint); font-weight: 700; pointer-events: none; }
.input-pre .input { padding-left: 28px; }
.lvl-pick { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .lvl-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lvl-pick .pick > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lvl-pick small { font-size: var(--text-xs); }
.profile-links { gap: var(--space-2); margin-bottom: var(--space-4); }    
.profile-links .btn { max-width: 100%; min-width: 0; }
.profile-links .btn span { overflow: hidden; text-overflow: ellipsis; }
 
.crop__stage { position: relative; width: min(100%, 300px); aspect-ratio: 3 / 4; margin-inline: auto; border-radius: var(--r-md); overflow: hidden; background: var(--c-paper-4); border: 1px solid var(--c-rule-2); cursor: grab; touch-action: none; user-select: none; }
.crop__stage.is-drag { cursor: grabbing; }
.crop__stage:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.crop__stage canvas { display: block; width: 100%; height: 100%; }
.crop__stage--lebar { width: 100%; }    
.crop__pandu { position: absolute; inset: var(--t) 0; border-block: 2px dashed rgb(255 255 255 / 0.9); box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.32); pointer-events: none; }    
.crop__pandu span { position: absolute; left: 8px; top: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: rgb(0 0 0 / 0.55); color: #FFFFFF; font-size: var(--text-xs); font-weight: 700; }
.crop__zoom { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
 
.tab-me { position: relative; display: grid; place-items: center; width: 24px; height: 22px; }
.tab-me .avatar { --sz: 24px; }
.tabbar a[aria-current="page"] .tab-me .avatar { box-shadow: 0 0 0 2px var(--c-accent); }
.tab-dot { position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-win); box-shadow: 0 0 0 2px var(--c-paper-2); }
.topnav a.is-in::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--c-win); vertical-align: 2px; }
 
body[data-route="/saya"] .admin-fab,
body[data-route="/masuk"] .admin-fab, body[data-route="/daftar"] .admin-fab, body[data-route="/lupa"] .admin-fab,
body[data-route="/reset"] .admin-fab, body[data-route="/klaim/:token"] .admin-fab,
body[data-route="/saya/:sec"] .admin-fab { display: none; }




.set-view, .set-modal, .adm-menu {
  --set-primary: #0879E8; --set-primary-2: #0666C7; --set-soft: #EAF5FF; --set-bg: #F5FAFF; --set-surface: #FFFFFF;
  --set-navy: #101C35; --set-muted: #5A697F; --set-border: #E1EBF5;
  --set-ig: linear-gradient(45deg, #F8A73B 0%, #E1306C 55%, #8A3AB9 100%);
  --set-red: var(--c-loss); --set-red-soft: color-mix(in oklch, var(--c-loss) 10%, var(--set-surface));
  --set-shadow: 0 1px 2px rgb(16 28 53 / 0.04), 0 10px 24px -18px rgb(16 28 53 / 0.22);
  --set-off: #C4DDF7; --set-off-ink: #FFFFFF;    
  --set-r: 16px;
  --c-accent: var(--set-primary); --c-accent-2: var(--set-primary-2); --c-accent-ink: #FFFFFF; --c-accent-text: var(--set-primary-2);
  --c-focus: var(--set-primary); --c-accent-dim: rgb(8 121 232 / 0.14); --c-accent-line: rgb(8 121 232 / 0.35);
}
:root[data-theme="dark"] .set-view, :root[data-theme="dark"] .set-modal, :root[data-theme="dark"] .adm-menu {
  --set-soft: rgb(8 121 232 / 0.18); --set-bg: var(--c-paper); --set-surface: var(--c-paper-2);
  --set-navy: var(--c-ink); --set-muted: var(--c-muted); --set-border: var(--c-rule);
  --set-shadow: 0 1px 2px rgb(0 0 0 / 0.25); --c-accent-text: #5AAEFF;
  --set-off: oklch(32% 0.050 250); --set-off-ink: var(--c-muted);
}
.set-view { max-width: 600px; color: var(--set-navy); }
.view.set-view > * + * { margin-top: var(--space-4); }
.view.set-view > .set-group { margin-top: var(--space-6); }
 
.set-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; }
.set-head h1 { margin: 0; padding-inline: 52px; font-size: var(--text-xl); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; text-align: center; text-wrap: balance; color: var(--set-navy); overflow-wrap: anywhere; }
.set-back { position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--set-navy); }
.set-back .ic { width: 24px; height: 24px; stroke-width: 2.2; }
.set-back:hover { background: var(--set-soft); color: var(--set-primary-2); }
.set-back:focus-visible { outline: 2px solid var(--set-primary); outline-offset: 2px; }


.set-me { --me-ink: #FFFFFF; --me-muted: rgb(255 255 255 / 0.78); --me-glass: rgb(255 255 255 / 0.12); --me-glass-bd: rgb(255 255 255 / 0.24);
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3) var(--space-4);
  padding: var(--space-6) var(--space-4) var(--space-4); border-radius: 22px; color: var(--me-ink);
  background: #101C35 url("../assets/foto/card-profil.webp") right -58px top -52px / auto 140% no-repeat;    
  box-shadow: 0 18px 36px -22px rgb(16 28 53 / 0.75); }
.set-me::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(16 28 53 / 0) 0%, rgb(16 28 53 / 0.25) 30%, rgb(16 28 53 / 0.82) 62%, rgb(16 28 53 / 0.94) 100%),
    linear-gradient(90deg, rgb(16 28 53 / 0.55) 0%, rgb(16 28 53 / 0) 60%); }
@media (min-width: 480px) { .set-me { padding-top: var(--space-8); background-size: auto 150%; background-position: right -40px top -70px; } }
.set-me__pic { position: relative; align-self: center; }
.set-me .avatar { --sz: 84px; border: 3px solid #FFFFFF; box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.6), 0 0 0 4px rgb(8 121 232 / 0.35); }
@media (min-width: 400px) { .set-me .avatar { --sz: 96px; } }
.set-cam { position: absolute; right: -4px; bottom: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: #FFFFFF; color: #101C35; border: 0; box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.55); }
.set-cam::before { content: ""; position: absolute; inset: -5px; }    
.set-cam:hover { background: var(--set-soft); color: var(--set-primary-2); }
.set-cam:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.set-me__txt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.set-me__name { font-size: var(--text-2xl); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--me-ink); overflow-wrap: anywhere; text-shadow: 0 2px 12px rgb(0 0 0 / 0.35); }
.set-me__mail { max-width: 100%; font-size: var(--text-sm); color: var(--me-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }    
.set-me__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.set-me__grade { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 8px; background: var(--me-glass); border: 1px solid var(--me-glass-bd); font-size: var(--text-xs); font-weight: 700; color: var(--me-ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.set-me .chip-accent { background: rgb(8 121 232 / 0.32); border-color: rgb(120 190 255 / 0.5); color: #FFFFFF; }
.set-me__edit { grid-column: 1 / -1; align-self: stretch; display: flex; align-items: center; gap: 8px; min-height: 46px; margin-top: var(--space-1); padding: 0 12px 0 14px; border-radius: 14px;
  background: var(--me-glass); border: 1px solid var(--me-glass-bd); color: var(--me-ink); font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.set-me__edit span { flex: 1; }
.set-me__edit:hover { background: rgb(255 255 255 / 0.2); border-color: rgb(255 255 255 / 0.4); }
.set-me__edit:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
 
.set-label { margin: 0 0 var(--space-2) 4px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--set-muted); }
.set-list { display: flex; flex-direction: column; gap: var(--space-2); }
.set-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 68px; padding: var(--space-3); border-radius: var(--set-r);
  background: var(--set-surface); border: 1px solid var(--set-border); box-shadow: var(--set-shadow); color: var(--set-navy);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.set-row:hover { border-color: rgb(8 121 232 / 0.4); }
.set-row:active { transform: scale(0.99); }
.set-row:focus-visible { outline: 2px solid var(--set-primary); outline-offset: 2px; }
.set-row__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-row__txt b { font-size: var(--text-md); font-weight: 700; line-height: 1.3; color: var(--set-navy); }
.set-row__txt small { font-size: var(--text-sm); line-height: 1.35; color: var(--set-muted); overflow-wrap: anywhere; }
.set-row__go { flex: none; color: var(--set-muted); }
.set-row.is-danger b { color: var(--set-red); }
.set-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--set-soft); color: var(--set-primary); }
.set-ic .ic { width: 22px; height: 22px; stroke-width: 2; }
.set-ic[data-tone="ig"] { background: var(--set-ig); color: #FFFFFF; }
.set-ic[data-tone="wa"] { background: var(--c-wa); color: #FFFFFF; }
.set-ic[data-tone="red"] { background: var(--set-red-soft); color: var(--set-red); }
 
.set-row--thm { --thm-day-a: #3D9BEA; --thm-day-b: #8ED0F9; --thm-night-a: #0A1433; --thm-night-b: #26346A; --thm-sun: #FFC93C; --thm-sun-ink: #B7791F; --thm-sun-glow: rgb(255 255 255 / 0.34);
  --thm-moon: #E9ECF5; --thm-crater: #C3C9DA; --thm-cloud: #FFFFFF; --thm-star: #FFFFFF; --thm-spring: cubic-bezier(0.34, 1.45, 0.64, 1); }
.set-ic[data-tone="thm"] { background: color-mix(in oklab, var(--thm-sun) 22%, var(--set-surface)); color: var(--thm-sun-ink); }
.set-row--thm[aria-checked="true"] .set-ic[data-tone="thm"] { background: color-mix(in oklab, var(--thm-night-b) 45%, var(--set-surface)); color: var(--thm-moon); }
.thm-sw { position: relative; flex: none; width: 68px; height: 36px; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--thm-day-a), var(--thm-day-b)); box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(0 0 0 / 0.06); }
.thm-sw__night { position: absolute; inset: 0; background: linear-gradient(180deg, var(--thm-night-a), var(--thm-night-b)); opacity: 0; transition: opacity 420ms var(--ease-out); }
.thm-cl { position: absolute; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--thm-cloud);
  box-shadow: 8px -4px 0 2px var(--thm-cloud), 16px 0 0 0 var(--thm-cloud), 7px 3px 0 1px var(--thm-cloud); transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out); }
.thm-cl--a { left: 36px; top: 21px; }
.thm-cl--b { left: 47px; top: 7px; transform: scale(0.62); opacity: 0.85; }
.thm-st { position: absolute; z-index: 1; width: 3px; height: 3px; border-radius: 50%; background: var(--thm-star); opacity: 0; transform: translateY(-6px) scale(0.4);
  transition: opacity 300ms var(--ease-out), transform 420ms var(--ease-out); }
.thm-st--a { left: 9px; top: 9px; }
.thm-st--b { left: 17px; top: 22px; width: 2px; height: 2px; }
.thm-st--c { left: 25px; top: 12px; width: 2px; height: 2px; }
.thm-st--d { left: 12px; top: 27px; width: 2px; height: 2px; }
.thm-sw__knob { position: absolute; z-index: 2; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--thm-sun);
  box-shadow: 0 0 0 4px var(--thm-sun-glow), 0 2px 4px rgb(0 0 0 / 0.25); transition: transform 460ms var(--thm-spring), background-color 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
.thm-cr { position: absolute; border-radius: 50%; background: var(--thm-crater); opacity: 0; transition: opacity 300ms var(--ease-out); }
.thm-cr--a { left: 7px; top: 6px; width: 8px; height: 8px; }
.thm-cr--b { left: 16px; top: 15px; width: 6px; height: 6px; }
.thm-cr--c { left: 8px; top: 18px; width: 4px; height: 4px; }
.set-row--thm[aria-checked="true"] .thm-sw__night { opacity: 1; }
.set-row--thm[aria-checked="true"] .thm-sw__knob { transform: translateX(32px) rotate(-20deg); background: var(--thm-moon); box-shadow: 0 0 0 4px rgb(233 236 245 / 0.14), 0 2px 4px rgb(0 0 0 / 0.4); }
.set-row--thm[aria-checked="true"] .thm-cr { opacity: 1; }
.set-row--thm[aria-checked="true"] .thm-cl { transform: translateY(22px); opacity: 0; }
.set-row--thm[aria-checked="true"] .thm-cl--b { transform: translateY(26px) scale(0.62); }
.set-row--thm[aria-checked="true"] .thm-st { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .thm-sw *, .thm-sw__knob { transition: none; } }
 
.set-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border-radius: 20px; background: var(--set-surface); border: 1px solid var(--set-border); box-shadow: var(--set-shadow); }
.set-intro { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--set-border); }
.set-intro .set-ic { width: 52px; height: 52px; border-radius: 16px; }
.set-intro .set-ic .ic { width: 26px; height: 26px; }
.set-intro h2 { margin: 0; font-size: var(--text-lg); font-weight: 800; line-height: 1.25; text-transform: none; color: var(--set-navy); }
.set-intro p { margin: 2px 0 0; font-size: var(--text-sm); line-height: 1.4; color: var(--set-muted); }
.set-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.set-view .field > label, .set-fields .label { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--set-navy); }
.set-view .input, .set-view .select { min-height: 48px; border-radius: 14px; background: var(--set-surface); border-color: var(--set-border); color: var(--set-navy); }
.set-view .input:hover, .set-view .select:hover { border-color: rgb(8 121 232 / 0.4); }
.set-view .hint { color: var(--set-muted); line-height: 1.45; }
.set-view .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: 14px; background: var(--set-bg); border-color: var(--set-border); }
.set-view .seg label { display: grid; place-items: center; min-height: 44px; border-radius: 11px; font-size: var(--text-sm); }
.set-view .seg input:focus-visible + label { outline: 2px solid var(--set-primary); outline-offset: 2px; }
.set-facts { padding: var(--space-2) var(--space-4); border-radius: 14px; background: var(--set-bg); border-color: var(--set-border); }
.set-facts div { min-height: 36px; }
.set-facts dt { color: var(--set-muted); }
 
.set-in { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--set-border); border-radius: 14px; background: var(--set-surface); overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.set-in:hover { border-color: rgb(8 121 232 / 0.4); }
.set-in:focus-within { border-color: var(--set-primary); box-shadow: 0 0 0 3px var(--c-accent-dim); }
.set-in:has(.input[aria-invalid="true"]) { border-color: var(--c-loss); }
.set-view .set-in .input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding-left: 6px; }
.set-in__pre { flex: none; display: grid; place-items: center; width: 52px; border-right: 1px solid var(--set-border); color: var(--set-navy); }
.set-in__pre .ic { width: 22px; height: 22px; }
.set-in__pre[data-brand="instagram"] .ic { color: #E1306C; }
.set-in__pre[data-brand="facebook"] .ic { color: #1877F2; }
.set-in__at { display: grid; place-items: center; padding-left: 12px; font-weight: 600; color: var(--set-muted); }
.set-in__cc { width: auto; padding-inline: 14px; font-weight: 700; font-size: 16px; }
.set-switch { align-items: flex-start; min-height: 44px; font-size: var(--text-md); line-height: 1.35; color: var(--set-navy); }
.set-switch .switch__track { margin-top: 1px; }
.set-more { border-radius: 14px; background: var(--set-soft); }
.set-more summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; list-style: none; cursor: pointer; border-radius: 14px; font-size: var(--text-sm); font-weight: 700; color: var(--c-accent-text); }
.set-more summary::-webkit-details-marker { display: none; }
.set-more summary:focus-visible { outline: 2px solid var(--set-primary); outline-offset: 2px; }
.set-more__go { margin-left: auto; transition: transform var(--dur-short) var(--ease-out); }
.set-more[open] .set-more__go { transform: rotate(90deg); }
.set-more p { margin: 0; padding: 0 14px 14px; }
 
.view.set-view.has-save { display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-bottom)); }
.set-view.has-save > .set-form { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.set-save { position: sticky; z-index: 5; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); margin-top: auto; padding-block: var(--space-3);
  background: linear-gradient(0deg, var(--c-paper) 60%, transparent); }
@media (min-width: 768px) { .set-save { bottom: 0; } }
.set-save .btn { min-height: 52px; border-radius: var(--r-pill); font-size: var(--text-md); box-shadow: 0 12px 24px -14px rgb(8 121 232 / 0.7); }
.set-save .btn:disabled { opacity: 1; box-shadow: none; --btn-bg: var(--set-off); --btn-bd: var(--set-off); --btn-fg: var(--set-off-ink); }    
:root:has(.set-view.has-save) { scroll-padding-bottom: calc(var(--tabbar-h) + 100px); }    
.set-form > .field-error { margin: 0; }
 
.set-lines { display: flex; flex-direction: column; border: 1px solid var(--set-border); border-radius: var(--set-r); overflow: hidden; }
.set-lines > * + * { border-top: 1px solid var(--set-border); }
.set-lines .set-row { border: 0; border-radius: 0; box-shadow: none; }
.set-lines .set-row + .set-row, .set-lines .set-line + .set-row { border-top: 1px solid var(--set-border); }
.set-lines .set-row:active { transform: none; background: var(--set-soft); }
.set-lines .set-row:focus-visible { outline-offset: -2px; }
.set-line { display: flex; align-items: center; gap: var(--space-3); min-height: 68px; padding: var(--space-3); background: var(--set-surface); }
.set-line .set-row__txt small { order: 0; }
.set-line .acct-mail { font-size: var(--text-md); }
.set-line--sw { cursor: pointer; }
.set-line--sw .switch { margin-left: auto; }
.set-line--sw:has(input:focus-visible) { outline: 2px solid var(--set-primary); outline-offset: -2px; }
.set-out { min-height: 52px; border-radius: 16px; background: var(--set-surface); }
 
.set-comms { display: flex; flex-direction: column; gap: var(--space-3); }
.set-view .my-comm { background: var(--set-bg); border-color: var(--set-border); border-radius: 14px; }
.set-view .my-comm__act .btn { min-height: 44px; padding-inline: 16px; }
.set-loc { display: flex; flex-direction: column; gap: var(--space-4); }
.set-kvs { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--set-border); border-radius: 14px; background: var(--set-bg); }
.set-kv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); min-height: 52px; padding: 10px 14px; font-size: var(--text-sm); }
.set-kv + .set-kv { border-top: 1px solid var(--set-border); }
.set-kv > .ic { color: var(--set-primary); }
.set-kv dt { color: var(--set-muted); }
.set-kv dd { margin: 0 0 0 auto; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.set-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; font-size: var(--text-sm); color: var(--set-muted); }
.set-state > .ic { width: 28px; height: 28px; color: var(--set-primary); }
.set-state p { margin: 0; }
.set-spin { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--set-soft); border-top-color: var(--set-primary); animation: spin 800ms linear infinite; }
 
.set-photo__frame { width: min(100%, 210px); aspect-ratio: 3 / 4; margin-inline: auto; overflow: hidden; border-radius: 18px; border: 1px solid var(--set-border);
  background: radial-gradient(circle at 50% 75%, rgb(8 121 232 / 0.22), var(--set-soft) 70%); }
.set-photo__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.set-modal .photo-tools { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 400px) { .set-modal .photo-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .set-row, .set-me__edit, .set-more__go { transition: none; } .set-row:active { transform: none; } .set-spin { animation-duration: 2s; } }

@media (prefers-reduced-motion: reduce) {
  .view.is-enter > * { animation-name: fadeOnly !important; }
  .vs__pts.bump { animation: none; }
  .mvp:hover, .ses-card:hover, .podium__slot:hover, .dues-teaser:hover, :is(.hud-stats, .tiles) > [data-tip]:is(:hover, :active) { transform: none; }
}

 
.comm-logo {
  --sz: 36px; width: var(--sz); height: var(--sz); flex: none; border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--c-accent-dim), var(--c-paper-4)); border: 1px solid var(--c-rule-2);
  font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: calc(var(--sz) * 0.36); color: var(--c-accent-text); letter-spacing: 0.02em;
}
.comm-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comm-logo--sm { --sz: 26px; border-radius: 7px; }
.comm-logo--lg { --sz: 52px; }
.comm-logo--xl { --sz: 84px; border-radius: var(--r-md); }
.comm-ver { display: inline-block; width: 18px; height: 18px; margin-left: 5px; vertical-align: -3px; flex: none; }
.ver-badge { display: block; width: 100%; height: 100%; overflow: visible; }
.ver-badge__rim { fill: var(--ver-rim); }
.ver-badge__isi { fill: var(--ver-isi); }
.ver-badge__cek { fill: none; stroke: var(--ver-cek); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.chip-ver { display: inline-flex; align-items: center; gap: 5px; background: var(--c-gold-bg); color: var(--c-gold-ink); }
.chip-ver .ver-badge { width: 16px; height: 16px; }
 
.comm-line {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-width: 0; padding: 4px 10px 4px 4px;
  border: 1px solid var(--c-rule-2); border-radius: var(--r-pill); background: var(--c-paper-2); color: var(--c-ink); cursor: pointer; font: inherit; text-align: left;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.comm-line:hover { background: var(--c-paper-3); border-color: var(--c-accent-line); }
.comm-line:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.comm-line__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-line__city { font-size: var(--text-xs); white-space: nowrap; }
@media (max-width: 359px) { .comm-line__city { display: none; } }
 
.comm-picks { display: flex; flex-direction: column; gap: var(--space-2); }
.comm-pick {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-width: 0; padding: var(--space-3); text-align: left; cursor: pointer; font: inherit; color: var(--c-ink);
  border: 1px solid var(--c-rule); border-radius: var(--r-md); background: var(--c-paper-2);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.comm-pick:hover { background: var(--c-paper-3); }
.comm-pick:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.comm-pick.is-cur { border-color: var(--c-accent-line); background: var(--c-accent-dim); }
.comm-pick.is-cur > .ic { color: var(--c-accent-text); }
.comm-pick__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.comm-pick__txt b { font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-pick__name { display: flex; align-items: center; min-width: 0; }
.comm-pick__name b { min-width: 0; }
.comm-pick__txt small { font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
.kom-lead { max-width: 60ch; }
.kom-grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .kom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kom-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.kom-card.is-cur { border-color: var(--c-accent-line); }
.kom-card__head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.kom-card__id { min-width: 0; }
.kom-card__id .h-sm { text-transform: none; overflow-wrap: anywhere; }
.kom-card__meta { font-size: var(--text-sm); }
.kom-card__desc { color: var(--c-muted); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.kom-card__tags, .kom-card__act { gap: var(--space-2); }
.kom-card__act { margin-top: auto; }
 
.my-comms { display: flex; flex-direction: column; gap: var(--space-2); }
.my-comm { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3); row-gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--c-rule); border-radius: var(--r-md); background: var(--c-paper); min-width: 0; }
.my-comm__txt { display: flex; align-items: center; gap: var(--space-1) var(--space-2); flex-wrap: wrap; min-width: 0; }
.my-comm__txt b { font-family: var(--font-display); overflow-wrap: anywhere; }
.my-comm__act { grid-column: 1 / -1; justify-content: flex-end; gap: var(--space-2); }
@media (min-width: 520px) { .my-comm { grid-template-columns: auto minmax(0, 1fr) auto; } .my-comm__act { grid-column: auto; } }

 
 
.sg { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); border-radius: var(--r-md); border: 1px solid var(--c-rule); background: color-mix(in oklch, var(--c-paper) 60%, transparent); }
.sg.is-in { border-color: color-mix(in oklch, var(--c-win) 45%, transparent); }
.sg__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; min-width: 0; }
.sg__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg__count { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.sg__count > b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); font-variant-numeric: tabular-nums; color: var(--c-ink); }
.sg__empty { font-size: var(--text-sm); }
.sg__info { gap: var(--space-2); }
.sg__info .hint { margin: 0; }
.sg__act { gap: var(--space-2); }
.sg__act > .btn { flex: 1 1 auto; }
.sg__act > .chip { flex: 1 1 100%; justify-content: center; background: none; padding: 4px 0; font-size: var(--text-sm); white-space: normal; text-align: center; }    
.mb-more { display: flex; justify-content: flex-end; }
.sg .btn-sm, .sg-pay .btn-sm, .kom-tools .btn-sm, .kom-card__act .btn-sm { min-height: 40px; }
.sg-pay { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed var(--c-rule-2); min-width: 0; }
.sg-pay__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sg-pay__head .kicker { display: inline-flex; align-items: center; gap: 6px; }
.sg-pay__txt { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.5; color: var(--c-ink); }
.sg-form__when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-form__when b { font-family: var(--font-display); overflow-wrap: anywhere; }
.sg-form__when .muted { font-size: var(--text-sm); overflow-wrap: anywhere; }
@media (max-width: 400px) { .sg { padding: var(--space-3); } }
 
.find-mabar {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: 56px; padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--c-ink);
  border: 1px solid var(--c-rule); border-radius: var(--r-lg); background: var(--c-paper-2); box-shadow: var(--c-shadow-card);
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.find-mabar:hover { border-color: var(--c-accent-line); transform: translateY(-1px); }
button.find-mabar { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; margin-top: var(--space-3); }    
.find-mabar + a.find-mabar { margin-top: var(--space-3); }    
.find-mabar:active { transform: translateY(0) scale(0.99); }
.find-mabar:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.find-mabar > .ic:first-child { color: var(--c-accent-text); }
.find-mabar > .ic:last-child { color: var(--c-faint); }
.find-mabar__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.find-mabar__txt b { font-family: var(--font-display); font-weight: 800; }
.find-mabar__txt small { font-size: var(--text-sm); }
 
.mabar-card .ses-card__main { gap: 4px; }
.mabar-card__comm { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mabar-card__comm b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mabar-card__when { font-weight: 700; color: var(--c-ink); overflow-wrap: anywhere; }
.mabar-card__venue { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mabar-card__venue span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mabar-card .ses-meta { gap: 4px 6px; }
.mabar-card .ses-meta .chip { padding: 2px 8px; gap: 4px; font-size: 11px; }
@media (max-width: 400px) { .mabar-card { gap: var(--space-3); padding: var(--space-3); } .mabar-card .ses-card__date { width: 48px; height: 54px; } }
 
a.comm-line { text-decoration: none; }
.mabar-ppl { list-style: none; margin: 0; padding: 0; }
.mabar-ppl .list-item__title { white-space: normal; overflow-wrap: anywhere; }
 
.kom-tools { gap: var(--space-2); }
.kom-card__link { color: inherit; text-decoration: none; }
.kom-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.kom-card__link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
.kp-name { text-transform: none; overflow-wrap: anywhere; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
@media (max-width: 420px) { .kp-name { font-size: clamp(1.05rem, 4.2vw + 0.2rem, 1.375rem); line-height: 1.15; } }    
.kom-prof .btn-sm { min-height: 40px; }
.empty__act { justify-content: center; }
.sg-pay__warn { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.sg-pay__warn .ic { flex: none; margin-top: 2px; color: var(--c-loss); }
.kp-act { gap: var(--space-2); }
.kp-act > :is(.btn, .chip) { flex: 0 1 auto; }
@media (max-width: 420px) { .kp-act > .btn { flex: 1 1 auto; } .kp-hero .comm-logo--xl { --sz: 64px; } }
.kn-note { margin: 0; }

 
.kom-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.kom-head h1 { text-transform: none; font-size: clamp(1.75rem, 7vw, var(--text-3xl)); }
.kom-new { flex: none; border-radius: var(--r-pill); padding-inline: 14px 18px; min-height: 40px; }
.view > .kom-head + .pseg { margin-top: var(--space-4); }
.kom-page .pseg { max-width: none; }
.view > .kom-find { margin-top: var(--space-4); }
.kom-find { display: flex; align-items: center; gap: var(--space-2); }
.kom-find .kom-search { flex: 1 1 auto; }
.kom-search .input { min-height: 46px; border-radius: var(--r-pill); }
.kom-sort { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 14px; background: var(--c-paper-3); color: var(--c-ink); cursor: pointer; }
.kom-sort:hover { background: var(--c-paper-4); }
.kom-sort:focus-visible, .kom-chip:focus-visible, .kp2-cbtn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.kom-sort.is-on::after { content: ""; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.view > .kom-chips { margin-top: var(--space-3); }
.kom-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding: 2px var(--space-4); }
.kom-chips::-webkit-scrollbar { display: none; }
.kom-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--c-paper-3); color: var(--c-ink); font: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; }
.kom-chip .ic { color: var(--c-muted); }
.kom-chip[aria-pressed="true"] { background: var(--c-accent); color: var(--c-accent-ink); }
.kom-chip[aria-pressed="true"] .ic { color: currentColor; }
.kom-sec__h { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.kom-sec__h h2 { font-size: var(--text-lg); text-transform: none; color: var(--c-ink); }
.kom-sec__h > .btn { margin-left: auto; flex: none; }
.kom-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); background: var(--c-paper-3); color: var(--c-muted); font-size: var(--text-xs); font-weight: 700; }
.kom-none { text-align: center; }
 
.kc { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--c-rule); box-shadow: var(--c-shadow-card); overflow: hidden; }
.kc__cover { position: relative; display: block; height: 108px; overflow: hidden; background: var(--c-stage); }
.kc--mine .kc__cover { height: 124px; }
.kc__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kc__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(14% 0.03 255 / 0.78), oklch(14% 0.03 255 / 0.2) 70%, transparent); }
.kc__brand { position: absolute; z-index: 1; left: 14px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 110px); min-width: 0; }
.kc__brand .comm-logo { border: 2px solid oklch(100% 0 0 / 0.92); background-color: var(--c-card); box-shadow: 0 8px 18px -8px oklch(0% 0 0 / 0.7); }
:is(.kc__brand, .kp2-logo) .comm-logo:not(:has(img)) { background: var(--c-accent); color: var(--c-accent-ink); }    
.kc__brand > b { color: oklch(100% 0 0); font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.01em; text-shadow: 0 2px 10px oklch(0% 0 0 / 0.5); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kc__role { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 700; line-height: 1.3; white-space: nowrap; background: var(--c-paper-3); color: var(--c-muted); }
.kc__cover .kc__role { position: absolute; z-index: 1; top: 10px; right: 10px; box-shadow: 0 4px 12px -6px oklch(0% 0 0 / 0.6); }
.kc__role.is-owner { background: var(--c-gold-bg); color: var(--c-gold-ink); }
.kc__role.is-admin { background: var(--c-card); color: var(--c-accent-text); }
.kc__role.is-member { background: var(--c-card); color: var(--c-win); }
.kc__role.is-wait { background: var(--c-card); color: var(--c-muted); }
.kc__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: 12px 14px; min-width: 0; }
.kc__id { display: grid; gap: 4px; flex: 1 1 130px; min-width: 0; }
.kc__name { display: flex; align-items: center; min-width: 0; font-size: var(--text-lg); text-transform: none; }
.kc__name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.kc__meta { display: flex; align-items: flex-start; gap: 5px; line-height: 1.35; min-width: 0; color: var(--c-muted); font-size: var(--text-sm); }
.kc__meta .ic { flex: none; }
.kc__meta span { min-width: 0; overflow-wrap: anywhere; }
.kc__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.kc__go { flex: none; margin-left: auto; border-radius: var(--r-pill); }
.kc__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 14px 14px; }
.kc__more { display: inline-flex; align-items: center; gap: 2px; color: var(--c-accent-text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.kc__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.kc__foot .btn { min-width: 128px; border-radius: var(--r-pill); }
.kom-sortlist .btn > span:last-child { display: grid; gap: 2px; }
.kom-sortlist small { color: var(--c-muted); font-size: var(--text-xs); font-weight: 500; }
.kom-sortlist__ck { display: inline-grid; place-items: center; width: 20px; flex: none; color: var(--c-accent-text); }

 
.view > .kp2-cover { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-4)) 0; }
.kp2-cover { position: relative; height: clamp(168px, 46vw, 300px); background: var(--c-stage); }
.kp2-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kp2-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, oklch(10% 0.02 255 / 0.45), transparent 42%); }
.kp2-cbtn { position: absolute; z-index: 2; top: 12px; left: 12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid oklch(100% 0 0 / 0.35); background: oklch(14% 0.03 255 / 0.5); color: oklch(100% 0 0); text-decoration: none; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kp2-more { position: absolute; z-index: 3; top: 12px; right: 12px; }
.kp2-more > .kp2-cbtn { position: static; }
.view > .kp2-cover + .kp2-head { margin-top: -20px; }
.kp2-head { position: relative; z-index: 1; display: grid; gap: 8px; margin-inline: calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-4); border-radius: 22px 22px 0 0; background: var(--c-paper); }
.kp2-logo { margin-top: -46px; }
.kp2-logo .comm-logo { --sz: 92px; border: 3px solid var(--c-paper); border-radius: 22px; background-color: var(--c-card); box-shadow: 0 10px 24px -12px oklch(0% 0 0 / 0.55); }
.kp2-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.kp2-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; text-transform: none; font-size: clamp(1.45rem, 6.4vw, 2rem); line-height: 1.15; }
.kp2-title .kc__role { margin-top: 4px; }
.kp2-city, .kp2-wait { display: flex; align-items: center; gap: 6px; color: var(--c-muted); }
.kp2-city .ic, .kp2-wait .ic { flex: none; }
.kp2-wait { font-size: var(--text-sm); }
.kp2-desc { line-height: 1.5; overflow-wrap: anywhere; }
.kp2-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--c-muted); font-size: var(--text-sm); }
.kp2-stats > span { display: inline-flex; align-items: center; gap: 6px; }
.kp2-stats > span + span { padding-left: 14px; border-left: 1px solid var(--c-rule-2); }
.kp2-stats b { color: var(--c-ink); }
.kp2-act { display: grid; gap: 10px; margin-top: 6px; }
.kp2-act.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kp2-act .btn { min-height: 48px; border-radius: 14px; }
 
.kp2-minta { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 10px; padding: 8px 14px; border: 0; background: color-mix(in oklab, var(--c-loss) 12%, var(--c-card)); color: var(--c-ink); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
  box-shadow: inset 3px 0 0 var(--c-loss); }
.kp2-minta > .ic { flex: none; color: var(--c-loss); }
.kp2-minta > span:first-of-type { flex: 1; min-width: 0; }
.kp2-minta b { font-weight: 800; }
.kp2-minta__go { flex: none; display: inline-flex; align-items: center; gap: 2px; color: var(--c-accent-text); font-weight: 700; white-space: nowrap; }
.kp2-minta:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.page-tabs [data-tab-btn] .tk-n { margin-left: 5px; vertical-align: 1px; }
.kp2-pend__row { flex-wrap: wrap; row-gap: 8px; }
.kp2-pend__act { flex: none; gap: 6px; margin-left: auto; }
.kp2-pend__act .btn { min-height: 44px; }
.kp2-tabs .page-tabs.seg.has-n { grid-auto-columns: auto; }    
.kc__minta { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; padding: 0 4px 0 10px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--c-loss) 12%, transparent); color: var(--c-ink); font-size: var(--text-xs); font-weight: 700; text-decoration: none; }
.kc__minta .ic { color: var(--c-loss); }
.view > .kp2-head + .kp2-tabs { margin-top: 0; }
.kp2-tabs { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-2); border-bottom: 1px solid var(--c-rule); background: var(--c-paper); }
.kp2-tabs .page-tabs.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 0; border-radius: 0; background: none; }
.kp2-tabs .page-tabs.seg button[role="tab"] { position: relative; min-height: 46px; padding-inline: 2px; border-radius: 0; background: none; box-shadow: none; font-size: var(--text-sm); white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 359px) { .kp2-tabs .page-tabs.seg button[role="tab"] { font-size: 13px; } }
.kp2-tabs .page-tabs.seg button[role="tab"][aria-pressed="true"] { background: none; box-shadow: none; color: var(--c-ink); font-weight: 800; }
.kp2-tabs .page-tabs.seg button[role="tab"][aria-pressed="true"]::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 3px; border-radius: 3px; background: var(--c-accent); }
.view > .kp2-tabs + .kp2-pane, .view > .kp2-pane + .kp2-pane { margin-top: var(--space-4); }
 
.kp-next { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--c-rule); box-shadow: var(--c-shadow-card); overflow: hidden; color: var(--c-ink); text-decoration: none; }
.kp-next__img { position: absolute; z-index: -1; top: 0; right: 0; width: 42%; height: calc(100% - 56px); object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
.kp-next__k { display: inline-flex; align-items: center; gap: 6px; color: var(--c-accent-text); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.kp-next__t { max-width: 64%; font-size: var(--text-lg); font-weight: 800; line-height: 1.2; }
.kp-next__l { display: flex; align-items: flex-start; gap: 6px; max-width: 66%; min-width: 0; color: var(--c-muted); font-size: var(--text-sm); line-height: 1.35; }
.kp-next__l .ic { flex: none; margin-top: 1px; }
.kp-next__l span { min-width: 0; overflow-wrap: anywhere; }
.kp-next__foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--c-rule); }
.kp-next__ppl .avatar { border: 2px solid var(--c-card); }
.kp-next__ppl i { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--c-card); background: var(--c-paper-3); color: var(--c-muted); font-size: 11px; font-style: normal; font-weight: 700; }
.kp-next__n { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.kp-next__go { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding: 8px 12px; border-radius: var(--r-pill); background: var(--c-accent-dim); color: var(--c-accent-text); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.kp-next:hover .kp-next__go { background: color-mix(in oklch, var(--c-accent) 24%, transparent); }
.kp-next:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
 
.kp2-mem { margin: 0; padding: 0; list-style: none; border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--c-rule); overflow: hidden; }
.kp2-mem li + li .list-item { border-top: 1px solid var(--c-rule); }
.kp2-mem .list-item { color: inherit; }
.kp-info { border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--c-rule); overflow: hidden; }
.kp-info__row { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 13px 16px; font-size: var(--text-sm); }
.kp-info__row + .kp-info__row { border-top: 1px solid var(--c-rule); }
.kp-info__row .ic { color: var(--c-accent-text); }
.kp-info__row > span { color: var(--c-muted); }
.kp-info__row b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .view > .kp2-cover { margin-inline: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .kp2-cover > img { border-radius: inherit; }
  .kp2-head { margin-inline: var(--space-4); padding-inline: var(--space-5); }
  .kp2-tabs { margin-inline: 0; }
}

 
.lg-scope { display: flex; width: 100%; max-width: 420px; flex-wrap: nowrap; }
.lg-scope button { flex: 1 1 0; min-width: 0; min-height: 40px; padding-inline: var(--space-2); overflow: hidden; text-overflow: ellipsis; }
.lg-scope button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.lg-note { margin: 0; }
.lg-note a { color: var(--c-accent-text); font-weight: 700; white-space: nowrap; }
.comm-logo--xs { --sz: 16px; border-radius: 4px; font-size: 7px; }
.lb-comms { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 6.5rem; font-size: var(--text-xs); font-weight: 700; color: var(--c-muted); }
.lb-comms__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-comms__more { flex: none; color: var(--c-faint); }
@media (max-width: 359px) { .lb-comms { max-width: 3rem; } .lb-comms__n { display: none; } }
@media (min-width: 560px) { .lb-comms { max-width: 11rem; } }
.podium--bsl .podium__slot { --t: var(--c-accent); --tf: var(--c-accent-dim); }
.lb-row.is-me { background: var(--c-accent-dim); }
.lb-row.is-me .lb-name b { color: var(--c-accent-text); }
.lb-gap { padding: var(--space-1) var(--space-4); text-align: center; color: var(--c-faint); letter-spacing: 0.3em; border-top: 1px solid var(--c-rule); }
.bsl-load__row { height: 52px; }
.bsl-load__card { height: 320px; border-radius: var(--r-lg); }
.grade-ok .ic { stroke-width: 3; }
@media (max-width: 420px) { .lb-comms ~ .lb-sub .lb-sub-n { display: none; } }    

 
.comm-logo--bsl { background: var(--c-paper-2); padding: 3px; }
.comm-logo--bsl img { object-fit: contain; }
.comm-logo--sm.comm-logo--bsl { padding: 2px; }
.comm-picks__lbl { margin: var(--space-2) 0 0; }
.comm-picks__none { margin: var(--space-1) 0 0; }
.comm-pick { min-height: 48px; }
.gen-hero { display: flex; flex-direction: column; gap: var(--space-2); }
.gen-hero h1 { margin: 0; }
.gen-hero p { margin: 0; max-width: 60ch; }
.gen-cta { gap: var(--space-2); margin-top: var(--space-2); }
.gen-cta .btn { min-height: 44px; }
.gen-note a { color: var(--c-accent-text); font-weight: 700; }
.gen-search { display: block; flex: none; max-width: 520px; }
.gen-search .input { min-height: 44px; }
.gen-res-box { min-height: 48px; }
.gen-hint { margin: 0; }
.gen-res { list-style: none; margin: 0; padding: 0; }
.gen-res + [data-gmore] { margin-top: var(--space-5); margin-bottom: var(--space-4); }    
.gen-res .list-item, .gen-top .list-item { min-height: 56px; }
.gen-res .list-item__sub, .gen-top .list-item__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-skel { height: 56px; border-radius: var(--r-md); }
.gen-due { gap: var(--space-3); }
.gen-due__head { gap: var(--space-2); flex-wrap: nowrap; }
.gen-due__comm { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.gen-due__comm b { font-family: var(--font-display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-due__head .chip { flex: none; }
.gen-due__row { grid-template-columns: 40px minmax(0, 1fr) auto 16px; color: inherit; text-decoration: none; min-height: 56px; transition: background-color var(--dur-micro) var(--ease-out); }
.gen-due__row:hover { background: var(--c-paper-3); }
.gen-due__row:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.gen-due__row > .ic { color: var(--c-faint); }
.gen-due__date { width: 40px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--c-paper); border: 1px solid var(--c-rule-2); }
.gen-due__date b { font-weight: 900; font-size: var(--text-lg); line-height: 1; color: var(--c-accent-text); }
.gen-due__date small { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.gen-due__pay { align-self: flex-start; min-height: 40px; }
.gen-payinfo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--text-sm); line-height: 1.55; padding: var(--space-3); border-radius: var(--r-md); background: var(--c-paper-3); border: 1px solid var(--c-rule); }
.gen-pick__lead { max-width: 60ch; margin: var(--space-3) 0 0; }
.gen-picks { max-width: 560px; }
@media (max-width: 420px) {
  .gen-due__row { grid-template-columns: 36px minmax(0, 1fr) auto 14px; gap: var(--space-2); padding-inline: var(--space-3); }
  .gen-due__date { width: 36px; }
}
 
.gen-due__row .due-row__main .chip { max-width: 100%; min-width: 0; overflow: hidden; }
@media (max-width: 360px) { .gen-due__row .due-row__main .chip .ic { display: none; } }
 
 
.gen-phist { position: relative; isolation: isolate; overflow: hidden; }
.gen-phist::after { content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 44%; pointer-events: none;
  background: url('../assets/foto/profil-kok.webp') 30% 50% / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
:root[data-theme="dark"] .gen-phist::after { opacity: 0.35; }
.gen-phist p { margin: 0; max-width: 68%; }
.gen-phist .stack-sm { max-width: 72%; }
.gen-phist__btn { width: 100%; min-height: 48px; font-weight: 600; justify-content: flex-start; text-align: left; white-space: normal; gap: var(--space-3); padding-inline: 18px 14px; border-radius: 14px;
  background: linear-gradient(90deg, var(--c-accent), color-mix(in oklab, var(--c-accent) 72%, var(--hero-c))); box-shadow: 0 10px 22px -12px var(--c-accent); }
.gen-phist__btn:hover { filter: brightness(1.06); }
.gen-phist__btn > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }

 
.mhero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-5) var(--space-5); border-radius: var(--r-lg); color: var(--hero-ink);
  background: radial-gradient(110% 80% at 100% 0%, var(--hero-glow), transparent 62%), linear-gradient(150deg, var(--hero-a) 0%, var(--hero-b) 58%, var(--hero-c) 100%); box-shadow: var(--shadow-lift); }
.mhero__art { position: absolute; z-index: -1; top: -6px; right: -18px; width: min(58%, 260px); height: auto; color: var(--hero-ink); }
.mhero__arc { stroke: var(--hero-line); }
.mhero__shuttle { fill: color-mix(in oklab, var(--hero-ink) 16%, transparent); stroke: var(--hero-ink); stroke-width: 2; stroke-linejoin: round; opacity: 0.9; }
.mhero__title { max-width: 11ch; font-size: clamp(1.75rem, 7.4vw, 2.5rem); line-height: 1.04; letter-spacing: -0.02em; text-transform: none; color: var(--hero-ink); }
.mhero__sub { max-width: 30ch; font-size: var(--text-sm); color: var(--hero-muted); }
.mhero__search { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: 0 var(--space-3); border-radius: var(--r-md); background: var(--c-card); color: var(--c-faint); box-shadow: 0 10px 24px -14px var(--hero-a); }
.mhero__search .input { min-height: 48px; padding: 10px 0; border: 0; background: transparent; box-shadow: none; }
.mhero__search .input:focus { background: transparent; box-shadow: none; }
.mhero__search:focus-within { outline: 2px solid var(--hero-c); outline-offset: 2px; }
.mhero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.mhero__cta .btn-ghost { --btn-fg: var(--hero-ink); --btn-bd: var(--hero-line); --btn-bg: color-mix(in oklab, var(--hero-ink) 8%, transparent); --btn-sh: none; }
.mhero__cta .btn-ghost:hover { --btn-bg: color-mix(in oklab, var(--hero-ink) 12%, transparent); }
.mfilter { display: flex; gap: var(--space-2); margin: var(--space-4) calc(-1 * var(--space-4)) var(--space-2); padding: 2px var(--space-4) 6px; overflow-x: auto; scrollbar-width: none; }
.mfilter::-webkit-scrollbar { display: none; }
.mfilter button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--c-rule); background: var(--c-card); color: var(--c-muted); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; box-shadow: var(--c-shadow-card); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.mfilter button:hover { color: var(--c-ink); }
.mfilter button { border-color: transparent; background: var(--c-paper-3); box-shadow: none; }    
.mfilter button[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.mfilter button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.mlist { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mcard { border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--c-rule); box-shadow: var(--c-shadow-card); overflow: hidden; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.mcard[hidden] { display: none; }
.mcard > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.mcard > a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; border-radius: inherit; }
.mcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.mcard__banner { position: relative; height: 104px; color: var(--court-line); background: radial-gradient(90% 120% at 85% 0%, var(--hero-glow), transparent 60%), linear-gradient(135deg, var(--court-a), var(--court-b)); }
.mcard__court { position: absolute; inset: 0; width: 100%; height: 100%; }
.mcard__date { position: absolute; left: var(--space-4); bottom: -22px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; padding: 6px 0; border-radius: 14px; background: var(--c-card); color: var(--c-ink); box-shadow: 0 8px 18px -10px var(--hero-a); line-height: 1.05; }
.mcard__date b { font-size: var(--text-2xl); font-weight: 900; color: var(--c-accent-text); }
.mcard__date small { font-size: 10px; font-weight: 700; color: var(--c-muted); }
.mcard__seat { position: absolute; top: var(--space-3); right: var(--space-3); padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-win); color: var(--hero-ink); font-size: var(--text-xs); font-weight: 700; }
.mcard__seat.is-full { background: var(--c-loss); }
.mcard__seat.is-live { background: var(--c-live); }
 
.mcard__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: var(--space-2) var(--space-4) var(--space-4); }
.mcard__body > :first-child { margin-left: calc(56px + var(--space-3)); }
.mcard__body > :nth-child(2) { margin-top: var(--space-2); }
.mcard__comm { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 26px; }
.mcard__comm b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-md); font-weight: 800; }
.mcard__line { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: var(--text-sm); color: var(--c-muted); }
.mcard__line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard__line .ic { color: var(--c-faint); }
.mcard .ses-meta { gap: 4px 6px; margin-top: 2px; }
.mcard .ses-meta .chip { padding: 2px 8px; gap: 4px; font-size: 11px; }
.mcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.mcard__going { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--c-muted); }
.mcard__btn { flex: none; }
.mcard__btn.is-on { --btn-fg: var(--c-win); --btn-bd: color-mix(in oklab, var(--c-win) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .mcard, .mfilter button { transition: none; } .mcard:hover { transform: none; } }



.shero { position: relative; isolation: isolate; overflow: hidden; color: var(--hero-ink); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  background: radial-gradient(110% 80% at 100% 0%, var(--hero-glow), transparent 62%), linear-gradient(150deg, var(--hero-a) 0%, var(--hero-b) 58%, var(--hero-c) 100%); }
.shero h1 { color: var(--hero-ink); text-transform: none; font-size: clamp(1.75rem, 7.4vw, 2.5rem); letter-spacing: -0.02em; }
.shero .kicker { color: var(--hero-muted); font-weight: 700; }
.shero .muted, .shero__sub { color: var(--hero-muted); }
.shero__sub { max-width: 46ch; font-size: var(--text-sm); }
.shero__cta { gap: var(--space-2); }
.shero .ses-time { color: var(--hero-ink); }
.shero .ses-time .ic, .shero .arena-hero__venue .ic { color: var(--hero-muted); }
.shero .chip { background: color-mix(in oklab, var(--hero-ink) 12%, transparent); border-color: var(--hero-line); color: var(--hero-ink); }
.shero .chip .ic, .shero .ses-meta .chip .ic { color: var(--hero-muted); }
.shero .lvl-chip { color: var(--hero-ink); border-color: color-mix(in oklab, var(--lvc) 70%, transparent); background: color-mix(in oklab, var(--lvc) 30%, transparent); }
.shero .seat-chip.is-full { color: var(--hero-ink); background: color-mix(in oklab, var(--c-pal-4) 40%, transparent); }
.shero .chip-live { background: color-mix(in oklab, var(--c-live) 70%, transparent); border-color: transparent; color: var(--hero-ink); }
.shero .chip-live .dot-live { background: var(--hero-ink); }
.shero .btn-ghost { --btn-fg: var(--hero-ink); --btn-bd: var(--hero-line); --btn-bg: color-mix(in oklab, var(--hero-ink) 8%, transparent); --btn-sh: none; }    
:is(.shero, .mhero__cta, .lp-hero__cta) .btn-ghost > .ic:first-child { color: inherit; }
.shero .btn-ghost:hover { --btn-bg: color-mix(in oklab, var(--hero-ink) 12%, transparent); }
.shero .comm-line { background: color-mix(in oklab, var(--hero-ink) 12%, transparent); border-color: var(--hero-line); color: var(--hero-ink); }
.shero .comm-line:hover { background: color-mix(in oklab, var(--hero-ink) 20%, transparent); border-color: var(--hero-line); }
.shero .comm-line .muted { color: var(--hero-muted); }
.shero .hud-stats div:not(.tip-out) { background: color-mix(in oklab, var(--hero-ink) 10%, transparent); border-color: var(--hero-line); border-top: 2px solid var(--pal, var(--hero-line)); }
.shero .hud-stats dt { color: var(--hero-muted); }
.shero .hud-stats dd { color: var(--hero-ink); }
.shero .hud-stats dd small { color: var(--hero-muted); }
.shero :is(.hud-stats) > [data-tip][aria-expanded="true"] { background: color-mix(in oklab, var(--hero-ink) 20%, transparent); }
.shero .hud-stats > .tip-out { color: var(--c-muted); }
.arena-act { gap: var(--space-4); }

 
.page-sub { margin-top: var(--space-1); font-size: var(--text-sm); }
.ptool .toolbar__search { flex: 1 1 100%; }
.ptool .toolbar__sort { margin-left: auto; }
.ptool .toolbar__sort .select { min-width: 0; min-height: 40px; font-size: var(--text-sm); }
.ptiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ptiles { gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }
.ptile { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--c-card); border: 1px solid var(--c-rule); box-shadow: var(--c-shadow-card); color: inherit; text-decoration: none; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.ptile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in oklab, var(--t, var(--c-accent)) 40%, var(--c-rule)); }
.ptile:active { transform: scale(0.99); }
.ptile:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.ptile__photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; color: var(--c-silhouette);
  background: radial-gradient(70% 60% at 50% 100%, color-mix(in oklab, var(--t, var(--c-accent)) 26%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in oklab, var(--c-accent) 6%, var(--c-card)), color-mix(in oklab, var(--c-accent) 20%, var(--c-card))); }
.ptile__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.ptile__photo > svg { position: absolute; left: 50%; bottom: 0; height: 86%; width: auto; transform: translateX(-50%); }
.ptile__ovr { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: baseline; gap: 3px; padding: 4px 8px; border-radius: 10px; background: var(--tf, var(--c-accent-dim)); color: var(--hero-a); box-shadow: 0 6px 14px -8px var(--hero-a); line-height: 1; }
.ptile__ovr b { font-size: var(--text-lg); font-weight: 900; }
.ptile__ovr small { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; }
.ptile__rank { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--c-card) 88%, transparent); color: var(--c-accent-text); font-size: 11px; font-weight: 800; }
.ptile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px 12px; }
.ptile__name { font-size: var(--text-md); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptile__meta { font-size: var(--text-xs); color: var(--c-muted); }
.ptile__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; min-width: 0; }
.ptile__chips .chip { max-width: 100%; padding: 2px 8px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.ptile-rail { grid-auto-columns: min(44%, 180px); }
@media (prefers-reduced-motion: reduce) { .ptile { transition: none; } .ptile:hover, .ptile:active { transform: none; } }

 
.phero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 300px; margin-top: var(--space-2); border-radius: var(--r-lg); color: var(--hero-ink); box-shadow: var(--shadow-lift);
  background: radial-gradient(90% 80% at 85% 25%, var(--hero-glow), transparent 62%), linear-gradient(150deg, var(--hero-a) 0%, var(--hero-b) 60%, var(--hero-c) 100%); }
.phero__photo { position: absolute; z-index: -1; right: 0; bottom: 0; width: 64%; height: 100%; color: color-mix(in oklab, var(--hero-ink) 30%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.phero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.phero__photo > svg { position: absolute; right: 8%; bottom: 0; height: 88%; width: auto; }
.phero__txt { display: flex; flex-direction: column; gap: 4px; max-width: 62%; padding: var(--space-5) var(--space-5) calc(var(--space-8) + 6px); }
.phero__name { display: flex; align-items: center; gap: 8px; font-size: clamp(1.9rem, 9vw, 2.75rem); font-weight: 900; line-height: 1; letter-spacing: -0.01em; color: var(--hero-ink); text-shadow: 0 2px 18px var(--hero-a); }
.phero__ok { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-win); color: var(--hero-ink); }
.phero__ok .ic { width: 13px; height: 13px; stroke-width: 3; }
.phero__full { font-size: var(--text-sm); color: var(--hero-muted); }
.phero__club { font-size: var(--text-lg); font-weight: 700; color: var(--hero-ink); }
.phero__meta { font-size: var(--text-sm); color: var(--hero-muted); }
.phero__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.phero__chips .chip { background: color-mix(in oklab, var(--hero-ink) 14%, transparent); border-color: var(--hero-line); color: var(--hero-ink); }
.phero__chips .chip .ic { color: var(--hero-muted); }
.phero__edit { position: absolute; top: var(--space-3); right: var(--space-3); --btn-bg: var(--c-card); --btn-fg: var(--c-ink); --btn-bd: transparent; box-shadow: 0 6px 16px -10px var(--hero-a); }


.profile { --pl-navy: oklch(25% 0.075 262); --pl-ic: var(--pl-navy); --pl-green: oklch(64% 0.150 162); --pl-blue: oklch(57% 0.175 252); --pl-purple: oklch(56% 0.200 302); --pl-sky: oklch(80% 0.115 232); --pl-teal: oklch(80% 0.135 172); }
:root[data-theme="dark"] .profile { --pl-ic: oklch(46% 0.140 255); --pl-green: oklch(72% 0.150 162); --pl-blue: oklch(68% 0.150 248); --pl-purple: oklch(70% 0.150 302); }
.phero2 { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 372px; color: var(--hero-ink);
  background: linear-gradient(90deg, oklch(13% 0.050 262 / 0.72) 0%, oklch(13% 0.050 262 / 0.3) 55%, transparent 80%), url('../assets/foto/profil-hero.webp') 18% 40% / cover no-repeat, var(--pl-navy);
  border-radius: 0 0 30px 30px; box-shadow: 0 3px 0 -1px var(--pl-blue), 0 16px 34px -20px var(--pl-blue); }
.phero2__photo { position: absolute; z-index: -1; right: 0; bottom: 0; width: 60%; height: 100%; color: color-mix(in oklab, var(--hero-ink) 30%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
.phero2__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.phero2__bar { position: absolute; z-index: 1; top: var(--space-3); left: var(--space-3); right: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.phero2__acts { display: flex; gap: var(--space-2); }
.phero2__btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1.5px solid oklch(100% 0 0 / 0.32); background: oklch(18% 0.050 262 / 0.35); color: var(--hero-ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.phero2__btn:hover { background: oklch(100% 0 0 / 0.16); }
.phero2__btn:active { transform: scale(0.94); }
.phero2__btn:focus-visible { outline: 2px solid var(--hero-ink); outline-offset: 2px; }
.phero2__btn .ic { width: 20px; height: 20px; }
.phero2__txt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 66%; min-width: 0; padding: 68px var(--space-4) 84px; }
.phero2__kick { font: 600 var(--text-xs)/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--hero-muted); }
.phero2__name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; max-width: 100%; margin: 0; font-size: clamp(1.6rem, 7.5vw, 2.4rem); font-weight: 800; line-height: 1.02; letter-spacing: 0.005em; text-transform: uppercase; color: var(--hero-ink); text-shadow: 0 2px 20px oklch(15% 0.060 262 / 0.7); }
.phero2__name > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.phero2__name .online-dot { width: 14px; height: 14px; box-shadow: 0 0 0 2px var(--pl-navy); }
.phero2__full { margin: 0; font-size: var(--text-sm); color: var(--hero-muted); }
.phero2__club { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pl-sky); }
.phero2__club .ic { flex: none; width: 18px; height: 18px; }
.phero2__club span { min-width: 0; overflow-wrap: anywhere; }
.phero2__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.phero2__pill { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 14px; border-radius: var(--r-pill); border: 1.5px solid oklch(72% 0.130 240 / 0.6); background: oklch(18% 0.060 262 / 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: var(--text-sm); font-weight: 500; color: var(--hero-ink); white-space: nowrap; }
.phero2__pill > span { display: inline-flex; align-items: center; gap: 6px; }
.phero2__pill .ic { color: var(--pl-sky); }
.phero2__pill > i { width: 1px; height: 16px; background: oklch(100% 0 0 / 0.35); }
@media (max-width: 767px) { .profile > .phero2 { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; } }
@media (min-width: 768px) {
  .phero2 { min-height: 380px; margin-top: var(--space-2); border-radius: var(--r-lg); }
  .phero2__photo { width: 52%; }
  .phero2__txt { max-width: 56%; padding: 76px var(--space-8) 92px; }
}
.pquick { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: -52px var(--space-1) 0; }
.pquick > div:not(.tip-out) { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 88px; padding: 10px 4px 9px; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-rule);
  box-shadow: 0 12px 26px -14px oklch(30% 0.080 255 / 0.45); text-align: center; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.pquick > div:not(.tip-out):hover { transform: translateY(-1px); border-color: var(--c-rule-2); }
.pquick > div:not(.tip-out):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.pquick > div[aria-expanded="true"] { border-color: var(--c-accent-line); }
.pquick .tile-ic { display: grid; place-items: center; margin-bottom: 3px; color: var(--c-accent-text); }
.pquick .tile-ic .ic { width: 19px; height: 19px; }
.pquick dt { font-size: var(--text-xs); font-weight: 500; color: var(--c-muted); white-space: nowrap; }
.pquick dd { margin: 0; max-width: 100%; font-size: clamp(1.05rem, 4.8vw, 1.3rem); font-weight: 700; line-height: 1.05; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pquick dd.is-msk { font-size: clamp(0.95rem, 4.2vw, 1.15rem); }
.pquick dd.is-msk.is-long { font-size: clamp(0.8rem, 3.6vw, 1rem); }
.pquick dd small { font-size: 0.55em; margin-left: 1px; color: var(--c-muted); }
.pquick > div:first-child { background: linear-gradient(160deg, color-mix(in oklab, var(--pl-teal) 55%, white), var(--pl-teal)); border-color: transparent; box-shadow: 0 14px 28px -12px color-mix(in oklab, var(--pl-teal) 85%, transparent); }
.pquick > div:first-child :is(dt, dd, .tile-ic) { color: var(--pl-navy); }
.pquick > div:first-child dt { font-weight: 600; }
.pquick > .tip-out { grid-column: 1 / -1; padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--c-card); border: 1px solid var(--c-rule); font-size: var(--text-sm); line-height: 1.45; box-shadow: var(--c-shadow-card); }
.profile .profile-links { margin-top: var(--space-3); }
.ptabs { display: flex; margin: var(--space-4) 0; border-bottom: 1px solid var(--c-rule); overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs button { position: relative; flex: 0 1 180px; min-width: max-content; padding: 14px 14px 12px; border: 0; border-radius: 18px 18px 0 0; background: none; color: var(--c-muted); font: 600 var(--text-md)/1 var(--font-body); cursor: pointer; }
.ptabs button:hover { color: var(--c-ink); }
.ptabs button[aria-selected="true"] { color: var(--c-accent-text); background: linear-gradient(180deg, var(--c-card) 40%, transparent); box-shadow: 0 -8px 18px -14px oklch(40% 0.100 250 / 0.4); }
.ptabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--c-accent); }
.ptabs button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
@media (max-width: 380px) { .ptabs button { padding-inline: 10px; font-size: var(--text-sm); } }
[data-ppanel][hidden] { display: none; }
.ph-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.ph-head h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; }
.ph-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pl-ic); color: var(--hero-ink); box-shadow: 0 6px 14px -8px var(--pl-ic); }
.ph-ic .ic { width: 18px; height: 18px; }
.ph-nick { flex: none; max-width: 42%; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--c-rule-2); background: var(--c-paper-3); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles.pl-mini { gap: var(--space-2); }
.tiles.pl-mini > div:not(.tip-out) { --tone: var(--pl-blue); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic dt" "ic dd"; align-items: center; gap: 2px 10px;
  padding: 14px 12px; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--tone) 24%, transparent);
  background: linear-gradient(135deg, color-mix(in oklab, var(--tone) 13%, var(--c-card)), color-mix(in oklab, var(--tone) 4%, var(--c-card))); cursor: pointer; }
.tiles.pl-mini > div:not(.tip-out)::after { content: ''; position: absolute; z-index: -1; right: -4px; bottom: -6px; width: 62%; height: 112%; background: var(--tone); opacity: 0.17; pointer-events: none;
  -webkit-mask: var(--sil) right bottom / contain no-repeat; mask: var(--sil) right bottom / contain no-repeat; }
.tiles.pl-mini > div[aria-expanded="true"] { border-color: var(--tone); }
.tiles.pl-mini > div:not(.tip-out):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.tiles.pl-mini > div[data-tip-key="p-diff"] { --tone: var(--pl-green); --sil: url('../assets/foto/sil-smash.webp'); }
.tiles.pl-mini > div[data-tip-key="p-main"] { --tone: var(--pl-blue); --sil: url('../assets/foto/sil-netgrid.webp'); }
.tiles.pl-mini > div[data-tip-key="p-streak"] { --tone: var(--pl-purple); --sil: url('../assets/foto/sil-flame.webp'); }
.pl-mini .tile-ic { grid-area: ic; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--hero-ink);
  background: linear-gradient(150deg, color-mix(in oklab, var(--tone) 70%, white), var(--tone)); box-shadow: 0 6px 14px -8px var(--tone); }
.pl-mini .tile-ic .ic { width: 20px; height: 20px; }
.pl-mini dt { grid-area: dt; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: color-mix(in oklab, var(--tone) 78%, var(--c-ink)); }
.pl-mini dd { grid-area: dd; margin: 0; font-size: var(--text-xl); font-weight: 700; }
.pl-mini dd:not(.lv-text) { color: var(--c-ink); }
@media (max-width: 479px) {
  .tiles.pl-mini > div:not(.tip-out) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ic" "dt" "dd"; justify-items: start; row-gap: 4px; padding: 12px 10px; }
  .pl-mini .tile-ic { width: 36px; height: 36px; margin-bottom: 4px; }
  .pl-mini dt { font-size: 10px; letter-spacing: 0.08em; }
}
.pl-goal { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: 12px 14px; border-radius: 16px; background: color-mix(in oklab, var(--c-accent) 5%, var(--c-card)); border: 1px solid var(--c-rule); }
.pl-goal__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-card); color: var(--c-accent-text); box-shadow: 0 4px 12px -8px oklch(30% 0.080 255 / 0.5); }
.pl-goal__ic .ic { width: 26px; height: 26px; stroke-width: 2.2; }
.pl-goal__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pl-goal__main b { font-size: var(--text-sm); font-weight: 600; }
.pl-goal__main .num { color: var(--c-muted); font-weight: 600; }
.pl-hint { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--c-muted); }
.pinfo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.pinfo > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in oklab, var(--c-accent) 7%, var(--c-card)); }
.pinfo__ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-card); color: var(--c-accent-text); box-shadow: 0 4px 10px -8px oklch(30% 0.080 255 / 0.5); }
.pinfo__ic .ic { width: 18px; height: 18px; }
.pinfo dt { font-size: var(--text-xs); color: var(--c-muted); }
.pinfo dd { margin: 0; font-weight: 600; overflow-wrap: break-word; }
@media (max-width: 420px) { .pinfo > div { grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; padding: 10px; } .pinfo__ic { width: 32px; height: 32px; } .pinfo__ic .ic { width: 16px; height: 16px; } .pinfo dd { font-size: var(--text-sm); } }
.pmenu { display: flex; flex-direction: column; gap: var(--space-2); }
.pmenu__it { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 60px; padding: 10px 14px; border: 1px solid var(--c-rule); border-radius: 14px; background: var(--c-paper-2); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.pmenu__it:hover { border-color: var(--c-accent-line); background: var(--c-paper-3); }
.pmenu__it:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.pmenu__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-accent-dim); color: var(--c-accent-text); }
.pmenu__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pmenu__txt b { font-size: var(--text-md); }
.pmenu__txt small { font-size: var(--text-xs); color: var(--c-muted); }
.pmenu__it > .ic:last-child { color: var(--c-faint); }
.perf { gap: var(--space-3); }
.perf .row-between { gap: var(--space-2); }
.perf__seg button { min-width: 64px; }
.perf__pane { display: flex; flex-direction: column; gap: var(--space-3); }
.perf__pane[hidden] { display: none; }
.perf .radar { max-width: 340px; margin-inline: auto; }
.perf__sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--c-paper-3); }
.perf__tot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px var(--space-2); }
.perf__tot span { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--c-muted); }
.perf__tot > b { font-size: var(--text-2xl); font-weight: 900; line-height: 1; }
.perf__tot .perf__bar { align-self: center; }
.perf__lvl { display: flex; align-items: center; gap: var(--space-2); padding: 6px 12px; border-radius: 12px; background: var(--c-card); color: var(--c-accent-text); }
.perf__lvl span { display: flex; flex-direction: column; font-size: var(--text-xs); color: var(--c-muted); }
.perf__lvl b { font-size: var(--text-sm); color: var(--c-ink); }
.perf__h { margin: var(--space-1) 0 0; font-size: var(--text-md); }
.perf__bars { display: flex; flex-direction: column; gap: var(--space-3); }
.perf__lbl { display: flex; justify-content: space-between; gap: var(--space-2); margin-bottom: 6px; font-size: var(--text-sm); }
.perf__lbl small { color: var(--c-faint); }
.perf__lbl b { color: var(--c-accent-text); }
.perf__bar { display: block; height: 6px; border-radius: var(--r-pill); background: var(--c-paper-4); overflow: hidden; }
.perf__bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-accent), color-mix(in oklab, var(--c-accent) 55%, var(--hero-c))); }
@media (max-width: 380px) { .phero__txt { max-width: 70%; padding-inline: var(--space-4); } .pquick { margin-inline: var(--space-2); gap: 6px; } }
@media (max-width: 340px) { .pinfo { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pquick > div:not(.tip-out) { transition: none; } .pquick > div:not(.tip-out):hover { transform: none; } }

 
.kartu { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.kartu__stage { position: relative; align-self: center; width: min(100%, calc((100vh - 300px) * 0.8), 420px); aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--c-paper-3); box-shadow: var(--shadow-lift); }
@supports (height: 100dvh) { .kartu__stage { width: min(100%, calc((100dvh - 300px) * 0.8), 420px); } }
.kartu__stage canvas { display: block; width: 100%; height: 100%; }
.kartu__out { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }    
.kartu__themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.kartu__theme { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-radius: var(--r-md); border: 1px solid var(--c-rule); background: var(--c-card); color: var(--c-muted); font: 600 var(--text-xs)/1 var(--font-body); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out); }
.kartu__theme:hover { border-color: var(--c-rule-2); }
.kartu__theme[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-accent-text); box-shadow: 0 0 0 2px var(--c-accent-dim); }
.kartu__theme:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.kartu__sw { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; }

 
.podium .podium__slot[data-pos="1"] { --medal: var(--medal-gold); }
.podium .podium__slot[data-pos="2"] { --medal: var(--medal-silver); }
.podium .podium__slot[data-pos="3"] { --medal: var(--medal-bronze); }
.podium .podium__slot { border-color: color-mix(in oklab, var(--medal, var(--c-rule)) 55%, var(--c-rule)); border-bottom: 3px solid var(--medal, var(--c-accent)); background: linear-gradient(180deg, color-mix(in oklab, var(--medal, var(--c-accent)) 20%, var(--c-card)), var(--c-card) 72%); }
.podium .podium__slot .podium__pos { display: grid; place-items: center; top: 8px; left: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--medal, var(--c-accent)); color: var(--hero-a); font-size: var(--text-md); font-stretch: normal; box-shadow: 0 4px 10px -6px var(--hero-a); }
.podium .podium__slot[data-pos="1"] .podium__pos { width: 36px; height: 36px; font-size: var(--text-lg); color: var(--hero-a); }
.podium .podium__name { font-stretch: normal; font-weight: 800; text-transform: none; }
.podium .podium__elo::after { content: " poin"; font-size: 0.5em; font-weight: 700; color: var(--c-muted); }

 
.editor__card .phero { width: 100%; margin-top: 0; }
.me-more { font-size: var(--text-xs); color: var(--c-muted); }
.me-more summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; cursor: pointer; list-style: none; font-weight: 600; color: var(--c-accent-text); }
.me-more summary::-webkit-details-marker { display: none; }
.me-more summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 6px; }
.me-more p { margin: var(--space-1) 0 0; }

 
 



.mhero.has-photo { --mh-dasar: oklch(19% 0.055 258); min-height: 336px; justify-content: flex-end; gap: 0; padding: 0 16px 16px; border-radius: 26px; background: var(--mh-dasar); box-shadow: var(--shadow-lift), inset 0 0 0 1px rgb(255 255 255 / 0.07); }
.mhero.has-photo::before { content: ""; position: absolute; z-index: -2; inset: 0 0 auto; height: 232px; background: url("../assets/foto/lp-teman.webp") 50% 40% / cover no-repeat; }
.mhero.has-photo::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 96px, color-mix(in oklab, var(--mh-dasar) 70%, transparent) 158px, var(--mh-dasar) 218px); }
.mhero.has-photo:has(.mhero__sub)::after { background: linear-gradient(180deg, transparent 72px, color-mix(in oklab, var(--mh-dasar) 74%, transparent) 134px, var(--mh-dasar) 196px); }
.mhero.has-photo .mhero__title { max-width: none; font-size: clamp(1.625rem, 7.7vw, 2rem); font-weight: 700; font-stretch: 100%; line-height: 1.1; letter-spacing: -0.026em; text-shadow: 0 1px 12px rgb(4 13 32 / 0.6); }
.mhero.has-photo .mhero__sub { display: flex; align-items: center; gap: 6px; max-width: none; margin-top: 4px; font-weight: 600; }
.mhero.has-photo .mhero__sub .dot-live { background: var(--c-live-solid); }
.mhero.has-photo .mhero__search { min-height: 48px; margin-top: 12px; padding: 0 16px; border-radius: var(--r-pill); color: var(--hero-muted);
  background: rgb(255 255 255 / 0.11); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.1); }
.mhero.has-photo .mhero__search:focus-within { outline-color: var(--hero-ink); }
.mhero.has-photo .mhero__search .input, .mhero.has-photo .mhero__search .input:focus { min-height: 46px; color: var(--hero-ink); background: transparent; }
.mhero.has-photo .mhero__search .input::placeholder { color: rgb(255 255 255 / 0.88); opacity: 1; }
.mhero.has-photo .mhero__search .input:placeholder-shown { text-overflow: ellipsis; }
.mhero.has-photo .mhero__search .input::-webkit-search-cancel-button { filter: brightness(0) invert(1); }
.mhero.has-photo .mhero__cta { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.mhero.has-photo .mhero__cta .btn { min-width: 0; min-height: 48px; padding-inline: 8px; }
.mhero.has-photo .mhero__cta .btn-primary { --btn-bg: var(--hero-ink); --btn-fg: oklch(24% 0.07 255); --btn-bd: transparent; --btn-sh: none; background-image: none; }
.mhero.has-photo .mhero__cta .btn-primary:hover { --btn-bg: oklch(93% 0.018 240); --btn-bd: transparent; }
.mhero.has-photo .mhero__cta .btn-ghost { --btn-bg: rgb(255 255 255 / 0.13); --btn-bd: transparent; --btn-fg: var(--hero-ink); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.1); }
.mhero.has-photo .mhero__cta .btn-ghost:hover { --btn-bg: rgb(255 255 255 / 0.2); }
 
@media (min-width: 600px) { .mhero.has-photo { min-height: 340px; padding: 0 20px 20px; } .mhero.has-photo::before { height: 250px; } }
@media (min-width: 1000px) {
  .mhero.has-photo { min-height: 304px; padding: 28px; }
  .mhero.has-photo::before { inset: 0 0 0 auto; width: 58%; height: auto; background-position: 50% 42%; }
  .mhero.has-photo::after, .mhero.has-photo:has(.mhero__sub)::after { background: linear-gradient(90deg, var(--mh-dasar) 42.5%, color-mix(in oklab, var(--mh-dasar) 62%, transparent) 47%, transparent 57%); }
  .mhero.has-photo .mhero__title { font-size: 2.5rem; }
  .mhero.has-photo .mhero__search, .mhero.has-photo .mhero__cta { width: 420px; max-width: 100%; }
}
.shero { background: linear-gradient(90deg, var(--hero-a) 0%, color-mix(in oklab, var(--hero-a) 82%, transparent) 50%, color-mix(in oklab, var(--hero-a) 35%, transparent) 100%), url("../assets/foto/hero-sesi.webp") 70% 40% / cover no-repeat, var(--hero-a); }
.mcard__banner { background: linear-gradient(180deg, transparent 35%, color-mix(in oklab, var(--hero-a) 55%, transparent)), url("../assets/foto/court-1.webp") center 60% / cover no-repeat, var(--court-a); }
.mcard__banner[data-court="b"] { background: linear-gradient(180deg, transparent 35%, color-mix(in oklab, var(--hero-a) 55%, transparent)), url("../assets/foto/court-2.webp") center 55% / cover no-repeat, var(--court-a); }
 
.ptile__ovr { background: var(--t, var(--c-accent)); color: var(--c-accent-ink); }
:root[data-theme="dark"] .ptile__ovr { background: var(--tf, var(--c-accent)); color: var(--hero-a); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ptile__ovr { background: var(--tf, var(--c-accent)); color: var(--hero-a); } }
.ptile__name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ptile__name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptile__g { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in oklab, var(--c-male) 14%, transparent); color: var(--c-male); }
.ptile__g[data-g="P"] { background: color-mix(in oklab, var(--c-female) 14%, transparent); color: var(--c-female); }
.ptile__g .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.ptile__comm { background: var(--c-card); }
 
 
.podium { gap: var(--space-2); align-items: end; }
.podium .podium__slot { --ph: 64px; --pt: 16px; justify-content: flex-start; gap: 1px; padding: var(--pt) 6px var(--space-3); border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--medal, var(--c-accent)) 45%, var(--c-rule)); border-bottom-width: 1px;
  box-shadow: 0 12px 26px -18px color-mix(in oklab, var(--medal, var(--c-accent)) 80%, transparent);
  background: radial-gradient(90% 60% at 50% 0%, color-mix(in oklab, var(--medal, var(--c-accent)) 42%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in oklab, var(--medal, var(--c-accent)) 22%, var(--c-card)), var(--c-card) 88%); }
.podium .podium__slot[data-pos="1"] { --ph: 82px; --pt: 22px; padding-bottom: var(--space-5); }
.podium .podium__slot .podium__photo { order: -1; display: block; flex: none; width: var(--ph); height: var(--ph); aspect-ratio: auto; border-radius: 50%; overflow: hidden; border: 3px solid var(--medal, var(--c-accent)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--medal, var(--c-accent)) 28%, transparent), 0 8px 16px -8px var(--hero-a); background: linear-gradient(180deg, color-mix(in oklab, var(--c-accent) 8%, var(--c-card)), color-mix(in oklab, var(--c-accent) 24%, var(--c-card))); }
.podium .podium__slot .podium__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; transform: scale(1.45); transform-origin: 50% 6%; filter: none; }
.podium .podium__slot .podium__photo svg { display: block; width: 70%; margin: 20% auto 0; }
.podium .podium__slot .podium__pos { position: absolute; top: calc(var(--pt) + var(--ph) - 13px); left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border: 2px solid var(--c-card); font-size: var(--text-sm); }
.podium .podium__slot[data-pos="1"] .podium__pos { top: calc(var(--pt) + var(--ph) - 15px); width: 30px; height: 30px; font-size: var(--text-md); }
.podium .podium__name { margin-top: 16px; font-size: var(--text-sm); }
.podium .podium__slot[data-pos="1"] .podium__name { font-size: var(--text-md); }
.podium .podium__elo { font-size: var(--text-sm); font-weight: 800; color: var(--c-ink); }
.podium .podium__slot[data-pos="1"] .podium__elo { font-size: var(--text-md); color: var(--c-ink); }
.podium .podium__elo::after { content: " poin"; font-size: 0.86em; font-weight: 600; color: var(--c-muted); }
.podium .podium__slot[data-pos="1"] .podium__elo::after { color: color-mix(in oklab, var(--medal-gold) 70%, var(--c-ink)); font-weight: 700; }
.podium .podium__msk { font-size: 11px; }
 
@media (max-width: 559px) {
  .lb-row { grid-template-columns: 1.4rem 32px minmax(0, 1fr) 3rem 3.4rem; }
  .lb-row .lb-diff, .lb-row .lb-main, .lb-sub, .lb-name .grade { display: none; }
  .lb-row .lb-msk { display: block; order: 6; }
  .lb-row .lb-elo { order: 5; text-align: right; }
}
.lb-head { font-stretch: normal; font-size: 11px; letter-spacing: 0.02em; text-transform: none; font-weight: 700; color: var(--c-muted); background: color-mix(in oklab, var(--c-accent) 5%, var(--c-card)); }
 
.toolbar__search .input, .mhero__search { background: var(--c-card); }
.page-head .select { background-color: var(--c-card); }

 
.tb-ic { position: relative; }
.tb-dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-live); box-shadow: 0 0 0 2px var(--c-paper); }
.tb-dot[hidden] { display: none; }
.notif-view .page-head { align-items: center; }
.notif-push { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--c-rule); box-shadow: var(--c-shadow-card); color: var(--c-accent-text); }
.notif-push span { display: flex; flex-direction: column; min-width: 0; color: var(--c-ink); }
.notif-push small { color: var(--c-muted); font-size: var(--text-xs); }
.notif-tabs { margin-top: 0; }
.notif-list { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--c-rule); box-shadow: var(--c-shadow-card); }
.notif { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: 12px var(--space-4); color: inherit; text-decoration: none; }
.notif + .notif { border-top: 1px solid var(--c-rule); }
.notif[hidden] { display: none; }
.notif:hover { background: color-mix(in oklab, var(--c-accent) 5%, transparent); }
.notif:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.notif.is-new { background: color-mix(in oklab, var(--c-accent) 6%, var(--c-card)); }
.notif__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in oklab, var(--pal, var(--c-accent)) 14%, var(--c-card)); color: var(--pal, var(--c-accent)); }
.notif__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif__main b { font-size: var(--text-sm); font-weight: 800; }
.notif__main span { font-size: var(--text-xs); color: var(--c-muted); overflow-wrap: anywhere; }
.notif__time { font-size: 11px; color: var(--c-faint); white-space: nowrap; }
.notif__dot { position: absolute; right: var(--space-4); bottom: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.notif-none { margin-top: var(--space-3); text-align: center; }
 
.avatar img.is-default, .podium .podium__slot .podium__photo img.is-default { transform: none; object-position: 50% 35%; }

 
body:has(.klasemen)::before { background: none; }
body:has(.klasemen)::after { background: radial-gradient(ellipse at 85% 180px, var(--c-glow-1), transparent 420px), linear-gradient(180deg, var(--c-ice), var(--c-paper) 600px); }
.klasemen { max-width: 960px; padding-top: var(--space-3); }
.klasemen > * + * { margin-top: var(--space-4); }
.klasemen .page-head { align-items: flex-start; gap: var(--space-2); }
.klasemen .page-head h1 { order: -1; margin: 0; color: var(--c-accent-text); text-transform: uppercase; font-size: clamp(21px, 3.5vw, 30px); letter-spacing: -0.025em; font-weight: 800; }
.klasemen .page-head .kicker, .klasemen .lg-pick__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.klasemen .head-act { width: 100%; gap: var(--space-2); }
.klasemen .lg-pick { display: block; max-width: 100%; min-width: 0; }
.klasemen .lg-pick .select { width: auto; max-width: 100%; min-width: 0; min-height: 44px; font-size: var(--text-sm); padding-left: var(--space-3); border-color: var(--c-rule); border-radius: var(--r-pill); background-color: var(--c-card); box-shadow: none; }
.klasemen .lg-meta { margin-top: var(--space-2); font-size: 11px; color: var(--c-muted); }
.klasemen .lg-scope { display: flex; flex-wrap: nowrap; gap: 2px; margin-top: var(--space-3); }
.klasemen .lg-scope button { min-height: 38px; }    
.klasemen .lg-note { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--c-card); border: 1px solid var(--c-rule); border-radius: var(--r-md); font-size: var(--text-xs); box-shadow: none; }
.klasemen .lg-note > svg { flex: none; color: var(--c-accent-text); width: 18px; height: 18px; }
.klasemen .lg-note a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.klasemen .podium { width: 100%; max-width: 640px; gap: var(--space-2); align-items: end; margin-top: var(--space-5); }
.klasemen .podium .podium__slot { --ph: 64px; --pt: 8px; position: relative; isolation: isolate; padding: var(--pt) 4px 14px; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 2px; }
.klasemen .podium .podium__slot::before { content: ''; position: absolute; z-index: -1; inset: 35px 0 0; border-radius: 18px 18px 8px 8px; background: linear-gradient(180deg, color-mix(in oklab, var(--medal) 48%, var(--c-card)), color-mix(in oklab, var(--medal) 8%, var(--c-card)) 96%); }
.klasemen .podium .podium__slot[data-pos="1"] { --ph: 82px; --pt: 8px; padding-bottom: 22px; border: 0; }
.klasemen .podium .podium__slot[data-pos="1"]::before { background: linear-gradient(180deg, color-mix(in oklab, var(--medal-gold) 70%, var(--c-card)), color-mix(in oklab, var(--medal-gold) 12%, var(--c-card)) 96%); }
:root[data-theme="dark"] .klasemen .podium .podium__slot::before { background: linear-gradient(180deg, color-mix(in oklab, var(--medal) 24%, var(--c-card)), var(--c-card)); }
:root[data-theme="dark"] .klasemen .podium .podium__slot[data-pos="1"]::before { background: linear-gradient(180deg, color-mix(in oklab, var(--medal-gold) 28%, var(--c-card)), var(--c-card)); }
.klasemen .podium .podium__photo { border: 3px solid var(--c-card); box-shadow: 0 0 0 3px color-mix(in oklab, var(--medal) 85%, var(--c-card)); }
.klasemen .podium .podium__slot .podium__pos { width: 27px; height: 27px; border: 0; top: calc(var(--pt) + var(--ph) - 6px); background: var(--medal); color: var(--hero-a); box-shadow: none; }
.klasemen .podium .podium__slot[data-pos="1"] .podium__pos { width: 32px; height: 32px; top: calc(var(--pt) + var(--ph) - 6px); font-size: 21px; }
.klasemen .podium .podium__name { margin-top: 25px; font-size: 12px; max-width: 100%; }
.klasemen .podium .podium__slot[data-pos="1"] .podium__name { margin-top: 30px; font-size: 15px; }
.klasemen .podium .podium__elo { font-size: 13px; font-weight: 750; color: var(--c-accent-text); }
.klasemen .podium .podium__slot[data-pos="1"] .podium__elo { font-size: 15px; color: var(--c-ink); }
.klasemen .podium .podium__elo::after { font-size: 0.85em; font-weight: 450; color: var(--c-muted); }
.klasemen .podium .podium__msk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.klasemen .lb { box-shadow: none; border: 0; border-radius: var(--r-md); background: var(--c-card); }
.klasemen .lb-row { min-height: 44px; padding: 7px 10px; gap: 8px; font-size: 12px; }
.klasemen .lb-head { min-height: 36px; background: var(--c-paper-3); padding-block: 8px; font-size: 10px; }
.klasemen .lb-row .avatar { --sz: 27px; }
.klasemen .lb-name b { font-family: var(--font-body); font-weight: 600; }
.klasemen .lb-row .lb-elo { font-weight: 650; }
.klasemen .lb-comms { font-size: 9px; }
.klasemen .lb-pending .section-head h2 { font-size: var(--text-sm); }
.klasemen .empty { padding: var(--space-8) var(--space-5); border: 1px solid var(--c-rule); border-radius: var(--r-lg); background: var(--c-card); gap: var(--space-3); }
.klasemen .empty > svg { box-sizing: content-box; width: 28px; height: 28px; padding: 16px; border-radius: 20px; color: var(--c-accent-text); background: var(--c-paper-3); margin-bottom: var(--space-2); }
.klasemen .empty h3 { max-width: 28ch; font-size: 19px; font-weight: 700; line-height: 1.3; }
.klasemen .empty p { max-width: 46ch; font-size: var(--text-sm); line-height: 1.65; }
.klasemen .lg-rules { padding: var(--space-5); gap: var(--space-4); border: 1px solid var(--c-rule); border-radius: var(--r-lg); background: var(--c-card); box-shadow: none; }
.klasemen .lg-rules__head { display: flex; gap: var(--space-3); align-items: center; }
.klasemen .lg-rules__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--c-muted); background: var(--c-paper-3); border-radius: var(--r-md); }
.klasemen .lg-rules__icon svg { width: 19px; height: 19px; }
.klasemen .lg-rules__head .kicker { display: block; margin-bottom: 4px; font-size: 11px; }
.klasemen .lg-rules h2 { line-height: 1.35; font-size: 16px; font-weight: 700; }
.klasemen .lg-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--c-rule); border-radius: var(--r-md); padding-block: var(--space-3); background: var(--c-paper); }
.klasemen .lg-points > div { display: grid; gap: 4px; text-align: center; }
.klasemen .lg-points > div + div { border-left: 1px solid var(--c-rule); }
.klasemen .lg-points span { font-size: var(--text-xs); color: var(--c-muted); }
.klasemen .lg-points b { font-size: 24px; line-height: 1.1; font-weight: 700; }
.klasemen .lg-rules > .muted { font-size: var(--text-sm); line-height: 1.7; }
.klasemen .lg-rules > .hint { padding-top: var(--space-3); border-top: 1px solid var(--c-rule); font-size: var(--text-xs); line-height: 1.65; color: var(--c-muted); }
@media (max-width: 559px) { .klasemen .lb-row { grid-template-columns: 18px 27px minmax(0, 1fr) 45px 49px; } }
@media (min-width: 768px) {
  .klasemen { padding-top: var(--space-6); }
  .klasemen .head-act { width: auto; max-width: 360px; }
  .klasemen .lg-pick { min-width: 280px; }
  .klasemen .podium .podium__slot { --ph: 80px; padding-bottom: 20px; }
  .klasemen .podium .podium__slot[data-pos="1"] { --ph: 104px; padding-bottom: 28px; }
  .klasemen .lb-row { min-height: 52px; font-size: var(--text-sm); }
}
:is(.ptile__photo, .phero__photo, .phero2__photo, .pcard__photo) img.is-default { object-fit: cover; object-position: 50% 30%; }
:is(.phero__photo, .phero2__photo):has(img.is-default) { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%); }

 
.mcard__host { font-size: var(--text-xs); font-weight: 600; }
.mb-hostline { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--c-muted); }
.mb-hostline b { color: var(--c-ink); }
.mb-hostline .avatar { flex: none; }
.mb-notes { margin: 0; font-size: var(--text-sm); color: var(--c-muted); white-space: pre-line; overflow-wrap: anywhere; }
.mb-panel { gap: var(--space-4); }
.mb-panel .list { margin: 0; padding: 0; list-style: none; }
.mb-form .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mb-acts { gap: var(--space-2); flex-wrap: wrap; }
.mb-acts .mb-iuran { order: -1; }    
 
.mb-run { display: grid; gap: var(--space-2); }
.mb-open { padding-top: var(--space-3); border-top: 1px solid var(--c-rule); }
.mb-req .list-item__title { text-decoration: none; color: var(--c-ink); }
.mb-req__act { gap: var(--space-2); flex: none; }
.mb-report { align-self: flex-start; color: var(--c-muted); }
.mb-mod { align-items: center; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px dashed var(--c-rule); }
.mb-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mb-reqs li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.mb-reqs li .ic { flex: none; color: var(--c-loss); }
.mb-reqs li.is-ok .ic { color: var(--c-win); }
 
.mb-opts { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; border-radius: 14px; background: var(--c-paper-3); overflow: hidden; }
.mb-opt { display: flex; align-items: center; gap: var(--space-3); min-height: 50px; padding: 8px 16px; cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.mb-opt + .mb-opt { box-shadow: inset 0 1px 0 var(--c-rule); }
.mb-opt:has(input:checked) { background: var(--c-accent-dim); color: var(--c-accent-text); }
.mb-opt input { accent-color: var(--c-accent); margin: 0; }
@media (max-width: 420px) { .mb-req { flex-wrap: wrap; } .mb-req__act { width: 100%; justify-content: flex-end; } }

 
.chip__x { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 -4px 0 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.chip__x:hover, .chip__x:focus-visible { background: var(--c-paper-3); }
.chip__x .ic { width: 12px; height: 12px; }
.sc-who { align-items: center; gap: var(--space-3); }
.pc-m { flex-wrap: wrap; }
.pc-m .list-item__main { flex: 1 1 160px; }
.pc-m > .btn { margin-left: auto; }    
.pc-list { margin: 0; padding: 0; list-style: none; }
 
.mbf-city { display: flex; gap: var(--space-2); }
.mbf-city .input { flex: 1; min-width: 0; }
.loc-now { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; min-height: 40px; }
.loc-nudge { align-items: center; flex-wrap: wrap; }
 
.kota-isi { display: flex; gap: var(--space-2); }
.kota-isi .input { flex: 1 1 auto; min-width: 0; }
.kota-isi .btn { flex: none; width: 44px; min-height: 44px; padding: 0; }
.loc-nudge > span { flex: 1 1 200px; }
.loc-nudge__x { padding-inline: 8px; }
 
.mb-confirm { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-md); border: 1px solid var(--c-accent-line); background: var(--c-accent-dim); }
.mb-confirm p { display: grid; gap: 4px; margin: 0; }
.mb-confirm .muted { font-size: var(--text-sm); }
.mb-rep { display: inline-flex; align-items: center; gap: 4px; }
.mb-rep.is-warn { color: var(--c-loss); }
.mb-hostline { flex-wrap: wrap; }
.mcard__host.is-trust { display: inline-flex; align-items: center; gap: 4px; color: var(--c-win); }

 
.klasemen .podium .podium__slot::before { inset: 32px 0 0; border-radius: 0; clip-path: polygon(0 17px, 17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px)); }
.klasemen .podium .podium__slot::after { content: ''; position: absolute; z-index: -1; inset: 38px 0 0; pointer-events: none; background: color-mix(in oklab, var(--medal) 26%, transparent); clip-path: polygon(0 38%, 100% 10%, 100% 42%, 0 72%); }
.klasemen .podium .podium__slot[data-pos="1"]::after { background: color-mix(in oklab, var(--medal-gold) 46%, transparent); clip-path: polygon(0 42%, 100% 12%, 100% 46%, 0 76%); }
.klasemen .lg-rules { position: relative; overflow: hidden; border-top: 3px solid var(--c-accent-line); }
.klasemen .lg-rules__icon { color: var(--c-accent-text); background: var(--c-accent-dim); }
.klasemen .lg-points { gap: 8px; padding: 0; border: 0; background: none; }
.klasemen .lg-points > div { padding: 12px 4px; border: 1px solid var(--c-rule); border-radius: var(--r-md); background: var(--c-paper); }
.klasemen .lg-points > div + div { border-left: 1px solid var(--c-rule); }
.klasemen .lg-points > div:first-child { background: color-mix(in oklab, var(--c-accent-dim) 50%, var(--c-card)); border-color: var(--c-accent-line); }
.klasemen .lg-points > div:first-child b { color: var(--c-accent-text); }
.klasemen .lg-rules__intro { font-size: var(--text-sm); color: var(--c-muted); line-height: 1.6; }
.klasemen .lg-rules__intro strong { color: var(--c-ink); font-weight: 650; }
.klasemen .lg-guide { display: grid; gap: 16px; }
.klasemen .lg-guide__entry { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.klasemen .lg-guide__number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--c-paper-3); color: var(--c-accent-text); font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; }
.klasemen .lg-guide__entry b { display: block; font-size: 13px; line-height: 1.5; font-weight: 650; }
.klasemen .lg-guide__entry p { font-size: 12px; line-height: 1.6; color: var(--c-muted); margin-top: 2px; }




.jsy-hero {
  --jsy-img: url("../assets/foto/jersey-beruang.webp");    
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; align-items: center; gap: 14px;
  width: 100%; min-height: 108px; padding: 18px 16px 18px 18px; border-radius: 18px;
  border: 1px solid rgb(72 160 255 / 0.6); background: #061230; color: #FFFFFF;
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 0 0 1px rgb(8 121 232 / 0.18), 0 0 22px rgb(8 121 232 / 0.32), 0 12px 28px rgb(4 18 54 / 0.35);
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.jsy-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--jsy-img) right -38px top 35% / auto 128% no-repeat; transition: transform 0.6s var(--ease-out);
  -webkit-mask-image: linear-gradient(90deg, transparent 46%, #000 78%); mask-image: linear-gradient(90deg, transparent 46%, #000 78%); }    
.jsy-hero::after {    
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 70% at 74% -8%, rgb(150 210 255 / 0.42), rgb(60 150 255 / 0.12) 45%, transparent 70%),
    radial-gradient(6% 18% at 74% 2%, rgb(255 255 255 / 0.55), transparent 70%),
    linear-gradient(90deg, transparent 52%, rgb(160 215 255 / 0.55) 74%, transparent 94%) 0 14% / 100% 1px no-repeat,
    linear-gradient(90deg, #061230 0%, rgb(6 18 48 / 0.9) 42%, rgb(6 18 48 / 0.35) 68%, rgb(6 18 48 / 0) 86%);
}
.jsy-hero:hover { border-color: rgb(140 200 255 / 0.9); box-shadow: 0 0 0 1px rgb(8 121 232 / 0.3), 0 0 30px rgb(8 121 232 / 0.45), 0 12px 28px rgb(4 18 54 / 0.35); }
.jsy-hero:hover::before { transform: scale(1.04); }
.jsy-hero:focus-visible { outline: 2px solid #7CC0FF; outline-offset: 3px; }
.jsy-hero__ic {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: #E9F4FF;
  background: linear-gradient(160deg, #2A82F0, #0B3E9E); border: 1px solid rgb(140 200 255 / 0.65);
  box-shadow: 0 0 16px rgb(8 121 232 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.28);
}
.jsy-hero__ic .ic { width: 26px; height: 26px; }
.jsy-hero__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jsy-hero__txt b { font-size: var(--text-lg); font-weight: 650; line-height: 1.2; color: #FFFFFF; text-wrap: balance; }
.jsy-hero__txt small { font-size: var(--text-sm); line-height: 1.4; color: rgb(214 232 255 / 0.86); }
.jsy-hero__go {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #FFFFFF;
  background: rgb(8 32 86 / 0.72); border: 1px solid rgb(140 200 255 / 0.6); box-shadow: 0 0 14px rgb(8 121 232 / 0.5);
}
.jsy-hero__go .ic { width: 18px; height: 18px; }
.jsy-wrap { position: relative; }
.jsy-wrap .jsy-hero { padding-top: 22px; }
.jsy-x {    
  position: absolute; top: 6px; right: 6px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgb(140 200 255 / 0.35); background: rgb(6 18 48 / 0.6); color: rgb(220 236 255 / 0.85); cursor: pointer;
}
.jsy-x:hover { color: #FFFFFF; border-color: rgb(140 200 255 / 0.7); }
.jsy-x .ic { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .jsy-hero::before { transition: none; } .jsy-hero:hover::before { transform: none; } }
@media (max-width: 480px) { .jsy-hero__txt { max-width: 11.5rem; } }    
@media (max-width: 380px) {
  .jsy-hero { grid-template-columns: 44px minmax(0, 1fr) 34px; gap: 12px; padding: 16px 12px 16px 14px; }
  .jsy-hero__ic { width: 44px; height: 44px; border-radius: 13px; }
  .jsy-hero__go { width: 34px; height: 34px; }
}
.jsy-lead { margin: 0; }
.jsy .seg { display: flex; }
.jsy .seg label { flex: 1 1 0; text-align: center; }
.jsy .form-grid.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.jsy-foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; }
.jsy-alt { font-size: var(--text-sm); color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; }
.jsy-alt:hover { color: var(--c-ink); }



.lpg { --lp-hi: color-mix(in oklab, var(--hero-c) 60%, var(--hero-ink)); display: flex; flex-direction: column; gap: clamp(2.5rem, 8vw, 4.5rem); padding-bottom: var(--space-6); }    
.lp-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(180px, 50vw, 240px) var(--space-5) var(--space-6); border-radius: var(--r-lg); color: var(--hero-ink);
  background: linear-gradient(180deg, transparent 0, color-mix(in oklab, var(--hero-a) 10%, transparent) clamp(110px, 30vw, 160px), var(--hero-a) clamp(230px, 64vw, 300px)), url("../assets/foto/lp-hero-m.webp?v=2") 50% 0% / 100% auto no-repeat, var(--hero-a); }    
.lp-hero__in { display: flex; flex-direction: column; gap: var(--space-3); max-width: 34rem; }
.lp-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hero-line); background: color-mix(in oklab, var(--hero-a) 55%, transparent); color: var(--hero-ink); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; }
.lp-chip .ic { color: var(--lp-hi); }
.lp-hero__t { color: var(--hero-ink); font-size: clamp(1.95rem, 8.9vw, 4.25rem); font-weight: 700; line-height: 1; letter-spacing: -0.015em; }
.lp-hero__t span { color: var(--lp-hi); }
.lp-hero__sub { max-width: 34ch; margin: 0; color: var(--hero-muted); font-size: var(--text-md); line-height: 1.5; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.lp-hero__cta .btn { flex: 1 1 200px; }    
.lp-hero__cta .btn-ghost { --btn-fg: var(--hero-ink); --btn-bd: var(--hero-line); --btn-bg: color-mix(in oklab, var(--hero-a) 45%, transparent); }
.lp-hero__cta .btn-ghost:hover { --btn-bg: color-mix(in oklab, var(--hero-ink) 12%, transparent); }
.lp-ticks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-1) 0 0; padding: 0; list-style: none; color: var(--hero-muted); font-size: var(--text-sm); }
.lp-ticks li { display: inline-flex; align-items: center; gap: 6px; }
.lp-ticks .ic { color: var(--lp-hi); }
.lp-modes { display: flex; flex-direction: column; gap: var(--space-4); }
.lp-modes__t { max-width: 24ch; font-size: clamp(1.45rem, 5.8vw, 2.25rem); font-weight: 700; line-height: 1.1; }
.lp-modes__t span { color: var(--c-accent-text); }
.lp-modes__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.lp-mode { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5); border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--c-rule); }
.lp-mode__ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-1); border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); }
.lp-mode b { font-size: var(--text-lg); font-weight: 600; }
.lp-mode p { margin: 0; color: var(--c-muted); font-size: var(--text-sm); line-height: 1.5; }
@media (min-width: 760px) { .lp-modes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-sec { display: flex; flex-direction: column; gap: var(--space-5); }
.lp-head { display: flex; flex-direction: column; gap: 6px; max-width: 36rem; }
.lpg .lp-head h2, .lp-show__txt h2, .lp-join__txt h2 { font-size: clamp(1.5rem, 6vw, 2.25rem); font-weight: 700; line-height: 1.05; }
.lp-feats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.lp-feat { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-lg); background: var(--c-card); border: 1px solid var(--c-rule); }
.lp-feat__ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-md); background: var(--c-accent-dim); color: var(--c-accent-text); }
.lp-feat b { font-weight: 600; }
.lp-feat p { margin: 2px 0 0; color: var(--c-muted); font-size: var(--text-sm); line-height: 1.45; }
.lp-show { display: grid; gap: var(--space-4); align-items: center; }
.lp-show__img { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--hero-a); }
.lp-show__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-show__txt { display: flex; flex-direction: column; gap: var(--space-2); }
.lp-show__txt p { max-width: 46ch; margin: 0; color: var(--c-muted); font-size: var(--text-md); line-height: 1.6; }
.lp-vision { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: clamp(1.5rem, 6vw, 3rem); border-radius: var(--r-lg); color: var(--hero-ink);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--hero-c) 38%, transparent) 0%, transparent 60%), linear-gradient(160deg, var(--hero-a) 0%, color-mix(in oklab, var(--hero-a) 82%, black) 100%); }
.lp-vision .kicker { color: var(--lp-hi); }
.lp-vision h2 { max-width: 20ch; color: var(--hero-ink); font-size: clamp(1.5rem, 6vw, 2.25rem); font-weight: 700; line-height: 1.05; }
.lp-vision p { max-width: 56ch; margin: 0; color: var(--hero-muted); font-size: var(--text-md); line-height: 1.6; }
.lp-vision .lp-vision__cta { color: var(--hero-ink); }
.lp-vision .lp-vision__cta b { color: var(--lp-hi); font-weight: 600; }
.lp-show__txt p + p { margin-top: var(--space-1); }
.lp-join { display: grid; gap: var(--space-5); align-items: start; scroll-margin-top: 84px; }
.lp-join__txt { display: flex; flex-direction: column; gap: var(--space-3); }
.lp-steps { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.lp-steps li { display: flex; align-items: flex-start; gap: var(--space-3); }
.lp-steps__n { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); font-weight: 700; font-size: var(--text-sm); }
.lp-steps b { font-weight: 600; }
.lp-steps p { margin: 2px 0 0; color: var(--c-muted); font-size: var(--text-sm); line-height: 1.45; }
.lp-form { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6) var(--space-5); scroll-margin-top: 84px; }
@media (min-width: 560px) { .lp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) {
  .lp-hero { justify-content: center; min-height: 560px; padding: var(--space-7, 3rem);
    background: linear-gradient(90deg, var(--hero-a) 0%, color-mix(in oklab, var(--hero-a) 80%, transparent) 38%, color-mix(in oklab, var(--hero-a) 5%, transparent) 70%), url("../assets/foto/lp-hero.webp") 70% 40% / cover no-repeat, var(--hero-a); }
  .lp-show { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
  .lp-show.is-flip .lp-show__img { order: 2; }
}
@media (min-width: 960px) {
  .lp-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-join { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(2rem, 5vw, 4rem); }
  .lp-join__txt { position: sticky; top: 96px; }
}

 
.dep-card { display: grid; gap: var(--space-3); margin-block: var(--space-4); padding: var(--space-5); border-radius: var(--r-lg); border: 2px solid var(--c-accent); background: color-mix(in oklab, var(--c-accent) 7%, var(--c-card)); }
.dep-card.is-mine { border-color: color-mix(in oklab, var(--c-accent) 55%, var(--c-rule)); }
.dep-card__txt { display: flex; flex-direction: column; gap: 4px; }
.dep-card__txt b { font-size: var(--text-lg); font-weight: 600; }
.dep-card__txt .muted { margin: 0; line-height: 1.5; }
.dep-card__act { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dep-card__act .btn-primary { flex: 1 1 14rem; justify-content: center; }
.dep-note { align-items: center; margin-block: var(--space-3); }
.dep-note > span { flex: 1 1 auto; }

 
.nf-pop { position: fixed; z-index: 60; left: 50%; top: calc(env(safe-area-inset-top) + 72px); transform: translateX(-50%); width: min(560px, calc(100% - 24px));
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--r-lg);
  background: var(--c-card); border: 1px solid var(--c-accent-line); box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.45); animation: nfPopIn 0.22s var(--ease-out, ease) both; }
.nf-pop.is-out { animation: nfPopOut 0.2s ease both; }
.nf-pop__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nf-pop__txt b { font-weight: 600; line-height: 1.3; }
.nf-pop__txt span { color: var(--c-muted); font-size: var(--text-sm); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@keyframes nfPopIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes nfPopOut { to { opacity: 0; transform: translate(-50%, -10px); } }
@media (prefers-reduced-motion: reduce) { .nf-pop, .nf-pop.is-out { animation: none; } }
.set-row .tab-badge { position: static; flex: none; margin: 0; transform: none; }

 
.comm-picks__q { display: block; flex: none; margin-bottom: var(--space-3); }
.pseg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-width: 420px; padding: 4px; border-radius: var(--r-pill); background: var(--c-paper-3); border: 1px solid var(--c-rule); }
.pseg a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: var(--r-pill); color: var(--c-muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.pseg a:hover { color: var(--c-ink); }
.pseg a[aria-current="page"] { background: var(--c-card); color: var(--c-ink); box-shadow: 0 2px 8px -4px rgb(15 23 42 / 0.35); }
.pseg a[aria-current="page"] .ic { color: var(--c-accent-text); }
.pseg a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.pseg.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; }    
@media (max-width: 360px) { .pseg.is-3 a { gap: 4px; font-size: var(--text-xs); } .pseg.is-3 a .ic { display: none; } }
.kom-page > .pseg + .page-head { margin-top: var(--space-4); }
.view > .pseg + * { margin-top: var(--space-5); }
.kom-search { display: block; flex: none; max-width: 480px; }
 
.sk-doc { display: flex; flex-direction: column; gap: var(--space-5); max-width: 68ch; margin-top: var(--space-4); }
.sk-sec h2 { font-size: var(--text-md); color: var(--c-ink); text-wrap: balance; }
.sk-sec p, .sk-sec ul { margin-top: var(--space-2); color: var(--c-muted); line-height: 1.6; }
.sk-sec ul { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 1.2em; list-style: disc; }
.sk-sec a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 2px; }
 
.tut-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); row-gap: var(--space-1); }
.tut-links__lbl { font-size: var(--text-sm); color: var(--c-muted); }
.tut-link { position: relative; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; min-height: 32px; padding: 0; border: 0; background: none;
  color: var(--c-accent-text); font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; }
.tut-link::before { content: ""; position: absolute; inset: -6px -4px; }
.tut-link > .ic:first-child { flex: none; width: 22px; height: 22px; padding: 6px 5px 6px 7px; border-radius: 50%; background: var(--c-accent-dim); color: var(--c-accent-text); }
.tut-link small { flex: none; font-size: var(--text-xs); font-weight: 500; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tut-link:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.tut-link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; border-radius: 6px; }
.kom-page > .tut-links { margin-top: var(--space-2); }
.acct .tut-link { margin-top: var(--space-3); }
 
.tut-coach { --tc-scrim: oklch(12% 0.03 255 / 0.55); position: fixed; inset: 0; z-index: 200; cursor: pointer; }
.tut-coach__ring { position: absolute; border-radius: 50%; pointer-events: none; }
.tut-coach__ring::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--c-accent); border-radius: 50%; animation: tcPulse 1.6s var(--ease-out) infinite; }
@keyframes tcPulse { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
.tut-coach__tip { position: absolute; width: min(280px, calc(100vw - 24px)); padding: var(--space-4); border: 1px solid var(--c-rule); border-radius: var(--r-lg);
  background: var(--c-paper-2); color: var(--c-ink); box-shadow: 0 18px 40px -16px oklch(10% 0.03 255 / 0.6); cursor: default; animation: tcIn var(--dur-long) var(--ease-out); }
.tut-coach__tip b { display: block; font-size: var(--text-md); font-weight: 700; line-height: 1.3; }
.tut-coach__tip p { margin: 4px 0 0; font-size: var(--text-sm); line-height: 1.45; color: var(--c-muted); }
.tut-coach__arrow { position: absolute; top: -8px; width: 16px; height: 16px; background: var(--c-paper-2); border-left: 1px solid var(--c-rule); border-top: 1px solid var(--c-rule); transform: rotate(45deg); border-radius: 3px 0 0 0; }
.tut-coach__act { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
@keyframes tcIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tut-coach__ring::after { animation: none; transform: scale(1.15); } .tut-coach__tip { animation: none; } }
 
.twb-lead { max-width: 62ch; }
.twb-size { margin-top: var(--space-4); max-width: 420px; }
.twb-size small { margin-left: 4px; font-weight: 500; opacity: .75; }
.twb-stage { position: relative; display: grid; place-items: center; margin-top: var(--space-4); padding: var(--space-3); border: 1px solid var(--c-rule); border-radius: var(--r-lg); background: var(--c-paper-3); }
.twb-cv { display: block; width: auto; height: auto; max-width: 100%; max-height: min(66dvh, 680px); border-radius: 14px; background: #03112a; box-shadow: var(--c-shadow-card); touch-action: none; cursor: grab; }
.twb-cv:active { cursor: grabbing; }
.twb-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-4) var(--space-5);
  border-radius: var(--r-lg); background: oklch(18% 0.05 255 / 0.72); color: #fff; text-align: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.twb-empty[hidden] { display: none; }
.twb-empty__ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); }
.twb-empty b { font-size: var(--text-lg); font-weight: 700; }
.twb-empty small { font-size: var(--text-sm); opacity: .85; }
.twb-empty:focus-within { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.twb-zoom { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.twb-zoom label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--c-muted); }
.twb-zoom input { flex: 1; min-width: 0; min-height: 44px; accent-color: var(--c-accent); }
.twb-act { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.twb-act .btn { flex: 1 1 160px; }
 
.ses-siaran { margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
 
.modal-guide .modal__box { position: relative; }
.modal-guide .modal__head { position: absolute; top: 0; right: 0; border: 0; background: transparent; padding: var(--space-4); }
.modal-guide .modal__head h2:empty { display: none; }
.modal-guide .modal__foot { border-top: 0; padding-top: 0; }
.guide { display: grid; gap: var(--space-3); padding-top: 4px; }
.guide__kick { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 99px; background: var(--c-accent-dim); color: var(--c-accent-text); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.guide__kick-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--c-accent); color: var(--c-accent-ink); }
.guide__kick-ic .ic { width: 18px; height: 18px; }
.guide__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 6.4vw, 2rem); line-height: 1.08; letter-spacing: -0.01em; margin-top: var(--space-2); text-wrap: balance; }
.guide__lead { color: var(--c-muted); margin: 0; }
.guide__steps { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; }
.guide__steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding-bottom: var(--space-4); }
.guide__steps li:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 64px; bottom: 2px; width: 2px; background: var(--c-rule); }
.guide__ic { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-accent-dim); color: var(--c-accent); }
.guide__ic .ic { width: 26px; height: 26px; }
.guide__ic i { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--c-paper-2); border: 1px solid var(--c-rule); color: var(--c-accent-text); font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.guide__steps li > div { display: grid; gap: 3px; padding-top: 6px; }
.guide__steps b { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }
.guide__steps li > div span { color: var(--c-muted); font-size: var(--text-sm); }
.guide__off { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px 14px; border-radius: var(--r-md); background: var(--c-paper-3); cursor: pointer; font-weight: 500; }
 
.kom-status { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: var(--text-xs); color: var(--c-muted); }
.kom-status span { display: inline-flex; align-items: center; gap: 5px; }
.kom-status .ic { width: 14px; height: 14px; }
.kom-status .is-ok { color: var(--c-win); font-weight: 700; }
.kom-status .is-wait { color: var(--c-accent-text); font-weight: 700; }
 
.kom-status .is-ok, .kom-status .is-wait { gap: 5px; }
.kom-status .kom-tick { flex: none; width: 14px; height: 14px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff;
  background: linear-gradient(160deg, color-mix(in oklab, var(--c-win) 72%, white), var(--c-win)); box-shadow: 0 1px 3px -1px color-mix(in oklab, var(--c-win) 85%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.3); }
.kom-status .kom-tick .ic { width: 9px; height: 9px; stroke-width: 3.6; }
.kom-status .kom-tick.is-wait { background: linear-gradient(160deg, color-mix(in oklab, var(--c-accent) 72%, white), var(--c-accent)); box-shadow: 0 1px 3px -1px color-mix(in oklab, var(--c-accent) 85%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.3); }
.kom-status .kom-tick.is-wait .ic { stroke-width: 3; }
:root[data-theme="dark"] .kom-status .kom-tick { color: oklch(20% 0.04 200); }
.btn-grid.cols-2 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.btn-grid.cols-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.btn-grid:empty { display: none; }
 
.live-view__go { margin-bottom: var(--space-4); }
.live-view .live-row { margin-top: var(--space-4); }
body.tv .live-view__go, body.tv .live-view .live-row { display: none; }

 
.klasemen .head-act { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); width: 100%; }
.klasemen .head-act .lg-pick { flex: 1 1 auto; min-width: 0; }
.klasemen .head-act .lg-pick .select { width: 100%; }
.klasemen .head-act > .btn { flex: none; }

 
.tk-intro { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--set-muted); }
.tk-list { display: flex; flex-direction: column; gap: var(--space-3); }
.tk-lagi { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-3); text-align: center; }    
.tk-lagi .btn { width: 100%; max-width: 360px; min-height: 44px; }
.seg.tk-saring { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
.seg.tk-saring button { min-height: 44px; padding-inline: 4px; }
.chip.tk-asal { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--set-border); color: var(--set-navy); }
.chip.tk-asal .ic { width: 13px; height: 13px; }
.tk-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--set-r); background: var(--set-surface); border: 1px solid var(--set-border); box-shadow: var(--set-shadow); color: var(--set-navy); min-width: 0; }
.tk-card__top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tk-kode { flex: 1 1 auto; font-family: var(--font-display); font-size: var(--text-md); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.tk-meta { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--set-muted); overflow-wrap: anywhere; }
.tk-meta b { color: var(--set-navy); font-weight: 700; }
.tk-txt { margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.tk-kecil { margin: 0; font-size: var(--text-xs); line-height: 1.45; color: var(--set-muted); overflow-wrap: anywhere; }
.tk-kecil .ic { width: 14px; height: 14px; vertical-align: -2px; }
.tk-kecil.tk-srv__intro { margin-bottom: var(--space-3); }    
.tk-alasan { display: flex; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: 12px; background: var(--set-bg); font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; }
.tk-alasan .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--set-muted); }
.tk-act { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.tk-act .btn { flex: 1 1 140px; min-height: 44px; white-space: nowrap; }
.tk-vid { display: grid; place-items: center; min-height: 200px; border-radius: 12px; overflow: hidden; background: #0B1220; }
.tk-vid video { display: block; width: 100%; max-height: 70vh; background: #0B1220; }
.tk-vid__muat { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); color: rgb(255 255 255 / 0.72); text-align: center; }
.tk-vid__muat small { font-size: var(--text-xs); }
.tk-skel { height: 132px; border-radius: var(--set-r); }
.tk-lihat { display: flex; flex-wrap: wrap; gap: var(--space-2); }    
.tk-lihat .btn { min-height: 44px; }
.tk-lihat .btn[aria-pressed="true"] { --btn-bg: var(--c-accent-dim); --btn-fg: var(--c-accent-text); box-shadow: inset 0 0 0 1.5px var(--c-accent-line); }
.tk-tvid { display: flex; flex-direction: column; gap: var(--space-2); }
.tk-pakai__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }    
.tk-pakai__top b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.tk-pakai__top span { font-size: var(--text-sm); color: var(--set-muted); }
.tk-pakai__bar { height: 10px; border-radius: var(--r-pill); background: var(--set-bg); border: 1px solid var(--set-border); overflow: hidden; }
.tk-pakai__bar i { display: block; height: 100%; border-radius: inherit; background: var(--set-primary); }
.tk-pakai__bar.is-penuh i { background: var(--c-loss); }
.tk-pakai__list { margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.tk-pakai__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-top: 1px solid var(--set-border); }
.tk-pakai__list li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-pakai__list small { font-size: var(--text-xs); color: var(--set-muted); }
.tk-pakai__n { flex: none; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
 
.tk-srv__list, .tk-srv__hari { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tk-srv__it { display: flex; flex-direction: column; gap: 6px; padding-block: var(--space-3); border-top: 1px solid var(--set-border); }
.tk-srv__it:first-child { padding-top: var(--space-1); border-top: 0; }
.tk-srv__tahap { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: 700; }
.tk-srv__tahap b { font-variant-numeric: tabular-nums; }
.tk-srv__tahap small { font-size: var(--text-xs); font-weight: 500; color: var(--set-muted); }
.tk-srv__it.is-jalan .tk-srv__tahap > span { color: var(--set-primary); }
.tk-srv__bar.is-jalan i { background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: tk-srv-jalan 1.4s linear infinite; }
@keyframes tk-srv-jalan { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.tk-srv__tot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.tk-srv__tot span { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--space-2) var(--space-3); border-radius: 12px; background: var(--set-bg); }
.tk-srv__tot b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tk-srv__tot small { font-size: var(--text-xs); color: var(--set-muted); }
.tk-srv__hari li { display: flex; flex-direction: column; gap: 5px; padding-block: var(--space-2); border-top: 1px solid var(--set-border); }
.tk-srv__hari li:first-child { border-top: 0; }
.tk-srv__rt { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.tk-srv__rt span { font-weight: 700; }
.tk-srv__rt b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-srv__rt small { font-size: var(--text-xs); color: var(--set-muted); }
.tk-srv__hari .tk-pakai__bar { height: 8px; }
@media (prefers-reduced-motion: reduce) { .tk-srv__bar.is-jalan i { animation: none; } }
 
.kas-head h1 { display: flex; flex-direction: column; gap: 2px; }
.kas-head h1 small { font-size: var(--text-sm); font-weight: 500; color: var(--set-muted); letter-spacing: 0; }
.kas-kunci-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 14px; background: none; color: var(--set-primary); cursor: pointer; }
.kas-kunci-btn .ic { width: 26px; height: 26px; }
.kas-kunci-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.kas-hero { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: 22px; overflow: hidden; color: #FFFFFF; isolation: isolate;
  background: linear-gradient(100deg, rgb(10 22 44 / 0.94) 0%, rgb(10 22 44 / 0.82) 45%, rgb(10 22 44 / 0.55) 100%), url(../assets/foto/hero-sesi.webp) 70% 40% / cover no-repeat, #0A162C;
  box-shadow: 0 18px 36px -22px rgb(10 22 44 / 0.8); }
.kas-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.kas-hero__lbl { display: block; font-size: var(--text-sm); color: rgb(255 255 255 / 0.78); }
.kas-hero__total { display: block; font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kas-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px 4px 6px; border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 700; }
.kas-pill .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; }
.kas-pill.is-lunas { background: rgb(34 197 94 / 0.22); color: #7CF0A8; }
.kas-pill.is-lunas .ic { background: #22C55E; color: #FFFFFF; }
.kas-pill.is-belum, .kas-pill.is-tunggu { background: rgb(251 191 36 / 0.2); color: #FCD34D; }
.kas-pill.is-belum .ic, .kas-pill.is-tunggu .ic { background: #F59E0B; color: #FFFFFF; }
.kas-hero__dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--space-4); border-top: 1px solid rgb(255 255 255 / 0.2); }
.kas-hero__dua > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kas-hero__dua > div + div { padding-left: var(--space-4); border-left: 1px solid rgb(255 255 255 / 0.2); }
.kas-hero__dua span { font-size: var(--text-sm); color: rgb(255 255 255 / 0.78); overflow-wrap: anywhere; }
.kas-hero__dua b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.kas-milik { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 0 var(--space-2); color: var(--set-muted); font-size: var(--text-sm); }
.kas-milik > .ic { width: 22px; height: 22px; }
.kas-milik__l { flex: 1 1 auto; }
.kas-milik__o { color: var(--set-navy); }
.kas-milik__o b { margin-left: 4px; font-weight: 800; }
.kas-milik > i { width: 1px; height: 22px; background: var(--set-border); }
.kas-ajukan { min-height: 52px; border-radius: 16px; }
.kas-riw { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.kas-riw h2 { margin: 0; font-size: var(--text-lg); font-weight: 800; color: var(--set-navy); }
.kas-bln .select { min-height: 44px; border-radius: 14px; padding-inline: 14px 36px; }
.kas-it { gap: var(--space-3); }
.kas-it__top { display: flex; align-items: flex-start; gap: var(--space-3); }
.kas-it__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--set-soft); color: var(--set-primary); }
.kas-it__t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kas-it__t b { font-size: var(--text-md); font-weight: 800; color: var(--set-navy); overflow-wrap: anywhere; }
.kas-it__t small { font-size: var(--text-sm); color: var(--set-muted); }
.kas-it__nom { margin-top: 4px; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--set-navy); font-variant-numeric: tabular-nums; }
.kas-it__porsi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-3) var(--space-4); border-radius: 14px; background: color-mix(in oklab, #F59E0B 12%, var(--set-surface)); }
.kas-it__porsi > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kas-it__porsi > div + div { padding-left: var(--space-4); border-left: 1px solid color-mix(in oklab, #F59E0B 35%, transparent); }
.kas-it__porsi span { font-size: var(--text-sm); color: color-mix(in oklab, #92400E 80%, var(--set-navy)); }
.kas-it__porsi b { font-size: var(--text-lg); font-weight: 800; color: #7C2D12; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .kas-it__porsi span { color: #FCD34D; }
:root[data-theme="dark"] .kas-it__porsi b { color: #FDE68A; }
.kas-it__porsi { gap: 8px; padding: 8px; }    
.kas-it__porsi > div { padding: 8px 10px; border-radius: 10px; }
.kas-it__porsi > div + div { padding-left: 10px; border-left: 0; }
.kas-it__porsi small { font-size: var(--text-xs); font-weight: 700; }
.kas-it__porsi > .is-pengaju small { color: color-mix(in oklab, #92400E 70%, var(--set-muted)); font-weight: 600; }
.kas-it__porsi > .is-harus { background: #FEE2E2; box-shadow: inset 0 0 0 1.5px #FCA5A5; }
.kas-it__porsi > .is-harus span, .kas-it__porsi > .is-harus small { color: #B91C1C; }
.kas-it__porsi > .is-harus b { color: #991B1B; }
.kas-it__porsi > .is-lunas { background: color-mix(in oklab, var(--c-win) 14%, var(--set-surface)); }
.kas-it__porsi > .is-lunas span, .kas-it__porsi > .is-lunas small, .kas-it__porsi > .is-lunas b { color: var(--c-win); }
:root[data-theme="dark"] .kas-it__porsi > .is-harus { background: rgb(220 38 38 / 0.22); box-shadow: inset 0 0 0 1.5px rgb(248 113 113 / 0.6); }
:root[data-theme="dark"] .kas-it__porsi > .is-harus span, :root[data-theme="dark"] .kas-it__porsi > .is-harus small, :root[data-theme="dark"] .kas-it__porsi > .is-harus b { color: #FCA5A5; }
.kas-it__st { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--set-muted); }
.kas-it__st .ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--set-bg); }
.kas-it__st.is-ok { color: var(--c-win); }
.kas-it__st.is-ok .ic { background: var(--c-win); color: #FFFFFF; }
.kas-it__st.is-tunggu { color: #B45309; }
.kas-it__st.is-tunggu .ic { background: #F59E0B; color: #FFFFFF; }
.kas-it__st.is-info { color: var(--set-primary); }
.kas-it__st.is-tolak { color: var(--c-loss); }
:root[data-theme="dark"] .kas-it__st.is-tunggu { color: #FCD34D; }
.kas-it__det { border-top: 1px solid var(--set-border); padding-top: var(--space-1); }
.kas-it__det > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; list-style: none; cursor: pointer; color: var(--set-navy); }
.kas-it__det > summary::-webkit-details-marker { display: none; }
.kas-it__det > summary > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.kas-it__det > summary small { font-size: var(--text-xs); color: var(--set-muted); }
.kas-it__det > summary > .ic:last-child { transition: transform var(--dur-micro) var(--ease-out); }
.kas-it__det[open] > summary > .ic:last-child { transform: rotate(180deg); }
.kas-it__det > summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 10px; }
.kas-it__isi { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-2); }
.kas-catat { display: flex; justify-content: center; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--set-muted); text-align: center; }
 
.kas-kunci { align-items: stretch; text-align: left; }
.kas-kunci__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--set-soft); color: var(--set-primary); }
.kas-ring { gap: var(--space-3); }
.kas-ring__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px var(--space-3); }
.kas-ring__row span { font-size: var(--text-sm); color: var(--set-muted); }
.kas-ring__row b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.kas-ring__row small { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--set-muted); }
.kas-ring__row.is-utang b { color: var(--c-loss); }
.kas-ring__row.is-piutang b { color: var(--c-win); }
.kas-nom { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--space-2); margin: 0; }
.kas-nom b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.kas-nom span { font-size: var(--text-sm); color: var(--set-muted); }
.kas-rek { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: 12px; background: var(--set-bg); font-size: var(--text-sm); overflow-wrap: anywhere; }
.kas-rek > span { flex: 1 1 160px; min-width: 0; }
.kas-rek .btn { min-height: 40px; }
.kas-fs { margin: 0; padding: 0; border: 0; }
.kas-img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; background: #0B1220; }
.kas-catat { display: flex; gap: var(--space-2); align-items: flex-start; }
.kas-catat .ic { flex: none; margin-top: 2px; }
.tk-tabs { display: flex; width: 100%; }    
.tk-tabs button { flex: 1 0 0; min-width: max-content; min-height: 40px; gap: 5px; padding-inline: 6px; white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 400px) { .tk-tabs.is-4 button { gap: 3px; padding-inline: 3px; font-size: 0.8rem; } }    
.tk-n { flex: none; white-space: nowrap; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--chat-unread, var(--c-loss)); color: var(--chat-unread-ink, #FFFFFF); font-style: normal; font-weight: 800; font-size: 10px; line-height: 1; }
.tk-tim__list { margin: 0; padding: 0; list-style: none; }
.tk-tim__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-bottom: 1px solid var(--set-border); }
.tk-tim__list li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.tk-tim__list small { font-size: var(--text-xs); color: var(--set-muted); overflow-wrap: anywhere; }
.tk-tim__list .btn { flex: none; min-height: 44px; }
.tk-tim__add { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.tk-tim__add .btn { min-height: 44px; }
.tk-alasan-pil { margin-block: var(--space-3); }
 
.tk-masukan { display: flex; gap: var(--space-3); margin: 0; padding: var(--space-3); border: 1px solid var(--c-kuning-garis); border-radius: 12px; background: var(--c-kuning-bg); color: var(--c-kuning-ink); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.tk-masukan[hidden] { display: none; }
.tk-masukan > .ic { flex: none; width: 26px; height: 26px; color: var(--c-kuning-ic); stroke-width: 2.4; }
.tk-masukan > div { min-width: 0; }
.tk-masukan b { display: block; }
.tk-masukan p { margin: 0; }
.tk-masukan .input { flex: 1; min-width: 0; border-color: var(--c-kuning-garis); background: transparent; color: inherit; resize: vertical; }
 
.tk-vid-w { position: relative; }
.tk-seru { position: absolute; top: -12px; right: -12px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 3px solid var(--c-card); border-radius: 50%; background: var(--c-kuning-isi); color: var(--c-kuning-seru); box-shadow: 0 4px 12px rgb(15 23 42 / 0.35); cursor: pointer; animation: tkSeru 1.2s ease-in-out 2; }
.tk-seru::before { content: ""; position: absolute; inset: -7px; }
.tk-seru .ic { width: 26px; height: 26px; stroke-width: 3; }
.tk-seru .ic circle { display: none; }
.tk-seru:hover { filter: brightness(1.05); }
.tk-seru:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
@keyframes tkSeru { 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .tk-seru { animation: none; } }
.tk-kilat-chip { display: inline-flex; align-items: center; gap: 4px; }
.tk-kilat-chip .ic { width: 14px; height: 14px; }
.tk-kilat .switch { min-height: 44px; }
.tk-kilat__st { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; font-size: var(--text-sm); }
.tk-kilat__st i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-rule-2); }
.tk-kilat__st i.is-on { background: var(--c-win, var(--c-accent)); }
.tk-kilat code { overflow-wrap: anywhere; }
.tk-alasan-pil > .btn[aria-checked="true"] { --btn-bg: var(--c-accent-dim); --btn-fg: var(--c-accent-text); box-shadow: inset 3px 0 0 var(--c-accent); }


.tk-card { border: 0; border-radius: 0; background: var(--x-card); color: var(--x-ink); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.tk-kode { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.3rem; line-height: 1; letter-spacing: 0.01em; }
.tk-meta b { color: var(--x-ink); }
.tk-alasan, .kas-rek { border-radius: 0; background: var(--x-chip); box-shadow: inset 4px 0 0 var(--x-lime); }
.tk-vid, .kas-img { border-radius: 0; }
.tk-pakai__top b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.6rem; }
.tk-pakai__bar { height: 10px; border: 0; border-radius: 0; background: var(--x-chip); }
.tk-pakai__bar i { border-radius: 0; background: var(--x-lime); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.tk-pakai__bar.is-penuh i { background: var(--c-loss); }
.tk-pakai__list li, .tk-tim__list li { border-color: var(--x-line); }
.tk-pakai__n b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.15rem; }
.tk-masukan { border-radius: 0; }
 
.tk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.tk-grid > li { min-width: 0; }
.tk-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--x-ink); text-decoration: none; }
.tk-tile__m { position: relative; display: grid; place-items: center; aspect-ratio: 9 / 16; overflow: hidden; background: var(--x-navy); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.tk-tile__m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.tk-tile__m.is-ada video { opacity: 1; }
.tk-tile__play { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in oklab, var(--x-navy) 60%, transparent); color: #FFFFFF; }
.tk-tile__play .ic { width: 18px; height: 18px; margin-left: 2px; }
.tk-tile__mati { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; text-align: center; color: rgb(255 255 255 / 0.72); font-size: 11px; line-height: 1.3; }
.tk-tile__mati .ic { width: 22px; height: 22px; }
.tk-tile__asal { position: absolute; z-index: 1; top: 6px; left: 6px; display: grid; place-items: center; width: 26px; height: 22px; background: var(--x-navy); color: var(--x-lime); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.tk-tile__baru { position: absolute; z-index: 1; top: 6px; right: 6px; padding: 2px 7px; background: var(--x-lime); color: var(--x-lime-ink); font: italic 800 11px/1.3 var(--font-sport); text-transform: uppercase; }
.tk-tile__dur { position: absolute; z-index: 1; right: 6px; bottom: 6px; padding: 1px 6px; background: color-mix(in oklab, var(--x-navy) 78%, transparent); color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 1.5; }
.tk-tile__t, .tk-tile__s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-tile__t { font-weight: 700; font-size: var(--text-sm); line-height: 1.25; }
.tk-tile__s { font-size: 11px; line-height: 1.3; color: var(--x-muted); }
.tk-tile:hover .tk-tile__m { box-shadow: inset 0 0 0 2px var(--x-lime); }
.tk-tile:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.tk-balik { align-self: flex-start; min-height: 44px; }
 
.tk-aksi { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1); }
.tk-aksi__dua { display: flex; gap: var(--space-2); }
.tk-aksi__dua > .btn { flex: 1 1 0; min-width: 0; }
.tk-aksi .btn { min-height: 44px; white-space: nowrap; }
.tk-card .btn-danger:where(:not(.btn-icon)) { --btn-bg: var(--c-loss); --btn-fg: #FFFFFF; }    
.tk-card .btn-danger:where(:not(.btn-icon)):hover { --btn-bg: color-mix(in oklab, var(--c-loss) 86%, var(--x-navy)); }
:root[data-theme="dark"] .tk-card .btn-danger:where(:not(.btn-icon)) { --btn-bg: color-mix(in oklch, var(--c-loss) 76%, black); }    
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tk-card .btn-danger:where(:not(.btn-icon)) { --btn-bg: color-mix(in oklch, var(--c-loss) 76%, black); } }
.tk-kilat__st i { border-radius: 0; transform: skewX(-14deg); }
.kas-hero { border-radius: 0; box-shadow: inset 0 -5px 0 var(--x-lime); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.kas-hero__lbl, .kas-hero__dua span { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; }
.kas-hero__total { font-family: var(--font-sport); font-style: italic; font-size: clamp(2.4rem, 11vw, 3.2rem); line-height: 0.95; }
.kas-hero__dua b, .kas-it__nom, .kas-it__porsi b, .kas-ring__row b, .kas-nom b { font-family: var(--font-sport); font-style: italic; font-weight: 800; }
.kas-pill { min-height: 32px; padding: 4px 16px 4px 12px; border-radius: 0; clip-path: var(--x-jg); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; }
.kas-pill .ic { border-radius: 0; background: none !important; padding: 0; width: 18px; height: 18px; color: currentColor !important; }
.kas-pill.is-lunas { background: var(--x-lime); color: var(--x-lime-ink); }
.kas-pill.is-belum, .kas-pill.is-tunggu { background: #F59E0B; color: #1A1206; }
.kas-ajukan { border-radius: 0; }
.kas-it__ic, .kas-kunci__ic { width: 50px; height: 44px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-navy); color: var(--x-lime); }
.kas-it__t b { color: var(--x-ink); }
.kas-it__nom { color: var(--x-ink); font-size: clamp(1.3rem, 6vw, 1.6rem); white-space: nowrap; }
.kas-it__porsi, .kas-it__porsi > div { border-radius: 0; }
.kas-it__st .ic { border-radius: 0; clip-path: var(--x-jg); width: 26px; }
.kas-riw h2 { position: relative; padding-left: 15px; color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; }
.kas-riw h2::before { content: ""; position: absolute; left: 2px; top: 0.04em; bottom: 0.1em; width: 5px; background: var(--x-lime); transform: skewX(-14deg); }
.kas-it__det { border-top-color: var(--x-line); }
.kas-it__det > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); border-radius: 0; }



.bk-atas { display: grid; width: 100%; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 4px; margin-bottom: var(--space-3); }
.bk-atas button { min-height: 44px; gap: 6px; }
 
.brand__mitra { display: inline-flex; align-items: center; padding: 3px 12px 3px 10px; background: var(--x-lime); color: var(--x-lime-ink); clip-path: var(--x-jg);
  font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; }



.rc-view { --rc-ok: var(--c-win); --rc-telat: var(--c-loss); --rc-proses: var(--c-info); --rc-nanti: var(--x-navy); --rc-nanti-ink: oklch(97% 0.006 250);
  --rc-ok-ink: #FFFFFF; --rc-telat-ink: #FFFFFF; --rc-proses-ink: #FFFFFF; --rc-ok-hi: oklch(80% 0.17 150); --rc-proses-hi: oklch(78% 0.11 230); }
:root[data-theme="dark"] :is(.rc-view, .rc-pil) { --rc-nanti: var(--x-tag); --rc-nanti-ink: var(--x-tag-ink); --rc-ok-ink: var(--x-lime-ink); --rc-telat-ink: var(--x-lime-ink); --rc-proses-ink: var(--x-lime-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.rc-view, .rc-pil) { --rc-nanti: var(--x-tag); --rc-nanti-ink: var(--x-tag-ink); --rc-ok-ink: var(--x-lime-ink); --rc-telat-ink: var(--x-lime-ink); --rc-proses-ink: var(--x-lime-ink); } }
.rc-view { display: flex; flex-direction: column; gap: var(--space-4); }
.rc-view .set-head h1 small { display: block; color: var(--x-muted); font-size: var(--text-sm); font-weight: 600; }
.rc-hero { display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 -5px 0 var(--x-lime); }
.rc-hero__k { color: var(--x-lime); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; }
.rc-hero__n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.rc-hero__n b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: clamp(2.6rem, 12vw, 3.4rem); line-height: 0.9; font-variant-numeric: tabular-nums; }
.rc-hero__n span { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; color: oklch(84% 0.02 250); }
.rc-bar { display: flex; height: 12px; margin: 4px 6px 6px; background: oklch(100% 0 0 / 0.14); transform: skewX(-14deg); overflow: hidden; }
.rc-bar i { display: block; height: 100%; }
.rc-bar .is-ok { background: var(--rc-ok-hi); }
.rc-bar .is-proses { background: var(--rc-proses-hi); }
.rc-stat--ok { --sp-acc: var(--rc-ok); }
.rc-stat--proses { --sp-acc: var(--rc-proses); }
.rc-tambah { width: 100%; }
.rc-ctl { display: grid; gap: 8px; }
.rc-seg { display: grid; width: 100%; padding: 4px; }
.set-view .rc-seg { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-radius: 0; background: var(--x-chip); }
.rc-seg :is(button, label) { min-height: 44px; gap: 6px; }
.rc-seg__n { min-width: 22px; padding: 1px 6px; background: var(--x-card); color: var(--x-ink); font-family: var(--font-display); font-style: normal; font-weight: 800; font-size: 0.75rem; line-height: 1.4; text-align: center; }

 
.rc-tl { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rc-tl::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--x-line); }
.rc-bln { position: relative; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; padding: 6px 0 2px; background: var(--set-bg); }
.rc-bln .sp-head { margin: 0; font-size: 1.35rem; }
.rc-bln > span { color: var(--x-muted); font-size: var(--text-sm); font-weight: 700; }
.rc-kini { position: relative; display: flex; align-items: center; gap: 8px; margin: 2px 0; background: var(--set-bg); }
.rc-kini::after { content: ""; flex: 1; height: 3px; background: var(--x-lime); transform: skewX(-14deg); }
.rc-kini span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 10px; background: var(--x-lime); color: var(--x-lime-ink); clip-path: var(--x-jg);
  font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; white-space: nowrap; }
.rc-it { --rc-c: var(--rc-nanti); --rc-bar: var(--rc-nanti); position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; }
.rc-it.is-hari { --rc-bar: var(--x-lime); }
.rc-it.is-proses { --rc-c: var(--rc-proses); --rc-bar: var(--rc-proses); }
.rc-it.is-telat { --rc-c: var(--rc-telat); --rc-bar: var(--rc-telat); }
.rc-it.is-ok { --rc-c: var(--rc-ok); --rc-bar: var(--rc-ok); }
.rc-cek { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 6px; padding: 0; border: 0; background: none; color: transparent; cursor: pointer; }
.rc-cek::before { content: ""; position: absolute; inset: 8px 6px; background: var(--x-card); box-shadow: inset 0 0 0 2.5px var(--rc-c); transform: skewX(-12deg); }
.rc-cek .ic { position: relative; width: 18px; height: 18px; stroke-width: 3.2; }
.rc-cek:hover { color: color-mix(in oklab, var(--rc-c) 55%, transparent); }
.rc-it.is-proses .rc-cek { color: var(--rc-proses); }
.rc-it.is-proses .rc-cek .ic { width: 14px; height: 14px; }
.rc-it.is-ok .rc-cek { color: var(--rc-ok-ink); }
.rc-it.is-ok .rc-cek::before { background: var(--rc-ok); box-shadow: none; }
.rc-cek:focus-visible { outline: none; }
.rc-cek:focus-visible::before { box-shadow: inset 0 0 0 2.5px var(--rc-c), 0 0 0 3px var(--c-focus); }
.rc-it__k { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px 12px 16px; background: var(--x-card); color: var(--x-ink);
  box-shadow: inset 4px 0 0 var(--rc-bar), inset 0 0 0 1px var(--x-line); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.rc-it.is-telat .rc-it__k { background: color-mix(in oklab, var(--rc-telat) 7%, var(--x-card)); }
.rc-it.is-ok .rc-it__k { background: color-mix(in oklab, var(--rc-ok) 9%, var(--x-card)); }
.rc-it.is-baru .rc-it__k { animation: rc-sorot 2.2s ease-out; }
@keyframes rc-sorot { 0%, 35% { box-shadow: inset 4px 0 0 var(--rc-bar), inset 0 0 0 3px var(--x-lime); } 100% { box-shadow: inset 4px 0 0 var(--rc-bar), inset 0 0 0 1px var(--x-line); } }
@media (prefers-reduced-motion: reduce) { .rc-it.is-baru .rc-it__k { animation: none; box-shadow: inset 4px 0 0 var(--rc-bar), inset 0 0 0 3px var(--x-lime); } }
.rc-it__top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rc-tgl { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 13px 2px 11px; background: var(--x-date); color: var(--x-date-ink); clip-path: var(--x-jg);
  font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.85rem; line-height: 1.35; text-transform: uppercase; white-space: nowrap; }
.rc-tgl b { color: var(--x-date-num); font-size: 1.05rem; }
.rc-jenis { padding: 2px 13px; background: var(--x-chip); color: var(--x-chip-ink); clip-path: var(--x-jg); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.82rem; line-height: 1.5; text-transform: uppercase; }
.rc-jenis.is-event { background: var(--x-tag); color: var(--x-tag-ink); }
.rc-st { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 12px; background: var(--x-chip); color: var(--x-ink); clip-path: var(--x-jg);
  font-size: var(--text-xs); font-weight: 800; line-height: 1.6; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.rc-st .ic { width: 14px; height: 14px; }
.rc-st.is-telat { background: var(--c-live-solid); color: #FFFFFF; }
.rc-st.is-hari { background: var(--x-lime); color: var(--x-lime-ink); }
.rc-it__j { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.3; color: var(--x-ink); overflow-wrap: anywhere; }
.rc-it.is-ok .rc-it__j { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in oklab, var(--rc-ok) 65%, transparent); }
.rc-it__meta { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--x-muted); font-size: var(--text-sm); }
.rc-it__meta .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.rc-it__cat { margin: 0; color: var(--x-ink); font-size: var(--text-sm); white-space: pre-line; overflow-wrap: anywhere; }
.rc-it__aksi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rc-it__aksi .btn { max-width: 100%; }
.rc-it__aksi .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-ubah { margin-left: auto; }
.btn.rc-sbtn { --btn-bg: var(--rc-nanti); --btn-fg: var(--rc-nanti-ink); --btn-bd: transparent; }
.btn.rc-sbtn.is-proses { --btn-bg: var(--rc-proses); --btn-fg: var(--rc-proses-ink); }
.btn.rc-sbtn.is-selesai { --btn-bg: var(--rc-ok); --btn-fg: var(--rc-ok-ink); }
.btn.rc-sbtn > .ic:last-child { width: 14px; height: 14px; opacity: 0.8; }
.rc-it__oleh { margin: 0; color: var(--x-muted); font-size: var(--text-xs); }

 
.rc-cal { display: flex; flex-direction: column; gap: 10px; padding: 12px 10px 14px; }
.rc-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; }
.rc-nav .sp-head { justify-self: center; margin: 0; font-size: 1.4rem; text-align: center; }
.rc-nav .btn-icon { width: 44px; min-width: 44px; min-height: 44px; border-radius: 0; clip-path: var(--x-jg); --btn-bg: var(--x-chip); --btn-fg: var(--x-ink); }
.rc-cal__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.rc-cal__w { padding: 2px 0 4px; color: var(--x-muted); font-size: var(--text-xs); font-weight: 800; text-align: center; text-transform: uppercase; }
.rc-d { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; min-height: 52px; padding: 7px 0 5px; border: 0; background: var(--x-chip); color: var(--x-ink); font: inherit; cursor: pointer; }
.rc-d b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.05rem; line-height: 1; }
.rc-d__m { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; min-height: 8px; }
.rc-d__m small { color: var(--x-muted); font-size: 0.65rem; font-weight: 800; line-height: 1; }
:is(.rc-d__m, .rc-leg) i { display: block; width: 8px; height: 8px; background: var(--rc-nanti); transform: skewX(-14deg); }
:is(.rc-d__m, .rc-leg) i.is-ok { background: var(--rc-ok); }
:is(.rc-d__m, .rc-leg) i.is-telat { background: var(--rc-telat); }
:is(.rc-d__m, .rc-leg) i.is-proses { background: var(--rc-proses); }
:is(.rc-d__m, .rc-leg) i.is-hari { background: var(--x-lime); box-shadow: inset 0 0 0 1.5px var(--x-lime-ink); }
.rc-d.has-telat { box-shadow: inset 0 -3px 0 var(--rc-telat); }
.rc-d.is-kini { background: var(--x-lime); color: var(--x-lime-ink); }
.rc-d.is-pilih { background: var(--x-navy); color: oklch(97% 0.006 250); box-shadow: inset 0 0 0 2px var(--x-lime); }
.rc-d.is-pilih .rc-d__m i.is-nanti { background: oklch(97% 0.006 250); }
.rc-d.is-pilih .rc-d__m small { color: oklch(84% 0.02 250); }
.rc-d.is-kini.is-pilih b { color: var(--x-lime); }
.rc-d:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
@media (max-width: 379px) { .rc-cal { margin-inline: calc(-1 * var(--space-4)); padding-inline: 4px; } .rc-cal__g { gap: 2px; } .rc-cal > :not(.rc-cal__g) { padding-inline: 8px; } }    
.rc-cal__kaki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rc-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; color: var(--x-muted); font-size: var(--text-xs); font-weight: 700; }
.rc-leg li { display: inline-flex; align-items: center; gap: 6px; }
.rc-hari { display: flex; flex-direction: column; gap: 10px; }
.rc-hari > .sp-head { margin: 2px 0 0; font-size: 1.25rem; }
.rc-kosong { margin: 0; color: var(--x-muted); }

 
.rc-thn { display: flex; flex-direction: column; gap: 10px; }
.rc-thn__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .rc-thn__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rc-mini { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 8px 10px 10px; border: 0; background: var(--x-card); color: var(--x-ink); font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--x-line); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.rc-mini.is-bln-kini { box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line); }
.rc-mini:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.rc-mini__h { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; }
.rc-mini__h b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; text-transform: uppercase; }
.rc-mini__n { min-width: 24px; padding: 1px 7px; background: var(--x-navy); color: var(--x-lime); clip-path: var(--x-jg); font-style: normal; font-weight: 800; font-size: 0.75rem; text-align: center; }
.rc-mini__n.is-telat { background: var(--c-live-solid); color: #FFFFFF; }
.rc-mini__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.rc-mini__g i { display: grid; place-items: center; aspect-ratio: 1; color: var(--x-muted); font-style: normal; font-size: 0.6rem; font-weight: 700; line-height: 1; }
.rc-mini__g i.rc-mini__w { aspect-ratio: auto; padding-bottom: 2px; font-weight: 800; }
.rc-mini__g i.is-ok { background: var(--rc-ok); color: var(--rc-ok-ink); }
.rc-mini__g i.is-telat { background: var(--rc-telat); color: var(--rc-telat-ink); }
.rc-mini__g i.is-proses { background: var(--rc-proses); color: var(--rc-proses-ink); }
.rc-mini__g i.is-nanti { background: var(--rc-nanti); color: var(--rc-nanti-ink); }
.rc-mini__g i.is-hari { background: var(--x-lime); color: var(--x-lime-ink); }
.rc-mini__g i.is-kini { box-shadow: inset 0 0 0 2px var(--x-ink); color: var(--x-ink); font-weight: 800; }

 
.rc-pil__j { margin: 0 0 10px; color: var(--x-muted); font-weight: 700; overflow-wrap: anywhere; }
.rc-pil { --rc-ok: var(--c-win); --rc-proses: var(--c-info); --rc-nanti: var(--x-navy); --rc-nanti-ink: oklch(97% 0.006 250); --rc-ok-ink: #FFFFFF; --rc-proses-ink: #FFFFFF; display: flex; flex-direction: column; gap: 8px; }
.rc-pil__o { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px 8px 10px; border: 0; background: var(--x-chip); color: var(--x-ink); font: inherit; text-align: left; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.rc-pil__o[aria-checked="true"] { box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 2px var(--x-line); }
.rc-pil__o:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.rc-pil__ic { flex: none; display: grid; place-items: center; width: 46px; height: 40px; background: var(--rc-nanti); color: var(--rc-nanti-ink); clip-path: var(--x-jg); }
.rc-pil__o.is-proses .rc-pil__ic { background: var(--rc-proses); color: var(--rc-proses-ink); }
.rc-pil__o.is-selesai .rc-pil__ic { background: var(--rc-ok); color: var(--rc-ok-ink); }
.rc-pil__ic .ic { width: 20px; height: 20px; }
.rc-pil__t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.rc-pil__t b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; }
.rc-pil__t small { color: var(--x-muted); font-size: var(--text-sm); }
.rc-pil__v { flex: none; width: 22px; height: 22px; color: var(--x-ink); }
.rc-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.rc-form .label { font-family: var(--font-display); font-style: normal; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; }
.rc-form .rc-seg { position: relative; }
.rc-tau { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 44px; align-items: center; gap: 6px; }
@media (max-width: 420px) { .rc-tau { grid-template-columns: minmax(0, 1fr) 44px; } .rc-tau [name="tu"] { grid-column: 1; } .rc-tau [data-rc-tau-x] { grid-column: 2; grid-row: 1 / span 2; } }
.rc-tau-plus { margin-top: 6px; }
.rc-tau .btn-icon { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }

 
.bhs-pil { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 0; color: var(--c-muted); font-size: var(--text-sm); }
.bhs-pil button { min-height: 44px; padding: 0 var(--space-3); background: none; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: var(--radius-md, 10px); }
.bhs-pil button[aria-pressed="true"] { color: var(--c-accent-text); font-weight: 700; }





:root, :is(.gen-mabar, .kom-page, .pseg.is-3, .gen-pemain, .pm-page, .klasemen, .pwa-sporty) {    
  --x-cut: 14px; --x-jg: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); --x-jg-b: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  --x-lime: oklch(91% 0.2 122); --x-lime-hi: oklch(95% 0.16 118); --x-lime-ink: oklch(18% 0.045 262);
  --x-navy: oklch(18% 0.055 262);
  --x-card: oklch(100% 0 0); --x-ink: oklch(19% 0.045 262); --x-muted: oklch(40% 0.03 258);
  --x-line: oklch(86% 0.025 255); --x-tag: oklch(92% 0.055 232); --x-tag-ink: oklch(30% 0.1 250);
  --x-chip: oklch(92.5% 0.016 252); --x-chip-ink: oklch(27% 0.04 260); --x-date: var(--x-navy); --x-date-ink: oklch(96% 0.006 250); --x-date-num: var(--x-lime);
  --x-foto: 0.3; --x-ghost: oklch(19% 0.045 262 / 0.07); --x-ghost-ink: oklch(19% 0.045 262);
}
:root[data-theme="dark"], :root[data-theme="dark"] :is(.gen-mabar, .kom-page, .pseg.is-3, .gen-pemain, .pm-page, .klasemen, .pwa-sporty) {
  --x-card: oklch(23% 0.065 260); --x-ink: oklch(97% 0.006 250); --x-muted: oklch(80% 0.02 250); --x-line: oklch(44% 0.08 256 / 0.6);
  --x-tag: oklch(84% 0.085 225); --x-tag-ink: oklch(20% 0.05 262); --x-chip: oklch(100% 0 0 / 0.085); --x-chip-ink: oklch(94% 0.01 250);
  --x-date: oklch(15% 0.045 262); --x-foto: 0.55; --x-ghost: oklch(100% 0 0 / 0.1); --x-ghost-ink: oklch(97% 0.006 250);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root:not([data-theme="light"]) :is(.gen-mabar, .kom-page, .pseg.is-3, .gen-pemain, .pm-page, .klasemen, .pwa-sporty) {
  --x-card: oklch(23% 0.065 260); --x-ink: oklch(97% 0.006 250); --x-muted: oklch(80% 0.02 250); --x-line: oklch(44% 0.08 256 / 0.6);
  --x-tag: oklch(84% 0.085 225); --x-tag-ink: oklch(20% 0.05 262); --x-chip: oklch(100% 0 0 / 0.085); --x-chip-ink: oklch(94% 0.01 250);
  --x-date: oklch(15% 0.045 262); --x-foto: 0.55; --x-ghost: oklch(100% 0 0 / 0.1); --x-ghost-ink: oklch(97% 0.006 250); } }
 
:is(.gen-mabar, .kom-page) :is(.mhero__title, .mhero__sub, .mfilter button, .section-head h2, .mcard__date, .mcard__seat, .mcard__comm b, .mcard__btn, .kom-head h1, .kom-new, .pseg a, .kom-chip, .kom-sec__h h2, .kom-count, .kc__name, .kc__brand > b, .kc__role, .kc__go, .kc__foot .btn, [data-mf-count]) { font-family: var(--font-sport); font-style: italic; font-weight: 800; letter-spacing: 0.005em; }
 
:is(.gen-mabar, .kom-page) :is(.mhero__cta .btn, .mcard__btn, .kom-new, .kc__go, .kc__foot .btn) { border-radius: 0; clip-path: var(--x-jg-b); text-transform: uppercase; box-shadow: none; background-image: none; }
:is(.gen-mabar, .kom-page) :is(.mhero__cta .btn-primary, .mcard__btn.btn-primary, .kom-new, .kc__foot .btn-primary) { --btn-bg: var(--x-lime); --btn-fg: var(--x-lime-ink); --btn-bd: transparent; --btn-sh: none; }
:is(.gen-mabar, .kom-page) :is(.mhero__cta .btn-primary, .mcard__btn.btn-primary, .kom-new, .kc__foot .btn-primary):hover { --btn-bg: var(--x-lime-hi); --btn-bd: transparent; }
:is(.gen-mabar, .kom-page) :is(.mcard__btn.btn-ghost, .kc__go, .kc__foot .btn-ghost) { --btn-bg: var(--x-ghost); --btn-fg: var(--x-ghost-ink); --btn-bd: transparent; --btn-sh: none; }
:is(.gen-mabar, .kom-page) :is(.mhero__cta .btn, .kom-new, .kc__go, .kc__foot .btn, .mfilter button, .kom-chip, .pseg a, .kom-sort):focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }

 
.gen-mabar .mhero.has-photo { --mh-dasar: var(--x-navy); min-height: 380px; border-radius: 0; box-shadow: none; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.gen-mabar .mhero.has-photo::before { height: 250px; background-image: url("../assets/foto/lp-hero.webp"); background-position: 74% 38%; }
.gen-mabar .mhero.has-photo::after, .gen-mabar .mhero.has-photo:has(.mhero__sub)::after { background: linear-gradient(180deg, transparent 86px, color-mix(in oklab, var(--mh-dasar) 74%, transparent) 150px, var(--mh-dasar) 214px); }
.gen-mabar .mhero.has-photo .mhero__title { position: relative; max-width: 10ch; padding-left: 20px; font-size: clamp(2.4rem, 11.5vw, 3.25rem); line-height: 0.9; letter-spacing: 0; text-transform: uppercase; text-shadow: 0 2px 16px rgb(4 13 32 / 0.55); }
.gen-mabar .mhero.has-photo .mhero__title::before { content: ""; position: absolute; left: 2px; top: 0.06em; bottom: 0.1em; width: 7px; background: var(--x-lime); transform: skewX(-14deg); }
.gen-mabar .mhero.has-photo .mhero__sub { align-self: flex-start; gap: 7px; margin-top: 10px; padding: 5px 18px; background: var(--x-lime); color: var(--x-lime-ink); clip-path: var(--x-jg); font-size: 1.05rem; }
.gen-mabar .mhero.has-photo .mhero__sub .ic { color: currentColor; }
.gen-mabar .mhero.has-photo .mhero__search { min-height: 50px; margin-top: 14px; padding: 0 22px; border-radius: 0; clip-path: var(--x-jg-b); background: color-mix(in oklab, var(--mh-dasar) 88%, white); box-shadow: inset 0 -2px 0 rgb(255 255 255 / 0.28); }
.gen-mabar .mhero.has-photo .mhero__search:focus-within { outline: none; background: color-mix(in oklab, var(--mh-dasar) 80%, white); box-shadow: inset 0 -3px 0 var(--x-lime); }
.gen-mabar .mhero.has-photo .mhero__cta { gap: 10px; margin-top: 10px; }
.gen-mabar .mhero.has-photo .mhero__cta .btn { min-height: 52px; font-size: 1.15rem; }
@media (max-width: 479px) { .gen-mabar .mhero.has-photo .mhero__cta .btn { gap: 6px; padding-inline: 14px; font-size: clamp(0.85rem, 4.1vw, 1.15rem); } }
@media (max-width: 359px) { .gen-mabar .mhero.has-photo .mhero__cta .btn .ic { display: none; } }
.gen-mabar .loc-nudge { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line); clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); color: var(--x-ink); }
.gen-mabar .loc-nudge > .ic { color: var(--x-ink); }
.gen-mabar .loc-nudge .btn-primary { --btn-bg: var(--x-lime); --btn-fg: var(--x-lime-ink); --btn-bd: transparent; --btn-sh: none; border-radius: 0; clip-path: var(--x-jg); padding-inline: 16px 20px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; text-transform: uppercase; }
.gen-mabar .loc-nudge .btn-primary:hover { --btn-bg: var(--x-lime-hi); }
.gen-mabar .loc-nudge .btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-focus); }
.gen-mabar .loc-nudge__x { --btn-bg: transparent; --btn-bd: transparent; color: var(--x-muted); }
.gen-mabar .mhero.has-photo .mhero__cta .btn-ghost { --btn-bg: color-mix(in oklab, var(--mh-dasar) 88%, white);   --btn-fg: oklch(98% 0.005 250); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gen-mabar .mhero.has-photo .mhero__cta .btn-ghost:hover { --btn-bg: color-mix(in oklab, var(--mh-dasar) 80%, white); }
@media (min-width: 600px) { .gen-mabar .mhero.has-photo::before { height: 262px; } }
@media (min-width: 1000px) {
  .gen-mabar .mhero.has-photo { min-height: 330px; padding: 32px 32px 30px; }
  .gen-mabar .mhero.has-photo::before { inset: 0 0 0 auto; width: 62%; height: auto; background-position: 70% 40%; }
  .gen-mabar .mhero.has-photo::after, .gen-mabar .mhero.has-photo:has(.mhero__sub)::after { background: linear-gradient(90deg, var(--mh-dasar) 40%, color-mix(in oklab, var(--mh-dasar) 64%, transparent) 48%, transparent 62%); }
  .gen-mabar .mhero.has-photo .mhero__title { max-width: none; font-size: 4rem; }
  .gen-mabar .mhero.has-photo .mhero__search, .gen-mabar .mhero.has-photo .mhero__cta { width: 470px; }
}

 
.gen-mabar .mfilter { gap: 6px; }
:is(.gen-mabar .mfilter button, .kom-page .kom-chip) { min-height: 40px; padding: 0 18px; border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-chip-ink); font-size: 1rem; box-shadow: none; }
:is(.gen-mabar .mfilter button, .kom-page .kom-chip) .ic { color: currentColor; }
:is(.gen-mabar .mfilter button, .kom-page .kom-chip)[aria-pressed="true"] { background: var(--x-lime); color: var(--x-lime-ink); }
.gen-mabar .section-head { align-items: center; margin-bottom: 12px; }
.gen-mabar .section-head > div:first-child { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
:is(.gen-mabar .section-head h2, .kom-page .kom-sec__h h2) { color: var(--x-ink); font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.gen-mabar .section-head .kicker { position: relative; padding-left: 14px; color: var(--x-muted); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; }
.gen-mabar .section-head .kicker::before { content: ""; position: absolute; left: 2px; top: 0.1em; bottom: 0.05em; width: 4px; background: var(--x-lime); transform: skewX(-16deg); }
:is(.gen-mabar [data-mf-count], .kom-page .kom-count) { min-width: 0; height: auto; padding: 4px 14px; border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-chip-ink); font-size: 0.95rem; }

 
.gen-mabar .mlist { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.gen-mabar .mcard { padding: 1px; border: 0; border-radius: 0; background: var(--x-line); box-shadow: none; overflow: visible; clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.gen-mabar .mcard:hover { box-shadow: none; }
 
.gen-mabar .mcard.has-share { position: relative; }
.gen-mabar .mcard.has-share .mcard__date { padding-bottom: 78px; }
.gen-mabar .mcard__share { position: absolute; z-index: 2; left: 1px; bottom: 1px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; width: 64px; min-height: 66px; padding: 4px 0 12px; border: 0; background: none; color: var(--x-date-ink); font-family: var(--font-sport); font-size: 0.8rem; font-style: italic; font-weight: 800; line-height: 1; text-transform: uppercase; cursor: pointer; }
.gen-mabar .mcard__share-ic { display: grid; place-items: center; width: 46px; height: 34px; background: var(--x-lime); color: var(--x-lime-ink); clip-path: var(--x-jg); transition: background var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.gen-mabar .mcard__share:hover .mcard__share-ic { background: var(--x-lime-hi); }
.gen-mabar .mcard__share:active .mcard__share-ic { transform: scale(0.94); }
.gen-mabar .mcard__share:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.gen-mabar .mcard > a { position: relative; isolation: isolate; display: grid; grid-template-columns: 76px minmax(0, 1fr); height: 100%; overflow: hidden; background: var(--x-card); color: var(--x-ink);
  clip-path: polygon(calc(var(--x-cut) - 0.4px) 0, 100% 0, 100% calc(100% - var(--x-cut) + 0.4px), calc(100% - var(--x-cut) + 0.4px) 100%, 0 100%, 0 calc(var(--x-cut) - 0.4px)); }
.gen-mabar .mcard > a:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.gen-mabar .mcard > a::after { content: ""; position: absolute; z-index: -1; inset: 0 0 0 auto; width: 54%; background: url("../assets/foto/court-1.webp") 62% 58% / cover no-repeat; opacity: var(--x-foto); -webkit-mask-image: linear-gradient(90deg, transparent, #000 62%); mask-image: linear-gradient(90deg, transparent, #000 62%); pointer-events: none; }
.gen-mabar .mcard:has([data-court="b"]) > a::after { background-image: url("../assets/foto/court-2.webp"); background-position: 58% 52%; }
.gen-mabar .mcard__banner { display: contents; }
.gen-mabar .mcard__date { position: relative; inset: auto; left: auto; bottom: auto; grid-column: 1; grid-row: 1; width: auto; height: auto; padding: 14px 12px 14px 4px; gap: 0; border: 0; border-radius: 0; background: var(--x-date); box-shadow: none; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.gen-mabar .mcard__date small { color: var(--x-date-ink); font-size: 0.95rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.gen-mabar .mcard__date b { color: var(--x-date-num); font-size: 2.55rem; font-weight: 800; line-height: 0.95; }
.gen-mabar .mcard__seat { z-index: 2; top: 10px; right: 12px; padding: 3px 14px; border-radius: 0; clip-path: var(--x-jg); font-size: 0.95rem; }
.gen-mabar .mcard__body { grid-column: 2; grid-row: 1; gap: 5px; padding: 12px 14px 12px 14px; }
.gen-mabar .mcard__body > :first-child { margin-left: 0; padding-right: 92px; }
.gen-mabar .mcard__body > :nth-child(2) { margin-top: 4px; }
.gen-mabar .mcard__comm b { color: var(--x-ink); font-size: 1.3rem; line-height: 1.05; }
.gen-mabar .mcard__line { color: var(--x-muted); }
.gen-mabar .mcard__line .ic { color: var(--x-ink); opacity: 0.8; }
.gen-mabar .mcard .ses-meta .chip { border: 0; border-radius: 4px; background: var(--x-chip); color: var(--x-chip-ink); font-weight: 700; }
.gen-mabar .mcard .ses-meta :is(.chip-accent, .lvl-chip) { background: var(--x-tag); color: var(--x-tag-ink); }
.gen-mabar .mcard .ses-meta .fee-chip { padding-inline: 0; background: none; color: var(--x-muted); }
.gen-mabar .mcard .ses-meta .chip-win { background: color-mix(in oklab, var(--c-win) 22%, transparent); color: var(--x-ink); }
.gen-mabar .mcard__going { color: var(--x-muted); }
.gen-mabar .mcard__going .ic { color: var(--x-ink); }
.gen-mabar .mcard__btn { min-height: 44px; padding: 0 20px 0 22px; font-size: 1.05rem; }
.gen-mabar .mcard__btn:not(.is-on)::after { content: "\203A"; margin-left: 2px; font-size: 1.35em; line-height: 0; }
.gen-mabar .mcard__btn.is-on { --btn-bg: color-mix(in oklab, var(--c-win) 18%, transparent); --btn-fg: var(--x-ink); }
@media (max-width: 380px) { .gen-mabar .mcard > a { grid-template-columns: 64px minmax(0, 1fr); } .gen-mabar .mcard__share { width: 52px; font-size: 0.72rem; } .gen-mabar .mcard__share-ic { width: 40px; } .gen-mabar .mcard__date b { font-size: 2.2rem; } .gen-mabar .mcard__body > :first-child { padding-right: 0; padding-top: 22px; }
  .gen-mabar .mcard__foot { flex-wrap: wrap; row-gap: 6px; } .gen-mabar .mcard__btn { margin-left: auto; min-width: 0; padding: 0 12px 0 14px; font-size: 0.95rem; } .gen-mabar .mcard__btn::after { display: none; } }    

 
.kom-page .kom-head h1 { position: relative; padding-left: 18px; color: var(--x-ink); font-size: clamp(2.2rem, 10vw, 3rem); line-height: 0.95; text-transform: uppercase; }
.kom-page .kom-head h1::before { content: ""; position: absolute; left: 2px; top: 0.06em; bottom: 0.1em; width: 7px; background: var(--x-lime); transform: skewX(-14deg); }
.kom-page .kom-new { min-height: 44px; padding-inline: 18px 22px; font-size: 1.05rem; }
.pseg.is-3 { gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.pseg.is-3 a { font-family: var(--font-sport); font-style: italic; font-weight: 800; min-height: 44px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-chip-ink); font-size: 1.05rem; text-transform: uppercase; box-shadow: none; }
.pseg.is-3 a .ic { color: currentColor; }
.pseg.is-3 a[aria-current="page"] { background: var(--x-lime); color: var(--x-lime-ink); box-shadow: none; }
.pseg.is-3 a[aria-current="page"] .ic { color: currentColor; }
@media (max-width: 360px) { .pseg.is-3 a { gap: 4px; padding-inline: 6px; font-size: 0.92rem; } .pseg.is-3 a .ic { display: none; } }
.kom-page .kom-search .input { border: 0; border-radius: 0; clip-path: var(--x-jg-b); background: var(--x-chip); color: var(--x-ink); padding-inline: 42px 18px; box-shadow: inset 0 -2px 0 var(--x-line); }
.kom-page .kom-search .input:focus { outline: none; box-shadow: inset 0 -3px 0 var(--x-lime); }
.kom-page .kom-sort { border-radius: 0; clip-path: var(--x-jg); width: 52px; background: var(--x-chip); color: var(--x-ink); }
.kom-page .kom-sec__h { gap: 10px; }
.kom-page .kom-sec__h h2 { position: relative; padding-left: 14px; }
.kom-page .kom-sec__h h2::before { content: ""; position: absolute; left: 2px; top: 0.08em; bottom: 0.08em; width: 5px; background: var(--x-lime); transform: skewX(-14deg); }
.kom-page .kom-grid { gap: 14px; }
.kom-page .kc { padding: 1px; border: 0; border-radius: 0; background: var(--x-line); box-shadow: none; clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.kom-page .kc > :is(.kc__body, .kc__foot) { background: var(--x-card); }
.kom-page .kc > :last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--x-cut) + 0.4px), calc(100% - var(--x-cut) + 0.4px) 100%, 0 100%); }
.kom-page .kc__cover::after { background: linear-gradient(90deg, oklch(14% 0.04 260 / 0.85), oklch(14% 0.04 260 / 0.25) 70%, transparent); }
.kom-page .kc__brand > b { font-size: 1.45rem; letter-spacing: 0.01em; }
.kom-page .kc__role { border-radius: 0; clip-path: var(--x-jg); padding-inline: 14px; font-size: 0.95rem; }
.kom-page .kc__name { color: var(--x-ink); font-size: 1.4rem; line-height: 1.05; }
.kom-page .kc__meta { color: var(--x-muted); }
.kom-page .kc__chips .chip { border: 0; border-radius: 4px; background: var(--x-chip); color: var(--x-chip-ink); font-weight: 700; }
.kom-page .kc__more { color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; }
.kom-page :is(.kc__go, .kc__foot .btn) { min-height: 44px; font-size: 1.05rem; }
.kom-page .kc__foot .btn { padding-inline: 18px 22px; }
 
.kom-page .kc__foot { flex-wrap: wrap; row-gap: 10px; }
.kom-page .kc__foot .btn { flex: 1 0 auto; }
.kom-page .kom-sec__h { flex-wrap: wrap; row-gap: 8px; }
.kom-page .kom-sec__h h2 { min-width: min-content; overflow-wrap: normal; word-break: normal; }

 
.gen-mabar .mhero.has-photo .mhero__cta .btn-primary { --btn-bg: var(--x-lime); --btn-fg: var(--x-lime-ink); --btn-bd: transparent; }
.gen-mabar .mhero.has-photo .mhero__cta .btn-primary:hover { --btn-bg: var(--x-lime-hi); }
.gen-mabar .section-head > div:first-child > h2 { order: 1; }
.gen-mabar .section-head > div:first-child > .kicker { order: 2; }
.gen-mabar .mcard__comm { flex-wrap: wrap; row-gap: 2px; }
.gen-mabar .mcard__comm b { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
.kom-page .kom-search > .ic { z-index: 1; color: var(--x-muted); }
.kom-page .kc__name a { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.kom-page .kom-sec__h > .btn { border-radius: 0; clip-path: var(--x-jg-b); --btn-bg: var(--x-chip); --btn-fg: var(--x-ink); --btn-bd: transparent; --btn-sh: none; padding-inline: 16px 20px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; }
@media (max-width: 480px) { .kom-page .kc--mine .kc__go { flex: 1 1 100%; justify-content: center; } }

 
:is(.gen-pemain, .pm-page, .klasemen) .page-head h1 { position: relative; padding-left: 18px; color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: clamp(2.1rem, 9.5vw, 3rem); line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; }
:is(.gen-pemain, .pm-page, .klasemen) .page-head h1::before { content: ""; position: absolute; left: 2px; top: 0.06em; bottom: 0.1em; width: 7px; background: var(--x-lime); transform: skewX(-14deg); }
:is(.gen-mabar, .kom-page, .gen-pemain, .pm-page, .klasemen) .backlink { border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-ink); padding-inline: 18px 24px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; box-shadow: none; }
:is(.gen-mabar, .kom-page, .gen-pemain, .pm-page, .klasemen) .backlink:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-focus); }
:is(.pm-page .ptool, .klasemen) .seg button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-focus); }
:is(.gen-pemain, .pm-page, .klasemen) .page-head .kicker { color: var(--x-muted); }
:is(.gen-pemain, .pm-page) .toolbar__search .input { border: 0; border-radius: 0; clip-path: var(--x-jg-b); background: var(--x-chip); color: var(--x-ink); padding-inline: 42px 18px; box-shadow: inset 0 -2px 0 var(--x-line); }
:is(.gen-pemain, .pm-page) .toolbar__search .input:focus { outline: none; box-shadow: inset 0 -3px 0 var(--x-lime); }
:is(.gen-pemain, .pm-page) .toolbar__search > .ic { z-index: 1; color: var(--x-muted); }
:is(.pm-page .ptool, .klasemen) .seg { gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
:is(.pm-page .ptool, .klasemen) .seg button { border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-chip-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; box-shadow: none; }
:is(.pm-page .ptool, .klasemen) .seg.seg button[aria-pressed="true"] { background: var(--x-lime); color: var(--x-lime-ink); box-shadow: none; }
.klasemen .head-act > .btn { --btn-bg: var(--x-chip); --btn-fg: var(--x-ink); --btn-bd: transparent; border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-ink); padding-inline: 16px 20px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; text-transform: uppercase; box-shadow: none; }
.klasemen .head-act > .btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-focus); }
@media (min-width: 768px) { .klasemen .head-act { max-width: 470px; } }
@media (max-width: 479px) { .klasemen .head-act { flex-wrap: wrap; } .klasemen .head-act .lg-pick { flex-basis: 100%; } }
:is(.pm-page .toolbar__sort, .klasemen .lg-pick) .select { border: 0; border-radius: 0; clip-path: var(--x-jg-b); background-color: var(--x-chip); color: var(--x-ink); padding-inline: 16px 34px; box-shadow: inset 0 -2px 0 var(--x-line); }
:is(.pm-page .toolbar__sort, .klasemen .lg-pick) .select:focus { outline: none; box-shadow: inset 0 -3px 0 var(--x-lime); }
 
:is(.gen-pemain, .pm-page, .klasemen) .section-head { align-items: center; margin-bottom: 12px; }
:is(.gen-pemain, .pm-page, .klasemen) .section-head > div:first-child { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
:is(.gen-pemain, .pm-page, .klasemen) .section-head > div:first-child > h2 { order: 1; color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
:is(.gen-pemain, .pm-page, .klasemen) .section-head > div:first-child > .kicker { order: 2; position: relative; padding-left: 14px; color: var(--x-muted); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; }
:is(.gen-pemain, .pm-page, .klasemen) .section-head > div:first-child > .kicker::before { content: ""; position: absolute; left: 2px; top: 0.1em; bottom: 0.05em; width: 4px; background: var(--x-lime); transform: skewX(-16deg); }
:is(.gen-pemain, .pm-page, .klasemen) .section-head > :is(.chip, .btn) { border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-chip-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; padding: 4px 14px; box-shadow: none; }
:is(.gen-pemain, .pm-page, .klasemen) .section-head > .btn { --btn-bg: var(--x-chip); --btn-fg: var(--x-ink); --btn-bd: transparent; min-height: 44px; padding-inline: 16px 18px; text-transform: uppercase; }
 
:is(.gen-pemain, .pm-page) .ptiles { gap: 12px; }
:is(.gen-pemain, .pm-page) .ptile { padding: 1px; border: 0; border-radius: 0; background: var(--x-line); box-shadow: none; clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
:is(.gen-pemain, .pm-page) .ptile:hover { box-shadow: none; }
:is(.gen-pemain, .pm-page) .ptile:focus-visible { outline: none; background: var(--c-focus); }
 
:is(.gen-pemain, .pm-page) .ptile__body { flex: 1; padding: 10px 12px 14px; background: var(--x-card); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--x-cut) + 0.4px), calc(100% - var(--x-cut) + 0.4px) 100%, 0 100%); }
:is(.gen-pemain, .pm-page) .ptile__ovr { z-index: 1; left: 0; bottom: 10px; gap: 4px; padding: 4px 16px 3px 10px; border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); box-shadow: none; }
:is(.gen-pemain, .pm-page) .ptile__ovr b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.55rem; line-height: 1; }
:is(.gen-pemain, .pm-page) .ptile__ovr small { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.04em; }
:is(.gen-pemain, .pm-page) .ptile__rank { z-index: 1; border-radius: 0; clip-path: var(--x-jg); padding: 2px 12px; background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; }
:is(.gen-pemain, .pm-page) .ptile__name { color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.35rem; line-height: 1.05; text-transform: uppercase; }
:is(.gen-pemain, .pm-page) .ptile__meta { color: var(--x-muted); }
:is(.gen-pemain, .pm-page) .ptile__chips .chip { border: 0; border-radius: 4px; font-weight: 700; }
:is(.gen-pemain, .pm-page) .ptile__chips .ptile__comm { background: var(--x-chip); color: var(--x-chip-ink); }
 
.gen-pemain .gen-top { padding: 1px; background: var(--x-line); border: 0; border-radius: 0; clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.gen-pemain .gen-top li { background: var(--x-card); }
.gen-pemain .gen-top li + li { border-top-color: var(--x-line); }
.gen-pemain .gen-top .list-item__title { color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.15rem; }
:is(.gen-pemain .gen-top, .klasemen .lb-row) .lb-pos { display: inline-grid; place-items: center; min-width: 1.9rem; padding: 2px 6px; color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.25rem; font-stretch: normal; }
:is(.gen-pemain .gen-top li:nth-child(-n+3), .klasemen .lb:not(.is-muted) .lb-row:nth-child(-n+4):not(.lb-head)) .lb-pos { background: var(--x-lime); color: var(--x-lime-ink); clip-path: var(--x-jg); }
:is(.gen-pemain .gen-top, .klasemen .lb-row) .lb-elo { color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.3rem; font-stretch: normal; }
 
.klasemen .podium .podium__slot { border-radius: 0; clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.klasemen .podium .podium__slot .podium__pos { border-radius: 0; clip-path: var(--x-jg); width: auto; min-width: 34px; padding-inline: 8px; font-family: var(--font-sport); font-style: italic; font-weight: 800; }
.klasemen .podium__name { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; }
.klasemen .podium__elo { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.6rem; }
.klasemen .lb { padding: 1px; border: 0; border-radius: 0; background: var(--x-line); box-shadow: none; clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.klasemen .lb-row { background: var(--x-card); }
.klasemen .lb-row + .lb-row { border-top-color: var(--x-line); }
.klasemen .lb-head { background: var(--x-navy); color: oklch(96% 0.006 250); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; }
.klasemen .lb-head .lb-pos { background: none; color: var(--x-lime); font-size: 0.85rem; }
.klasemen .lb-name b { color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.1rem; }
.klasemen .lb-row.is-me { background: color-mix(in oklab, var(--x-lime) 22%, var(--x-card)); }
.klasemen .lg-rules { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line); clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.klasemen .lg-rules::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--x-lime); }
.klasemen .lg-rules h2 { color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.45rem; line-height: 1.05; text-transform: uppercase; }
.klasemen .lg-points > div { border: 0; border-radius: 0; clip-path: var(--x-jg-b); background: var(--x-chip); }
.klasemen .lg-points > div + div { border-left: 0; }
.klasemen .lg-points > div:first-child { background: var(--x-lime); }
.klasemen .lg-points > div:first-child :is(b, span) { color: var(--x-lime-ink); }
.klasemen .lg-points b { color: var(--x-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.9rem; }
.klasemen .lb-row.lb-head > * { color: inherit; font-family: inherit; font-size: inherit; }
.klasemen .lb-row.lb-head > .lb-pos { color: var(--x-lime); background: none; clip-path: none; }
.klasemen .lb-row .lb-pos { min-width: 0; width: 100%; padding: 1px 2px; font-size: 1.15rem; }
@media (max-width: 559px) { .klasemen .lb-row { grid-template-columns: 26px 27px minmax(0, 1fr) 45px 49px; } }
.klasemen .lg-guide__number { border-radius: 0; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; }



.tg { --kuc-bulu: #f6b46b; --kuc-garis: #8a5532; --kuc-pink: #ff9aa8; --kuc-mata: #3a2418; --kuc-baju: #0e233e; --kuc-aksen: #ccf541; --kuc-band: #c4e81c; --kuc-bulan: #ffd76a; --kuc-z: #0e233e; --kuc-raket: #0e233e;
  --kuc-panel: var(--c-card); --kuc-panel-garis: var(--c-rule-2); --kuc-panel-isi: var(--c-ink); --kuc-panel-aksen: var(--c-accent-text);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) 0 var(--space-1); text-align: center; }
:root[data-theme="dark"] .tg, .theme-dark .tg { --kuc-baju: #1d4a7a; --kuc-z: #cfe0f2; --kuc-raket: #9fb6cf; }
.tg-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-paper-3); color: var(--c-accent-text); font-size: var(--text-sm); font-weight: 700; }
.tg-anim { display: grid; place-items: center; width: 100%; }
.tg-anim .an-rally { margin-block: 12px 8px; }
.tg-jadi { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); }
.tg-jadi .ic { width: 32px; height: 32px; }
.tg-h { margin: 0; font-size: 1.12rem; font-weight: 800; color: var(--c-ink); }
.tg-sub { margin: 0; max-width: 34ch; font-size: var(--text-sm); line-height: 1.5; color: var(--c-muted); }
.tg-bar { width: min(260px, 100%); margin-top: var(--space-1); }
.tg-step { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 360px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.tg-step li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; color: var(--c-faint); }
.tg-step li + li::before { content: ""; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px; background: var(--c-rule-2); z-index: 0; }
.tg-step li.is-done + li::before { background: var(--c-accent-text); }
.tg-step__d { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-paper-3); border: 2px solid var(--c-rule-2); color: var(--c-accent-ink); }
.tg-step li.is-done { color: var(--c-ink); }
.tg-step li.is-done .tg-step__d { background: var(--c-accent); border-color: var(--c-accent); }
.tg-step li.is-now { color: var(--c-accent-text); }
.tg-step li.is-now .tg-step__d { border-color: var(--c-accent-text); background: var(--c-card); }
.tg-step li.is-now .tg-step__d::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent-text); animation: tg-denyut 1.4s ease-in-out infinite; }
@keyframes tg-denyut { 50% { transform: scale(0.55); opacity: 0.55; } }
.tg-step .ic { width: 14px; height: 14px; }
.tg-info { margin: 0; font-size: 0.8rem; color: var(--c-faint); min-height: 1.2em; }
.tg-lihat { display: grid; gap: var(--space-4); }
.tg-lihat .set-label { margin: 0; }
 
.kuc { width: min(176px, 100%); height: auto; overflow: visible; }    
.kuc * { transform-box: view-box; }
.kuc-b { fill: var(--kuc-bulu); stroke: var(--kuc-garis); stroke-width: 2.2; stroke-linejoin: round; }
.kuc-tepi { fill: none; stroke: var(--kuc-garis); stroke-width: 2.2; }
.kuc-tepi-isi { stroke: var(--kuc-garis); stroke-width: 2.2; stroke-linejoin: round; }
.kuc-pk { fill: var(--kuc-pink); }
.kuc-pipi { fill: var(--kuc-pink); opacity: 0.5; }
.kuc-m { fill: none; stroke: var(--kuc-mata); stroke-width: 2.6; stroke-linecap: round; }
.kuc-mulut { fill: none; stroke: var(--kuc-mata); stroke-width: 1.6; stroke-linecap: round; }
.kuc-mt { fill: var(--kuc-mata); }
.kuc-kilau { fill: #fff; }
.kuc-baju { fill: var(--kuc-baju); }
.kuc-aksen { fill: var(--kuc-aksen); }
.kuc-kerah { fill: none; stroke: var(--kuc-aksen); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.kuc-band { fill: var(--kuc-band); stroke: var(--kuc-garis); stroke-width: 1.6; stroke-linejoin: round; }
.kuc-ekor { fill: none; stroke: var(--kuc-bulu); stroke-width: 9; stroke-linecap: round; }
.kuc-lengan { fill: none; stroke: var(--kuc-bulu); stroke-width: 10; stroke-linecap: round; }
.kuc-bayang { fill: var(--kuc-baju); opacity: 0.12; }
.kuc-raket { fill: none; stroke: var(--kuc-raket); stroke-width: 2.6; stroke-linecap: round; }
.kuc-senar { stroke: var(--kuc-panel-garis); stroke-width: 0.8; }
.kuc-bulan, .kuc-bintang { fill: var(--kuc-bulan); }
.kuc-z text { font: 800 15px/1 system-ui, sans-serif; fill: var(--kuc-z); opacity: 0; animation: kuc-z 3.6s ease-in infinite; }
.kuc-z text:nth-child(2) { animation-delay: 1.2s; font-size: 12px; }
.kuc-z text:nth-child(3) { animation-delay: 2.4s; font-size: 10px; }
@keyframes kuc-z { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 0.9; } 100% { opacity: 0; transform: translate(14px, -34px); } }
.kuc-bintang { animation: kuc-kelip 2.4s ease-in-out infinite; }
.kuc-bintang:nth-of-type(3) { animation-delay: 0.8s; }
.kuc-bintang:nth-of-type(4) { animation-delay: 1.6s; }
@keyframes kuc-kelip { 50% { opacity: 0.25; } }
 
.kuc-utuh { transform-origin: 112px 138px; animation: kuc-utuh 3.2s ease-in-out infinite; }
@keyframes kuc-utuh { 50% { transform: scale(1.012, 1.03); } }
.kuc-napas { transform-origin: 126px 130px; animation: kuc-napas 3.2s ease-in-out infinite; }
@keyframes kuc-napas { 50% { transform: scale(1.045, 1.11); } }
.kuc-kp { fill: var(--kuc-panel); stroke: var(--kuc-panel-garis); stroke-width: 1.4; }
.kuc-t { font: 800 13px/1 system-ui, sans-serif; fill: var(--kuc-panel-isi); }
.kuc-tk { font: 700 7px/1 system-ui, sans-serif; fill: var(--kuc-panel-aksen); letter-spacing: 0.4px; }
.kuc-lap { fill: none; stroke: var(--kuc-panel-garis); stroke-width: 1.4; }
.kuc-lap--tebal { stroke-width: 4; }
.kuc-panel { animation: kuc-melayang 3s ease-in-out infinite; }
.kuc-panel:nth-of-type(2) { animation-delay: -0.6s; }
.kuc-panel:nth-of-type(3) { animation-delay: -1.2s; }
.kuc-panel:nth-of-type(4) { animation-delay: -1.8s; }
.kuc-panel:nth-of-type(5) { animation-delay: -2.4s; }
@keyframes kuc-melayang { 50% { transform: translateY(-4px); } }
.kuc-batang rect { fill: var(--kuc-panel-aksen); transform-origin: 0 44px; animation: kuc-batang 1.6s ease-in-out infinite; }
.kuc-batang rect:nth-child(2) { animation-delay: -0.4s; }
.kuc-batang rect:nth-child(3) { animation-delay: -0.8s; }
.kuc-batang rect:nth-child(4) { animation-delay: -1.2s; }
@keyframes kuc-batang { 50% { transform: scaleY(0.45); } }
.kuc-titik { fill: var(--kuc-panel-aksen); animation: kuc-titik 2.2s ease-in-out infinite alternate; }
@keyframes kuc-titik { to { transform: translate(22px, 14px); } }
.kuc-cincin { fill: none; stroke: var(--kuc-panel-aksen); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 60 100; transform-origin: 189px 90px; animation: kuc-putar 1.4s linear infinite; }
@keyframes kuc-putar { to { transform: rotate(360deg); } }
.kuc-tangan-k { transform-origin: 94px 116px; animation: kuc-ketuk-k 1.1s ease-in-out infinite; }
.kuc-tangan-n { transform-origin: 126px 116px; animation: kuc-ketuk-n 1.1s ease-in-out infinite; animation-delay: -0.55s; }
@keyframes kuc-ketuk-k { 50% { transform: rotate(12deg); } }
@keyframes kuc-ketuk-n { 50% { transform: rotate(-12deg); } }
.kuc-kedip { transform-origin: 110px 89px; animation: kuc-kedip 4s infinite; }
@keyframes kuc-kedip { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.kuc-ekor--kibas { transform-origin: 136px 146px; animation: kuc-ekor 2s ease-in-out infinite; }
@keyframes kuc-ekor { 50% { transform: rotate(-12deg); } }
.kuc-keringat { fill: #7cc6ff; animation: kuc-keringat 2.4s ease-in infinite; }
@keyframes kuc-keringat { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(2px, 12px); } }
.kuc-pita { transform-origin: 140px 81px; animation: kuc-kibar 0.5s ease-in-out infinite alternate; }
@keyframes kuc-kibar { to { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .tg *, .kuc * { animation: none !important; } .kuc-z text { opacity: 0.7; } }






 
.view :is(.acct, .arena-hero, .bill, .mvp).hud { border: 0; border-radius: 0; background: var(--x-card); color: var(--x-ink); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.view :is(.acct, .arena-hero, .bill).hud { isolation: isolate; }
.view :is(.acct, .arena-hero, .bill).hud::after { inset: -12px -10px auto auto; z-index: -1; width: 44px; height: 74px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--x-lime) 0 5px, transparent 5px 12px); transform: skewX(-18deg); }
:is(.mabar-det, .acct-view, .fd-page, .notif-view, .dues, .gen-dues, .gen-pick, .gal, .twb-view, .sk-view, .lpg) .kicker, .view :is(.mvp, .dues-teaser) .kicker { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--x-muted); }
 
.acct-note { border: 0; border-radius: 0; background: var(--x-chip); color: var(--x-ink); box-shadow: inset 4px 0 0 var(--c-accent-text); padding-left: 16px; }
.acct-note[data-kind="err"] { background: color-mix(in oklch, var(--c-loss) 10%, var(--x-card)); box-shadow: inset 4px 0 0 var(--c-loss); }
.acct-note[data-kind="ok"] { background: color-mix(in oklch, var(--c-win) 10%, var(--x-card)); box-shadow: inset 4px 0 0 var(--c-win); }
 
:is(.acct-view, .lpg, .me-view, .set-view, .set-modal, .fd-sheet, .fd-cmp) :is(.input, .select, .textarea) { border: 0; border-radius: 0; background-color: var(--x-chip); color: var(--x-ink); box-shadow: inset 0 -2px 0 var(--x-line); }
:is(.acct-view, .lpg, .me-view, .set-view, .set-modal, .fd-sheet, .fd-cmp) :is(.input, .select, .textarea):hover { border: 0; box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--x-line) 50%, var(--x-ink)); }
:is(.acct-view, .lpg, .me-view, .set-view, .set-modal, .fd-sheet, .fd-cmp) :is(.input, .select, .textarea):focus { border: 0; background-color: var(--x-chip); box-shadow: inset 0 0 0 2px var(--c-focus); }
:is(.acct-view, .lpg, .me-view, .set-view, .set-modal, .fd-sheet, .fd-cmp) .input[aria-invalid="true"] { box-shadow: inset 0 -3px 0 var(--c-loss); }
.pw-eye { border-radius: 0; }
 
.view.me-view .savebar { border: 0; border-radius: 0; background: var(--x-navy); color: #fff; box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px oklch(100% 0 0 / 0.08);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.view.me-view .savebar.is-dirty { background: var(--x-navy); box-shadow: inset 4px 0 0 oklch(78% 0.16 70), inset 0 0 0 1px oklch(100% 0 0 / 0.08); }
.view.me-view .savebar :is(.save-state, .hint) { color: oklch(88% 0.02 250); }
.view.me-view .savebar .btn:not(.btn-primary, .btn-danger) { --btn-bg: oklch(100% 0 0 / 0.13); --btn-fg: #fff; }
.view.me-view .savebar .btn:not(.btn-primary, .btn-danger):hover { --btn-bg: oklch(100% 0 0 / 0.22); }
 
@media (max-width: 400px) { :is(.acct-view, .lpg, .me-view) .seg :is(button, label) { padding-inline: 3px; font-size: 0.8rem; overflow-wrap: normal; } }
 
:is(.me-view, .lpg, .acct-view) .wiz-step > .h-sm { position: relative; padding-left: 16px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.45rem; line-height: 1; text-transform: uppercase; color: var(--x-ink); }
:is(.me-view, .lpg, .acct-view) .wiz-step > .h-sm::before { content: ""; position: absolute; left: 2px; top: 0.06em; bottom: 0.1em; width: 6px; background: var(--x-lime); transform: skewX(-14deg); }

 
:is(.acct-view, .lpg) .acct h1, .claim-who h1 { font-family: var(--font-sport); font-style: italic; font-weight: 800; letter-spacing: 0.005em; text-transform: uppercase; }
:is(.acct-view, .lpg) .acct > :first-child h1 { position: relative; padding-left: 16px; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 0.95; }
:is(.acct-view, .lpg) .acct > :first-child h1::before { content: ""; position: absolute; left: 2px; top: 0.06em; bottom: 0.1em; width: 6px; background: var(--x-lime); transform: skewX(-14deg); }
.acct-links a, .acct-note a { color: var(--x-ink); text-decoration-color: var(--c-accent-text); text-decoration-thickness: 2px; }
.acct-invite { border-top: 1px solid var(--x-line); }
.acct-sent__ic { width: 58px; height: 50px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-navy); color: var(--x-lime); }
.lp-hero { border-radius: 0; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.lp-chip { border: 0; border-radius: 0; clip-path: var(--x-jg); padding: 5px 18px; background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; }
.lp-chip .ic { color: currentColor; }
.lp-hero__t { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: clamp(2.5rem, 12.5vw, 4.75rem); line-height: 0.9; letter-spacing: 0; text-transform: uppercase; }
.lp-hero__t span { color: var(--x-lime); }
.lp-hero__cta .btn-ghost { --btn-bd: transparent; --btn-bg: oklch(100% 0 0 / 0.12); }
.lp-ticks .ic { color: var(--x-lime); }
:is(.lp-modes__t, .lpg .lp-head h2, .lp-show__txt h2, .lp-join__txt h2, .lp-vision h2) { font-family: var(--font-sport); font-style: italic; font-weight: 800; line-height: 0.98; letter-spacing: 0.005em; text-transform: uppercase; color: var(--x-ink); }
:is(.lp-modes__t, .lpg .lp-head h2, .lp-show__txt h2, .lp-join__txt h2) { font-size: clamp(1.75rem, 7.5vw, 2.6rem); }
.lp-modes__t span { color: var(--x-ink); box-shadow: inset 0 -0.32em 0 var(--x-lime); }
.lp-mode, .lp-feat { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.lp-mode b, .lp-feat b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.3rem; line-height: 1.05; text-transform: uppercase; color: var(--x-ink); }
.lp-mode__ic, .lp-feat__ic { width: 52px; height: 44px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-navy); color: var(--x-lime); }
.lp-show__img { border-radius: 0; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.lp-vision { position: relative; isolation: isolate; overflow: hidden; border-radius: 0; background: var(--x-navy); padding-right: max(clamp(1.5rem, 6vw, 3rem), 64px);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.lp-vision::after { content: ""; position: absolute; z-index: -1; bottom: -12px; height: 190px; right: -14px; width: 58px; background: repeating-linear-gradient(90deg, var(--x-lime) 0 6px, transparent 6px 15px); transform: skewX(-18deg); opacity: 0.9; }
.lpg .lp-vision h2 { color: #fff; font-size: clamp(1.75rem, 7.5vw, 2.6rem); }
.lp-vision .kicker, .lp-vision .lp-vision__cta b { color: var(--x-lime); }
.lp-steps__n { width: 46px; height: 40px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.3rem; }
.lp-steps b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; }

 
.mabar-det .arena-hero h1 { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; color: var(--x-ink); }
.comm-line { min-height: 44px; border: 0; border-radius: 0; clip-path: var(--x-jg); padding: 5px 20px 5px 14px; background: var(--x-chip); color: var(--x-ink); }
.comm-line:hover { border: 0; background: color-mix(in oklab, var(--x-chip) 82%, var(--x-ink)); }
.comm-line:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.comm-line__name { font-family: var(--font-sport); font-style: italic; font-size: 1rem; text-transform: uppercase; }
.view .sg { border: 0; border-radius: 0; background: var(--x-chip); box-shadow: inset 4px 0 0 var(--x-lime); padding-left: calc(var(--space-4) + 4px); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.view .sg.is-in { box-shadow: inset 4px 0 0 var(--c-win); }
.sg__count > b { font-family: var(--font-sport); font-style: italic; font-size: 1.7rem; line-height: 1; }
.sg-pay { border-top: 1px solid var(--x-line); }
.chip.fee-chip { border-radius: 3px; }
.view .mvp.hud { box-shadow: inset 4px 0 0 var(--medal-gold), inset 0 0 0 1px var(--x-line); padding-left: calc(var(--space-4) + 4px); }
.view .mvp.hud:hover { transform: none; }
.view .mvp.hud:focus-visible { outline: none; box-shadow: inset 4px 0 0 var(--medal-gold), inset 0 0 0 3px var(--c-focus); }
.mvp b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.8rem; line-height: 0.95; }
.mini-table { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.mini-table__row + .mini-table__row { border-top-color: var(--x-line); }
.mini-table__row.is-head { background: var(--x-navy); color: oklch(84% 0.02 250); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; }
.mini-table__row .num { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.1rem; }
 
.view .dues-teaser.hud { position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 0; padding-right: 64px; background: var(--x-navy); color: oklch(97% 0.006 250); box-shadow: none;
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.view .dues-teaser.hud::after { inset: -12px -14px -12px auto; z-index: -1; width: 58px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--x-lime) 0 6px, transparent 6px 15px); transform: skewX(-18deg); opacity: 0.9; }
.view .dues-teaser.hud:hover { transform: none; }
.view .dues-teaser.hud:focus-visible, .jsy-x:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--x-lime); }
.view .dues-teaser.hud :is(.kicker, small, .muted) { color: oklch(84% 0.02 250); }
.dues-teaser b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: clamp(1.7rem, 7.5vw, 2.2rem); line-height: 1; }

 
.bill__amt { font-family: var(--font-sport); font-style: italic; font-weight: 800; color: var(--x-ink); letter-spacing: 0; }
.bill__lines div { border-top: 1px solid var(--x-line); }
.paym { border: 0; border-radius: 0; background: var(--x-chip); box-shadow: inset 4px 0 0 var(--x-lime); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.paidbar, .paidbar b { border-radius: 0; }
.dues-list { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.due-row + .due-row { border-top-color: var(--x-line); }
.due-row__amt { font-family: var(--font-sport); font-style: italic; font-size: 1.15rem; }
 
.comm-pick { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line); padding-left: calc(var(--space-3) + 4px);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.comm-pick:hover { background: color-mix(in oklab, var(--x-card) 92%, var(--x-ink)); }
.comm-pick:focus-visible { outline: none; box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 3px var(--c-focus); }
.comm-pick.is-cur { background: color-mix(in oklab, var(--x-lime) 16%, var(--x-card)); }
.comm-pick__txt > b, .comm-pick__txt > :first-child { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; }
:is(.comm-pick, .comm-line) .comm-logo { border-radius: 4px; border-color: var(--x-line); background: var(--x-chip); color: var(--x-ink); }

 
.cap .cap-ids { grid-template-columns: minmax(0, 1fr) auto; }
.cap .cap-ids .label { grid-column: 1 / -1; margin-bottom: -2px; }
.cap .cap-ids .cap-id { justify-self: stretch; overflow-wrap: anywhere; }

 
@media (max-width: 400px) { .notif-push { grid-template-columns: auto minmax(0, 1fr); } .notif-push > .btn { grid-column: 1 / -1; } }
.notif__time { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--x-muted); }

 
.set-view, .set-modal { --set-soft: var(--x-chip); --set-bg: var(--x-chip); --set-surface: var(--x-card); --set-navy: var(--x-ink); --set-muted: var(--x-muted); --set-border: var(--x-line);
  --set-shadow: none; --set-r: 0px; --set-primary: var(--x-navy); --set-primary-2: var(--x-ink); --set-off: var(--x-chip); --set-off-ink: var(--x-muted);
  --c-accent: inherit; --c-accent-2: inherit; --c-accent-ink: inherit; --c-accent-text: inherit; --c-focus: inherit; --c-accent-dim: inherit; --c-accent-line: inherit; }
:root[data-theme="dark"] :is(.set-view, .set-modal) { --set-soft: var(--x-chip); --set-bg: var(--x-chip); --set-surface: var(--x-card); --set-navy: var(--x-ink); --set-muted: var(--x-muted); --set-border: var(--x-line);
  --set-shadow: none; --set-primary: var(--x-lime); --set-primary-2: var(--x-ink); --set-off: var(--x-chip); --set-off-ink: var(--x-muted); --c-accent-text: inherit; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.set-view, .set-modal) { --set-primary: var(--x-lime); } }
.set-head h1 { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; color: var(--x-ink); }
.set-head h1::before { content: ""; display: inline-block; width: 6px; height: 0.78em; margin-right: 10px; vertical-align: -0.04em; background: var(--x-lime); transform: skewX(-14deg); }
.set-back { width: 50px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-ink); }
.set-back:hover { background: color-mix(in oklab, var(--x-chip) 82%, var(--x-ink)); color: var(--x-ink); }
.set-back:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.set-label { position: relative; margin: 0 0 var(--space-3); padding-left: 16px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.3rem; line-height: 1; letter-spacing: 0.005em; color: var(--x-ink); }
.set-label::before { content: ""; position: absolute; left: 2px; top: 0.06em; bottom: 0.1em; width: 6px; background: var(--x-lime); transform: skewX(-14deg); }
 
.set-me { border-radius: 0; box-shadow: none; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.set-me .avatar { border-color: var(--x-lime); box-shadow: none; }
.set-cam { border-radius: 0; clip-path: var(--x-jg); width: 48px; height: 44px; right: -10px; background: var(--x-lime); color: var(--x-lime-ink); box-shadow: none; }
.set-cam:hover { background: var(--x-lime-hi); color: var(--x-lime-ink); }
.set-cam:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--x-navy); }
.set-me__name { font-family: var(--font-sport); font-style: italic; font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; text-shadow: none; }
.set-me__grade { border: 0; border-radius: 0; clip-path: var(--x-jg); padding: 3px 14px 3px 10px; background: oklch(100% 0 0 / 0.14); backdrop-filter: none; -webkit-backdrop-filter: none;
  font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; }
.set-me .chip-accent { border: 0; border-radius: 0; clip-path: var(--x-jg); padding: 3px 14px; background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; }
.set-me__edit { border: 0; border-radius: 0; clip-path: var(--x-jg-b); padding: 0 22px 0 20px; background: oklch(100% 0 0 / 0.13); backdrop-filter: none; -webkit-backdrop-filter: none;
  font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; }
.set-me__edit:hover { border: 0; background: var(--x-lime); color: var(--x-lime-ink); }
.set-me__edit:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--x-lime); }
 
 
.set-view .pm-menu { border: 0; border-radius: 0; box-shadow: inset 4px 0 0 var(--pmm-emas), inset 0 0 0 1px var(--pmm-emas-tua);
  clip-path: polygon(0 -40px, 100% -40px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }    
.set-view .pm-menu::after { display: none; }
.set-view .pm-menu { background: repeating-linear-gradient(112deg, rgb(242 208 124 / 0.07) 0 12px, transparent 12px 40px), var(--pmm-hitam-2); }
.set-view .pm-menu__txt b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--pmm-emas); }
.set-view .pm-menu__txt b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.6rem; line-height: 1; letter-spacing: 0.01em; }
 
.jsy-hero { border: 0; border-radius: 0; background: var(--x-navy); box-shadow: none; clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.jsy-hero::after { background: linear-gradient(90deg, var(--x-navy) 0%, oklch(18% 0.055 262 / 0.88) 42%, oklch(18% 0.055 262 / 0.3) 68%, transparent 86%); }
.jsy-hero:hover { border: 0; box-shadow: none; }
.jsy-hero:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--x-lime); }
.jsy-hero__ic { width: 54px; height: 46px; border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); box-shadow: none; }
.jsy-hero__txt b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.45rem; line-height: 1; text-transform: uppercase; }
.jsy-hero__go { width: 44px; height: 40px; border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); box-shadow: none; }
.jsy-x { border-radius: 0; clip-path: var(--x-jg); width: 32px; border: 0; background: oklch(100% 0 0 / 0.14); }
 
.thm-sw { border-radius: 0; clip-path: var(--x-jg); width: 74px; }
.thm-sw__knob { left: 9px; }
 
.set-card { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.set-intro { border-bottom-color: var(--x-line); }
.set-intro .set-ic { width: 58px; height: 50px; border-radius: 0; }
.set-intro h2 { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.5rem; line-height: 1; text-transform: uppercase; color: var(--x-ink); }
.set-view .seg { border: 0; border-radius: 0; background: var(--x-chip); }
.set-view .seg label { border-radius: 0; font-size: 1rem; }
.set-view .seg input:focus-visible + label { outline: none; box-shadow: inset 0 0 0 2px var(--c-focus); }
.set-facts, .set-kvs { border: 0; border-radius: 0; background: var(--x-chip); }
.set-kv + .set-kv { border-top-color: var(--x-line); }
.set-in { border: 0; border-radius: 0; background: var(--x-chip); box-shadow: inset 0 -2px 0 var(--x-line); }
.set-in:hover { border: 0; }
.set-in:focus-within { border: 0; box-shadow: inset 0 0 0 2px var(--c-focus); }
.set-view .set-in .input { box-shadow: none; background-color: transparent; }
.set-in__pre { border-right-color: var(--x-line); }
.set-in__cc { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.1rem; }
.set-more, .set-more summary { border-radius: 0; }
.set-more { background: var(--x-chip); box-shadow: inset 4px 0 0 var(--x-lime); }
.set-more summary { color: var(--x-ink); }
.set-more summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.set-save .btn { box-shadow: none; }
.set-lines { border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--x-line); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.set-lines > * + *, .set-lines .set-row + .set-row, .set-lines .set-line + .set-row { border-top-color: var(--x-line); }
.set-lines .set-row { clip-path: none; box-shadow: none; }
.set-line { background: var(--x-card); }
.set-out, .set-view .my-comm { border-radius: 0; }
.set-view .my-comm { border: 0; background: var(--x-chip); box-shadow: inset 4px 0 0 var(--x-lime); }
.set-photo__frame { border: 0; border-radius: 0; background: var(--x-chip); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
:is(.set-view, .set-modal) .switch__track { border-radius: 0; transform: skewX(-12deg); }
:is(.set-view, .set-modal) .switch__track::after { border-radius: 0; }

 
.view.pm-view .pm-status { border-radius: 0; background: var(--x-navy); position: relative; isolation: isolate; overflow: hidden; padding-right: 64px;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.view.pm-view .pm-status::after { content: ""; position: absolute; z-index: -1; top: -12px; bottom: -12px; right: -14px; width: 58px; background: repeating-linear-gradient(90deg, var(--x-lime) 0 6px, transparent 6px 15px); transform: skewX(-18deg); opacity: 0.9; }
.view.pm-view .pm-status__nama, .view.pm-view .pm-kartu h2 { font-family: var(--font-sport); font-style: italic; font-weight: 800; letter-spacing: 0.005em; text-transform: uppercase; }
.view.pm-view .pm-kicker { font-family: var(--font-sport); font-style: italic; font-size: 0.95rem; letter-spacing: 0.04em; }
.view.pm-view .pm-kartu { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.view.pm-view .pm-kartu h2 { font-size: 1.6rem; line-height: 1; }
.view.pm-view .pm-kartu--brand { background: var(--x-navy); box-shadow: inset 4px 0 0 var(--x-lime); }
.view.pm-view .pm-custom { border-top: 0; box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line); }
.view.pm-view .pm-harga, .view.pm-view .pm-opsi b { font-family: var(--font-sport); font-style: italic; font-weight: 800; letter-spacing: 0; }
.view.pm-view .pm-harga { font-size: clamp(2.2rem, 10vw, 2.8rem); line-height: 0.95; }
.view.pm-view .pm-opsi > div { border: 0; border-radius: 0; background: var(--x-chip); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.view.pm-view .pm-opsi span { font-family: var(--font-sport); font-style: italic; font-size: 0.95rem; letter-spacing: 0.04em; }
.view.pm-view .pm-tenang { border-radius: 0; background: var(--x-card); box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.view.pm-view .pm-tenang .ic, .view.pm-view .pm-isi .ic { color: var(--c-accent-text); }
.view.pm-view .pm-kartu--brand .pm-isi .ic { color: var(--x-lime); }
.view.pm-view :is(.pm-cont, .pm-cont-kaki, .pm-aktif li) { border-radius: 0; }
.view.pm-view .an-note { border-radius: 0; box-shadow: inset 4px 0 0 var(--x-line); }
 
.view.pm-view .pm-masa { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.view.pm-view .pm-masa button { white-space: nowrap; padding-inline: 12px; }

 

 
.sk-sec h2 { position: relative; padding-left: 14px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.3rem; line-height: 1.05; text-transform: uppercase; color: var(--x-ink); }
.sk-sec h2::before { content: ""; position: absolute; left: 2px; top: 0.08em; bottom: 0.12em; width: 5px; background: var(--x-lime); transform: skewX(-14deg); }
.view.fd-page > .backlink { align-self: flex-start; }

 
.twb-stage { border: 0; border-radius: 0; background: var(--x-chip); clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.twb-cv { border-radius: 0; box-shadow: none; }
.twb-empty { border-radius: 0; background: var(--x-navy); backdrop-filter: none; -webkit-backdrop-filter: none; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.twb-empty:focus-within { outline: none; box-shadow: inset 0 0 0 3px var(--x-lime); }
.twb-empty__ic { width: 58px; height: 50px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); }
.twb-empty b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.35rem; text-transform: uppercase; }

 
.kp2-cbtn { border: 0; border-radius: 0; clip-path: var(--x-jg); width: 50px; height: 44px; background: oklch(14% 0.03 255 / 0.7); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kp2-cbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--x-lime); }
.kp2-head { border-radius: 0; }
.kp2 .kom-sec__h h2 { position: relative; padding-left: 16px; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.5rem; line-height: 1; text-transform: uppercase; color: var(--x-ink); }
.kp2 .kom-sec__h h2::before { content: ""; position: absolute; left: 2px; top: 0.06em; bottom: 0.1em; width: 6px; background: var(--x-lime); transform: skewX(-14deg); }
.kp2-logo .comm-logo { border-radius: 4px; box-shadow: none; }
.kp2-name { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: clamp(1.9rem, 8.5vw, 2.5rem); line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; }
.kp2-tabs { border-bottom-color: var(--x-line); }
.kp2-tabs .page-tabs.seg button[role="tab"] { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; text-transform: uppercase; color: var(--x-muted); }
.kp2-tabs .page-tabs.seg button[role="tab"][aria-pressed="true"] { color: var(--x-ink); }
.kp2-tabs .page-tabs.seg button[role="tab"][aria-pressed="true"]::after { left: 14%; right: 14%; height: 5px; border-radius: 0; background: var(--x-lime); transform: skewX(-18deg); }
@media (max-width: 359px) { .kp2-tabs .page-tabs.seg button[role="tab"] { font-size: 0.875rem; } }
.kp-next { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line);
  clip-path: polygon(0 0, calc(100% - var(--x-cut)) 0, 100% var(--x-cut), 100% 100%, 0 100%); padding-left: 20px; }
.kp-next:focus-visible { outline: none; box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 3px var(--c-focus); }
.kp-next__k { font-family: var(--font-sport); font-style: italic; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--x-ink); }
.kp-next__t { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.kp-next__foot { border-top-color: var(--x-line); }
.kp-next__go { border-radius: 0; clip-path: var(--x-jg); padding: 8px 18px 8px 16px; background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; text-transform: uppercase; }
.kp-next:hover .kp-next__go { background: var(--x-lime-hi); }

 
.view.profile .phero2 { border-radius: 0; box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
.view.profile .phero2__btn { border: 0; border-radius: 0; clip-path: var(--x-jg); width: 50px; height: 44px; background: oklch(14% 0.04 262 / 0.62); backdrop-filter: none; -webkit-backdrop-filter: none; }
.view.profile .phero2__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--x-lime); }
.view.profile .phero2__kick { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; letter-spacing: 0.04em; color: var(--x-lime); }
.view.profile .phero2__name { font-family: var(--font-sport); font-style: italic; font-size: clamp(2.3rem, 11vw, 3.2rem); line-height: 0.9; letter-spacing: 0; }
.view.profile .phero2__club { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; }
.view.profile .phero2__pill { border: 0; border-radius: 0; clip-path: var(--x-jg); padding: 6px 18px 6px 16px; background: oklch(14% 0.04 262 / 0.7); backdrop-filter: none; -webkit-backdrop-filter: none;
  font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1rem; text-transform: uppercase; }
.view.profile .phero2__pill .ic { color: var(--x-lime); }
.view.profile .pquick > div:not(.tip-out) { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.view.profile .pquick > div:not(.tip-out):hover { transform: none; }
.view.profile .pquick > div:not(.tip-out):focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.view.profile .pquick > div:first-child { background: var(--x-lime); box-shadow: none; }
.view.profile .pquick > div:first-child :is(dt, dd, .tile-ic) { color: var(--x-lime-ink); }
.view.profile .pquick dd { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: clamp(1.4rem, 6.4vw, 1.75rem); line-height: 0.95; }
.view.profile .pquick dt { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.02em; text-transform: uppercase; }
.view.profile .pquick > .tip-out { border: 0; border-radius: 0; box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line); background: var(--x-card); }
.view.profile .ptabs { border-bottom-color: var(--x-line); }
.view.profile .ptabs button { border-radius: 0; font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.1rem; text-transform: uppercase; }
.view.profile .ptabs button[aria-selected="true"] { background: none; box-shadow: none; color: var(--x-ink); }
.view.profile .ptabs button[aria-selected="true"]::after { left: 10%; right: 10%; height: 5px; border-radius: 0; background: var(--x-lime); transform: skewX(-18deg); }
.view.profile .ptabs button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-focus); }
.view.profile .ph-head h2 { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.45rem; line-height: 1; text-transform: uppercase; color: var(--x-ink); }
.view.profile .ph-ic { width: 46px; height: 40px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-navy); color: var(--x-lime); box-shadow: none; }
.view.profile .ph-nick { border: 0; border-radius: 0; clip-path: var(--x-jg); padding: 6px 16px; background: var(--x-chip); font-family: var(--font-sport); font-style: italic; font-weight: 800; }
.view.profile .tiles.pl-mini > div:not(.tip-out) { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 4px 0 0 var(--tone), inset 0 0 0 1px var(--x-line);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.view.profile .tiles.pl-mini > div:not(.tip-out):focus-visible { outline: none; box-shadow: inset 4px 0 0 var(--tone), inset 0 0 0 3px var(--c-focus); }
.view.profile .pl-mini .tile-ic { border-radius: 0; clip-path: var(--x-jg); width: 46px; background: var(--tone); box-shadow: none; }
.view.profile .pl-mini dt { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; }
.view.profile .pl-mini dd { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.9rem; line-height: 0.95; }
.view.profile .pl-goal { border: 0; border-radius: 0; background: var(--x-chip); box-shadow: inset 4px 0 0 var(--x-lime); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.view.profile .pl-goal__ic, .view.profile .pinfo__ic { border-radius: 0; clip-path: var(--x-jg); width: 50px; background: var(--x-navy); color: var(--x-lime); box-shadow: none; }
.view.profile .pl-goal__main b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.1rem; text-transform: uppercase; }
.view.profile .pinfo > div { border-radius: 0; background: var(--x-chip); grid-template-columns: 50px minmax(0, 1fr); }
@media (max-width: 420px) { .view.profile .pinfo > div { grid-template-columns: 40px minmax(0, 1fr); } .view.profile .pinfo__ic { width: 40px; } }
 
.gen-phist .stack-sm { max-width: none; }
.gen-phist__btn { --btn-bg: var(--x-lime); --btn-fg: var(--x-lime-ink); border-radius: 0; clip-path: var(--x-jg-b); background: var(--x-lime); color: var(--x-lime-ink); box-shadow: none; padding-inline: 20px 24px; white-space: nowrap;
  font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; }
.gen-phist__btn:hover { filter: none; background: var(--x-lime-hi); }
.gen-phist__btn > span { overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.gen-phist__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.view.profile .pmenu__it { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.view.profile .pmenu__it:focus-visible { outline: none; box-shadow: inset 4px 0 0 var(--x-lime), inset 0 0 0 3px var(--c-focus); }
 
.klasemen .lg-rules__icon { width: 46px; height: 40px; border-radius: 0; clip-path: var(--x-jg); background: var(--x-navy); color: var(--x-lime); }
.klasemen .lg-note { border: 0; border-radius: 0; background: var(--x-chip); box-shadow: inset 4px 0 0 var(--c-accent-text); padding-left: 16px; }