/* 00-foundation.css | Core interface foundation */
:root{
    --bg-0:#020817;
    --bg-1:#071426;
    --bg-2:#0b2440;

    --surface-1:rgba(255,255,255,.075);
    --surface-2:rgba(255,255,255,.045);
    --surface-3:rgba(255,255,255,.03);
    --surface-4:rgba(8,22,38,.78);
    --surface-5:rgba(10,24,40,.88);
    --surface-6:rgba(255,255,255,.055);

    --text:#f4fbff;
    --muted:rgba(224,242,254,.74);
    --muted-2:rgba(224,242,254,.54);

    --white-03:rgba(255,255,255,.03);
    --white-04:rgba(255,255,255,.04);
    --white-05:rgba(255,255,255,.05);
    --white-06:rgba(255,255,255,.06);
    --white-08:rgba(255,255,255,.08);
    --white-10:rgba(255,255,255,.10);
    --white-12:rgba(255,255,255,.12);

    --ocean-primary:#38bdf8;
    --ocean-secondary:#0ea5e9;
    --ocean-soft:#7dd3fc;
    --ocean-aqua:#22d3ee;
    --ocean-highlight:#93c5fd;
    --ocean-blue:#60a5fa;

    --shadow-soft:0 14px 30px rgba(0,0,0,.20);
    --shadow-md:0 18px 38px rgba(0,0,0,.24);
    --shadow-lg:0 24px 58px rgba(0,0,0,.28);
    --shadow-glow:0 0 0 1px rgba(56,189,248,.06) inset;
    --shadow-ocean:0 10px 22px rgba(56,189,248,.18);

    --glass-blur:10px;
    --glass-blur-strong:12px;

    --ease:cubic-bezier(.22,.84,.24,1);
    --dur-fast:.18s;
    --dur-mid:.24s;
    --dur-slow:.4s;

    --focus-ring:0 0 0 4px rgba(56,189,248,.16);

    --safe-top:env(safe-area-inset-top);
    --safe-bottom:env(safe-area-inset-bottom);

    --shell-max:1280px;
    --shell-pad:clamp(14px, 2vw, 24px);
    --shell-width:min(var(--shell-max), calc(100% - (var(--shell-pad) * 2)));

    --radius-sm:14px;
    --radius-md:18px;
    --radius-lg:22px;
    --radius-xl:26px;
    --radius-2xl:30px;
    --radius-pill:999px;

    --nav-offset:88px;

    --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,"Inter","Segoe UI",Roboto,sans-serif;
    --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,"Inter","Segoe UI",Roboto,sans-serif;
  }

  *,
  *::before,
  *::after{
    box-sizing:border-box;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  *::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
    background:transparent !important;
  }

  html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    scroll-behavior:auto;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scrollbar-gutter:auto;
    scroll-padding-top:calc(var(--nav-offset) + 18px);
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  body{
    width:100%;
    max-width:100%;
    margin:0;
    min-height:100svh;
    min-height:100dvh;
    overflow-x:hidden;
    position:relative;
    font-family:var(--font-ui);
    color:var(--text);
    background:
      radial-gradient(circle at 14% 12%, rgba(56,189,248,.13), transparent 25%),
      radial-gradient(circle at 86% 8%, rgba(14,165,233,.09), transparent 20%),
      radial-gradient(circle at 50% 55%, rgba(125,211,252,.05), transparent 28%),
      linear-gradient(135deg,var(--bg-0),var(--bg-1) 46%,var(--bg-2));
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-kerning:normal;
    font-synthesis-weight:none;
    overscroll-behavior-x:none;
    overscroll-behavior-y:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  img{max-width:100%;display:block}
  a{color:inherit}
  button,input{font:inherit;touch-action:manipulation}

  body::before,
  body::after{
    content:"";
    position:fixed;
    pointer-events:none;
    z-index:0;
    border-radius:999px;
    filter:blur(16px);
    opacity:.46;
    transform:translateZ(0);
    backface-visibility:hidden;
  }

  body::before{
    top:8%;
    right:-88px;
    width:220px;
    height:220px;
    background:radial-gradient(circle, rgba(56,189,248,.14), transparent 70%);
    animation:floatA 18s ease-in-out infinite;
  }

  body::after{
    left:-58px;
    bottom:10%;
    width:200px;
    height:200px;
    background:radial-gradient(circle, rgba(125,211,252,.10), transparent 72%);
    animation:floatB 20s ease-in-out infinite;
  }

  @keyframes floatA{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(-8px,8px,0) scale(1.03)}
  }

  @keyframes floatB{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(8px,-6px,0) scale(1.02)}
  }

  @keyframes pulseDot{
    0%{box-shadow:0 0 0 0 rgba(56,189,248,.45)}
    70%{box-shadow:0 0 0 8px rgba(56,189,248,0)}
    100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}
  }

  @keyframes pulseOceanSoft{
    0%{box-shadow:0 0 0 0 rgba(147,197,253,.44)}
    70%{box-shadow:0 0 0 8px rgba(147,197,253,0)}
    100%{box-shadow:0 0 0 0 rgba(147,197,253,0)}
  }

  @keyframes pulseBlue{
    0%{box-shadow:0 0 0 0 rgba(96,165,250,.42)}
    70%{box-shadow:0 0 0 8px rgba(96,165,250,0)}
    100%{box-shadow:0 0 0 0 rgba(96,165,250,0)}
  }

  @keyframes floatHero{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(-6px,6px,0) scale(1.02)}
  }

  @keyframes sheen{
    0%{transform:translateX(-120%);opacity:0}
    10%{opacity:.22}
    100%{transform:translateX(120%);opacity:0}
  }

  @keyframes toastIn{
    to{
      transform:translateY(0) translateX(-50%);
      opacity:1;
    }
  }

  body.modal-open{overflow:hidden}

  button:focus-visible,
  input:focus-visible,
  a:focus-visible,
  .banner-stage:focus-visible,
  .market-card:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
  }

  .sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .title-font{
    font-family:var(--font-display);
    font-weight:700;
    letter-spacing:-.028em;
    font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  }

  .app-root{
    position:relative;
    z-index:1;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    isolation:isolate;
    overflow-x:hidden;
  }

  .zoom-out-guard{
    position:fixed;
    inset:0;
    z-index:220;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(2,8,18,.74);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
  }

  .zoom-out-guard.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .zoom-out-guard{
    background:#ffffff;
  }

  .zoom-out-guard__inner{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    max-width:min(100%, 760px);
    width:100%;
    padding:24px;
  }

  .desktop-only-{
    display:block;
    max-width:100%;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
    color:#0b1220;
    font-family:var(--font-display);
    font-size:clamp(1.2rem, 2.6vw, 2rem);
    font-weight:900;
    line-height:1.15;
    letter-spacing:-.03em;
    text-align:center;
    white-space:nowrap;
  }

  .zoom-out-guard__title,
  .zoom-out-guard__subtitle{
    display:none !important;
  }

  body.is-zoom-guard-active{
    overflow:hidden;
  }

  body.is-zoom-guard-active .app-root,
  body.is-zoom-guard-active .modal,
  body.is-zoom-guard-active .toast-stack{
    visibility:hidden;
  }

  html.is-zendesk-force-hidden .zEWidget-launcher,
  html.is-zendesk-force-hidden .zEWidget-webWidget,
  html.is-zendesk-force-hidden iframe[id^="launcher"],
  html.is-zendesk-force-hidden iframe[id^="webWidget"],
  html.is-zendesk-force-hidden iframe[title*="Zendesk"],
  html.is-zendesk-force-hidden iframe[title*="widget"]{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  main{
    flex:1 0 auto;
    padding-bottom:0;
    overflow-x:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .shell{
    position:relative;
    z-index:1;
    width:var(--shell-width);
    max-width:var(--shell-width);
    margin-inline:auto;
  }

  .glass,
  .glass-strong,
  .search-panel,
  .footer-card,
  .modal-card,
  .nav-dropdown,
  .market-card{
    border:1px solid var(--white-08);
  }

  .glass{
    background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(var(--glass-blur)) saturate(125%);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(125%);
  }

  .glass-strong{
    background:linear-gradient(180deg, rgba(8,22,38,.88), rgba(7,20,34,.78));
    box-shadow:var(--shadow-md);
    backdrop-filter:blur(var(--glass-blur-strong)) saturate(132%);
    -webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(132%);
  }

  .nav-wrap{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:80;
    isolation:isolate;
    border-bottom:1px solid rgba(255,255,255,.06);
    background:linear-gradient(180deg, rgba(3,12,24,.92), rgba(3,12,24,.84));
    box-shadow:0 1px 0 rgba(255,255,255,.03), 0 8px 22px rgba(0,0,0,.14);
    transform:translateZ(0);
    backface-visibility:hidden;
  }

  .nav-wrap::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    backdrop-filter:blur(14px) saturate(135%);
    -webkit-backdrop-filter:blur(14px) saturate(135%);
  }

  .nav-shell{position:relative}

  .nav-row{
    min-height:72px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"brand links actions";
    align-items:center;
    gap:14px;
    padding:calc(10px + (var(--safe-top) * .18)) 0 10px;
  }

  .brand-wrap{
    grid-area:brand;
    display:flex;
    align-items:center;
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
  }

  .brand-logo-link{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    min-width:0;
    text-decoration:none;
  }

  .brand-logo-frame{
    display:flex;
    align-items:center;
    max-width:min(100%, 260px);
    min-width:0;
  }

  .brand-logo-img{
    display:block;
    width:auto;
    height:clamp(38px, 4.2vw, 52px);
    max-width:100%;
    object-fit:contain;
    object-position:left center;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,.22));
  }

  .nav-link-row{
    grid-area:links;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    min-width:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .nav-link{
    color:var(--muted);
    text-decoration:none;
    transition:
      color var(--dur-fast) ease,
      transform var(--dur-fast) var(--ease),
      background-color var(--dur-fast) ease,
      border-color var(--dur-fast) ease;
    font-size:14px;
    font-weight:700;
  }

  .nav-link:hover,
  .nav-link:focus-visible{
    color:#fff;
    transform:translateY(-1px);
  }

  .header-actions{
    grid-area:actions;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:nowrap;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    flex:0 0 auto;
  }

  .menu-toggle{
    display:none;
    position:relative;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:16px;
    color:#eff9ff;
    border:1px solid var(--white-10);
    background:var(--white-06);
    box-shadow:inset 0 1px 0 var(--white-05);
    flex:0 0 auto;
  }

  .menu-toggle-box{
    position:relative;
    width:18px;
    height:14px;
    display:block;
  }

  .menu-toggle-box span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transition:
      transform var(--dur-mid) var(--ease),
      top var(--dur-mid) var(--ease),
      opacity var(--dur-fast) ease,
      width var(--dur-mid) ease;
    transform-origin:center;
  }

  .menu-toggle-box span:nth-child(1){top:0}
  .menu-toggle-box span:nth-child(2){top:6px}
  .menu-toggle-box span:nth-child(3){top:12px}

  .menu-toggle.is-open .menu-toggle-box span:nth-child(1){
    top:6px;
    transform:rotate(45deg);
  }

  .menu-toggle.is-open .menu-toggle-box span:nth-child(2){
    opacity:0;
    width:0;
  }

  .menu-toggle.is-open .menu-toggle-box span:nth-child(3){
    top:6px;
    transform:rotate(-45deg);
  }

  .nav-dropdown-wrap{
    position:absolute;
    top:calc(100% - 2px);
    right:0;
    width:min(290px, calc(100vw - 28px));
    padding-top:10px;
    z-index:85;
    pointer-events:none;
  }

  .nav-dropdown{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    padding:10px;
    opacity:0;
    transform:translateY(-10px) scale(.98);
    transition:
      opacity var(--dur-fast) ease,
      transform var(--dur-mid) var(--ease);
    pointer-events:none;
    box-shadow:0 20px 46px rgba(0,0,0,.26);
    background:linear-gradient(180deg, rgba(8,22,38,.94), rgba(7,20,34,.86));
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .nav-dropdown::before{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    top:0;
    height:1px;
    background:linear-gradient(90deg, rgba(56,189,248,0), rgba(56,189,248,.8), rgba(56,189,248,0));
    pointer-events:none;
  }

  .nav-dropdown.is-open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }

  .nav-dropdown-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:52px;
    padding:0 16px;
    border-radius:16px;
    text-decoration:none;
    color:#f4fbff;
    font-size:13px;
    font-weight:800;
    letter-spacing:.01em;
    border:1px solid transparent;
    transition:
      transform var(--dur-fast) var(--ease),
      border-color var(--dur-fast) ease,
      background-color var(--dur-fast) ease,
      color var(--dur-fast) ease;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .nav-dropdown-link + .nav-dropdown-link{margin-top:8px}

  .nav-dropdown-link:hover,
  .nav-dropdown-link:focus-visible{
    transform:translateY(-1px);
    border-color:rgba(56,189,248,.18);
    background:rgba(255,255,255,.05);
    color:#fff;
  }

  .nav-dropdown-link i{
    color:rgba(125,211,252,.85);
    font-size:12px;
    flex:0 0 auto;
  }

  .hero-chip,
  .mini-chip,
  .stat-chip,
  .state-chip{
    --chip-bg:rgba(255,255,255,.055);
    --chip-border:rgba(255,255,255,.10);
    --chip-text:var(--muted);
    display:inline-flex;
    align-items:center;
    gap:10px;
    border-radius:999px;
    border:1px solid var(--chip-border);
    background:var(--chip-bg);
    color:var(--chip-text);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }

  .hero-chip{
    padding:11px 15px;
    color:#e0f7ff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    width:fit-content;
    backdrop-filter:blur(var(--glass-blur)) saturate(125%);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(125%);
  }

  .mini-chip,
  .stat-chip{
    padding:8px 12px;
    font-size:12px;
    font-weight:700;
    width:fit-content;
    backdrop-filter:blur(var(--glass-blur)) saturate(125%);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(125%);
  }

  .stat-chip{
    width:100%;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    transition:
      transform var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      background-color var(--dur-fast) ease,
      color var(--dur-fast) ease;
    -webkit-tap-highlight-color:transparent;
  }

  .stat-chip:active{transform:translateY(1px) scale(.99)}

  .stat-chip.is-active{
    color:#02111f;
    background:linear-gradient(135deg,var(--ocean-primary),var(--ocean-soft));
    border-color:transparent;
    box-shadow:0 10px 20px rgba(56,189,248,.14);
  }

  .badge-open,
  .state-open{
    --chip-text:#e0f7ff;
    --chip-border:rgba(56,189,248,.30);
    --chip-bg:linear-gradient(135deg, rgba(14,165,233,.20), rgba(56,189,248,.14));
  }

  .badge-wait,
  .state-wait{
    --chip-text:#dbeafe;
    --chip-border:rgba(147,197,253,.30);
    --chip-bg:linear-gradient(135deg, rgba(147,197,253,.22), rgba(186,230,253,.14));
  }

  .badge-cycle,
  .state-cycle{
    --chip-text:#e0faff;
    --chip-border:rgba(34,211,238,.30);
    --chip-bg:linear-gradient(135deg, rgba(34,211,238,.22), rgba(34,211,238,.14));
  }

  .badge-done,
  .state-done{
    --chip-text:#eff6ff;
    --chip-border:rgba(96,165,250,.30);
    --chip-bg:linear-gradient(135deg, rgba(96,165,250,.20), rgba(59,130,246,.12));
  }

  .mini-chip.badge-neutral{
    --chip-text:#eff9ff;
    --chip-bg:rgba(255,255,255,.05);
    --chip-border:rgba(255,255,255,.08);
  }

  .live-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:var(--ocean-primary);
    box-shadow:none;
    animation:none;
    flex:0 0 auto;
  }

  .hero-chip .live-dot,
  #hero-next-state .live-dot,
  [data-modal-role="status"] .live-dot{
    box-shadow:0 0 0 0 rgba(56,189,248,.6);
    animation:pulseDot 2.2s infinite;
  }

  #hero-next-state.state-wait .live-dot,
  [data-modal-role="status"].state-wait .live-dot{
    background:#93c5fd;
    box-shadow:0 0 0 0 rgba(147,197,253,.62);
    animation:pulseOceanSoft 2.2s infinite;
  }

  #hero-next-state.state-cycle .live-dot,
  [data-modal-role="status"].state-cycle .live-dot{
    background:#22d3ee;
    box-shadow:0 0 0 0 rgba(34,211,238,.6);
    animation:pulseDot 2.2s infinite;
  }

  #hero-next-state.state-done .live-dot,
  [data-modal-role="status"].state-done .live-dot{
    background:#60a5fa;
    box-shadow:0 0 0 0 rgba(96,165,250,.58);
    animation:pulseBlue 2.2s infinite;
  }

  :is(
    .btn-primary,
    .btn-secondary,
    .btn-login,
    .btn-register,
    .ghost-btn,
    .filter-btn,
    .market-detail-btn,
    .copy-mini-btn,
    .banner-dot,
    .schedule-jump-btn,
    .menu-toggle
  ){
    border:0;
    cursor:pointer;
    transition:
      transform var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) ease,
      background-color var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      opacity var(--dur-fast) ease,
      color var(--dur-fast) ease;
    -webkit-tap-highlight-color:transparent;
  }

  :is(
    .btn-primary,
    .btn-secondary,
    .btn-login,
    .btn-register,
    .ghost-btn,
    .filter-btn,
    .market-detail-btn,
    .copy-mini-btn,
    .banner-dot,
    .schedule-jump-btn,
    .menu-toggle
  ):active{
    transform:translateY(1px) scale(.99);
  }

  :is(
    .btn-register,
    .btn-login,
    .btn-primary,
    .btn-secondary,
    .ghost-btn,
    .market-detail-btn,
    .copy-mini-btn,
    .schedule-jump-btn,
    .menu-toggle
  ):hover,
  :is(
    .btn-register,
    .btn-login,
    .btn-primary,
    .btn-secondary,
    .ghost-btn,
    .market-detail-btn,
    .copy-mini-btn,
    .schedule-jump-btn,
    .menu-toggle
  ):focus-visible{
    transform:translateY(-1px);
  }

  .btn-register,
  .btn-secondary,
  .ghost-btn,
  .copy-mini-btn,
  .schedule-jump-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#eff9ff;
    border:1px solid var(--white-10);
    background:var(--white-06);
    box-shadow:inset 0 1px 0 var(--white-05);
  }

  .btn-register{
    min-height:44px;
    padding:0 17px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.015em;
    white-space:nowrap;
    min-width:0;
    flex:0 1 auto;
  }

  .btn-login,
  .btn-primary,
  .market-detail-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#02111f;
    background:linear-gradient(135deg,var(--ocean-primary) 0%, var(--ocean-secondary) 46%, var(--ocean-soft) 100%);
    box-shadow:var(--shadow-ocean), inset 0 1px 0 rgba(255,255,255,.22);
  }

  .btn-login{
    min-height:44px;
    padding:0 20px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.015em;
    white-space:nowrap;
    min-width:0;
    flex:0 1 auto;
  }

  .btn-primary{
    gap:12px;
    min-height:54px;
    padding:0 22px;
    border-radius:999px;
    font-weight:800;
  }

  .btn-secondary,
  .ghost-btn{
    min-height:50px;
    padding:0 18px;
    border-radius:999px;
    font-weight:800;
  }

  .copy-mini-btn{
    min-height:38px;
    padding:0 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .schedule-jump-btn{
    min-height:40px;
    padding:0 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
    flex:0 0 auto;
  }

  .banner-section{
    padding:calc(var(--nav-offset) + 14px) 0 8px;
  }

  .banner-shell{
    position:relative;
    width:100%;
    max-width:100%;
    border-radius:var(--radius-2xl);
    overflow:hidden;
    padding:0;
    box-shadow:var(--shadow-lg);
  }

  .banner-stage{
    position:relative;
    width:100%;
    aspect-ratio:16 / 5.3;
    min-height:184px;
    max-height:430px;
    overflow:hidden;
    border-radius:var(--radius-2xl);
    background:
      radial-gradient(circle at 12% 20%, rgba(56,189,248,.10), transparent 24%),
      radial-gradient(circle at 88% 24%, rgba(125,211,252,.07), transparent 20%),
      linear-gradient(135deg, rgba(8,24,42,.94), rgba(4,14,28,.92));
    touch-action:pan-y;
    cursor:grab;
    user-select:none;
    isolation:isolate;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .banner-stage.is-single{cursor:default}
  .banner-stage.is-dragging{cursor:grabbing}

  .banner-track{
    position:relative;
    z-index:1;
    display:flex;
    width:100%;
    height:100%;
    transform:translate3d(0,0,0);
    transition:transform .44s var(--ease);
    will-change:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .banner-stage.is-dragging .banner-track{will-change:transform}

  .banner-slide{
    min-width:100%;
    height:100%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    isolation:isolate;
  }

  .banner-frame{
    position:relative;
    width:100%;
    height:100%;
    border-radius:24px;
    overflow:hidden;
    border:1px solid var(--white-08);
    box-shadow:0 18px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
    background:rgba(255,255,255,.03);
  }

  .banner-frame::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 28%, rgba(0,0,0,.05)),
      linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(0,0,0,.04));
  }

  .banner-picture,
  .banner-picture img{
    width:100%;
    height:100%;
    display:block;
  }

  .banner-picture img{
    object-fit:cover;
    object-position:center;
    user-select:none;
    -webkit-user-drag:none;
    background:#081a2e;
  }

  .banner-empty{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    text-align:center;
    padding:24px;
    color:rgba(224,242,254,.74);
    font-weight:700;
    line-height:1.7;
    background:
      radial-gradient(circle at 20% 18%, rgba(56,189,248,.12), transparent 24%),
      radial-gradient(circle at 78% 22%, rgba(125,211,252,.08), transparent 22%),
      linear-gradient(135deg, rgba(8,24,42,.94), rgba(5,16,30,.96));
  }

  .banner-empty strong{
    display:block;
    color:#fff;
    font-family:var(--font-display);
    font-size:clamp(1.3rem, 3vw, 2rem);
    letter-spacing:-.028em;
    margin-bottom:8px;
    font-weight:700;
  }

  .banner-controls{
    position:absolute;
    left:50%;
    bottom:14px;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateX(-50%);
    pointer-events:none;
  }

  .banner-dots{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(5,18,34,.46);
    border:1px solid var(--white-08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    pointer-events:auto;
  }

  .banner-dot{
    width:9px;
    height:9px;
    padding:0;
    border-radius:999px;
    background:rgba(255,255,255,.24);
    box-shadow:none;
    transition:
      transform var(--dur-fast) ease,
      background-color var(--dur-fast) ease,
      width var(--dur-fast) ease;
  }

  .banner-dot.is-active{
    width:26px;
    background:linear-gradient(135deg,var(--ocean-primary),var(--ocean-soft));
  }

  .hero{
    position:relative;
    padding:calc(var(--nav-offset) + 14px) 0 22px;
    scroll-margin-top:calc(var(--nav-offset) + 18px);
  }

  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:20px;
    align-items:stretch;
  }

  .hero-copy,
  .hero-panel{
    position:relative;
    width:100%;
    max-width:100%;
    overflow:hidden;
    border-radius:var(--radius-2xl);
  }

  .hero-copy{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:18px;
    min-height:420px;
    isolation:isolate;
  }

  .hero-copy__content{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:clamp(10px, 1.25vw, 18px) clamp(8px, 1vw, 12px) clamp(6px, .9vw, 10px);
  }

  .hero-copy .banner-shell{
    position:relative;
    z-index:1;
    width:100%;
    margin:0;
    border-radius:28px;
  }

  .hero-copy .banner-stage{
    min-height:188px;
    max-height:420px;
    aspect-ratio:16 / 5.4;
    border-radius:28px;
  }

  .hero-panel{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:20px;
    min-height:420px;
  }

  .hero-copy::before,
  .hero-panel::before{
    content:"";
    position:absolute;
    inset:auto auto 0 0;
    width:220px;
    height:220px;
    background:radial-gradient(circle, rgba(56,189,248,.16), transparent 70%);
    pointer-events:none;
  }

  .hero-copy::after{
    content:"";
    position:absolute;
    right:-60px;
    top:-60px;
    width:210px;
    height:210px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(125,211,252,.14), rgba(125,211,252,0) 72%);
    filter:blur(6px);
    pointer-events:none;
    animation:floatHero 12s ease-in-out infinite;
  }

  .hero-title{
    margin:0;
    max-width:11ch;
    font-family:var(--font-display);
    font-size:clamp(2.1rem, 5.4vw, 4.15rem);
    line-height:.97;
    letter-spacing:-.055em;
    font-weight:700;
    text-wrap:balance;
    text-shadow:0 0 14px rgba(56,189,248,.08);
  }

  .hero-desc{
    max-width:64ch;
    font-size:clamp(.98rem,1.7vw,1.05rem);
    line-height:1.78;
    color:var(--muted);
    font-weight:500;
  }

  .hero-copy__content .hero-chip{
    margin-bottom:6px;
  }

  .hero-copy__content .hero-title{
    max-width:12ch;
  }

  .hero-copy__content .hero-desc{
    margin-top:18px;
  }

  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
  }

  .hero-next{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px;
    min-height:100%;
    overflow:hidden;
    padding:20px;
    border-radius:var(--radius-xl);
    background:linear-gradient(145deg, rgba(8,26,44,.88), rgba(5,18,34,.78));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  }

  .hero-next::after{
    content:"";
    position:absolute;
    inset:auto -10% -35% auto;
    width:170px;
    height:170px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(56,189,248,.14), transparent 72%);
    pointer-events:none;
  }

  .hero-next-top{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .hero-next-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }

  .hero-next-header-copy{
    min-width:0;
    flex:1 1 auto;
  }

  .hero-next-name{
    margin-top:4px;
    font-family:var(--font-display);
    font-size:clamp(2rem,3vw,2.6rem);
    line-height:.95;
    letter-spacing:-.04em;
    font-weight:700;
    text-wrap:balance;
  }

  .hero-next-meta{
    margin-top:10px;
    font-size:.92rem;
    line-height:1.6;
    color:rgba(224,242,254,.68);
  }

  .hero-next-state-wrap{
    flex:0 0 auto;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
  }

  .hero-next-state-wrap .mini-chip{
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    white-space:nowrap;
    box-shadow:0 10px 24px rgba(0,0,0,.16);
  }

  .hero-next-count-wrap{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:18px 18px 16px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(145deg, rgba(8,28,48,.92), rgba(8,22,38,.86));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  }

  .hero-next-phase{
    font-size:.9rem;
    line-height:1.55;
    color:rgba(224,242,254,.68);
  }

  .hero-next-metrics{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }

  .hero-next-metric{
    min-width:0;
    padding:14px 15px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.07);
    background:linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.02));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  }

  .hero-next-metric-label{
    font-size:.68rem;
    line-height:1.2;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:rgba(224,242,254,.46);
    font-weight:700;
  }

  .hero-next-metric-value{
    margin-top:8px;
    font-size:1rem;
    line-height:1.2;
    font-weight:700;
    color:var(--text);
    text-wrap:balance;
    word-break:break-word;
  }

  .hero-next-site-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-width:0;
    max-width:100%;
    color:var(--text);
    text-decoration:none;
    font-weight:800;
    line-height:1.25;
  }

  .hero-next-site-link i{
    flex:0 0 auto;
    font-size:.86em;
    color:var(--ocean-aqua);
  }

  .hero-next-site-link span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .hero-next-site-link:hover,
  .hero-next-site-link:focus-visible{
    color:#fff;
  }

  .hero-next-site-link.is-disabled{
    opacity:.58;
    pointer-events:none;
  }

  .hero-next-about{
    position:relative;
    z-index:1;
    margin-top:auto;
    padding:18px;
    border-radius:22px;
    min-height:114px;
    background:linear-gradient(145deg, rgba(8,26,44,.86), rgba(6,20,35,.7));
    border:1px solid rgba(255,255,255,.08);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .hero-next-about .section-label{
    margin-bottom:4px;
  }

  .hero-next-about-copy{
    font-size:.93rem;
    line-height:1.8;
    color:rgba(224,242,254,.76);
  }

  .big-count{
    font-family:var(--font-display);
    font-size:clamp(1.9rem,4vw,3rem);
    line-height:.98;
    letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;
    font-weight:700;
  }

  .section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:20px;
    flex-wrap:wrap;
  }

  .section-title{
    margin:0;
    font-family:var(--font-display);
    font-size:clamp(1.8rem,4vw,2.55rem);
    line-height:1.02;
    letter-spacing:-.04em;
    font-weight:700;
    text-wrap:balance;
  }

  .section-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
    margin-left:auto;
    width:fit-content;
  }

  .tool-stack{
    display:grid;
    gap:12px;
    margin-bottom:20px;
  }

  .search-panel{
    width:100%;
    max-width:100%;
    padding:12px;
    border-radius:24px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(var(--glass-blur)) saturate(125%);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(125%);
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .search-wrap{
    position:relative;
    display:block;
    margin:0;
  }

  .search-wrap i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:rgba(186,230,253,.55);
    pointer-events:none;
  }

  .input-premium{
    width:100%;
    min-height:56px;
    padding:0 18px 0 48px;
    border-radius:18px;
    border:1px solid var(--white-10);
    background:rgba(255,255,255,.04);
    color:#fff;
    outline:none;
    transition:
      border-color var(--dur-fast) ease,
      background-color var(--dur-fast) ease,
      box-shadow var(--dur-fast) ease;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    font-weight:600;
  }

  .input-premium::placeholder{color:rgba(186,230,253,.45)}

  .input-premium:focus{
    border-color:rgba(56,189,248,.4);
    background:rgba(255,255,255,.08);
    box-shadow:0 0 0 4px rgba(56,189,248,.08);
  }

  .filter-shell,
  .filter-row,
  #filter-row,
  .stats-strip,
  #stats-strip{
    display:none !important;
  }

  .market-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:clamp(12px, 1.35vw, 18px);
    align-items:stretch;
    grid-auto-rows:1fr;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .market-grid > *{
    min-width:0;
    max-width:100%;
  }

  .market-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:clamp(10px, 1vw, 13px);
    min-width:0;
    min-height:100%;
    height:100%;
    width:100%;
    max-width:100%;
    padding:clamp(14px, 1.25vw, 18px);
    border-radius:24px;
    overflow:hidden;
    isolation:isolate;
    cursor:pointer;
    align-self:stretch;
    transform:translateZ(0);
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(calc(var(--glass-blur) + 1px)) saturate(128%);
    -webkit-backdrop-filter:blur(calc(var(--glass-blur) + 1px)) saturate(128%);
    transition:
      border-color var(--dur-fast) ease,
      box-shadow var(--dur-fast) ease,
      transform var(--dur-fast) var(--ease);
  }

  .market-card > *{
    min-width:0;
  }

  .market-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right, rgba(56,189,248,.08), transparent 38%);
    pointer-events:none;
    z-index:-1;
  }

  .market-card::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    top:0;
    height:2px;
    border-radius:999px;
    background:transparent;
    transition:background var(--dur-fast) ease;
    opacity:.95;
  }

  .market-card[data-state="open"]::after{
    background:linear-gradient(90deg, rgba(56,189,248,0), rgba(56,189,248,.86), rgba(56,189,248,0));
  }

  .market-card[data-state="wait"]::after{
    background:linear-gradient(90deg, rgba(147,197,253,0), rgba(147,197,253,.92), rgba(147,197,253,0));
  }

  .market-card[data-state="cycle"]::after{
    background:linear-gradient(90deg, rgba(34,211,238,0), rgba(34,211,238,.86), rgba(34,211,238,0));
  }

  .market-card[data-state="done"]::after{
    background:linear-gradient(90deg, rgba(96,165,250,0), rgba(96,165,250,.92), rgba(96,165,250,0));
  }

  .market-card.is-spotlight{
    border-color:rgba(56,189,248,.22);
    box-shadow:
      0 18px 34px rgba(0,0,0,.24),
      0 0 0 1px rgba(56,189,248,.08) inset,
      0 0 18px rgba(56,189,248,.08);
  }

  .market-card.is-spotlight::before{
    background:
      radial-gradient(circle at top right, rgba(56,189,248,.14), transparent 36%),
      radial-gradient(circle at bottom left, rgba(125,211,252,.08), transparent 42%);
  }

  .market-card .mini-chip,
  .market-card .state-chip,
  .market-card .badge-open,
  .market-card .badge-wait,
  .market-card .badge-cycle,
  .market-card .badge-done,
  .market-card .badge-neutral{
    display:none !important;
  }

  .market-head{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:10px;
    min-width:0;
    width:100%;
    margin-bottom:2px;
    align-content:start;
  }

  .market-head > *:first-child{
    min-width:0;
    width:100%;
    display:block;
  }

  .market-code{
    display:block;
    margin-bottom:5px;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:rgba(186,230,253,.48);
  }

  .market-name{
    display:-webkit-box;
    width:100%;
    max-width:none;
    margin-top:0;
    padding-right:0;
    min-height:calc(1.08em * 2);
    font-family:var(--font-display);
    font-size:clamp(1rem, 1.15vw, 1.26rem);
    line-height:1.08;
    letter-spacing:-.022em;
    overflow:hidden;
    overflow-wrap:anywhere;
    word-break:break-word;
    hyphens:auto;
    font-weight:800;
    text-wrap:balance;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  .countdown-pill,
  .countdown-label,
  .countdown-value{
    display:none !important;
  }

  .state-chip{
    min-height:38px;
    padding:0 12px;
    width:fit-content;
    font-size:12px;
    font-weight:800;
    letter-spacing:.01em;
  }

  .state-open .live-dot{background:#0ea5e9}
  .state-wait .live-dot{background:#93c5fd}
  .state-cycle .live-dot{background:#22d3ee}
  .state-done .live-dot{background:#60a5fa}

  .schedule-box,
  .number-box,
  .detail-box{
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:14px;
    border-radius:18px;
    background:linear-gradient(145deg, rgba(12,31,51,.92), rgba(6,18,33,.86));
    border:1px solid rgba(56,189,248,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }

  .number-box{
    position:relative;
    overflow:hidden;
    background:
      linear-gradient(145deg, rgba(10,30,52,.96), rgba(6,18,33,.90)),
      radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 46%);
  }

  .number-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.06) 22%, transparent 44%);
    transform:translateX(-120%);
    opacity:0;
    pointer-events:none;
  }

  .number-box::after{
    content:"";
    position:absolute;
    inset:auto -16px -26px auto;
    width:96px;
    height:96px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(255,255,255,.12), transparent 68%);
    opacity:.22;
    pointer-events:none;
  }

  .number-value{
    margin-top:8px;
    margin-right:0;
    font-family:var(--font-display);
    font-size:clamp(1.34rem, 1.9vw, 1.82rem);
    line-height:1.02;
    letter-spacing:clamp(.045em, .16vw, .08em);
    color:#fff;
    font-variant-numeric:tabular-nums;
    font-weight:700;
    text-shadow:0 0 10px rgba(56,189,248,.08);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .schedule-list{
    display:grid;
    gap:8px;
    margin-top:10px;
    align-content:start;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .schedule-row,
  .compact-row,
  .info-row{
    display:grid;
    grid-template-columns:minmax(78px, .82fr) minmax(0, 1.18fr);
    align-items:start;
    gap:8px 12px;
    min-width:0;
    padding:9px 0;
    border-bottom:1px dashed rgba(255,255,255,.08);
  }

  .schedule-row > span,
  .compact-row > span,
  .info-row > span{
    min-width:0;
  }

  .schedule-row > strong,
  .compact-row > strong,
  .info-row > strong,
  .compact-row > a,
  .info-row > a{
    min-width:0;
    margin-left:0;
    justify-self:end;
  }

  .schedule-row span,.schedule-row strong,
  .compact-row span,.compact-row strong,
  .info-row span,.info-row strong{
    min-width:0;
    overflow-wrap:anywhere;
  }

  .schedule-row > span,
  .compact-row > span,
  .info-row > span{
    font-size:11px;
    line-height:1.42;
    color:rgba(224,242,254,.68);
  }

  .schedule-row > strong,
  .compact-row > strong,
  .info-row > strong,
  .compact-row > a,
  .info-row > a{
    font-size:12.5px;
    line-height:1.42;
  }

  .schedule-row:last-child,
  .compact-row:last-child,
  .info-row:last-child{
    border-bottom:0;
    padding-bottom:0;
  }

  .compact-row strong,
  .info-row strong{
    text-align:right;
    font-weight:800;
    line-height:1.45;
    color:#fff;
  }

  .schedule-row strong{
    text-align:right;
    font-weight:800;
    line-height:1.45;
    color:#fff;
  }

  .compact-row-info{
    grid-template-columns:minmax(0, 1fr);
    gap:4px;
    align-items:flex-start;
  }

  .compact-row-info strong,
  .compact-row-info .market-site-link{
    max-width:100%;
    line-height:1.55;
    overflow-wrap:anywhere;
    word-break:break-word;
    justify-self:start;
    text-align:left;
    justify-content:flex-start;
  }

  .compact-row-top{
    padding-top:0;
  }

  .compact-row-multi strong{
    letter-spacing:.01em;
  }

  .market-site-link{
    display:inline-flex;
    max-width:100%;
    color:#e0f7ff;
    text-decoration:none;
    font-weight:800;
    text-align:right;
    justify-content:flex-end;
    border-bottom:1px dashed rgba(125,211,252,.28);
    transition:
      color var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      opacity var(--dur-fast) ease;
  }

  .market-site-link:hover,
  .market-site-link:focus-visible{
    color:#ffffff;
    border-color:rgba(125,211,252,.55);
  }

  .market-site-link.is-disabled{
    opacity:.56;
    pointer-events:none;
    border-bottom-color:transparent;
  }

  .market-site-cell{
    min-width:0;
    display:flex;
    justify-content:flex-end;
    text-align:right;
  }

  .market-site-cell .market-site-link{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .market-card-site-link{
    font-size:inherit;
  }

  .market-info-box{
    flex:1 1 auto;
  }

  .market-info-box .schedule-list{
    margin-top:10px;
    gap:6px;
  }

  .digit-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .pair-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(56px,1fr));
    gap:10px;
    margin-top:14px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .digit-pill,
  .pair-chip{
    display:grid;
    place-items:center;
    border-radius:15px;
    font-weight:800;
    color:#f8fbff;
    border:1px solid rgba(56,189,248,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(56,189,248,.04);
  }

  .digit-pill{
    width:46px;
    height:46px;
    font-size:1.05rem;
    background:linear-gradient(145deg, rgba(18,45,72,.96), rgba(9,23,40,.92));
  }

  .pair-chip{
    min-height:42px;
    padding:0 10px;
    font-size:.95rem;
    background:linear-gradient(145deg, rgba(18,41,65,.94), rgba(8,21,36,.94));
  }

  .card-foot{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    align-items:stretch;
    gap:10px;
    margin-top:auto;
    min-width:0;
    padding-top:6px;
  }

  .stat-inline{
    display:inline-flex;
    align-items:flex-start;
    gap:7px;
    width:100%;
    min-width:0;
    padding:10px 12px;
    border-radius:14px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    line-height:1.45;
    white-space:normal;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
  }

  .stat-inline i{
    margin-top:1px;
    font-size:11px;
    color:#38bdf8;
    flex:0 0 auto;
  }

  .stat-inline span{
    min-width:0;
    overflow-wrap:anywhere;
    white-space:normal;
    line-height:1.42;
  }

  .label-with-icon{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }

  .label-with-icon i{
    color:#38bdf8;
    font-size:.92em;
    flex:0 0 auto;
  }

  .copy-mini-btn span,
  .market-detail-btn span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .market-action-row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    width:100%;
    min-width:0;
    align-items:stretch;
  }

  .copy-mini-btn,
  .market-detail-btn{
    min-height:40px;
    width:100%;
    min-width:0;
    padding:0 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .copy-mini-btn{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.10);
  }

  .market-detail-btn{
    flex:1 1 auto;
    box-shadow:0 8px 18px rgba(56,189,248,.12);
  }

  .market-empty{
    padding:30px;
    border-radius:24px;
    text-align:center;
    color:var(--muted);
    background:rgba(255,255,255,.04);
    border:1px dashed rgba(255,255,255,.12);
  }

  .footer-wrap{
    position:relative;
    width:100%;
    margin:18px 0 0;
    padding:8px 0 calc(14px + var(--safe-bottom));
    scroll-margin-top:calc(var(--nav-offset) + 18px);
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .footer-wrap::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.09), rgba(255,255,255,0));
    pointer-events:none;
  }

  .footer-card{
    position:relative;
    width:100%;
    max-width:100%;
    margin-inline:auto;
    overflow:hidden;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(10px) saturate(125%);
    -webkit-backdrop-filter:blur(10px) saturate(125%);
  }

  .footer-card::before{
    content:"";
    position:absolute;
    left:clamp(14px, 2vw, 18px);
    right:clamp(14px, 2vw, 18px);
    top:0;
    height:1px;
    background:linear-gradient(90deg, rgba(56,189,248,0), rgba(56,189,248,.75), rgba(56,189,248,0));
    pointer-events:none;
  }

  .footer-core{
    width:min(100%, 920px);
    margin-inline:auto;
  }

  .footer-inner{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:22px clamp(16px, 2.3vw, 24px);
    text-align:center;
  }

  .footer-brand{
    font-size:clamp(1.28rem, 2vw, 1.58rem);
    line-height:1.03;
    letter-spacing:-.03em;
    font-weight:700;
  }

  .footer-note{
    width:100%;
    max-width:760px;
    margin:0 auto;
    color:var(--muted);
    font-size:13.5px;
    line-height:1.78;
    font-weight:500;
  }

  .footer-copy{
    width:100%;
    color:rgba(224,242,254,.58);
    font-size:12.5px;
    line-height:1.6;
    font-weight:600;
  }

  .modal{
    position:fixed;
    inset:0;
    z-index:90;
    display:none;
    align-items:flex-start;
    justify-content:center;
    overflow:auto;
    padding:max(16px, var(--safe-top)) 16px max(16px, var(--safe-bottom)) 16px;
    background:rgba(0,0,0,.64);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .modal.is-open{display:flex}

  .modal-card{
    position:relative;
    width:min(960px, calc(100vw - 24px));
    max-height:min(92dvh, 920px);
    margin:auto;
    overflow:auto;
    padding:22px;
    border-radius:30px;
    scrollbar-width:none;
    scrollbar-gutter:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg, rgba(8,22,38,.94), rgba(7,20,34,.86));
    box-shadow:var(--shadow-md);
    backdrop-filter:blur(var(--glass-blur-strong)) saturate(132%);
    -webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(132%);
    -ms-overflow-style:none;
  }

  .modal-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap:18px;
    margin-top:18px;
  }

  .modal-stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:12px;
    margin-top:18px;
  }

  .modal-stat{
    min-width:0;
    padding:16px;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--white-08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }

  .modal-actions{
    display:flex;
    gap:12px;
    margin-top:18px;
    flex-wrap:wrap;
  }

  .schedule-modal-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 0;
    border-bottom:1px dashed rgba(255,255,255,.08);
  }

  .schedule-modal-row:last-child{border-bottom:0}

  .schedule-modal-info{
    min-width:0;
    display:grid;
    gap:4px;
  }

  .schedule-modal-name{
    font-weight:800;
    color:#fff;
    letter-spacing:.01em;
  }

  .schedule-modal-meta{
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
  }

  .toast-stack{
    position:fixed;
    left:50%;
    bottom:max(16px, var(--safe-bottom));
    z-index:95;
    display:grid;
    gap:10px;
    width:auto;
    max-width:calc(100% - 24px);
    pointer-events:none;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .toast{
    padding:12px 16px;
    border-radius:999px;
    background:rgba(5,16,30,.92);
    border:1px solid rgba(255,255,255,.09);
    box-shadow:var(--shadow-md);
    color:#eff9ff;
    transform:translateY(8px) translateX(-50%);
    opacity:0;
    animation:toastIn .22s ease forwards;
    white-space:nowrap;
    font-size:12.5px;
    font-weight:800;
    letter-spacing:.01em;
    backdrop-filter:blur(10px) saturate(125%);
    -webkit-backdrop-filter:blur(10px) saturate(125%);
  }

  .section-label,
  .box-label{
    font-size:10px;
    font-weight:800;
    color:var(--muted-2);
    letter-spacing:.11em;
    text-transform:uppercase;
  }

  @media (hover:hover) and (pointer:fine){
    .market-card:hover .number-box::before,
    .market-card:focus-within .number-box::before{
      opacity:1;
      animation:sheen 1.2s linear 1;
    }

    .market-card:hover,
    .market-card:focus-within{
      border-color:rgba(56,189,248,.18);
      box-shadow:0 18px 34px rgba(0,0,0,.22), var(--shadow-glow);
      transform:translateY(-3px);
    }
  }

  @media (max-width:1180px){
    .nav-row{gap:10px}
    .nav-link-row{gap:14px}
    .nav-link{font-size:13px}

    .btn-register{
      min-height:42px;
      padding:0 15px;
      font-size:11px;
    }

    .btn-login{
      min-height:42px;
      padding:0 17px;
      font-size:11px;
    }
  }

  @media (max-width:980px){
    .nav-row{
      grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:"brand actions";
      gap:10px;
    }

    .nav-link-row{display:none}
    .menu-toggle{display:inline-flex}
    .header-actions{gap:8px}
  }

  @media (max-width:1280px){
    .market-grid{
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:14px;
    }
  }

  @media (max-width:980px){
    .hero-grid{
      grid-template-columns:minmax(0, 1fr);
    }

    .market-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:14px;
    }
  }

  @media (max-width:980px) and (min-width:700px) and (hover:hover) and (pointer:fine){
    .market-grid{
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:12px;
    }

    .market-card{
      padding:12px;
      border-radius:20px;
      gap:10px;
    }

    .market-name{
      min-height:auto;
      font-size:clamp(.88rem, 1.45vw, 1.06rem);
      line-height:1.06;
      -webkit-line-clamp:3;
    }

    .market-code{
      font-size:8.2px;
      letter-spacing:.1em;
      margin-bottom:3px;
    }

    .schedule-box,
    .number-box,
    .detail-box{
      padding:12px;
      border-radius:16px;
    }

    .number-value{
      font-size:1.18rem;
      letter-spacing:.03em;
    }

    .schedule-row,
    .compact-row,
    .info-row{
      gap:6px;
      padding:7px 0;
    }

    .schedule-row > span,
    .compact-row > span,
    .info-row > span{
      font-size:10.2px;
    }

    .schedule-row > strong,
    .compact-row > strong,
    .info-row > strong,
    .compact-row > a,
    .info-row > a,
    .market-site-link{
      font-size:11.4px;
      line-height:1.35;
    }

    .market-action-row{
      grid-template-columns:minmax(0, 1fr);
      gap:8px;
    }

    .market-detail-btn,
    .copy-mini-btn{
      min-height:38px;
      font-size:11px;
      padding:0 12px;
    }
  }

  @media (min-width:981px){
    .hero-grid{
      grid-template-columns:minmax(0, 1.08fr) minmax(320px, .92fr);
    }
  }

  @media (max-width:560px){
    .hero-next-header{
      flex-direction:column;
      align-items:flex-start;
    }

    .hero-next-state-wrap{
      width:100%;
      justify-content:flex-start;
    }

    .hero-next-metrics{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width:760px){
    .market-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
    }
  }

  @media (max-width:820px){
    :root{
      --nav-offset:84px;
    }

    .shell{
      width:min(calc(100% - 16px), var(--shell-max));
      max-width:min(calc(100% - 16px), var(--shell-max));
    }

    .hero-copy,
    .hero-panel{min-height:auto}

    .hero-copy{
      padding:14px;
      gap:14px;
    }

    .hero-copy__content{
      padding:6px 4px 2px;
    }


    .hero-panel{
      padding:14px;
      gap:14px;
    }

    .hero-next{
      padding:16px;
      gap:14px;
    }

    .hero-next-count-wrap,
    .hero-next-about{
      border-radius:18px;
    }

    .hero-next-metrics{
      gap:10px;
    }

    .hero-next-metric{
      padding:12px;
      border-radius:16px;
    }

    .hero-next-name{
      font-size:clamp(1.6rem, 4.6vw, 2.1rem);
    }

    .modal-card{
      padding:18px;
      border-radius:24px;
    }

    .schedule-box,
    .number-box,
    .detail-box{
      padding:13px;
      border-radius:16px;
    }

    .section-head{align-items:stretch}
    .section-head .ghost-btn{width:fit-content}

    .banner-stage{
      aspect-ratio:16 / 7.6;
      min-height:150px;
    }

    .schedule-modal-row{
      flex-direction:column;
      align-items:stretch;
    }

    .footer-core{width:min(100%, 860px)}
  }

  @media (max-width:640px){
    :root{
      --glass-blur:7px;
      --glass-blur-strong:9px;
      --shell-pad:14px;
      --shell-width:min(var(--shell-max), calc(100% - (var(--shell-pad) * 2)));
      --nav-offset:78px;
    }

    body::before,
    body::after{display:none}

    .nav-wrap{
      background:linear-gradient(180deg, rgba(3,12,24,.95), rgba(3,12,24,.9));
    }

    .nav-wrap::before{
      backdrop-filter:blur(10px) saturate(125%);
      -webkit-backdrop-filter:blur(10px) saturate(125%);
    }

    .nav-row{
      grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:"brand actions";
      gap:8px;
      min-height:auto;
      padding:calc(8px + (var(--safe-top) * .14)) 0 8px;
    }

    .brand-wrap{min-width:0}
    .brand-logo-img{height:40px}

    .brand-sub{
      font-size:8.2px;
      letter-spacing:.05em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .header-actions{
      width:auto;
      flex:0 0 auto;
      flex-wrap:nowrap;
      gap:6px;
      justify-content:flex-end;
    }

    .btn-register,
    .btn-login{
      min-height:38px;
      padding:0 11px;
      border-radius:14px;
      font-size:10px;
      letter-spacing:.02em;
    }

    .menu-toggle{
      width:38px;
      height:38px;
      border-radius:14px;
    }

    .menu-toggle-box{
      width:16px;
      height:12px;
    }

    .menu-toggle-box span:nth-child(2){top:5px}
    .menu-toggle-box span:nth-child(3){top:10px}

    .menu-toggle.is-open .menu-toggle-box span:nth-child(1),
    .menu-toggle.is-open .menu-toggle-box span:nth-child(3){top:5px}

    .nav-dropdown-wrap{
      width:min(250px, calc(100vw - 28px));
      padding-top:8px;
    }

    .nav-dropdown{
      border-radius:20px;
      padding:8px;
    }

    .nav-dropdown-link{
      min-height:48px;
      padding:0 14px;
      border-radius:14px;
      font-size:12px;
    }

    .hero-copy,
    .hero-panel{border-radius:26px}

    .hero-copy .banner-shell,
    .hero-copy .banner-stage{border-radius:22px}

    .hero-actions,
    .modal-actions{flex-direction:column}

    .btn-primary,
    .btn-secondary,
    .ghost-btn{width:100%}

    .hero-chip{
      width:100%;
      justify-content:center;
      text-align:center;
    }

    .market-grid{
      grid-template-columns:minmax(0, 1fr);
      gap:12px;
    }

    .market-card{
      padding:14px;
      border-radius:20px;
      gap:10px;
    }

    .market-code{
      margin-bottom:4px;
      font-size:8.6px;
      letter-spacing:.11em;
    }

    .market-name{
      min-height:auto;
      font-size:clamp(.98rem,4.2vw,1.18rem);
      line-height:1.08;
      -webkit-line-clamp:3;
    }

    .number-value{font-size:1.42rem}

    .schedule-row,
    .compact-row,
    .info-row{
      grid-template-columns:minmax(0, 1fr);
      align-items:stretch;
      gap:4px;
      padding:8px 0;
    }

    .schedule-row > strong,
    .compact-row > strong,
    .info-row > strong,
    .compact-row > a,
    .info-row > a,
    .market-site-link{
      margin-left:0;
      text-align:left;
      justify-content:flex-start;
    }

    .compact-row-info strong,
    .compact-row-info .market-site-link{
      max-width:100%;
    }

    .market-action-row{
      grid-template-columns:minmax(0, 1fr);
    }

    .market-detail-btn,
    .copy-mini-btn{width:100%}

    .tool-stack{
      gap:10px;
      margin-bottom:18px;
    }

    .search-panel{
      padding:10px;
      border-radius:20px;
    }

    .banner-section{
      padding:calc(var(--nav-offset) + 10px) 0 4px;
    }

    .banner-shell{border-radius:22px}

    .banner-stage{
      border-radius:22px;
      aspect-ratio:16 / 9.6;
      min-height:128px;
    }

    .hero-copy .banner-stage{
      aspect-ratio:16 / 8.1;
      min-height:146px;
    }

    .banner-slide{padding:10px}
    .banner-frame{border-radius:18px}
    .banner-controls{bottom:10px}

    .banner-dots{
      padding:7px 10px;
      gap:7px;
    }

    .banner-dot{
      width:8px;
      height:8px;
    }

    .banner-dot.is-active{width:22px}

    .banner-empty{
      padding:18px;
      line-height:1.6;
      font-size:13px;
    }

    .footer-wrap{
      margin:16px 0 0;
      padding-top:8px;
      padding-bottom:calc(10px + var(--safe-bottom));
    }

    .footer-card{border-radius:24px}

    .footer-inner{
      padding:18px 16px;
      gap:8px;
    }

    .footer-note{
      font-size:12.5px;
      line-height:1.72;
    }

    .footer-copy{font-size:11.8px}

    .toast{
      font-size:12px;
      padding:11px 14px;
    }
  }


  @media (max-width:520px){
    .section-head{
      gap:12px;
      margin-bottom:16px;
    }

    .search-panel{
      padding:9px;
      border-radius:18px;
    }

    .input-premium{
      min-height:50px;
      padding-left:44px;
      border-radius:16px;
      font-size:14px;
    }

    .search-wrap i{
      left:16px;
      font-size:13px;
    }

    .market-card{
      padding:13px;
      border-radius:18px;
      gap:9px;
    }

    .schedule-box,
    .number-box,
    .detail-box{
      padding:12px;
      border-radius:15px;
    }

    .number-value{
      font-size:1.34rem;
      letter-spacing:.05em;
    }

    .stat-inline{
      padding:9px 11px;
      border-radius:13px;
      font-size:10.8px;
    }

    .copy-mini-btn,
    .market-detail-btn{
      min-height:42px;
      font-size:11px;
    }

    .modal{
      padding:max(10px, var(--safe-top)) 10px max(10px, var(--safe-bottom)) 10px;
    }

    .modal-card{
      width:min(960px, calc(100vw - 16px));
      max-height:min(94dvh, 920px);
      padding:16px;
      border-radius:22px;
    }

    .modal-stat{
      padding:14px;
      border-radius:18px;
    }

    .pair-grid{
      grid-template-columns:repeat(auto-fit,minmax(52px,1fr));
      gap:8px;
    }

    .pair-chip{
      min-height:38px;
      font-size:.88rem;
    }
  }

  @media (max-width:420px){
    :root{
      --nav-offset:76px;
    }

    .brand-logo-img{height:34px}

    .btn-register,
    .btn-login{
      padding:0 10px;
      font-size:9.5px;
    }

    .section-actions,
    .section-actions .ghost-btn{
      width:100%;
    }

    .menu-toggle{
      width:36px;
      height:36px;
    }

    .menu-toggle-box{width:15px}
    .hero-title{font-size:2rem}

    .digit-pill{
      width:42px;
      height:42px;
    }

    .banner-stage{
      aspect-ratio:16 / 10.6;
      min-height:122px;
    }

    .hero-copy .banner-stage{
      aspect-ratio:16 / 8.8;
      min-height:138px;
    }
  }

  @media (max-width:360px){
    .nav-row{gap:6px}
    .header-actions{gap:5px}

    .btn-register,
    .btn-login{
      padding:0 9px;
      font-size:9px;
    }

    .nav-dropdown-wrap{
      width:min(236px, calc(100vw - 22px));
    }
  }

  @media (hover:none), (pointer:coarse){
    body::before,
    body::after,
    .hero-copy::after{
      animation:none !important;
      transform:none !important;
    }

    .glass,
    .glass-strong,
    .hero-chip,
    .mini-chip,
    .stat-chip,
    .btn-register,
    .btn-secondary,
    .ghost-btn,
    .modal,
    .modal-card,
    .banner-dots,
    .footer-card,
    .search-panel,
    .market-card,
    .schedule-box,
    .number-box,
    .detail-box,
    .nav-wrap::before,
    .nav-dropdown,
    .toast{
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
    }

    .market-card,
    .footer-card,
    .hero-copy,
    .hero-panel,
    .search-panel{
      box-shadow:0 12px 24px rgba(0,0,0,.16);
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .glass,
    .glass-strong,
    .hero-chip,
    .mini-chip,
    .stat-chip,
    .btn-register,
    .btn-secondary,
    .ghost-btn,
    .modal,
    .banner-dots,
    .footer-card,
    .nav-wrap::before,
    .toast,
    .market-card,
    .search-panel,
    .modal-card,
    .nav-dropdown{
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}

    *,
    *::before,
    *::after{
      animation:none !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
  }

  /* === Micro polish: hero mobile actions + chip cleanup === */
  .hero-copy__content .hero-chip,
  .hero-next-state-wrap,
  .market-card > .state-chip{
    display:none !important;
  }

  .hero-copy__content .hero-title{
    margin-top:0 !important;
  }

  .hero-next-header{
    align-items:flex-start;
  }

  @media (max-width:640px){
    .hero-actions{
      display:grid;
      grid-template-columns:minmax(0, 1.06fr) minmax(0, .94fr);
      align-items:stretch;
      gap:10px;
      width:100%;
      margin-top:20px;
    }

    .modal-actions{
      flex-direction:column;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary{
      width:100%;
      min-width:0;
      min-height:50px;
      padding-inline:14px;
      font-size:12.5px;
      gap:8px;
    }

    .hero-actions .btn-primary span,
    .hero-actions .btn-secondary span{
      min-width:0;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .hero-copy__content{
      gap:0;
    }

    .hero-title{
      max-width:9.2ch;
      font-size:clamp(1.9rem, 8.8vw, 2.45rem);
      line-height:.96;
      letter-spacing:-.052em;
    }

    .hero-desc{
      margin-top:14px !important;
      font-size:.95rem;
      line-height:1.7;
    }
  }


  @media (max-width:520px){
    .section-head{
      gap:12px;
      margin-bottom:16px;
    }

    .search-panel{
      padding:9px;
      border-radius:18px;
    }

    .input-premium{
      min-height:50px;
      padding-left:44px;
      border-radius:16px;
      font-size:14px;
    }

    .search-wrap i{
      left:16px;
      font-size:13px;
    }

    .market-card{
      padding:13px;
      border-radius:18px;
      gap:9px;
    }

    .schedule-box,
    .number-box,
    .detail-box{
      padding:12px;
      border-radius:15px;
    }

    .number-value{
      font-size:1.34rem;
      letter-spacing:.05em;
    }

    .stat-inline{
      padding:9px 11px;
      border-radius:13px;
      font-size:10.8px;
    }

    .copy-mini-btn,
    .market-detail-btn{
      min-height:42px;
      font-size:11px;
    }

    .modal{
      padding:max(10px, var(--safe-top)) 10px max(10px, var(--safe-bottom)) 10px;
    }

    .modal-card{
      width:min(960px, calc(100vw - 16px));
      max-height:min(94dvh, 920px);
      padding:16px;
      border-radius:22px;
    }

    .modal-stat{
      padding:14px;
      border-radius:18px;
    }

    .pair-grid{
      grid-template-columns:repeat(auto-fit,minmax(52px,1fr));
      gap:8px;
    }

    .pair-chip{
      min-height:38px;
      font-size:.88rem;
    }
  }

  @media (max-width:420px){
    .hero-actions{
      grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
      gap:9px;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary{
      min-height:48px;
      padding-inline:12px;
      font-size:11.4px;
      gap:7px;
    }

    .hero-actions .btn-secondary{
      letter-spacing:-.01em;
    }

    .hero-actions .btn-secondary i{
      font-size:.92em;
      flex:0 0 auto;
    }
  }


/* ===== 2026 premium responsive layout refinement ===== */
:root{
  --shell-max:1440px;
  --shell-pad:clamp(14px, 2.4vw, 28px);
  --shell-width:min(var(--shell-max), calc(100% - (var(--shell-pad) * 2)));

  --nav-offset:92px;

  --radius-sm:16px;
  --radius-md:20px;
  --radius-lg:24px;
  --radius-xl:28px;
  --radius-2xl:34px;

  --shadow-soft:0 18px 38px rgba(0,0,0,.22);
  --shadow-md:0 24px 48px rgba(0,0,0,.26);
  --shadow-lg:0 34px 72px rgba(0,0,0,.30);
  --shadow-ocean:0 14px 28px rgba(56,189,248,.18);
  --glass-blur:14px;
  --glass-blur-strong:18px;
}

html{
  scroll-padding-top:calc(var(--nav-offset) + 18px);
}

body{
  background:
    radial-gradient(circle at 10% 8%, rgba(56,189,248,.16), transparent 22%),
    radial-gradient(circle at 90% 10%, rgba(96,165,250,.09), transparent 18%),
    radial-gradient(circle at 50% 60%, rgba(125,211,252,.05), transparent 24%),
    linear-gradient(180deg, #020d1c 0%, #061a31 42%, #0b2440 100%);
}

.shell{
  width:var(--shell-width);
  max-width:var(--shell-width);
}

.nav-wrap{
  background:linear-gradient(180deg, rgba(3,12,24,.86), rgba(3,12,24,.70));
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.nav-wrap::before{
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}

.nav-row{
  min-height:84px;
  gap:18px;
  grid-template-columns:minmax(180px, 1fr) auto auto;
  padding:calc(14px + (var(--safe-top) * .16)) 0 14px;
}

.brand-logo-frame{
  max-width:min(100%, 300px);
}

.brand-logo-img{
  height:clamp(40px, 3.1vw, 56px);
}

.nav-link-row{
  gap:24px;
}

.nav-link{
  position:relative;
  font-size:14px;
  letter-spacing:.01em;
}

.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,0), rgba(56,189,248,.92), rgba(125,211,252,.92), rgba(56,189,248,0));
  transform:scaleX(.25);
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after{
  transform:scaleX(1);
  opacity:1;
}

.header-actions{
  gap:12px;
}

.btn-register,
.btn-login{
  min-height:46px;
  padding-inline:18px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}

.menu-toggle{
  width:46px;
  height:46px;
  border-radius:18px;
}

.nav-dropdown-wrap{
  padding-top:12px;
}

.nav-dropdown{
  border-radius:26px;
  padding:12px;
}

.nav-dropdown-link{
  min-height:54px;
  font-size:13px;
}

.hero{
  padding:calc(var(--nav-offset) + 18px) 0 26px;
}

.hero-grid{
  grid-template-columns:minmax(0, 1.14fr) minmax(320px, .86fr);
  gap:20px;
  align-items:stretch;
}

.hero-copy,
.hero-panel{
  border-radius:32px;
}

.hero-copy{
  padding:clamp(18px, 2vw, 24px);
  min-height:620px;
  gap:22px;
}

.hero-copy__content{
  padding:clamp(4px, .8vw, 10px) clamp(2px, .5vw, 6px) 0;
}

.hero-copy .banner-shell{
  border-radius:30px;
}

.hero-copy .banner-stage{
  aspect-ratio:16 / 7.15;
  min-height:238px;
  max-height:420px;
  border-radius:30px;
}

.banner-shell,
.banner-stage,
.banner-frame{
  border-radius:30px;
}

.banner-stage{
  aspect-ratio:16 / 5.4;
}

.hero-title{
  max-width:12ch;
  font-size:clamp(2.4rem, 4.7vw, 4.9rem);
  line-height:.94;
  margin-top:0 !important;
}

.hero-desc{
  max-width:60ch;
  font-size:clamp(1rem, 1.28vw, 1.08rem);
  line-height:1.9;
  margin-top:10px !important;
}

.hero-actions{
  gap:12px;
  margin-top:26px;
}

.btn-primary,
.btn-secondary,
.ghost-btn{
  min-height:52px;
  padding-inline:20px;
}

.btn-primary{
  min-width:min(100%, 220px);
}

.btn-secondary{
  min-width:min(100%, 196px);
}

.hero-panel{
  padding:clamp(18px, 2vw, 24px);
  min-height:620px;
}

.hero-next{
  min-height:100%;
  padding:24px;
  border-radius:30px;
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 34%),
    linear-gradient(180deg, rgba(12,31,52,.92), rgba(7,20,34,.90));
}

.hero-next-header{
  gap:16px;
}

.hero-next-name{
  font-size:clamp(2rem, 2.3vw, 2.85rem);
}

.hero-next-meta{
  font-size:.96rem;
  line-height:1.7;
}

.hero-next-count-wrap{
  padding:20px 20px 18px;
  border-radius:24px;
}

.big-count{
  font-size:clamp(2rem, 3.6vw, 3.25rem);
}

.hero-next-metrics{
  gap:12px;
}

.hero-next-metric{
  padding:16px;
  border-radius:20px;
}

.hero-next-about{
  padding:20px;
  border-radius:24px;
  min-height:132px;
}

#pasaran{
  padding-top:10px !important;
  padding-bottom:4px;
}

.section-head{
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.section-title{
  font-size:clamp(1.9rem, 3.2vw, 3rem);
}

.section-actions{
  gap:10px;
}

.tool-stack{
  gap:14px;
  margin-bottom:22px;
}

.search-panel{
  padding:14px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
}

.input-premium{
  min-height:58px;
  border-radius:20px;
  font-size:14px;
}

.filter-shell{
  display:block !important;
}

.filter-row,
#filter-row{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
}

.filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 15px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.filter-btn:hover,
.filter-btn:focus-visible{
  color:#fff;
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.24);
  background:rgba(255,255,255,.08);
}

.filter-btn.is-active{
  color:#02111f;
  background:linear-gradient(135deg, var(--ocean-primary), var(--ocean-soft));
  border-color:transparent;
  box-shadow:0 10px 18px rgba(56,189,248,.16);
}

.stats-strip,
#stats-strip{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}

.stat-chip{
  min-height:46px;
  justify-content:center;
  border-radius:16px;
  font-size:12px;
  font-weight:800;
}

.market-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 288px), 1fr)) !important;
  gap:18px;
  align-items:stretch;
}

.market-card{
  padding:18px;
  gap:14px;
  border-radius:28px;
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:0 18px 36px rgba(0,0,0,.20);
}

.market-card::after{
  left:20px;
  right:20px;
}

.market-card > .state-chip{
  display:inline-flex !important;
  align-self:flex-start;
}

.market-head{
  gap:12px;
}

.market-code{
  margin-bottom:6px;
  font-size:10px;
}

.market-name{
  min-height:auto;
  font-size:clamp(1.08rem, 1.15vw, 1.28rem);
  line-height:1.12;
}

.schedule-box,
.number-box,
.detail-box{
  border-radius:20px;
  padding:15px;
}

.number-value{
  margin-top:10px;
  font-size:clamp(1.45rem, 1.75vw, 1.95rem);
}

.schedule-list{
  gap:8px;
}

.schedule-row,
.compact-row,
.info-row{
  grid-template-columns:minmax(84px, .9fr) minmax(0, 1.1fr);
  gap:8px 12px;
  padding:10px 0;
}

.schedule-row > span,
.compact-row > span,
.info-row > span{
  font-size:11px;
}

.schedule-row > strong,
.compact-row > strong,
.info-row > strong,
.compact-row > a,
.info-row > a{
  font-size:12.5px;
}

.card-foot{
  gap:10px;
  padding-top:2px;
}

.stat-inline{
  border-radius:16px;
  padding:12px 13px;
}

.market-action-row{
  gap:10px;
}

.copy-mini-btn,
.market-detail-btn{
  min-height:42px;
  font-size:11px;
}

.market-detail-btn{
  letter-spacing:.01em;
}

.market-empty{
  border-radius:28px;
  padding:36px 24px;
}

.footer-wrap{
  margin-top:28px;
  padding-bottom:calc(18px + var(--safe-bottom));
}

.footer-card{
  border-radius:32px;
}

.footer-inner{
  gap:12px;
  padding:28px clamp(18px, 2.4vw, 32px);
}

.footer-brand{
  font-size:clamp(1.36rem, 2vw, 1.7rem);
}

.footer-note{
  font-size:14px;
  line-height:1.9;
}

.footer-copy{
  font-size:12px;
  letter-spacing:.02em;
}

.modal{
  padding:max(18px, var(--safe-top)) 18px max(18px, var(--safe-bottom)) 18px;
}

.modal-card{
  width:min(1080px, calc(100vw - 28px));
  max-height:min(92dvh, 980px);
  padding:24px;
  border-radius:32px;
}

.modal-card .countdown-pill{
  display:flex !important;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  min-width:184px;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg, rgba(10,30,52,.92), rgba(6,18,33,.86));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.modal-card .countdown-label,
.modal-card .countdown-value{
  display:block !important;
}

.modal-card .countdown-label{
  font-size:11px;
  color:rgba(224,242,254,.62);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
}

.modal-card .countdown-value{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 2.4vw, 2.1rem);
  line-height:1;
  font-weight:800;
  color:#fff;
  letter-spacing:.03em;
}

.modal-grid{
  gap:16px;
}

.modal-stat-grid{
  gap:14px;
}

.modal-stat{
  padding:18px;
  border-radius:22px;
}

.modal-actions{
  gap:12px;
}

.schedule-modal-row{
  gap:14px;
  padding:14px 0;
}

.schedule-jump-btn{
  min-height:42px;
  padding-inline:16px;
}

.toast{
  padding:13px 18px;
}

@media (min-width:1180px){
  .tool-stack{
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:start;
  }

  .search-panel{
    grid-column:1 / -1;
  }

  .filter-shell{
    grid-column:1 / 2;
  }

  .stats-strip,
  #stats-strip{
    grid-column:2 / 3;
    align-self:stretch;
    min-width:360px;
  }

  .stats-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:1180px){
  .hero-grid{
    grid-template-columns:minmax(0, 1fr);
  }

  .hero-copy,
  .hero-panel{
    min-height:auto;
  }

  .hero-panel{
    padding-top:0;
  }

  .stats-strip,
  #stats-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:980px){
  :root{
    --nav-offset:84px;
  }

  .nav-row{
    min-height:76px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    padding:calc(12px + (var(--safe-top) * .14)) 0 12px;
  }

  .brand-logo-frame{
    max-width:min(100%, 235px);
  }

  .nav-link-row{
    display:none;
  }

  .header-actions{
    gap:8px;
  }

  .menu-toggle{
    display:inline-flex;
  }

  .hero{
    padding-top:calc(var(--nav-offset) + 14px);
  }

  .hero-copy,
  .hero-panel{
    border-radius:28px;
  }

  .hero-copy{
    padding:16px;
    gap:18px;
  }

  .hero-copy .banner-stage{
    aspect-ratio:16 / 8.1;
    min-height:190px;
  }

  .hero-title{
    font-size:clamp(2.15rem, 7vw, 3.5rem);
  }

  .hero-actions{
    width:100%;
  }

  .btn-primary,
  .btn-secondary{
    flex:1 1 220px;
  }

  .market-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .modal-card .countdown-pill{
    align-items:flex-start;
    min-width:0;
    width:100%;
  }
}

@media (max-width:760px){
  :root{
    --nav-offset:80px;
    --shell-pad:14px;
  }

  .brand-logo-img{
    height:36px;
  }

  .btn-register,
  .btn-login{
    min-height:40px;
    padding-inline:12px;
    font-size:10px;
  }

  .hero-copy,
  .hero-panel,
  .banner-shell,
  .banner-stage,
  .banner-frame,
  .market-card,
  .search-panel,
  .footer-card,
  .modal-card{
    border-radius:24px;
  }

  .hero-copy .banner-stage{
    aspect-ratio:16 / 9.6;
    min-height:170px;
  }

  .hero-desc{
    font-size:.97rem;
    line-height:1.8;
  }

  .section-head{
    align-items:flex-start;
  }

  .section-actions{
    width:100%;
    margin-left:0;
  }

  .section-actions .ghost-btn{
    width:100%;
  }

  .search-panel{
    padding:12px;
  }

  .stats-strip,
  #stats-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .market-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px;
  }

  .market-card{
    padding:16px;
  }

  .market-name{
    font-size:1.05rem;
  }

  .schedule-row,
  .compact-row,
  .info-row{
    grid-template-columns:minmax(76px, .92fr) minmax(0, 1.08fr);
  }

  .modal-card{
    width:min(calc(100vw - 20px), 1000px);
    padding:18px;
  }

  .modal-actions{
    flex-direction:column;
  }

  .modal-actions > *{
    width:100%;
  }

  .schedule-modal-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .schedule-jump-btn{
    width:100%;
  }
}

@media (max-width:560px){
  :root{
    --nav-offset:76px;
  }

  .nav-row{
    gap:8px;
  }

  .header-actions{
    gap:6px;
  }

  .btn-register,
  .btn-login{
    padding-inline:10px;
    font-size:9px;
  }

  .hero-copy .banner-stage{
    aspect-ratio:16 / 10.4;
    min-height:146px;
  }

  .hero-title{
    font-size:clamp(1.95rem, 9vw, 2.7rem);
  }

  .hero-actions{
    flex-direction:column;
  }

  .btn-primary,
  .btn-secondary{
    width:100%;
    min-width:0;
  }

  .filter-row,
  #filter-row{
    gap:8px;
  }

  .filter-btn{
    flex:1 1 calc(50% - 4px);
    min-width:0;
  }

  .stats-strip,
  #stats-strip{
    grid-template-columns:1fr;
  }

  .stat-chip{
    min-height:44px;
  }

  .market-action-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .copy-mini-btn,
  .market-detail-btn{
    width:100%;
  }

  .footer-inner{
    padding:22px 16px;
  }
}

@media (hover:hover) and (pointer:fine){
  .market-card:hover,
  .market-card:focus-within{
    transform:translateY(-4px);
    border-color:rgba(56,189,248,.22);
    box-shadow:0 24px 48px rgba(0,0,0,.24), 0 0 0 1px rgba(56,189,248,.07) inset;
  }

  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-login:hover,
  .btn-register:hover,
  .ghost-btn:hover,
  .copy-mini-btn:hover,
  .market-detail-btn:hover,
  .schedule-jump-btn:hover{
    box-shadow:0 14px 28px rgba(0,0,0,.14);
  }
}

@media (hover:none), (pointer:coarse){
  .hero-copy,
  .hero-panel,
  .search-panel,
  .market-card,
  .footer-card,
  .modal-card{
    box-shadow:0 14px 28px rgba(0,0,0,.18);
  }
}

/* ===== compact modal + extended sidebar ===== */
@media (min-width:1100px){
  .hero-grid{
    grid-template-columns:minmax(0, 1.28fr) minmax(340px, .92fr);
    align-items:stretch;
  }

  .hero-panel{
    min-height:560px;
  }

  .hero-next{
    min-height:100%;
    padding:24px;
  }

  .hero-next-about{
    min-height:156px;
  }
}

.nav-dropdown-wrap{
  width:min(340px, calc(100vw - 24px));
}

.nav-dropdown{
  min-height:220px;
}

.modal{
  padding:max(14px, var(--safe-top)) 14px max(14px, var(--safe-bottom)) 14px;
}

.modal-card{
  width:min(820px, calc(100vw - 24px));
  max-height:min(88dvh, 860px);
  padding:18px;
  border-radius:26px;
}

.modal-market-shell{
  display:grid;
  gap:14px;
}

.modal-market-header{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:start;
}

.modal-market-title-wrap{
  min-width:0;
}

.modal-market-title{
  margin:0;
  font-size:clamp(1.65rem, 4vw, 2.35rem);
  line-height:1.02;
  letter-spacing:-.04em;
  overflow-wrap:anywhere;
}

.modal-market-subtitle{
  margin-top:6px;
  color:rgba(224,242,254,.62);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.modal-countdown-pill{
  display:flex !important;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  min-width:160px;
  padding:12px 14px;
  border-radius:18px;
}

.modal-card .countdown-label{
  font-size:10px;
  letter-spacing:.12em;
}

.modal-card .countdown-value{
  font-size:clamp(1.2rem, 2.5vw, 1.72rem);
}

.modal-market-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.modal-market-toolbar .mini-chip,
.modal-market-toolbar .state-chip{
  min-height:36px;
  padding:0 12px;
  font-size:11px;
}

.modal-summary-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.modal-summary-card{
  min-width:0;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(10,30,52,.92), rgba(6,18,33,.84));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.modal-summary-value{
  margin-top:8px;
  font-family:var(--font-display);
  font-size:clamp(1.28rem, 2.6vw, 1.8rem);
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.modal-section-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.modal-span-2{
  grid-column:1 / -1;
}

.modal-compact-box{
  padding:14px;
  border-radius:18px;
  gap:0;
}

.modal-compact-list{
  gap:6px;
  margin-top:10px;
}

.modal-compact-box .schedule-row,
.modal-compact-box .info-row,
.modal-compact-box .compact-row{
  grid-template-columns:minmax(84px, .78fr) minmax(0, 1.22fr);
  gap:6px 10px;
  padding:8px 0;
}

.modal-compact-box .schedule-row > span,
.modal-compact-box .info-row > span,
.modal-compact-box .compact-row > span{
  font-size:10.5px;
}

.modal-compact-box .schedule-row > strong,
.modal-compact-box .info-row > strong,
.modal-compact-box .compact-row > strong,
.modal-compact-box .market-site-link{
  font-size:11.5px;
  line-height:1.4;
}

.modal-digit-wrap{
  gap:8px;
  margin-top:10px;
}

.modal-digit-wrap .digit-pill{
  width:40px;
  height:40px;
  font-size:.95rem;
  border-radius:13px;
}

.modal-pair-grid{
  grid-template-columns:repeat(auto-fit, minmax(52px, 1fr));
  gap:8px;
  margin-top:12px;
}

.modal-pair-grid .pair-chip{
  min-height:38px;
  font-size:.88rem;
  border-radius:13px;
}

.modal-actions-compact{
  gap:10px;
}

.modal-actions-compact .btn-primary,
.modal-actions-compact .btn-secondary{
  min-height:46px;
}

@media (max-width:760px){
  .nav-dropdown-wrap{
    width:min(92vw, 360px);
  }

  .nav-dropdown{
    min-height:236px;
  }

  .modal-card{
    width:min(calc(100vw - 18px), 100%);
    max-height:min(90dvh, 820px);
    padding:14px;
    border-radius:22px;
  }

  .modal-market-header{
    grid-template-columns:1fr;
  }

  .modal-countdown-pill{
    align-items:flex-start;
    min-width:0;
    width:100%;
  }

  .modal-summary-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
  }

  .modal-summary-card{
    padding:12px 10px;
  }

  .modal-summary-value{
    font-size:1.02rem;
    letter-spacing:.08em;
  }

  .modal-section-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .modal-span-2{
    grid-column:auto;
  }

  .modal-compact-box{
    padding:12px;
  }

  .modal-compact-box .schedule-row,
  .modal-compact-box .info-row,
  .modal-compact-box .compact-row{
    grid-template-columns:minmax(72px, .82fr) minmax(0, 1.18fr);
  }

  .modal-compact-box .schedule-row > span,
  .modal-compact-box .info-row > span,
  .modal-compact-box .compact-row > span{
    font-size:10px;
  }

  .modal-compact-box .schedule-row > strong,
  .modal-compact-box .info-row > strong,
  .modal-compact-box .compact-row > strong,
  .modal-compact-box .market-site-link{
    font-size:11px;
  }

  .modal-digit-wrap .digit-pill{
    width:36px;
    height:36px;
    font-size:.88rem;
  }

  .modal-pair-grid{
    grid-template-columns:repeat(auto-fit, minmax(48px, 1fr));
    gap:7px;
  }

  .modal-pair-grid .pair-chip{
    min-height:34px;
    font-size:.8rem;
  }

  .modal-actions-compact{
    flex-direction:column;
  }

  .modal-actions-compact > *{
    width:100%;
    min-width:0;
  }
}
/* ===== end compact modal + extended sidebar ===== */

/* ===== end premium refinement ===== */



/* ===== ultra minimal market modal ===== */
.modal{
  padding:max(10px, var(--safe-top)) 10px max(10px, var(--safe-bottom)) 10px;
}

.modal-card{
  width:min(680px, calc(100vw - 20px));
  max-height:min(84dvh, 760px);
  padding:14px;
  border-radius:24px;
}

.modal-market-shell{
  display:grid;
  gap:12px;
}

.modal-market-header{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  align-items:start;
}

.modal-market-title{
  font-size:clamp(1.2rem, 3.6vw, 1.8rem);
  line-height:1.02;
  letter-spacing:-.04em;
}

.modal-market-subtitle{
  margin-top:4px;
  font-size:10px;
  letter-spacing:.12em;
  color:rgba(224,242,254,.54);
}

.modal-countdown-pill{
  min-width:132px;
  padding:10px 12px;
  border-radius:16px;
  gap:2px;
  background:linear-gradient(145deg, rgba(10,30,52,.92), rgba(6,18,33,.84));
  border:1px solid rgba(255,255,255,.08);
}

.modal-card .countdown-label{
  font-size:9px;
  letter-spacing:.12em;
}

.modal-card .countdown-value{
  font-size:clamp(1rem, 2.7vw, 1.42rem);
}

.modal-market-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.modal-market-toolbar .mini-chip,
.modal-market-toolbar .state-chip{
  min-height:32px;
  padding:0 10px;
  font-size:10px;
  border-radius:999px;
}

.modal-summary-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.modal-summary-card{
  padding:11px 10px;
  border-radius:16px;
}

.modal-summary-value{
  margin-top:7px;
  font-size:clamp(1rem, 2.8vw, 1.35rem);
  letter-spacing:.08em;
}

.modal-duo-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.modal-lite-box{
  padding:12px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(10,28,48,.9), rgba(6,20,35,.84));
}

.modal-inline-metrics{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  margin-top:10px;
}

.modal-inline-metric{
  min-width:0;
  padding:8px 6px;
  border-radius:13px;
  text-align:center;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
}

.modal-inline-metric-label{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(224,242,254,.48);
  font-weight:800;
}

.modal-inline-metric-value{
  margin-top:5px;
  font-size:13px;
  line-height:1.2;
  font-weight:800;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
}

.modal-digit-wrap{
  gap:6px;
  margin-top:10px;
}

.modal-digit-wrap .digit-pill{
  width:34px;
  height:34px;
  font-size:.84rem;
  border-radius:12px;
}

.modal-compact-list{
  gap:4px;
  margin-top:10px;
}

.modal-compact-box .schedule-row,
.modal-compact-box .info-row,
.modal-compact-box .compact-row,
.modal-lite-box .schedule-row,
.modal-lite-box .info-row,
.modal-lite-box .compact-row{
  grid-template-columns:minmax(86px, .8fr) minmax(0, 1.2fr);
  gap:6px 10px;
  padding:7px 0;
}

.modal-compact-box .schedule-row > span,
.modal-compact-box .info-row > span,
.modal-compact-box .compact-row > span,
.modal-lite-box .schedule-row > span,
.modal-lite-box .info-row > span,
.modal-lite-box .compact-row > span{
  font-size:10px;
}

.modal-compact-box .schedule-row > strong,
.modal-compact-box .info-row > strong,
.modal-compact-box .compact-row > strong,
.modal-compact-box .market-site-link,
.modal-lite-box .schedule-row > strong,
.modal-lite-box .info-row > strong,
.modal-lite-box .compact-row > strong,
.modal-lite-box .market-site-link{
  font-size:11px;
  line-height:1.4;
}

.modal-note-row strong{
  font-weight:700;
  color:rgba(248,251,255,.88);
}

.modal-top2d-box{
  padding-top:12px;
}

.modal-top2d-flow{
  grid-template-columns:repeat(auto-fit, minmax(48px, 1fr));
  gap:7px;
  margin-top:10px;
}

.modal-top2d-flow .pair-chip{
  min-height:34px;
  font-size:.8rem;
  border-radius:12px;
}

.modal-actions-compact{
  gap:8px;
}

.modal-actions-compact .btn-primary,
.modal-actions-compact .btn-secondary{
  min-height:42px;
  font-size:12px;
}

@media (max-width:760px){
  .modal-card{
    width:min(calc(100vw - 14px), 100%);
    max-height:min(88dvh, 720px);
    padding:12px;
    border-radius:20px;
  }

  .modal-market-header{
    grid-template-columns:1fr;
  }

  .modal-countdown-pill{
    width:100%;
    min-width:0;
    align-items:flex-start;
  }

  .modal-duo-grid{
    grid-template-columns:1fr;
  }

  .modal-inline-metrics{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px;
  }

  .modal-inline-metric{
    padding:7px 5px;
  }

  .modal-inline-metric-value{
    font-size:12px;
  }

  .modal-top2d-flow{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .modal-actions-compact{
    flex-direction:row;
  }

  .modal-actions-compact > *{
    flex:1 1 0;
    min-width:0;
  }
}
/* ===== end ultra minimal market modal ===== */

/* ===== minimalist cards without filters ===== */
.filter-shell,
.filter-row,
#filter-row,
.stats-strip,
#stats-strip{
  display:none !important;
}

.tool-stack{
  grid-template-columns:minmax(0, 1fr) !important;
}

.search-panel{
  grid-column:auto !important;
}

.market-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 248px), 1fr)) !important;
  gap:14px !important;
}

.market-card{
  padding:14px !important;
  gap:10px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.18) !important;
}

.market-card::after{
  left:16px !important;
  right:16px !important;
}

.market-card > .state-chip{
  display:inline-flex !important;
  align-self:flex-start;
  min-height:32px;
  padding:0 10px;
  font-size:10px;
}

.market-head{
  gap:8px !important;
}

.market-code{
  margin-bottom:4px !important;
  font-size:9px !important;
  letter-spacing:.12em !important;
}

.market-name{
  font-size:clamp(1rem, 1.08vw, 1.16rem) !important;
  line-height:1.08 !important;
}

.market-info-minimal,
.market-info-box{
  padding:12px !important;
  border-radius:18px !important;
}

.market-info-box .schedule-list{
  margin-top:8px;
  gap:2px;
}

.market-info-box .schedule-row,
.market-info-box .compact-row,
.market-info-box .info-row{
  grid-template-columns:minmax(74px, .82fr) minmax(0, 1.18fr) !important;
  gap:6px 10px !important;
  padding:7px 0 !important;
}

.market-info-box .schedule-row > span,
.market-info-box .compact-row > span,
.market-info-box .info-row > span{
  font-size:10px !important;
}

.market-info-box .schedule-row > strong,
.market-info-box .compact-row > strong,
.market-info-box .info-row > strong,
.market-info-box .market-site-link{
  font-size:11px !important;
  line-height:1.42 !important;
}

.market-note-row strong,
.modal-note-row strong{
  font-weight:700;
  color:rgba(248,251,255,.88);
}

.card-foot{
  gap:8px !important;
}

.stat-inline{
  padding:10px 12px !important;
  border-radius:14px !important;
  font-size:10.5px !important;
}

.market-action-row{
  gap:8px !important;
}

.copy-mini-btn,
.market-detail-btn{
  min-height:40px !important;
  font-size:11px !important;
}

.modal-card{
  width:min(640px, calc(100vw - 18px)) !important;
}

@media (max-width:980px){
  .market-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width:760px){
  .market-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  .market-card{
    padding:13px !important;
    gap:9px !important;
    border-radius:22px !important;
  }

  .market-info-box .schedule-row,
  .market-info-box .compact-row,
  .market-info-box .info-row{
    grid-template-columns:minmax(70px, .8fr) minmax(0, 1.2fr) !important;
  }

  .market-action-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .modal-card{
    width:min(calc(100vw - 12px), 100%) !important;
    padding:12px !important;
  }
}

.card-info-core{
  background:linear-gradient(180deg, rgba(6,24,44,.9), rgba(4,16,32,.86)) !important;
  border-color:rgba(56,189,248,.12) !important;
}

.card-info-core .schedule-list{
  margin-top:6px !important;
  gap:0 !important;
}

.card-info-core .schedule-row{
  grid-template-columns:minmax(62px, .74fr) minmax(0, 1.26fr) !important;
  align-items:center !important;
  gap:4px 12px !important;
  padding:8px 0 !important;
}

.card-info-core .schedule-row > span{
  font-size:10px !important;
  color:rgba(224,242,254,.58) !important;
}

.card-info-core .schedule-row > strong,
.card-info-core .market-site-cell .market-site-link{
  font-size:11.5px !important;
  font-weight:800 !important;
}

.market-card > .state-chip{
  min-height:30px !important;
  padding:0 9px !important;
  border-radius:999px !important;
  font-size:9.5px !important;
}

.market-card .box-label{
  letter-spacing:.13em !important;
}

.market-card .card-foot{
  margin-top:2px !important;
}

.market-card .stat-inline{
  background:rgba(255,255,255,.025) !important;
  border-color:rgba(255,255,255,.045) !important;
}

@media (max-width:760px){
  .card-info-core .schedule-row{
    grid-template-columns:minmax(60px, .72fr) minmax(0, 1.28fr) !important;
  }
}

/* ===== end minimalist cards without filters ===== */



/* ===== final layout stability polish v7 ===== */
:root{
  --bg-0:#020817;
  --bg-1:#06182c;
  --bg-2:#10233a;

  --surface-1:rgba(255,255,255,.068);
  --surface-2:rgba(255,255,255,.04);
  --surface-4:rgba(8,20,36,.82);
  --surface-5:rgba(10,24,42,.88);

  --ocean-primary:#0ea5e9;
  --ocean-secondary:#0284c7;
  --ocean-soft:#7dd3fc;
  --ocean-aqua:#22d3ee;

  --shadow-ocean:0 14px 28px rgba(14,165,233,.14);
  --focus-ring:0 0 0 4px rgba(14,165,233,.14);

  --shell-max:1460px;
  --shell-pad:clamp(14px, 2.2vw, 28px);
  --shell-width:min(var(--shell-max), calc(100% - (var(--shell-pad) * 2)));
}

body{
  background:
    radial-gradient(circle at 12% 10%, rgba(14,165,233,.10), transparent 22%),
    radial-gradient(circle at 88% 10%, rgba(96,165,250,.08), transparent 18%),
    radial-gradient(circle at 50% 62%, rgba(125,211,252,.04), transparent 24%),
    linear-gradient(180deg, #020b19 0%, #061629 44%, #10233a 100%) !important;
}

body::before{
  opacity:.28 !important;
  background:radial-gradient(circle, rgba(14,165,233,.12), transparent 72%) !important;
}

body::after{
  opacity:.22 !important;
  background:radial-gradient(circle, rgba(96,165,250,.10), transparent 72%) !important;
}

.app-root,
main,
.shell,
.hero-grid,
.market-grid,
.footer-wrap,
.section-head,
.header-actions,
.market-card,
.hero-copy,
.hero-panel,
.modal-card,
.modal-market-header{
  min-width:0;
}

.hero-grid > *,
.market-grid > *,
.section-head > *,
.modal-market-header > *{
  min-width:0;
}

.nav-wrap{
  background:linear-gradient(180deg, rgba(3,12,22,.90), rgba(3,12,22,.76)) !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.16) !important;
}

.nav-wrap::before{
  backdrop-filter:blur(18px) saturate(126%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(126%) !important;
}

.nav-row{
  min-height:82px !important;
  grid-template-columns:minmax(0,1fr) auto auto !important;
  gap:14px !important;
  padding:calc(12px + (var(--safe-top) * .16)) 0 12px !important;
}

.brand-logo-frame{
  max-width:min(100%, 320px) !important;
}

.brand-logo-img{
  height:clamp(44px, 3.35vw, 60px) !important;
}

.header-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  overflow:hidden !important;
}

.btn-register,
.btn-login{
  max-width:100% !important;
  min-width:0 !important;
  padding-inline:16px !important;
}

.hero-grid{
  grid-template-columns:minmax(0, 1.08fr) minmax(300px, .92fr) !important;
  gap:18px !important;
}

.hero-copy,
.hero-panel{
  overflow:hidden !important;
}

.hero-copy{
  min-height:clamp(520px, 70vh, 620px) !important;
}

.hero-copy .banner-stage{
  aspect-ratio:16 / 7.6 !important;
  min-height:220px !important;
  max-height:400px !important;
}

.hero-title{
  max-width:12ch !important;
}

.hero-desc{
  max-width:62ch !important;
}

.hero-actions{
  width:100%;
}

.btn-primary,
.btn-secondary{
  min-width:0 !important;
}

.section-head{
  gap:14px !important;
}

.section-actions{
  min-width:0 !important;
}

.search-panel{
  border-radius:26px !important;
}

.input-premium{
  min-width:0 !important;
}

.market-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 1fr)) !important;
  grid-auto-rows:1fr !important;
  align-items:stretch !important;
  gap:14px !important;
}

.market-card{
  height:100% !important;
  min-height:100% !important;
  padding:14px !important;
  gap:10px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.07), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.03)) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.18) !important;
}

.market-card::before{
  background:radial-gradient(circle at top right, rgba(14,165,233,.07), transparent 38%) !important;
}

.market-card::after{
  left:16px !important;
  right:16px !important;
  opacity:.84 !important;
}

.market-head,
.market-info-box,
.card-foot,
.market-action-row{
  min-width:0 !important;
}

.market-name,
.number-value,
.schedule-row > strong,
.compact-row > strong,
.info-row > strong,
.market-site-link,
.stat-inline span,
.copy-mini-btn span,
.market-detail-btn span,
.hero-next-name,
.hero-next-metric-value,
.modal-market-title,
.modal-summary-value{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

.market-action-row{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

.copy-mini-btn,
.market-detail-btn{
  width:100% !important;
  min-width:0 !important;
}

.footer-card{
  border-radius:28px !important;
}

.modal-card{
  width:min(640px, calc(100vw - 18px)) !important;
  max-height:min(88dvh, 760px) !important;
}

@media (max-width:1180px){
  .hero-grid{
    grid-template-columns:1fr !important;
  }

  .hero-copy,
  .hero-panel{
    min-height:auto !important;
  }
}

@media (max-width:980px){
  :root{
    --shell-pad:16px;
  }

  .nav-row{
    grid-template-columns:minmax(0,1fr) auto !important;
    min-height:78px !important;
    gap:10px !important;
  }

  .brand-logo-frame{
    max-width:min(100%, 250px) !important;
  }

  .header-actions{
    gap:8px !important;
  }

  .hero-copy .banner-stage{
    aspect-ratio:16 / 8.7 !important;
    min-height:190px !important;
  }

  .market-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width:760px){
  :root{
    --nav-offset:80px;
    --shell-pad:14px;
  }

  .brand-logo-img{
    height:40px !important;
  }

  .header-actions{
    gap:6px !important;
  }

  .btn-register,
  .btn-login{
    min-height:40px !important;
    padding-inline:12px !important;
    font-size:10px !important;
  }

  .hero-copy,
  .hero-panel,
  .market-card,
  .search-panel,
  .footer-card,
  .modal-card,
  .banner-shell,
  .banner-stage,
  .banner-frame{
    border-radius:22px !important;
  }

  .hero-copy{
    padding:14px !important;
    gap:16px !important;
  }

  .hero-copy .banner-stage{
    aspect-ratio:16 / 9.8 !important;
    min-height:162px !important;
  }

  .hero-actions{
    flex-direction:column !important;
  }

  .btn-primary,
  .btn-secondary{
    width:100% !important;
  }

  .section-actions{
    width:100% !important;
  }

  .section-actions > *{
    width:100% !important;
  }

  .market-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  .market-card{
    padding:13px !important;
  }

  .market-action-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .modal-card{
    width:min(calc(100vw - 12px), 100%) !important;
    padding:12px !important;
  }
}

@media (max-width:560px){
  :root{
    --nav-offset:76px;
  }

  .nav-row{
    gap:8px !important;
  }

  .brand-logo-frame{
    max-width:min(100%, 180px) !important;
  }

  .brand-logo-img{
    height:38px !important;
  }

  .btn-register,
  .btn-login{
    min-height:38px !important;
    padding-inline:10px !important;
    font-size:9px !important;
    letter-spacing:.01em !important;
  }

  .menu-toggle{
    width:40px !important;
    height:40px !important;
    border-radius:16px !important;
  }

  .hero-title{
    font-size:clamp(1.9rem, 8.8vw, 2.6rem) !important;
  }

  .hero-copy .banner-stage{
    aspect-ratio:16 / 10.5 !important;
    min-height:144px !important;
  }

  .market-action-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width:420px){
  :root{
    --nav-offset:74px;
    --shell-pad:12px;
  }

  .nav-row{
    min-height:72px !important;
  }

  .brand-logo-frame{
    max-width:min(100%, 156px) !important;
  }

  .brand-logo-img{
    height:36px !important;
  }

  .btn-register,
  .btn-login{
    padding-inline:9px !important;
    font-size:8.8px !important;
  }

  .header-actions{
    gap:5px !important;
  }

  .menu-toggle{
    width:38px !important;
    height:38px !important;
  }

  .search-panel{
    padding:10px !important;
  }

  .input-premium{
    min-height:50px !important;
  }

  .market-card{
    padding:12px !important;
    border-radius:20px !important;
  }

  .schedule-box,
  .number-box,
  .detail-box,
  .market-info-box,
  .market-info-minimal{
    padding:11px !important;
    border-radius:16px !important;
  }

  .copy-mini-btn,
  .market-detail-btn{
    min-height:40px !important;
  }
}

@media (max-width:360px){
  .brand-logo-frame{
    max-width:min(100%, 142px) !important;
  }

  .brand-logo-img{
    height:34px !important;
  }

  .btn-register,
  .btn-login{
    padding-inline:7px !important;
    font-size:8.2px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body::before,
  body::after,
  .hero-copy::after,
  .market-card,
  .btn-primary,
  .btn-secondary,
  .btn-login,
  .btn-register,
  .copy-mini-btn,
  .market-detail-btn,
  .nav-link,
  .nav-dropdown,
  .banner-track,
  .banner-dot{
    animation:none !important;
    transition:none !important;
  }
}
/* ===== end final layout stability polish v7 ===== */



/* ===== v8 responsive polish fixes ===== */
.hero-grid,
.hero-panel,
.hero-next,
.hero-next-top,
.hero-next-header,
.hero-next-header-copy,
.hero-next-metrics,
.hero-next-metric,
.hero-next-about,
.hero-next-about-copy{
  min-width:0;
}

.hero-next-header{
  align-items:flex-start;
}

.hero-next-name,
.hero-next-meta,
.hero-next-metric-value,
.hero-next-about-copy,
.schedule-modal-meta,
.market-site-link,
.modal-note-row strong{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.hero-next{
  overflow:hidden;
}

.hero-next-metrics{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.hero-next-metric-value{
  font-size:clamp(.94rem, 1.15vw, 1.04rem);
  line-height:1.38;
}

.card-info-core .schedule-list{
  gap:6px;
}

.card-info-core .schedule-row{
  grid-template-columns:minmax(78px, .88fr) minmax(0, 1.12fr);
  align-items:center;
  gap:8px 12px;
  padding:10px 0;
}

.card-info-core .schedule-row > span{
  font-size:11px;
  letter-spacing:.01em;
}

.card-info-core .schedule-row > strong,
.card-info-core .market-site-cell .market-site-link{
  font-size:12.5px;
  line-height:1.42;
  text-align:right;
}

.modal-lite-box .schedule-list{
  gap:6px;
}

.modal-lite-box .compact-row,
.modal-lite-box .info-row,
.modal-lite-box .compact-row-info{
  grid-template-columns:minmax(92px, .86fr) minmax(0, 1.14fr);
  align-items:start;
  gap:9px 14px;
  padding:10px 0;
}

.modal-lite-box .compact-row > span,
.modal-lite-box .info-row > span,
.modal-lite-box .compact-row-info > span{
  font-size:11px;
  line-height:1.46;
  letter-spacing:.01em;
}

.modal-lite-box .compact-row > strong,
.modal-lite-box .info-row > strong,
.modal-lite-box .compact-row-info > strong,
.modal-lite-box .compact-row > a,
.modal-lite-box .info-row > a,
.modal-lite-box .compact-row-info > a,
.modal-lite-box .market-site-link,
.modal-note-row strong{
  justify-self:end;
  text-align:right;
  justify-content:flex-end;
  font-size:12.75px;
  line-height:1.56;
  max-width:100%;
}

.modal-note-row strong{
  font-weight:700;
}

.modal-top2d-flow{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:8px;
}

.modal-top2d-flow .pair-chip{
  min-height:40px;
  padding:0 6px;
  font-size:.94rem;
  font-weight:800;
  border-radius:14px;
}

.modal-actions-schedule{
  justify-content:center;
  margin-top:18px;
}

.modal-actions-schedule .btn-secondary{
  width:min(100%, 220px);
  min-width:0;
  min-height:48px;
  padding:0 18px;
  margin-inline:auto;
  border-radius:999px;
}

@media (max-width:1180px){
  .hero-grid{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .hero-panel{
    min-height:auto;
  }
}

@media (max-width:760px){
  .hero-next{
    padding:16px;
  }

  .hero-next-name{
    font-size:clamp(1.65rem, 6.4vw, 2.1rem);
  }

  .hero-next-meta{
    font-size:.9rem;
    line-height:1.65;
  }

  .hero-next-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .hero-next-metric{
    padding:12px;
  }

  .modal-lite-box .compact-row,
  .modal-lite-box .info-row,
  .modal-lite-box .compact-row-info{
    grid-template-columns:minmax(84px, .84fr) minmax(0, 1.16fr);
    gap:8px 10px;
  }

  .modal-lite-box .compact-row > strong,
  .modal-lite-box .info-row > strong,
  .modal-lite-box .compact-row-info > strong,
  .modal-lite-box .compact-row > a,
  .modal-lite-box .info-row > a,
  .modal-lite-box .compact-row-info > a,
  .modal-lite-box .market-site-link,
  .modal-note-row strong{
    font-size:12px;
  }

  .modal-top2d-flow{
    gap:7px;
  }

  .modal-top2d-flow .pair-chip{
    min-height:36px;
    font-size:.82rem;
    border-radius:12px;
  }

  .modal-actions-schedule .btn-secondary{
    width:min(100%, 200px) !important;
    min-height:46px;
  }
}

@media (max-width:560px){
  .hero-next-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-next-state-wrap{
    width:100%;
    justify-content:flex-start;
  }

  .hero-next-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width:420px){
  .card-info-core .schedule-row{
    grid-template-columns:minmax(68px, .84fr) minmax(0, 1.16fr);
    gap:7px 10px;
  }

  .card-info-core .schedule-row > span{
    font-size:10.5px;
  }

  .card-info-core .schedule-row > strong{
    font-size:12px;
  }

  .modal-lite-box .compact-row,
  .modal-lite-box .info-row,
  .modal-lite-box .compact-row-info{
    grid-template-columns:minmax(76px, .84fr) minmax(0, 1.16fr);
  }

  .modal-top2d-flow .pair-chip{
    min-height:34px;
    font-size:.76rem;
    padding:0 4px;
  }
}
/* ===== end v8 responsive polish fixes ===== */



/* ===== v9 micro-fixes: reset cleanup, compact status, anti-overflow buttons ===== */
.hero-panel{
  padding-top:clamp(16px, 2.2vw, 22px) !important;
}

.hero-grid{
  gap:clamp(16px, 2vw, 22px) !important;
}

.hero-next{
  margin-top:2px;
  padding-top:clamp(18px, 2.1vw, 22px) !important;
}

.hero-next-header{
  position:relative;
  padding-right:112px;
  align-items:flex-start !important;
  min-height:42px;
}

.hero-next-state-wrap{
  position:absolute !important;
  top:0;
  right:0;
  width:auto !important;
  justify-content:flex-end !important;
}

.hero-next-state-wrap .mini-chip{
  min-height:32px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.01em;
  box-shadow:none !important;
}

.hero-next-state-wrap .mini-chip i{
  font-size:10px;
}

#hero-next-meta{
  margin-top:8px !important;
}

.hero-next-metrics{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

.hero-actions{
  gap:14px !important;
  margin-top:26px !important;
  align-items:stretch;
}

.hero-actions .btn-primary,
.hero-actions .btn-secondary{
  flex:1 1 0;
  width:auto !important;
  max-width:100%;
  min-width:0;
  min-height:clamp(48px, 10vw, 56px) !important;
  padding:0 clamp(16px, 4vw, 22px) !important;
  border-radius:30px !important;
}

.hero-actions .btn-primary span,
.hero-actions .btn-secondary span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.modal-market-shell{
  position:relative;
}

.modal-market-header{
  position:relative;
  padding-right:118px;
  align-items:flex-start !important;
  gap:12px !important;
}

.modal-market-toolbar{
  position:absolute !important;
  top:0;
  right:0;
  margin:0 !important;
  width:auto !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  gap:0 !important;
}

.modal-market-toolbar .mini-chip{
  display:none !important;
}

.modal-market-toolbar .state-chip{
  min-height:32px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

.modal-market-toolbar .state-chip .live-dot{
  width:8px;
  height:8px;
}

.modal-countdown-pill{
  width:100% !important;
  margin-top:6px;
}

.modal-actions-schedule,
.modal-actions-compact{
  align-items:center;
}

.modal-actions-schedule .btn-secondary{
  flex:0 0 auto !important;
  width:auto !important;
  max-width:min(100%, 172px) !important;
  min-width:0 !important;
  min-height:44px !important;
  height:auto !important;
  aspect-ratio:auto !important;
  padding:0 18px !important;
  margin-inline:auto;
  border-radius:999px !important;
}

@media (max-width:760px){
  .hero-next-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-panel{
    padding-top:18px !important;
  }
}

@media (max-width:560px){
  .hero-copy,
  .hero-panel{
    border-radius:24px !important;
  }

  .hero-panel{
    padding:18px 14px 14px !important;
    margin-top:4px;
  }

  .hero-next{
    padding:18px 14px 14px !important;
    border-radius:22px !important;
  }

  .hero-next-header{
    padding-right:92px;
    min-height:38px;
  }

  .hero-next-state-wrap .mini-chip{
    min-height:30px !important;
    padding:0 9px !important;
    font-size:10px !important;
  }

  .hero-actions{
    margin-top:20px !important;
    gap:12px !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    width:100% !important;
    min-height:48px !important;
    border-radius:26px !important;
    justify-content:center !important;
  }

  .modal-market-header{
    padding-right:94px;
    gap:10px !important;
  }

  .modal-market-toolbar .state-chip{
    min-height:30px !important;
    padding:0 8px !important;
    font-size:10px !important;
  }

  .modal-actions-schedule .btn-secondary{
    max-width:156px !important;
    min-height:40px !important;
    padding:0 15px !important;
    font-size:12px !important;
  }
}

@media (max-width:420px){
  .hero-next-header{
    padding-right:84px;
  }

  .hero-next-name{
    max-width:100%;
    padding-right:0;
  }

  .hero-next-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    min-height:46px !important;
    padding:0 14px !important;
  }

  .hero-actions .btn-primary span,
  .hero-actions .btn-secondary span{
    white-space:nowrap;
    font-size:12.5px;
  }

  .modal-market-header{
    padding-right:82px;
  }

  .modal-countdown-pill{
    padding:12px 14px !important;
  }

  .modal-actions-schedule .btn-secondary{
    max-width:148px !important;
  }
}

@media (max-width:360px){
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    min-height:44px !important;
    padding:0 12px !important;
  }

  .hero-actions .btn-primary span,
  .hero-actions .btn-secondary span{
    font-size:12px !important;
  }

  .hero-next-header{
    padding-right:78px;
  }

  .modal-market-header{
    padding-right:78px;
  }

  .modal-actions-schedule .btn-secondary{
    min-height:38px !important;
    max-width:140px !important;
  }
}
/* ===== end v9 micro-fixes ===== */

/* ===== v10 status + modal interaction refinements ===== */
.market-card{
  cursor:default !important;
}

.market-card .market-head{
  position:relative;
  padding-right:96px !important;
  min-height:44px;
}

.market-card > .state-chip{
  position:absolute !important;
  top:16px;
  right:16px;
  z-index:4;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  max-width:calc(100% - 32px);
  min-height:30px !important;
  padding:0 10px !important;
  margin:0 !important;
  border-radius:999px !important;
  box-shadow:none !important;
  white-space:nowrap;
}

.market-card > .state-chip span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
}

.modal-market-header{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start !important;
  gap:12px !important;
  padding-right:0 !important;
  min-height:auto !important;
}

.modal-market-title-wrap{
  min-width:0;
}

.modal-market-toolbar{
  display:none !important;
}

.modal-countdown-pill{
  width:auto !important;
  min-width:104px;
  max-width:168px;
  margin:0 !important;
  padding:10px 14px !important;
  border-radius:16px !important;
  justify-self:end;
  align-self:start;
  background:linear-gradient(145deg, rgba(8,44,74,.96), rgba(4,22,41,.92)) !important;
  border:1px solid rgba(56,189,248,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.modal-countdown-pill .countdown-label{
  display:block !important;
  margin:0 0 4px !important;
  font-size:9px !important;
  line-height:1.15 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  color:rgba(224,242,254,.52) !important;
}

.modal-countdown-pill .countdown-value{
  display:block !important;
  font-size:1.08rem !important;
  line-height:1 !important;
  letter-spacing:-.03em !important;
  color:#f4fbff !important;
}

@media (max-width:560px){
  .market-card .market-head{
    padding-right:88px !important;
  }

  .market-card > .state-chip{
    top:14px;
    right:14px;
    min-height:28px !important;
    padding:0 9px !important;
    font-size:9px !important;
  }

  .modal-market-header{
    gap:10px !important;
  }

  .modal-countdown-pill{
    min-width:92px;
    max-width:132px;
    padding:9px 12px !important;
    border-radius:14px !important;
  }

  .modal-countdown-pill .countdown-label{
    font-size:8px !important;
    margin-bottom:3px !important;
  }

  .modal-countdown-pill .countdown-value{
    font-size:1rem !important;
  }
}

@media (max-width:420px){
  .market-card .market-head{
    padding-right:82px !important;
  }

  .market-card > .state-chip{
    top:13px;
    right:13px;
    min-height:26px !important;
    padding:0 8px !important;
    font-size:8.5px !important;
  }

  .modal-market-header{
    grid-template-columns:minmax(0, 1fr) auto;
    gap:8px !important;
  }

  .modal-countdown-pill{
    min-width:84px;
    max-width:118px;
    padding:8px 10px !important;
  }

  .modal-countdown-pill .countdown-value{
    font-size:.92rem !important;
  }
}
/* ===== end v10 status + modal interaction refinements ===== */



/* v11 footer-nav-banner refinement */
.banner-controls,
.banner-dots{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.nav-link-row{
  gap:clamp(12px, 1.25vw, 18px) !important;
}

.nav-link{
  white-space:nowrap;
}

.nav-link-rtp,
.nav-dropdown-link-rtp,
.footer-link-rtp{
  position:relative;
}

.nav-link-rtp::before,
.nav-dropdown-link-rtp span::before,
.footer-link-rtp::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:999px;
  margin-right:8px;
  background:linear-gradient(135deg,var(--ocean-primary),var(--ocean-soft));
  box-shadow:0 0 0 4px rgba(56,189,248,.12);
  vertical-align:middle;
}

.footer-wrap{
  margin-top:22px !important;
  padding:16px 0 calc(18px + var(--safe-bottom)) !important;
}

.footer-card{
  border-radius:30px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022)) !important;
}

.footer-core{
  width:100% !important;
  max-width:100% !important;
}

.footer-inner{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:12px !important;
  padding:26px clamp(18px, 2.4vw, 28px) !important;
}

.footer-topline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(224,242,254,.52);
}

.footer-topline::before{
  content:none;
  display:none;
}

.footer-brand{
  font-size:clamp(1.5rem, 2.2vw, 1.82rem) !important;
  line-height:1 !important;
  margin:0 !important;
}

.footer-note{
  max-width:760px !important;
  margin:0 !important;
  font-size:13.5px !important;
  line-height:1.82 !important;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.footer-link{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  text-decoration:none;
  color:#f2fbff;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.footer-link:hover,
.footer-link:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.18);
  background:rgba(255,255,255,.06);
}

.footer-copy{
  text-align:left !important;
  color:rgba(224,242,254,.52) !important;
}

@media (max-width: 980px){
  .footer-inner{
    padding:22px 18px !important;
  }
}

@media (max-width: 640px){
  .footer-wrap{
    margin-top:18px !important;
    padding-top:12px !important;
  }

  .footer-card{
    border-radius:24px !important;
  }

  .footer-inner{
    gap:10px !important;
    padding:20px 16px !important;
  }

  .footer-note{
    font-size:12.5px !important;
    line-height:1.72 !important;
  }

  .footer-links{
    width:100%;
    gap:8px;
  }

  .footer-link{
    min-height:34px;
    padding:0 12px;
    font-size:11.5px;
  }
}

/* ===== small mobile compact system ===== */
@media (max-width:520px){
  :root{
    --shell-pad:8px;
    --radius-sm:10px;
    --radius-md:12px;
    --radius-lg:14px;
    --radius-xl:16px;
    --radius-2xl:18px;
  }

  .shell{
    width:min(calc(100% - 12px), var(--shell-max)) !important;
    max-width:min(calc(100% - 12px), var(--shell-max)) !important;
  }

  .hero{
    padding-top:calc(var(--nav-offset) + 8px) !important;
    padding-bottom:12px !important;
  }

  .hero-grid{
    gap:10px !important;
  }

  .hero-copy,
  .hero-panel,
  .search-panel,
  .footer-card,
  .market-card{
    border-radius:18px !important;
    box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
  }

  .hero-copy,
  .hero-panel{
    padding:10px !important;
    gap:10px !important;
    min-height:0 !important;
  }

  .hero-copy::before,
  .hero-panel::before,
  .hero-copy::after,
  .hero-next::after{
    display:none !important;
  }

  .hero-copy .banner-shell,
  .hero-copy .banner-stage,
  .banner-shell,
  .banner-stage{
    border-radius:16px !important;
  }

  .hero-copy .banner-stage{
    aspect-ratio:16 / 7.6 !important;
    min-height:92px !important;
    max-height:132px !important;
  }

  .banner-section{
    padding:calc(var(--nav-offset) + 8px) 0 4px !important;
  }

  .banner-stage{
    min-height:110px !important;
  }

  .banner-slide{
    padding:5px !important;
  }

  .banner-frame{
    border-radius:13px !important;
    box-shadow:0 8px 16px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .hero-copy__content{
    padding:2px 2px 0 !important;
  }

  .hero-chip{
    padding:7px 9px !important;
    gap:6px !important;
    font-size:9px !important;
    letter-spacing:.045em !important;
  }

  .hero-title{
    max-width:12ch !important;
    font-size:clamp(1.38rem, 7vw, 1.78rem) !important;
    line-height:.98 !important;
    letter-spacing:-.045em !important;
  }

  .hero-desc{
    margin-top:10px !important;
    font-size:.78rem !important;
    line-height:1.55 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden !important;
  }

  .hero-actions{
    margin-top:12px !important;
    gap:8px !important;
    flex-direction:row !important;
    width:100% !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    flex:1 1 0 !important;
    width:auto !important;
    min-height:36px !important;
    padding:0 10px !important;
    font-size:9.5px !important;
    gap:6px !important;
  }

  .hero-next{
    padding:10px !important;
    gap:8px !important;
    min-height:0 !important;
    border-radius:16px !important;
    overflow:hidden !important;
  }

  .hero-next-top{
    gap:8px !important;
  }

  .hero-next-header{
    gap:8px !important;
    align-items:flex-start !important;
  }

  .hero-next-name{
    margin-top:1px !important;
    font-size:clamp(1.12rem, 5.4vw, 1.42rem) !important;
    line-height:1 !important;
    letter-spacing:-.035em !important;
  }

  .hero-next-meta{
    margin-top:5px !important;
    font-size:.72rem !important;
    line-height:1.35 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden !important;
  }

  .hero-next-state-wrap .mini-chip{
    min-height:24px !important;
    padding:0 8px !important;
    gap:5px !important;
    font-size:8.5px !important;
    box-shadow:none !important;
  }

  .hero-next-count-wrap{
    padding:10px 12px !important;
    gap:4px !important;
    border-radius:14px !important;
  }

  .hero-next-phase{
    font-size:.7rem !important;
    line-height:1.25 !important;
  }

  .big-count{
    font-size:clamp(1.42rem, 9vw, 1.86rem) !important;
    line-height:1 !important;
    letter-spacing:.015em !important;
  }

  .hero-next-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:7px !important;
  }

  .hero-next-metric{
    padding:8px !important;
    border-radius:12px !important;
  }

  .hero-next-metric-label{
    font-size:.5rem !important;
    letter-spacing:.09em !important;
  }

  .hero-next-metric-value{
    margin-top:3px !important;
    font-size:.74rem !important;
    line-height:1.25 !important;
  }

  .hero-next-site-link{
    gap:5px !important;
  }

  .hero-next-about{
    display:none !important;
  }

  .section-head{
    gap:10px !important;
    margin-bottom:12px !important;
  }

  .section-title{
    font-size:clamp(1.25rem, 7vw, 1.65rem) !important;
  }

  .search-panel{
    padding:8px !important;
    border-radius:15px !important;
  }

  .input-premium{
    min-height:42px !important;
    padding:0 12px 0 36px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }

  .search-wrap i{
    left:13px !important;
    font-size:11px !important;
  }

  .market-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    grid-auto-rows:auto !important;
  }

  .market-card{
    min-height:0 !important;
    height:auto !important;
    padding:9px !important;
    gap:6px !important;
    border-radius:15px !important;
    box-shadow:0 7px 16px rgba(0,0,0,.16) !important;
  }

  .market-card::after{
    left:10px !important;
    right:10px !important;
    height:1px !important;
  }

  .market-head{
    gap:5px !important;
    margin-bottom:0 !important;
  }

  .market-code{
    margin-bottom:2px !important;
    font-size:7px !important;
    letter-spacing:.09em !important;
  }

  .market-name{
    min-height:calc(1.05em * 2) !important;
    font-size:.78rem !important;
    line-height:1.05 !important;
    letter-spacing:-.018em !important;
    -webkit-line-clamp:2 !important;
  }

  .market-card > .state-chip{
    min-height:22px !important;
    padding:0 6px !important;
    gap:4px !important;
    border-radius:999px !important;
    font-size:7.5px !important;
  }

  .market-card .live-dot{
    width:6px !important;
    height:6px !important;
  }

  .card-info-core,
  .market-info-box,
  .market-info-minimal,
  .schedule-box,
  .number-box,
  .detail-box{
    padding:8px !important;
    border-radius:12px !important;
  }

  .market-card .box-label{
    font-size:7.5px !important;
    letter-spacing:.08em !important;
  }

  .card-info-core .schedule-list{
    margin-top:3px !important;
    gap:0 !important;
  }

  .card-info-core .schedule-row{
    grid-template-columns:1fr !important;
    gap:1px !important;
    padding:4px 0 !important;
  }

  .card-info-core .schedule-row > span{
    font-size:7.5px !important;
    line-height:1.15 !important;
  }

  .card-info-core .schedule-row > strong,
  .card-info-core .market-site-cell .market-site-link{
    justify-self:start !important;
    text-align:left !important;
    font-size:8.5px !important;
    line-height:1.25 !important;
  }

  .card-info-core .market-site-cell{
    justify-content:flex-start !important;
    text-align:left !important;
  }

  .market-card .stat-inline{
    display:none !important;
  }

  .market-action-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:5px !important;
  }

  .copy-mini-btn,
  .market-detail-btn{
    min-height:28px !important;
    padding:0 6px !important;
    border-radius:999px !important;
    font-size:8px !important;
    gap:4px !important;
  }

  .copy-mini-btn i{
    display:none !important;
  }

  .footer-wrap{
    margin-top:10px !important;
    padding-top:6px !important;
    padding-bottom:calc(8px + var(--safe-bottom)) !important;
  }

  .footer-card{
    border-radius:16px !important;
  }

  .footer-inner{
    padding:12px 10px !important;
    gap:6px !important;
  }

  .footer-brand{
    font-size:1rem !important;
    line-height:1.05 !important;
  }

  .footer-note{
    font-size:.72rem !important;
    line-height:1.45 !important;
  }

  .footer-copy{
    font-size:.68rem !important;
    line-height:1.35 !important;
  }

  .footer-links{
    gap:6px !important;
  }

  .footer-link{
    min-height:28px !important;
    padding:0 9px !important;
    font-size:9px !important;
  }
}

@media (max-width:380px){
  :root{
    --shell-pad:6px;
    --nav-offset:72px;
  }

  .shell{
    width:min(calc(100% - 8px), var(--shell-max)) !important;
    max-width:min(calc(100% - 8px), var(--shell-max)) !important;
  }

  .hero-copy,
  .hero-panel{
    padding:8px !important;
    border-radius:16px !important;
  }

  .hero-copy .banner-stage{
    min-height:82px !important;
  }

  .hero-title{
    font-size:clamp(1.24rem, 7.4vw, 1.56rem) !important;
  }

  .hero-desc{
    font-size:.72rem !important;
    line-height:1.48 !important;
    -webkit-line-clamp:3;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    min-height:32px !important;
    padding:0 8px !important;
    font-size:8.5px !important;
  }

  .hero-next{
    padding:8px !important;
    border-radius:14px !important;
  }

  .hero-next-name{
    font-size:1.08rem !important;
  }

  .hero-next-meta{
    font-size:.66rem !important;
  }

  .hero-next-count-wrap{
    padding:8px 10px !important;
  }

  .big-count{
    font-size:1.42rem !important;
  }

  .hero-next-metric{
    padding:7px !important;
  }

  .hero-next-metric-value{
    font-size:.68rem !important;
  }

  .market-grid{
    gap:6px !important;
  }

  .market-card{
    padding:8px !important;
    gap:5px !important;
    border-radius:13px !important;
  }

  .market-name{
    font-size:.72rem !important;
  }

  .card-info-core,
  .market-info-box,
  .market-info-minimal,
  .schedule-box,
  .number-box,
  .detail-box{
    padding:7px !important;
    border-radius:10px !important;
  }

  .copy-mini-btn,
  .market-detail-btn{
    min-height:26px !important;
    font-size:7.6px !important;
    padding:0 5px !important;
  }

  .footer-inner{
    padding:10px 8px !important;
  }
}
/* ===== end small mobile compact system ===== */




/* --------------------------------------------------------------------------
   Togel Result Single Wrapper Host
   --------------------------------------------------------------------------
   The togel runtime already renders .togel-result-card as the main visual card.
   This host layer is intentionally transparent so the UI does not show a
   double outer/inner wrapper when #togel-results-root also carries legacy
   .search-panel / .glass classes from older index builds. */
#live-togel-results{
  scroll-margin-top:calc(var(--nav-offset) + 18px);
}

#togel-results-root,
[data-togel-results-root],
[data-togel-result-root],
[data-togel-results]{
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
}

#togel-results-root.search-panel,
#togel-results-root.glass,
#togel-results-root.search-panel.glass,
[data-togel-results-root].search-panel,
[data-togel-results-root].glass,
[data-togel-result-root].search-panel,
[data-togel-result-root].glass,
[data-togel-results].search-panel,
[data-togel-results].glass{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#togel-results-root > .togel-result-section,
[data-togel-results-root] > .togel-result-section,
[data-togel-result-root] > .togel-result-section,
[data-togel-results] > .togel-result-section{
  width:100%;
  max-width:100%;
  margin:0;
}

#togel-results-root .togel-result-card,
[data-togel-results-root] .togel-result-card,
[data-togel-result-root] .togel-result-card,
[data-togel-results] .togel-result-card{
  width:100%;
  max-width:100%;
}

.togel-results-host{
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
}

.togel-result-card--placeholder{
  display:grid;
  gap:8px;
  min-height:112px;
  align-content:center;
  padding:18px clamp(16px, 2vw, 22px);
}

.togel-result-card--placeholder p{
  margin:0;
}

/* --------------------------------------------------------------------------
   Togel Result Section
   -------------------------------------------------------------------------- */
.togel-result-section{
  position:relative;
  z-index:1;
  width:var(--shell-width);
  max-width:var(--shell-width);
  margin:18px auto 8px;
  scroll-margin-top:calc(var(--nav-offset) + 18px);
}

.togel-result-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(224,242,254,.075);
  background:
    radial-gradient(circle at 12% 0%, rgba(56,189,248,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.024)),
    linear-gradient(145deg, rgba(6,22,40,.86), rgba(5,17,32,.92));
  box-shadow:0 18px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
}

.togel-result-card::before{
  content:"";
  position:absolute;
  left:clamp(14px, 2vw, 18px);
  right:clamp(14px, 2vw, 18px);
  top:0;
  height:1px;
  background:linear-gradient(90deg, rgba(56,189,248,0), rgba(56,189,248,.62), rgba(125,211,252,.18), rgba(56,189,248,0));
  pointer-events:none;
}

.togel-result-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:18px clamp(16px, 2vw, 22px) 0;
}

.togel-result-title-wrap{min-width:0}

.togel-result-eyebrow{
  margin-bottom:6px;
  font-size:10px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(224,242,254,.48);
}

.togel-result-title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.26rem, 2.6vw, 1.9rem);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:900;
  color:var(--text);
  text-wrap:balance;
}

.togel-result-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(224,242,254,.075);
  background:rgba(255,255,255,.045);
  color:rgba(224,242,254,.70);
  font-size:11px;
  line-height:1.2;
  font-weight:850;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.togel-result-status::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--ocean-primary);
  box-shadow:0 0 0 0 rgba(56,189,248,.42);
  animation:pulseDot 2.2s infinite;
}

.togel-result-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:10px 8px;
  padding:16px clamp(14px, 2vw, 22px) 18px;
}

.togel-result-entry{
  position:relative;
  display:block;
  width:clamp(88px, 8vw, 104px);
  min-width:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(224,242,254,.08);
  text-decoration:none;
  color:inherit;
  background:
    radial-gradient(circle at 70% 0%, rgba(56,189,248,.075), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.022)),
    linear-gradient(160deg, rgba(7,24,43,.92), rgba(3,15,30,.92));
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025);
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, width var(--dur-fast) ease;
}

.togel-result-entry:hover,
.togel-result-entry:focus-visible,
.togel-result-entry:focus-within{
  transform:translateY(-2px);
  border-color:rgba(56,189,248,.18);
  box-shadow:0 14px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(56,189,248,.055) inset;
  outline:none;
}

.togel-result-main{
  display:grid;
  grid-template-rows:24px 1fr 30px;
  grid-template-areas:
    "pasaran"
    "keluaran"
    "tanggal";
  width:100%;
  height:112px;
  min-width:0;
  padding:0;
  list-style:none;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
}

.togel-result-main::-webkit-details-marker{display:none}
.togel-result-link{cursor:pointer}

.togel-result-market{
  grid-area:pasaran;
  display:grid;
  place-items:center;
  min-width:0;
  padding:9px 7px 0;
  color:rgba(224,242,254,.62);
  font-size:10px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.togel-result-number{
  grid-area:keluaran;
  display:grid;
  place-items:center;
  min-width:0;
  padding:2px 6px 6px;
  font-family:var(--font-display);
  font-size:clamp(1.78rem, 2.6vw, 2.26rem);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:950;
  color:#f7fbff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 8px 22px rgba(0,0,0,.24);
}

.togel-result-date{
  grid-area:tanggal;
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
  padding:0 6px;
  background:linear-gradient(180deg, rgba(56,189,248,.13), rgba(14,165,233,.075));
  color:rgba(224,242,254,.78);
  font-size:11px;
  line-height:1.1;
  font-weight:800;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.togel-result-entry[open]{
  width:min(220px, 100%);
}

.togel-result-entry[open] .togel-result-main{
  height:96px;
}

.togel-result-history{
  display:grid;
  gap:5px;
  padding:8px;
  border-top:1px solid rgba(224,242,254,.065);
  background:rgba(0,0,0,.10);
}

.togel-result-history-title{
  font-size:9px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(224,242,254,.42);
  padding:1px 2px 3px;
}

.togel-result-history-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:8px;
  min-height:22px;
  padding:3px 6px;
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:rgba(224,242,254,.68);
  font-size:10px;
  line-height:1.15;
  font-weight:750;
  font-variant-numeric:tabular-nums;
}

.togel-result-history-row strong{
  color:var(--ocean-soft);
  font-size:12px;
  font-weight:950;
  letter-spacing:.02em;
}

.togel-result-empty{
  width:100%;
  min-height:86px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:18px;
  border-radius:18px;
  border:1px dashed rgba(224,242,254,.10);
  color:rgba(224,242,254,.68);
  background:rgba(255,255,255,.025);
  font-weight:750;
}

@media (max-width:1000px){
  .togel-result-section{
    margin:14px auto 6px;
  }

  .togel-result-card{
    border-radius:22px;
  }

  .togel-result-head{
    align-items:flex-start;
    padding:15px 14px 0;
  }

  .togel-result-title{
    font-size:clamp(1.12rem, 5.4vw, 1.46rem);
  }

  .togel-result-status{
    min-height:30px;
    padding:0 10px;
    font-size:10px;
  }

  .togel-result-content{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:0;
    padding:13px 12px 14px;
  }

  .togel-result-entry,
  .togel-result-entry[open]{
    width:100%;
    border-radius:0;
    border:0;
    border-bottom:1px solid rgba(224,242,254,.055);
    background:transparent;
    box-shadow:none;
  }

  .togel-result-entry:nth-child(odd){
    background:rgba(255,255,255,.035);
  }

  .togel-result-entry:first-child{
    border-top-left-radius:14px;
    border-top-right-radius:14px;
  }

  .togel-result-entry:last-child{
    border-bottom:0;
    border-bottom-left-radius:14px;
    border-bottom-right-radius:14px;
  }

  .togel-result-entry:hover,
  .togel-result-entry:focus-visible,
  .togel-result-entry:focus-within{
    transform:none;
    box-shadow:none;
    background:rgba(255,255,255,.052);
  }

  .togel-result-main,
  .togel-result-entry[open] .togel-result-main{
    width:100%;
    height:auto;
    min-height:42px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(80px, .62fr) minmax(68px, .46fr);
    grid-template-areas:"pasaran tanggal keluaran";
    align-items:center;
    padding:0 6px;
  }

  .togel-result-market,
  .togel-result-date,
  .togel-result-number{
    display:flex;
    align-items:center;
    min-width:0;
    padding:8px 6px;
    background:transparent;
    line-height:1.2;
  }

  .togel-result-market{
    justify-content:flex-start;
    font-size:12px;
    color:rgba(224,242,254,.72);
    letter-spacing:.01em;
  }

  .togel-result-date{
    justify-content:center;
    color:rgba(224,242,254,.58);
    font-size:11px;
  }

  .togel-result-number{
    justify-content:flex-end;
    font-size:1.02rem;
    color:var(--ocean-soft);
  }

  .togel-result-history{
    padding:4px 8px 8px;
    background:rgba(0,0,0,.08);
  }

  .togel-result-history-row{
    min-height:28px;
    padding:5px 8px;
    font-size:11px;
  }

  .togel-result-history-row strong{
    font-size:13px;
  }
}

@media (max-width:380px){
  .togel-result-head{
    padding-inline:12px;
  }

  .togel-result-content{
    padding-inline:9px;
  }

  .togel-result-main,
  .togel-result-entry[open] .togel-result-main{
    grid-template-columns:minmax(0, 1fr) 72px 58px;
    min-height:38px;
    padding-inline:4px;
  }

  .togel-result-market{font-size:10.8px}
  .togel-result-date{font-size:9.8px}
  .togel-result-number{font-size:.96rem}
}

html.performance-v15.performance-lite-device .togel-result-card{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html.performance-v15.performance-lite-device .togel-result-entry:hover,
html.performance-v15.performance-lite-device .togel-result-entry:focus-visible,
html.performance-v15.performance-lite-device .togel-result-entry:focus-within{
  transform:none !important;
}

/* ===== Visual interface component unification =====
   Direct theme support for legacy green/success utility names and small popup actions.
   Visual output is mapped to the same Ocean palette; class names are kept for compatibility. */
:root{
  --success:#38bdf8;
  --success-soft:#7dd3fc;
  --success-deep:#0ea5e9;
  --green:#38bdf8;
  --emerald:#38bdf8;
  --lime:#7dd3fc;
  --teal:#22d3ee;
  --popup-surface:linear-gradient(180deg, rgba(8,24,42,.94), rgba(5,18,34,.92));
  --popup-border:rgba(56,189,248,.16);
  --popup-action:linear-gradient(135deg, #7dd3fc 0%, #38bdf8 48%, #0ea5e9 100%);
  --popup-action-soft:linear-gradient(180deg, rgba(56,189,248,.13), rgba(14,165,233,.08));
}

.btn-success,
.btn-outline-success,
.badge-success,
.alert-success,
.bg-success,
.text-success,
.border-success,
.progress-bar-success,
.progress-bar.bg-success,
.button-success,
.status-success,
.status-online,
.status-open,
.status-active,
.popup-btn,
.popup-button,
.popup-action,
.popup-actions button,
.modal-actions button,
.modal-market-toolbar button,
.pola-btn,
.btn-pola,
.btn-main,
.main-btn,
.detail-pola-btn,
.action-btn,
.winner-popup button,
.pola-popup button,
.game-popup button,
[data-action="pola"],
[data-action="main"],
[data-role="popup-action"]{
  color:#02111f;
  background:var(--popup-action);
  border-color:transparent;
  box-shadow:0 12px 24px rgba(14,165,233,.16), inset 0 1px 0 rgba(255,255,255,.22);
}

.btn-outline-success,
.popup-action.is-secondary,
.popup-actions .btn-secondary,
.modal-actions .btn-secondary,
.pola-popup .btn-secondary,
.game-popup .btn-secondary{
  color:#eff9ff;
  background:var(--popup-action-soft);
  border:1px solid rgba(56,189,248,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.alert-success,
.popup,
.popup-card,
.popup-panel,
.pola-popup,
.winner-popup,
.game-popup,
.detail-popup,
.small-layout,
.mini-layout,
.floating-panel{
  color:var(--text);
  background:var(--popup-surface);
  border-color:var(--popup-border);
}

.badge-success,
.status-success,
.status-online,
.status-open,
.status-active,
.chip-success,
.label-success,
.pill-success{
  color:#e0f7ff;
  background:linear-gradient(135deg, rgba(14,165,233,.20), rgba(56,189,248,.14));
  border-color:rgba(56,189,248,.30);
}

:is(.btn-success,.btn-outline-success,.popup-btn,.popup-button,.popup-action,.pola-btn,.btn-pola,.btn-main,.main-btn,.detail-pola-btn,.action-btn,[data-action="pola"],[data-action="main"]):hover,
:is(.btn-success,.btn-outline-success,.popup-btn,.popup-button,.popup-action,.pola-btn,.btn-pola,.btn-main,.main-btn,.detail-pola-btn,.action-btn,[data-action="pola"],[data-action="main"]):focus-visible{
  border-color:rgba(56,189,248,.22);
  box-shadow:0 14px 28px rgba(14,165,233,.18), inset 0 1px 0 rgba(255,255,255,.24);
}
/* ===== end Visual interface component unification ===== */

/* ===== modal countdown chip color alignment ===== */
.modal-market-header{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  align-items:start !important;
  gap:clamp(8px, 1.8vw, 12px) !important;
  padding-right:0 !important;
  min-height:auto !important;
}

.modal-market-title-wrap{
  grid-column:auto !important;
  min-width:0 !important;
  max-width:100% !important;
}

#modal .modal-countdown-pill,
#modal .countdown-pill.modal-countdown-pill,
.modal-card .modal-countdown-pill,
.modal-card .countdown-pill.modal-countdown-pill,
.modal-market-header > .modal-countdown-pill{
  display:flex !important;
  visibility:visible !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:4px !important;
  width:auto !important;
  min-width:104px !important;
  max-width:168px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:10px 14px !important;
  margin:0 !important;
  overflow:hidden !important;
  justify-self:end !important;
  align-self:start !important;
  border-radius:16px !important;
  color:#f4fbff !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(56,189,248,.18), transparent 42%),
    linear-gradient(145deg, rgba(8,44,74,.96), rgba(4,22,41,.92)) !important;
  border:1px solid rgba(56,189,248,.32) !important;
  box-shadow:
    0 10px 24px rgba(14,165,233,.16),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(56,189,248,.06) inset !important;
  pointer-events:none !important;
}

#modal .modal-countdown-pill .countdown-label,
.modal-card .modal-countdown-pill .countdown-label{
  display:block !important;
  margin:0 0 4px !important;
  font-size:9px !important;
  line-height:1.15 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:rgba(186,230,253,.72) !important;
}

#modal .modal-countdown-pill .countdown-value,
.modal-card .modal-countdown-pill .countdown-value{
  display:block !important;
  font-size:1.08rem !important;
  line-height:1 !important;
  letter-spacing:-.03em !important;
  color:#f8fcff !important;
  text-shadow:0 0 14px rgba(56,189,248,.16) !important;
}

@media (max-width:560px){
  .modal-market-header{
    grid-template-columns:minmax(0, 1fr) auto !important;
    gap:8px !important;
  }

  #modal .modal-countdown-pill,
  .modal-card .modal-countdown-pill,
  .modal-market-header > .modal-countdown-pill{
    min-width:92px !important;
    max-width:132px !important;
    padding:9px 12px !important;
    border-radius:14px !important;
  }

  #modal .modal-countdown-pill .countdown-label,
  .modal-card .modal-countdown-pill .countdown-label{
    font-size:8px !important;
    margin-bottom:3px !important;
  }

  #modal .modal-countdown-pill .countdown-value,
  .modal-card .modal-countdown-pill .countdown-value{
    font-size:1rem !important;
  }
}

@media (max-width:420px){
  .modal-market-header{
    grid-template-columns:minmax(0, 1fr) auto !important;
    gap:7px !important;
  }

  #modal .modal-countdown-pill,
  .modal-card .modal-countdown-pill,
  .modal-market-header > .modal-countdown-pill{
    min-width:84px !important;
    max-width:118px !important;
    padding:8px 10px !important;
  }

  #modal .modal-countdown-pill .countdown-value,
  .modal-card .modal-countdown-pill .countdown-value{
    font-size:.92rem !important;
  }
}
/* ===== end modal countdown chip color alignment ===== */