/* 20-visual-theme.css | Visual theme layer */
:root{
      --bg-0:#020817;
      --bg-1:#071426;
      --bg-2:#0b2440;

      --surface-1:rgba(224,242,254,.075);
      --surface-2:rgba(224,242,254,.045);
      --surface-3:rgba(224,242,254,.028);
      --surface-4:rgba(6,20,37,.84);
      --surface-5:rgba(5,18,34,.92);
      --surface-6:rgba(224,242,254,.05);

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

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

      --shadow-soft:0 16px 34px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.02) inset;
      --shadow-md:0 22px 48px rgba(0,0,0,.26), 0 1px 0 rgba(255,255,255,.025) inset;
      --shadow-lg:0 30px 68px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.03) inset;
      --shadow-glow:0 0 0 1px rgba(56,189,248,.055) inset;
      --shadow-ocean:0 14px 30px rgba(14,165,233,.16);

      --glass-blur:16px;
      --glass-blur-strong:20px;
      --focus-ring:0 0 0 4px rgba(56,189,248,.14);
    }

    html{
      background:
        radial-gradient(circle at 12% 10%, rgba(56,189,248,.09), transparent 24%),
        radial-gradient(circle at 88% 8%, rgba(125,211,252,.05), transparent 20%),
        linear-gradient(145deg, #020817 0%, #071426 44%, #0b2440 100%);
    }

    body{
      background:
        radial-gradient(circle at 14% 10%, rgba(56,189,248,.12), transparent 24%),
        radial-gradient(circle at 84% 8%, rgba(125,211,252,.06), transparent 20%),
        radial-gradient(circle at 50% 84%, rgba(14,165,233,.05), transparent 24%),
        linear-gradient(145deg, var(--bg-0) 0%, var(--bg-1) 44%, var(--bg-2) 100%);
    }

    body::before{
      background:radial-gradient(circle, rgba(56,189,248,.16), transparent 70%);
      filter:blur(20px);
      opacity:.46;
    }

    body::after{
      background:radial-gradient(circle, rgba(125,211,252,.10), transparent 72%);
      filter:blur(20px);
      opacity:.34;
    }

    .nav-wrap{
      background:linear-gradient(180deg, rgba(3,15,30,.88), rgba(3,15,30,.72));
      border-bottom-color:rgba(224,242,254,.065);
      box-shadow:0 1px 0 rgba(255,255,255,.02), 0 16px 34px rgba(0,0,0,.22);
    }

    .nav-wrap::after{
      background:linear-gradient(90deg, rgba(56,189,248,0), rgba(56,189,248,.22), rgba(125,211,252,.12), rgba(56,189,248,0));
    }

    .glass,
    .glass-strong,
    .search-panel,
    .footer-card,
    .modal-card,
    .nav-dropdown,
    .market-card,
    .hero-copy,
    .hero-panel{
      border-color:rgba(224,242,254,.07);
      box-shadow:0 18px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
    }

    .glass,
    .search-panel,
    .footer-card,
    .market-card,
    .nav-dropdown{
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.028)),
        linear-gradient(145deg, rgba(6,22,40,.82), rgba(5,18,34,.88));
      backdrop-filter:blur(var(--glass-blur)) saturate(140%);
      -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
    }

    .glass-strong,
    .modal-card,
    .hero-copy,
    .hero-panel{
      background:
        linear-gradient(180deg, rgba(8,24,42,.90), rgba(5,18,34,.92)),
        linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
      backdrop-filter:blur(var(--glass-blur-strong)) saturate(145%);
      -webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(145%);
    }

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

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

    .hero-next,
    .hero-next-count-wrap,
    .hero-next-about,
    .schedule-box,
    .number-box,
    .detail-box,
    .modal-stat,
    .modal-summary-card{
      border-color:rgba(224,242,254,.065);
      background:
        linear-gradient(160deg, rgba(7,24,43,.92), rgba(3,15,30,.90)),
        linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    }

    .number-box{
      background:
        radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 44%),
        linear-gradient(160deg, rgba(8,24,42,.96), rgba(3,15,30,.92));
    }

    .banner-frame{
      border-color:rgba(224,242,254,.075);
      background:
        linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.016)),
        linear-gradient(145deg, rgba(6,22,40,.86), rgba(5,16,31,.90));
      box-shadow:0 20px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03);
    }

    .market-card{
      background:
        radial-gradient(circle at top right, rgba(56,189,248,.08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.022)),
        linear-gradient(145deg, rgba(6,22,40,.86), rgba(5,17,32,.92));
    }

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

    .market-card.is-spotlight{
      border-color:rgba(56,189,248,.16);
      box-shadow:
        0 22px 44px rgba(0,0,0,.24),
        0 0 0 1px rgba(56,189,248,.05) inset,
        0 0 0 1px rgba(255,255,255,.018);
    }

    .schedule-row,
    .compact-row,
    .info-row,
    .schedule-modal-row{
      border-bottom-color:rgba(224,242,254,.055);
    }

    .market-code,
    .section-label,
    .box-label{
      color:rgba(186,230,253,.48);
    }

    .btn-register,
    .btn-secondary,
    .ghost-btn,
    .copy-mini-btn,
    .schedule-jump-btn,
    .menu-toggle,
    .footer-link{
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022)),
        linear-gradient(145deg, rgba(6,21,39,.80), rgba(5,16,31,.88));
      border-color:rgba(224,242,254,.075);
      color:#eef8ff;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    }

    .btn-login,
    .btn-primary,
    .market-detail-btn{
      color:#02111f;
      background:linear-gradient(135deg, #7dd3fc 0%, #38bdf8 46%, #0ea5e9 100%);
      box-shadow:0 14px 28px rgba(14,165,233,.16), inset 0 1px 0 rgba(255,255,255,.20);
    }


    .modal-actions .btn-primary,
    .modal-actions .btn-secondary,
    .popup-actions button,
    .popup-btn,
    .pola-btn,
    .btn-pola,
    .btn-main{
      background:linear-gradient(135deg, #7dd3fc 0%, #38bdf8 48%, #0ea5e9 100%);
      border-color:rgba(56,189,248,.18);
      box-shadow:0 12px 24px rgba(14,165,233,.16), inset 0 1px 0 rgba(255,255,255,.22);
    }

    .toast{
      background:
        linear-gradient(180deg, rgba(6,21,39,.92), rgba(3,15,30,.94)),
        linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border-color:rgba(224,242,254,.07);
      box-shadow:0 16px 34px rgba(0,0,0,.24);
    }

    .footer-card::before,
    .nav-dropdown::before{
      background:linear-gradient(90deg, rgba(56,189,248,0), rgba(56,189,248,.58), rgba(56,189,248,0));
    }

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

      .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,.14);
        background:
          linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.026)),
          linear-gradient(145deg, rgba(8,24,42,.84), rgba(5,18,34,.90));
      }
    }

    @media (max-width:720px){
      .glass,
      .glass-strong,
      .search-panel,
      .footer-card,
      .modal-card,
      .nav-dropdown,
      .market-card,
      .hero-copy,
      .hero-panel{
        box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.022);
      }
    }