:root{
  --accent-1:#6a11cb; 
  --accent-2:#2575fc; 
  --glass: rgba(255,255,255,0.06);
  --muted: rgba(255,255,255,0.8);
}
.site-header, .site-footer{font-family: 'Exo 2', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}

html.pwa-zoom-disabled,
html.pwa-zoom-disabled body{
  touch-action:pan-x pan-y;
}

.site-header{
  background: #0b1a4a; 
  color: white;
  padding: 14px 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
}
.header-inner{display:flex;align-items:center;gap:20px;}
.brand{display:flex;align-items:center;}
.header-logo{height:65px;width:auto;border-radius:10px;padding: 0px 10px 0px 10px;}
.brand-text{margin-left:10px;color:#fff}
.brand-title{display:block;font-weight:800;letter-spacing:1px;font-size:18px}
.brand-sub{display:block;font-size:11px;opacity:0.95}

.main-nav{gap:10px}
.main-nav .nav-link{color:rgba(255,255,255,0.95);padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:600;display:inline-flex;align-items:center}
.main-nav .nav-link:hover{background:rgba(255,255,255,0.08);transform:translateY(-2px);transition:all .18s ease}

.header-actions{margin-left:auto}
.search-box input{width:320px;max-width:44vw;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);color:#fff}
.search-box input::placeholder{color:rgba(255,255,255,0.8)}
.action-icon{color:rgba(255,255,255,0.95);position:relative;font-size:18px}
.action-icon .badge-dot{position:absolute;right:-2px;top:-4px;width:10px;height:10px;border-radius:50%;background:#ffdd57;box-shadow:0 0 6px rgba(255,221,87,0.9)}

.action-btn{font-weight:700;border-radius:30px;padding:8px 20px;border:none !important;box-shadow: 0 4px 10px rgba(0,0,0,0.15);}
.action-btn:hover{opacity:0.9;transform:translateY(-1px);}

a.btn.btn-outline-primary.action-btn {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid #fff !important;
}

a.btn.btn-primary.action-btn {
  background: #ffcc00 !important;
  color: #0b1a4a !important;
}

a.btn.btn-info.action-btn {
  background: #ff3399 !important;
  color: #ffffff !important;
}

.mobile-bottom-nav{display:none}

.site-footer{margin-top:0;color:#fff}
.footer-top{background:linear-gradient(90deg,#0f1724 0%, #151b2d 100%);padding:18px 0}
.footer-logo{height:48px;}
.footer-brand .muted{opacity:0.95;color:rgba(255,255,255,0.9)}
.footer-top .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-social{display:flex;align-items:center}
.footer-social .social-link{color:rgba(255,255,255,0.95);font-size:18px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));transition:all .18s}
.footer-social .social-link:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(37,117,252,0.12);color:#fff}
.footer-top .btn-outline-light{border-color:rgba(255,255,255,0.12);color:#fff}
.footer-top .btn-outline-light:hover,
.footer-top .btn-outline-light:focus{
  background:#ffcc00;
  border-color:#ffcc00;
  color:#0b1a4a;
}

.footer-mid{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:34px 0}
.footer-mid h6{color:#fff;font-weight:800;margin-bottom:12px}
.footer-mid a{color:rgba(255,255,255,0.95);text-decoration:none}
.footer-mid a:hover{text-decoration:underline}
.muted{color:rgba(255,255,255,0.85)}

.footer-mid .row{align-items:flex-start; justify-content:center}
.footer-mid .list-unstyled li{margin-bottom:8px}

.footer-mid .col-6.col-md-3{flex:0 0 240px;max-width:240px}
.footer-mid .col-6{flex:0 0 auto}
.footer-mid .row{gap:28px}

.footer-mid form.d-flex{gap:0}
.footer-mid form .form-control{min-width:0;flex:1;border-radius:10px;padding:12px}
.footer-mid form .btn{border-radius:10px}

.site-footer{width:100%;left:0;right:0;position:relative;box-sizing:border-box}
.footer-top, .footer-bottom{width:100%;box-sizing:border-box}

html, body {overflow-x: hidden}
.footer-bottom{background:linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.03));padding:12px 0}

@media (max-width: 991px){
  .search-box{display:none !important}
  .brand-text{display:none}
  .header-inner{gap:12px}
  .header-logo{height:48px}
}

@media (min-width: 768px) and (max-width: 991px){
  .main-nav{
    display:flex !important;
    gap:4px;
    flex-wrap:nowrap;
  }
  .main-nav .nav-link{
    font-size:11px;
    padding:5px 6px;
    white-space:nowrap;
  }
  .main-nav .nav-link i{
    font-size:10px;
    margin-right:2px !important;
  }
  .main-nav .nav-link .me-1{
    margin-right:2px !important;
  }
}

@media (max-width: 767px){
  .main-nav{display:none !important}
  .header-inner{justify-content:center}
  .header-actions{display:none !important}

  .site-footer{
    margin-bottom:calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav{
    align-items:stretch;
    background:linear-gradient(180deg, #10265f 0%, #0b1a4a 100%);
    border-top:2px solid #20c9e8;
    bottom:0;
    box-shadow:0 -8px 24px rgba(2, 12, 39, 0.24);
    display:flex;
    height:calc(76px + env(safe-area-inset-bottom, 0px));
    justify-content:space-around;
    left:0;
    padding:4px 4px env(safe-area-inset-bottom, 0px);
    position:fixed;
    right:0;
    width:100%;
    z-index:1045;
  }

  .mobile-bottom-nav__item{
    align-items:center;
    border-radius:12px;
    color:rgba(255,255,255,0.92);
    display:flex;
    flex:1 1 20%;
    flex-direction:column;
    gap:4px;
    justify-content:center;
    min-width:0;
    padding:7px 2px 5px;
    position:relative;
    text-align:center;
    text-decoration:none;
    transition:background-color .18s ease, color .18s ease, transform .18s ease;
  }

  .mobile-bottom-nav__item:hover,
  .mobile-bottom-nav__item:focus-visible{
    background:rgba(255,255,255,0.08);
    color:#fff;
  }

  .mobile-bottom-nav__item:active{
    transform:translateY(1px);
  }

  .mobile-bottom-nav__item.is-current{
    color:#ffcc00;
  }

  .mobile-bottom-nav__item.is-current::before{
    background:#ff3399;
    border-radius:0 0 999px 999px;
    content:"";
    height:3px;
    left:22%;
    position:absolute;
    right:22%;
    top:-4px;
  }

  .mobile-bottom-nav__icon{
    font-size:23px;
    line-height:1;
  }

  .mobile-bottom-nav__label{
    font-size:10px;
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.15;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:100%;
  }

  #backToTopBtn{
    bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 360px){
  .mobile-bottom-nav__label{font-size:9px}
}

/* Tablet actions adjustments */
@media (min-width: 768px) and (max-width: 991px){
  .header-actions{gap:6px}
  .action-btn{
    padding:6px 10px;
    font-size:13px;
  }
  .action-icon{font-size:15px}
  .search-box{display:none !important}
}

@media (max-width: 433px){
  .mypage-desktop-btn{
    display:none !important;
  }
  .navbar-toggler{
    margin-left:8px !important;
  }
}


@media (max-width: 767px){
  .footer-mid .col-6.col-md-3{flex:0 0 50%;max-width:50%}
  .footer-top .container{justify-content:center}
  .footer-social{justify-content:center}
  .footer-brand{justify-content:center}
}

@media (max-width: 575px){
  .site-header{padding:18px 0}
  .header-inner{padding:0 14px;gap:14px}
  .header-actions{gap:10px}
  .action-btn{padding:8px 12px}

  .footer-top{padding:18px 0}
  .footer-top .container{flex-direction:column;align-items:center;gap:12px;padding:0 12px}
  .footer-brand{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center}
  .footer-brand .ms-3{margin-left:10px!important}
  .footer-social{width:100%;justify-content:center;gap:12px}

  .footer-mid{padding:28px 12px}
  .footer-mid .row{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px}
  .footer-mid .col-6.col-md-3{flex:0 0 46%;max-width:46%;text-align:center}
  .footer-mid h6{font-size:16px;line-height:1.4}
  .footer-mid a{display:block;padding:8px 0;font-size:15px;line-height:1.6}

  .footer-bottom{padding:14px 0}
  .footer-bottom small{display:block;text-align:center}

  .footer-social .social-link{width:48px;height:48px;border-radius:10px;font-size:18px}

  @media (max-width: 420px){
    .footer-mid .col-6.col-md-3{flex:0 0 100%;max-width:100%}
  }
}

body{padding-top:96px;transition:padding-top .18s ease}

@media (max-width: 575px){
  .header-logo{height:44px}
  .action-btn{padding:6px 10px;font-size:14px}
  .footer-mid .form-control{font-size:14px}
}

@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}