* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #e8edf5;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: #070b14;
    padding-bottom: 0;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.wrap { width: min(1180px, calc(100% - 28px)); margin: 0 auto; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #070b14;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar-row { height: 74px; display: flex; align-items: center; gap: 16px; }
.brand img { height: 52px; width: auto; display: block; }
.auth { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.auth input, .drawer input {
    height: 36px;
    width: 148px;
    border: 0;
    border-radius: 8px;
    padding: 0 10px;
    background: #f4f7fb;
    color: #111827;
}
.muted { color: #9fb0c8; font-size: 12px; margin-right: 4px; }
.check { display: flex; align-items: center; gap: 6px; color: #c5d0e0; font-size: 12px; white-space: nowrap; }
.check input {
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    margin: 0;
    accent-color: #e11d48;
}
.btn, .cta a, .cta button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.red { background: #e11d48; }
.teal { background: #0f9f9a; }
.purple { background: #7c3aed; }
.burger {
    display: none;
    width: 40px;
    height: 40px;
    padding: 10px 8px;
    border: 1px solid #334155;
    border-radius: 8px;
    background: transparent;
}
.burger span { display: block; height: 2px; margin: 4px 0; background: #fff; }
.drawer { display: none; padding: 0 14px 14px; }
.drawer form { display: grid; gap: 8px; }
.drawer input, .drawer .btn { width: 100%; }

.dock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #d5deea;
    font-size: 11px;
}
.dock a i {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background-color: #132033;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.sidenav a.gifbox:hover { filter: brightness(1.08); }
.i-gem { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235eead4' stroke-width='2'><path d='M3 9l4-5h10l4 5-9 12L3 9z'/></svg>"); }
.i-ball { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2'><circle cx='12' cy='12' r='8'/><path d='M12 4v16M4 12h16'/></svg>"); }
.i-slot { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2'><rect x='4' y='3' width='16' height='18' rx='2'/><path d='M8 8h2M12 8h2M8 12h2M12 12h2M8 16h2M12 16h2'/></svg>"); }
.i-wheel { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2'><circle cx='12' cy='12' r='8'/><circle cx='12' cy='12' r='2'/></svg>"); }
.i-card { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='2'><rect x='6' y='3' width='12' height='18' rx='2'/></svg>"); }
.i-ball8 { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2'><circle cx='12' cy='12' r='8'/><circle cx='12' cy='12' r='2'/></svg>"); }
.i-joy { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2'><rect x='3' y='8' width='18' height='10' rx='5'/><path d='M8 13h3M9.5 11.5v3'/></svg>"); }
.i-fish { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2'><path d='M3 12c4-6 10-6 14-3l4-3v12l-4-3c-4 3-10 3-14-3z'/></svg>"); }
.i-pct { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f472b6' stroke-width='2'><circle cx='7' cy='7' r='2'/><circle cx='17' cy='17' r='2'/><path d='M18 6L6 18'/></svg>"); }
.i-cup { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2'><path d='M7 4h10v6a5 5 0 01-10 0V4zM9 20h6M12 15v5'/></svg>"); }
.i-users { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2'><circle cx='9' cy='8' r='3'/><path d='M3 19c1-3 3-4 6-4s5 1 6 4'/></svg>"); }
.i-chat { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2'><path d='M5 6h14v9H8l-3 3V6z'/></svg>"); }
.i-home { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2'><path d='M4 11l8-7 8 7v9H4v-9z'/></svg>"); }
.i-user { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2'><circle cx='12' cy='8' r='3'/><path d='M5 19c1.5-3 4-4 7-4s5.5 1 7 4'/></svg>"); }
.i-key { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2'><circle cx='8' cy='14' r='3'/><path d='M11 14h9l-2 2 2 2'/></svg>"); }

.ticker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px auto 1px;
    width: min(1180px, calc(100% - 28px));
    background: rgba(10, 16, 28, .92);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    overflow: hidden;
    height: 36px;
    padding: 0 12px;
}
.speaker {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e2e8f0'><path d='M4 9h4l5-4v14l-5-4H4V9zm11 1a4 4 0 010 4'/></svg>") center / contain no-repeat;
}
.ticker-mask { overflow: hidden; flex: 1; }
.ticker p { margin: 0; white-space: nowrap; animation: tick 18s linear infinite; color: #f8fafc; font-size: 13px; letter-spacing: .03em; }
@keyframes tick { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

main { margin-top: 2px; background: #0c111a; border-radius: 16px; padding: 8px; }
.hero { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: stretch; }
.hero .sidenav {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: auto;
    background: #101826;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
}
.hero .sidenav a.gifbox {
    flex: 1;
    min-height: 0;
    border-radius: 0;
    background-color: #101826;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 0;
}
.hero-main { min-width: 0; display: flex; flex-direction: column; }
.seo {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    margin-top: 8px;
    overflow: visible;
    background: rgba(10, 16, 28, .94);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 14px 16px;
}
.seo::-webkit-scrollbar { width: 8px; }
.seo::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }
.seo h2 { margin: 0 0 8px; font-size: 16px; }
.seo p { margin: 0 0 8px; color: #c5d0e0; font-size: 13px; line-height: 1.55; }
.seo p:last-child { margin: 0; }
.seo a { color: #5eead4; }
.stage { display: grid; grid-template-columns: 1.7fr .9fr; gap: 10px; align-items: stretch; }
.slider, .feature {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #0b1220;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.slider { height: auto; aspect-ratio: 800 / 280; }
.feature { height: 100%; }
.slides { display: flex; height: 100%; transition: transform .45s ease; }
.slides img, .feature img { width: 100%; height: 100%; object-fit: cover; flex: 0 0 100%; }
.feature video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature span {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: #0f9f9a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
}
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    color: #fff;
    cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }
.dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.dots button { width: 7px; height: 7px; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); padding: 0; }
.dots button.on { background: #fff; }

.cta { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 8px; margin-top: 6px; }
.cta a, .cta button { height: 48px; border-radius: 10px; font-size: 16px; width: 100%; }

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 6px 0 0;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.2;
    color: #d5deea;
    background: #0b0f16;
    border-radius: 10px;
}
.crumbs a:hover { color: #fff; }

.panel {
    margin-top: 8px;
    background: rgba(10, 16, 28, .94);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 14px;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel-head h2 { margin: 0; font-size: 16px; }
.panel-head a {
    background: #1f2937;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    color: #e5e7eb;
}
.providers { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.providers a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: radial-gradient(circle at 50% 30%, #243044, #121a28);
    border-radius: 14px;
    padding: 12px 6px;
    min-height: 78px;
}
.providers b {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0f172a;
    color: #fbbf24;
    font-size: 12px;
}
.providers small { color: #cbd5e1; font-size: 11px; }

.games { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.card {
    position: relative;
    display: block;
    background: #121a28;
    border-radius: 12px;
    overflow: hidden;
}
.art { display: block; height: 132px; }
.a1 { background: linear-gradient(160deg, #7c3aed, #f59e0b); }
.a2 { background: linear-gradient(160deg, #b91c1c, #f97316); }
.a3 { background: linear-gradient(160deg, #0f766e, #22d3ee); }
.a4 { background: linear-gradient(160deg, #1d4ed8, #38bdf8); }
.a5 { background: linear-gradient(160deg, #be185d, #f9a8d4); }
.a6 { background: linear-gradient(160deg, #365314, #84cc16); }
.a7 { background: linear-gradient(160deg, #9a3412, #fdba74); }
.a8 { background: linear-gradient(160deg, #312e81, #818cf8); }
.card strong { display: block; padding: 8px; font-size: 13px; font-weight: 600; }
.badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #16a34a;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
}
.badge.new { background: #ea580c; }
.card:hover { transform: translateY(-2px); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.split .panel { margin-top: 0; }
.games.mini { grid-template-columns: repeat(3, 1fr); }
.games.mini .art { height: 120px; }
.games.quad { grid-template-columns: repeat(2, 1fr); }
.games.quad .art { height: 160px; }
.split .panel { display: flex; flex-direction: column; }
.fishone {
    display: flex;
    align-items: flex-end;
    flex: 1;
    min-height: 280px;
    border-radius: 12px;
    padding: 16px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(160deg, #0f766e, #0369a1) center / cover no-repeat;
}
.tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.split46 { display: grid; grid-template-columns: 4fr 2fr; gap: 10px; margin-top: 8px; }
.split46 .panel { margin-top: 0; }
.games.togel { grid-template-columns: repeat(5, 1fr); }
.games.togel .art {
    height: auto;
    aspect-ratio: 210 / 205;
    background-color: #121a28;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sportbox { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sportart {
    display: flex;
    align-items: flex-end;
    min-height: 180px;
    padding: 10px;
    border-radius: 12px;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(160deg, #0369a1, #15803d);
}
.sportart.s2 { background: linear-gradient(160deg, #7c2d12, #1d4ed8); }

.bottom {
    position: relative;
    z-index: 1;
    flex: 1;
    margin-top: 22px;
    padding: 28px 0 36px;
    background: #0b1220;
}
.bottom .artikel,
.bottom .footarticle {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.bottom .footarticle { margin-top: 28px; }
.bottom .artikel,
.bottom .footgrid,
.bottom .footarticle {
    border-bottom: 1px solid rgba(255,255,255,.16);
    padding-bottom: 16px;
}
.bottom .sitefoot { margin-top: 28px; padding: 0; }
.artikel h2, .footarticle h2 { margin: 0 0 8px; font-size: 18px; }
.artikel p, .footarticle p { margin: 0 0 10px; color: #c5d0e0; font-size: 13px; line-height: 1.6; }
.artikel a, .footarticle a { color: #5eead4; font-size: 13px; }

.sitefoot { margin-top: 22px; padding: 8px 0 24px; color: #d5deea; }
.footgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.footgrid b { display: block; margin-bottom: 8px; }
.footgrid a { display: block; color: #9fb0c8; font-size: 13px; line-height: 1.9; }
.footgrid a:hover { color: #fff; }
.footarticle {
    margin-top: 18px;
    padding: 16px 18px;
    background: #0c111a;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
}
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .62);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal.open { display: flex; }
.dialog {
    position: relative;
    width: min(360px, 100%);
    background: #fff;
    color: #111827;
    border-radius: 16px;
    padding: 22px 20px 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.dialog h3 { margin: 0 0 14px; text-align: center; font-size: 18px; }
.dialog input[type="text"],
.dialog input[name="username"],
.dialog input[type="password"] {
    width: 100%;
    height: 42px;
    margin-bottom: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0 12px;
    background: #f8fafc;
    color: #111827;
}
.dialog .check { display: flex; align-items: center; gap: 8px; color: #374151; font-size: 13px; margin: 2px 0 12px; }
.dialog .btn { width: 100%; height: 44px; }
.dialog p { margin: 8px 0 0; text-align: center; font-size: 13px; }
.dialog p a { color: #0f766e; }
.dialog .x {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}
.clamp { max-height: 96px; overflow: hidden; }


.clamp.open { max-height: none; }
.baca {
    display: inline-block;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5eead4;
    font-size: 13px;
    cursor: pointer;
}
.footarticle ul { margin: 6px 0 12px; padding-left: 18px; color: #c5d0e0; }
.footarticle li { margin: 3px 0; font-size: 13px; }
.table {
    position: relative;
    display: block;
    background: #121a28;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
}
.felt {
    display: flex;
    align-items: flex-end;
    height: 108px;
    padding: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
}
.f1 { background: radial-gradient(circle at 50% 20%, #1d4ed8, #0b1b3a 70%); }
.f2 { background: radial-gradient(circle at 50% 80%, #b91c1c, #14532d 55%, #052e16); }
.f3 { background: linear-gradient(160deg, #111827, #334155); }
.f4 { background: radial-gradient(circle at 30% 40%, #7f1d1d, #1c1917 70%); }
.f5 { background: linear-gradient(135deg, #9a3412, #111827 60%); }
.f6 { background: radial-gradient(circle at 50% 30%, #166534, #052e16 70%); }
.table strong { display: block; padding: 8px 8px 0; font-size: 13px; }
.table small { display: block; padding: 2px 8px 8px; color: #86efac; font-size: 11px; }
.table:hover { transform: translateY(-2px); }

.dock {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: rgba(8, 12, 20, .96);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 8px 6px 10px;
    justify-content: space-around;
}
.dock a { font-size: 11px; color: #e5e7eb; }

@media (max-width: 980px) {
    .auth, .feature, .crumbs, .sidenav { display: none; }
    .burger { display: inline-block; }
    body.nav-open .drawer { display: block; }
    .hero, .stage { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr 1fr; }
    .split46 { grid-template-columns: 1fr; }
    .footgrid { grid-template-columns: 1fr 1fr; gap: 16px 22px; }
    .games.togel { grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .games.togel .art { height: auto; aspect-ratio: 210 / 205; }
    .games.togel strong { font-size: 9px; padding: 4px 2px; text-align: center; line-height: 1.2; }
    .ticker { width: 100%; margin: 0; border-radius: 0; }
    .tables { grid-template-columns: repeat(3, 1fr); }
    .felt { height: 88px; font-size: 11px; }
    .games.quad .art { height: 72px; }
    .fishone { min-height: 200px; font-size: 14px; padding: 10px; }
    .games { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .games .art { height: 120px; }
    .games.mini { grid-template-columns: repeat(3, 1fr); }
    .games.mini .art { height: 96px; }
    .providers { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .providers a { min-height: 0; padding: 8px 2px; }
    .providers b { width: 30px; height: 30px; font-size: 10px; }
    .providers small { font-size: 9px; text-align: center; line-height: 1.2; }
    .cta { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .cta a, .cta button { height: 42px; font-size: 13px; padding: 0 4px; }
    body { padding-bottom: 74px; }
    .dock { display: flex; }
    main.wrap { width: 100%; border-radius: 0; padding: 0; }
    .panel { border-radius: 0; }
    .panel-head a { white-space: nowrap; flex-shrink: 0; padding: 5px 8px; font-size: 11px; }
    .panel-head h2 { font-size: 14px; }
}

.welcome { display: none; position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.55); align-items: center; justify-content: center; padding: 18px; }
.welcome.open { display: flex; }
.welcome-box { width: min(360px, 100%); background: #fff; color: #111827; border-radius: 16px; padding: 28px 22px 22px; text-align: center; position: relative; }
.welcome-x { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: #64748b; font-size: 22px; cursor: pointer; }
.welcome-ok { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: #dcfce7; color: #16a34a; font-size: 34px; line-height: 64px; font-weight: 700; }
.welcome-box h3 { margin: 0 0 8px; font-size: 22px; }
.welcome-box p { margin: 0 0 16px; color: #475569; line-height: 1.5; }
.welcome-go { border: 0; background: #16a34a; color: #fff; border-radius: 8px; height: 40px; padding: 0 18px; font-weight: 700; cursor: pointer; }
.paybar { margin: 18px auto 8px; }
.paybar b { display: block; text-align: center; color: #2dd4bf; font-size: 15px; margin-bottom: 10px; }
.paylogos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.paylogos img { height: 32px; width: auto; max-width: 96px; object-fit: contain; background: transparent; border-radius: 8px; padding: 5px 8px; }
.sidenav { display:flex; flex-direction:column; gap:1px; width:104px; background:transparent; border:0; overflow:visible; padding:0; }
.sidenav a.navico { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:78px; border-radius:10px; overflow:hidden; background:#101826; border:0; color:#f5d76e; text-decoration:none; font-size:10px; font-weight:800; padding-bottom:6px; }
.sidenav a.navico svg { width:22px; height:22px; margin-bottom:6px; }
.sidenav a.navico img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sidenav a.navico span { position:relative; z-index:1; }
@media (max-width: 980px) {
.sidenav { display: none; }
.hero { display: flex; flex-direction: column; }
.hero-main { display: contents; }
.stage { order: 1; width: 100%; }
.cta { order: 3; }
.seo { order: 4; }
.hero .sidenav {
    order: 2;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    gap: 1px;
    overflow-x: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 8px 0;
}
.hero .sidenav a.navico,
.hero .sidenav a.gifbox {
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    min-height: 68px;
}
}
main.wrap.sheet {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    background: #0c111a;
    border-radius: 16px;
    padding: 8px;
}
main.wrap.sheet > .sidenav {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: auto;
    overflow: hidden;
    background: #101826;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 0;
}
main.wrap.sheet > .stage { grid-column: 2; grid-row: 1; }
main.wrap.sheet > .sheet-body { grid-column: 2; grid-row: 2; min-width: 0; }
main.wrap.sheet > .sidenav a.navico,
main.wrap.sheet > .sidenav a.gifbox {
    flex: 1 1 0;
    width: auto;
    height: auto;
    min-height: 0;
    border-radius: 0;
}
@media (max-width: 980px) {
    main.wrap.sheet {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        gap: 0;
    }
    main.wrap.sheet > .stage { order: 1; width: 100%; }
    main.wrap.sheet > .sidenav {
        order: 2;
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 1px;
        overflow-x: auto;
        background: transparent;
        border: 0;
        border-radius: 0;
    }
    main.wrap.sheet > .sidenav a.navico,
    main.wrap.sheet > .sidenav a.gifbox {
        flex: 0 0 72px;
        width: 72px;
        height: 72px;
        min-height: 72px;
        border-radius: 10px;
    }
    main.wrap.sheet > .sheet-body { order: 3; width: 100%; margin: 0; padding: 0; }
    main.wrap.sheet .lot-row,
    main.wrap.sheet .board {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }
}
.hero .sidenav,
main.wrap.sheet > .sidenav {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hero .sidenav::-webkit-scrollbar,
main.wrap.sheet > .sidenav::-webkit-scrollbar {
    display: none;
    height: 0;
}
body:has(main.wrap.sheet) {
    display: block;
    height: auto;
    overflow: visible;
}
body:has(main.wrap.sheet) > .topbar {
    display: block;
    position: relative;
    z-index: 30;
}
body:has(main.wrap.sheet) > .ticker { display: flex; }
body:has(main.wrap.sheet) > .site-foot { display: block; position: relative; }
main.wrap.sheet > .sidenav { min-height: 0; overflow: hidden; }
@media (max-width: 980px) {
    main.wrap.sheet > .sidenav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        height: auto;
        min-height: 72px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    main.wrap.sheet > .sidenav a.navico,
    main.wrap.sheet > .sidenav a.gifbox {
        flex: 0 0 72px;
        width: 72px;
        height: 72px;
        min-height: 72px;
    }
}
.hero .sidenav,
main.wrap.sheet > .sidenav {
    align-self: start !important;
    width: 96px !important;
    height: auto !important;
    min-height: 0 !important;
}
.hero .sidenav a.gifbox,
.hero .sidenav a.navico,
main.wrap.sheet > .sidenav a.gifbox,
main.wrap.sheet > .sidenav a.navico {
    flex: 0 0 78px !important;
    width: 96px !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
}
@media (max-width: 980px) {
    .hero .sidenav,
    main.wrap.sheet > .sidenav {
        align-self: stretch !important;
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important;
        overflow-x: auto !important;
    }
    .hero .sidenav a.gifbox,
    .hero .sidenav a.navico,
    main.wrap.sheet > .sidenav a.gifbox,
    main.wrap.sheet > .sidenav a.navico {
        flex: 0 0 72px !important;
        width: 72px !important;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
    }
}
@media (min-width: 981px) {
    .hero .sidenav {
        position: sticky !important;
        top: 12px !important;
        align-self: start !important;
        z-index: 3 !important;
    }
}
@media (min-width: 981px) {
    main.wrap:has(> .sidenav) {
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr) !important;
        align-items: start !important;
        column-gap: 10px !important;
    }
    main.wrap > .sidenav {
        grid-column: 1 !important;
        grid-row: 1 / span 30 !important;
        height: max-content !important;
        position: sticky !important;
        top: 12px !important;
        align-self: start !important;
        width: 96px !important;
        height: auto !important;
        z-index: 3 !important;
    }
    main.wrap > *:not(.sidenav) {
        grid-column: 2 !important;
        min-width: 0;
    }
    .hero { display: block !important; }
	main.wrap > .hero { align-self: start !important; height: auto !important; }
    .hero-main, .seo-box, .seo { height: auto !important; flex: 0 0 auto !important; }
}
@media (max-width: 980px) {
    main.wrap { display: flex !important; flex-direction: column !important; }
    main.wrap > .hero,
    main.wrap > .hero > .hero-main { display: contents !important; }
    main.wrap .stage { order: 1; width: 100%; }
    main.wrap > .sidenav {
        order: 2;
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important;
        position: static !important;
        overflow-x: auto !important;
        grid-row: auto !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    main.wrap > .sidenav::-webkit-scrollbar { display: none; height: 0; }
    main.wrap > .sidenav a.navico {
        flex: 0 0 68px !important;
        width: 68px !important;
        height: auto !important;
        min-height: 64px !important;
    }
    main.wrap .cta { order: 3; width: 100%; }
    main.wrap .seo-box { order: 4; width: 100%; }
    main.wrap > .crumbs,
    main.wrap > .panel,
    main.wrap > .split { order: 5; width: 100%; }
}