/* 10-interface-enhancement.css | Interface refinement layer */
:root{
      --bg-0:#020617;
      --bg-1:#071426;
      --bg-2:#0b2440;

      --surface-1:rgba(255,255,255,.09);
      --surface-2:rgba(255,255,255,.05);
      --surface-3:rgba(255,255,255,.035);
      --surface-4:rgba(9,25,42,.82);
      --surface-5:rgba(8,20,35,.9);
      --surface-6:rgba(255,255,255,.06);

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

      --ocean-primary:#38bdf8;
      --ocean-secondary:#22d3ee;
      --ocean-soft:#bae6fd;
      --ocean-aqua:#22d3ee;
      --ocean-highlight:#bae6fd;
      --ocean-blue:#7dd3fc;

      --shadow-soft:0 16px 36px rgba(0,0,0,.22);
      --shadow-md:0 22px 46px rgba(0,0,0,.26);
      --shadow-lg:0 28px 62px rgba(0,0,0,.30);
      --shadow-glow:0 0 0 1px rgba(56,189,248,.08) inset;
      --shadow-ocean:0 14px 28px rgba(56,189,248,.16);

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

      --dur-fast:.16s;
      --dur-mid:.24s;
      --dur-slow:.38s;
    }

    html{
      background:linear-gradient(145deg, #020617 0%, #071426 44%, #0b2440 100%);
    }

    body{
      min-height:calc(var(--app-vh, 1vh) * 100);
      background:
        radial-gradient(circle at 12% 10%, rgba(56,189,248,.12), transparent 24%),
        radial-gradient(circle at 88% 6%, rgba(125,211,252,.10), transparent 21%),
        radial-gradient(circle at 50% 84%, rgba(186,230,253,.06), transparent 24%),
        linear-gradient(145deg, var(--bg-0) 0%, var(--bg-1) 44%, var(--bg-2) 100%);
    }

    body::before{
      top:7%;
      right:-80px;
      width:240px;
      height:240px;
      background:radial-gradient(circle, rgba(56,189,248,.16), transparent 70%);
      filter:blur(18px);
      opacity:.52;
    }

    body::after{
      left:-68px;
      bottom:8%;
      width:220px;
      height:220px;
      background:radial-gradient(circle, rgba(125,211,252,.10), transparent 72%);
      filter:blur(18px);
      opacity:.48;
    }

    .app-root{
      min-height:calc(var(--app-vh, 1vh) * 100);
    }

    .nav-wrap{
      background:linear-gradient(180deg, rgba(4,12,24,.90), rgba(4,12,24,.76));
      border-bottom-color:rgba(255,255,255,.08);
      box-shadow:0 1px 0 rgba(255,255,255,.04), 0 16px 34px rgba(0,0,0,.24);
    }

    .nav-wrap::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:1px;
      pointer-events:none;
      background:linear-gradient(90deg, rgba(56,189,248,0), rgba(56,189,248,.26), rgba(125,211,252,.18), rgba(56,189,248,0));
    }

    .nav-row{
      min-height:clamp(70px, 5.8vw, 78px);
    }

    .hero{
      padding-bottom:28px;
    }

    .hero-grid{
      gap:clamp(20px, 2vw, 28px);
    }

    .hero-copy,
    .hero-panel,
    .search-panel,
    .market-card,
    .footer-card,
    .modal-card{
      border-color:rgba(255,255,255,.09);
      box-shadow:0 22px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
    }

    .hero-copy,
    .hero-panel{
      background:linear-gradient(180deg, rgba(9,25,42,.82), rgba(6,16,30,.86));
    }

    .hero-copy::before,
    .hero-panel::before{
      width:240px;
      height:240px;
      background:radial-gradient(circle, rgba(56,189,248,.18), transparent 72%);
    }

    .hero-copy::after{
      background:radial-gradient(circle, rgba(125,211,252,.14), rgba(125,211,252,0) 72%);
    }

    .hero-title,
    .hero-next-name,
    .section-title,
    .footer-brand{
      text-shadow:0 8px 24px rgba(0,0,0,.22);
    }

    .hero-next,
    .hero-next-count-wrap,
    .hero-next-about,
    .search-panel,
    .schedule-box,
    .number-box,
    .detail-box,
    .modal-stat,
    .modal-summary-card{
      border-color:rgba(255,255,255,.09);
      background:linear-gradient(160deg, rgba(10,24,40,.92), rgba(6,16,30,.86));
    }

    .number-box{
      background:
        linear-gradient(160deg, rgba(9,28,46,.96), rgba(6,17,32,.92)),
        radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 46%);
    }

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

    .search-panel{
      padding:14px;
      border-radius:26px;
    }

    .market-grid{
      grid-template-columns:repeat(auto-fit, minmax(min(100%, 272px), 1fr));
      gap:clamp(14px, 1.55vw, 20px);
    }

    .market-card{
      contain:layout paint style;
      transform-origin:center top;
      backface-visibility:hidden;
      background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
      transition:
        transform var(--dur-mid) var(--ease),
        border-color var(--dur-mid) ease,
        box-shadow var(--dur-mid) ease,
        background-color var(--dur-mid) ease,
        opacity var(--dur-mid) ease;
    }

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

    .market-head{
      gap:12px;
    }

    .market-code{
      color:rgba(232,245,255,.46);
    }

    .market-name{
      font-size:clamp(1.02rem, 1.18vw, 1.3rem);
      line-height:1.06;
    }

    .schedule-row,
    .compact-row,
    .info-row,
    .schedule-modal-row{
      border-bottom-color:rgba(255,255,255,.07);
    }

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

    .btn-register,
    .btn-secondary,
    .ghost-btn,
    .copy-mini-btn,
    .schedule-jump-btn,
    .menu-toggle{
      background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
      border-color:rgba(255,255,255,.10);
    }

    .btn-login,
    .btn-primary,
    .market-detail-btn{
      background:linear-gradient(135deg, #7dd3fc 0%, #38bdf8 46%, #bae6fd 100%);
      box-shadow:0 14px 28px rgba(56,189,248,.16), inset 0 1px 0 rgba(255,255,255,.24);
    }

    .banner-shell,
    .banner-stage,
    .banner-frame,
    .hero-copy .banner-stage{
      border-radius:28px;
    }

    .banner-frame{
      border-color:rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
    }

    .banner-picture img{
      transform:translateZ(0);
      backface-visibility:hidden;
    }

    .footer-inner{
      align-items:flex-start;
      text-align:left;
      gap:12px;
    }

    .footer-note,
    .footer-copy{
      max-width:760px;
    }

    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      width:100%;
      justify-content:flex-start;
    }

    .footer-link{
      display:inline-flex;
      align-items:center;
      min-height:38px;
      padding:0 14px;
      border-radius:999px;
      text-decoration:none;
      color:#f7fbff;
      font-size:12px;
      font-weight:800;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      transition:
        transform var(--dur-fast) var(--ease),
        border-color var(--dur-fast) ease,
        background-color var(--dur-fast) ease,
        color var(--dur-fast) ease;
    }

    .modal{
      align-items:center;
    }
    .modal-actions .btn-primary,
    .modal-actions .btn-secondary,
    .popup-actions button,
    .popup-btn,
    .pola-btn,
    .btn-pola,
    .btn-main{
      border-color:rgba(56,189,248,.18);
    }


    .modal-card{
      width:min(960px, calc(100vw - 20px));
      background:linear-gradient(180deg, rgba(9,22,40,.95), rgba(6,16,30,.90));
    }

    .modal.is-open .modal-card{
      animation:premiumModalIn .28s var(--ease) both;
    }

    .toast{
      background:rgba(6,17,32,.88);
      border-color:rgba(255,255,255,.10);
      box-shadow:0 16px 34px rgba(0,0,0,.26);
    }

    .is-pressed{
      transform:scale(.985) translateZ(0) !important;
    }

    @supports (content-visibility:auto){
      .market-card{
        content-visibility:auto;
        contain-intrinsic-size:380px;
      }
    }

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

      .btn-register:hover,
      .btn-secondary:hover,
      .ghost-btn:hover,
      .copy-mini-btn:hover,
      .schedule-jump-btn:hover,
      .menu-toggle:hover,
      .footer-link:hover,
      .btn-register:focus-visible,
      .btn-secondary:focus-visible,
      .ghost-btn:focus-visible,
      .copy-mini-btn:focus-visible,
      .schedule-jump-btn:focus-visible,
      .menu-toggle:focus-visible,
      .footer-link:focus-visible{
        border-color:rgba(56,189,248,.18);
        background:rgba(255,255,255,.07);
      }
    }

    .js-motion-ready [data-reveal]{
      opacity:0;
      transform:translate3d(0, 16px, 0) scale(.992);
      transition:
        opacity .36s ease,
        transform .42s var(--ease),
        box-shadow var(--dur-mid) ease,
        border-color var(--dur-mid) ease;
    }

    .js-motion-ready [data-reveal].is-in-view{
      opacity:1;
      transform:translate3d(0, 0, 0) scale(1);
    }

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

    @media (max-width:980px){
      .hero{
        padding-bottom:24px;
      }

      .hero-grid{
        gap:18px;
      }

      .hero-copy,
      .hero-panel{
        padding:16px;
      }

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

    @media (max-width:720px){
      .hero-grid{
        gap:16px;
      }

      .hero-copy,
      .hero-panel,
      .footer-card,
      .modal-card,
      .market-card{
        border-radius:24px;
      }

      .search-panel{
        padding:12px;
        border-radius:22px;
      }

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

      .market-card{
        padding:11px;
      }

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

    @keyframes premiumModalIn{
      from{
        opacity:0;
        transform:translate3d(0, 14px, 0) scale(.985);
      }
      to{
        opacity:1;
        transform:translate3d(0, 0, 0) scale(1);
      }
    }

    @media (prefers-reduced-motion:reduce){
      body::before,
      body::after,
      .modal.is-open .modal-card,
      .toast{
        animation:none !important;
      }

      .js-motion-ready [data-reveal]{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
      }
    }