:root{
  --ink:#0f1f3b;
  --text:#334155;
  --muted:#64748b;
  --line:#e6ecf6;
  --bg:#ffffff;
  --tint:#f8fbff;
  --card:#ffffff;
  --brand:#1f4fb8;
  --brand-600:#2a63d1;
  --shadow-sm:0 6px 14px rgba(2,6,23,.04);
  --shadow-md:0 10px 22px rgba(2,6,23,.05);
  --shadow-lg:0 12px 28px rgba(0,0,0,.06);
  --shadow-xl:0 16px 36px rgba(2,6,23,.08);
  --radius-sm:10px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-xl:16px;
  --radius-2xl:18px;
  --container-max:1120px;
  --container-w:92vw;
  --wrap-max:1100px;
  --wrap-w:94vw;
  --header-bg:rgba(255,255,255,.95);
  --header-line:#e8eef8;
}

*{
  box-sizing:border-box;
  min-width:0;
}

html,
body{
  height:100%;
}

html,
body{
  touch-action:manipulation;
}

html{
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% -220px,#e8f0ff 0%,transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(31,79,184,.08) 1px, transparent 1.2px) 0 0/22px 22px,
    var(--tint);
  overflow-x:hidden;
}

img,
svg,
canvas,
video{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
}

button,
input,
select,
textarea{
  font:inherit;
}

p,
h1,
h2,
h3,
h4,
li{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.container{
  max-width:min(var(--container-max),var(--container-w));
  margin:0 auto;
}

.page-wrap{
  max-width:min(var(--wrap-max),var(--wrap-w));
  margin:24px auto;
  padding:clamp(12px,3vw,20px);
}

.header{
  position:static;
  z-index:1000;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid #e8eef8;
  backdrop-filter:saturate(180%) blur(8px);
}

.head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  min-width:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex:0 0 auto;
}

.logo{
  width:41px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#2f72d6;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  flex:0 0 auto;
}

.brand-title{
  color:#0b1533;
  font-weight:900;
  letter-spacing:.2px;
  font-size:clamp(18px,2.6vw,22px);
  padding:6px 12px;
  border:1px solid #e6eaf4;
  border-radius:12px;
  background:linear-gradient(#fff,rgba(255,255,255,.75));
  box-shadow:0 8px 18px rgba(2,6,23,.05);
  line-height:1.1;
}

.main-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

.main-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:.5rem .75rem;
  border-radius:12px;
  text-decoration:none;
  color:#0b1533;
  border:1px solid #e6eaf4;
  background:#fff;
  box-shadow:0 6px 14px rgba(2,6,23,.04);
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;
}

.main-nav a:hover{
  background:#eef2ff;
  color:#1f3aa7;
}

.main-nav a:active{
  transform:translateY(1px);
}

.user-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:.5rem .7rem;
  border-radius:12px;
  border:1px solid #e6eaf4;
  background:#fff;
  box-shadow:0 6px 14px rgba(2,6,23,.04);
  font-weight:900;
  color:#0b1533;
  white-space:nowrap;
  text-decoration:none;
  line-height:1;
}

.user-pill .u-ico{
  font-size:16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.user-pill .u-name{
  font-size:13px;
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.user-pill .u-rank{
  font-size:12px;
  color:#64748b;
  font-weight:800;
}

.user-pill:hover{
  background:#eef2ff;
  color:#1f3aa7;
}

.hero{
  width:100%;
  color:#eaf2ff;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 1.2px) 0 0/20px 20px,
    linear-gradient(180deg,#1f4fb8 0%, #2a63d1 100%);
  border-bottom:1px solid rgba(255,255,255,.25);
  box-shadow:0 16px 40px rgba(15,31,59,.2) inset;
  text-align:center;
  display:flex;
  align-items:center;
  min-height:190px;
  padding:20px;
}

.hero__inner{
  max-width:min(920px,92vw);
  margin:0 auto;
  width:100%;
}

.hero h1{
  margin:0 0 10px;
  font-size:clamp(26px,5vw,40px);
  font-weight:900;
  letter-spacing:.2px;
  color:#fff;
  line-height:1.1;
}

.hero p{
  margin:0 auto;
  color:#fff;
  font-size:clamp(14px,2.4vw,18px);
  font-weight:800;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  line-height:1.35;
  max-width:760px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e6eaf4;
  background:#fff;
  box-shadow:var(--shadow-md);
  text-decoration:none;
  color:#0b1533;
  font-weight:1000;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .12s ease,filter .15s ease;
}

.btn:hover{
  background:#eef2ff;
  color:#1f3aa7;
}

.btn:active{
  transform:translateY(1px);
}

.btn-primary{
  background:linear-gradient(180deg,#1f4fb8 0%, #2a63d1 100%);
  color:#fff;
  border-color:rgba(255,255,255,.25);
}

.btn-primary:hover{
  background:linear-gradient(180deg,#1f4fb8 0%, #2a63d1 100%);
  color:#fff;
  filter:brightness(1.08);
}

.section-title{
  color:var(--ink);
  font-weight:900;
  font-size:clamp(18px,3.8vw,24px);
  margin:0 0 8px;
}

.text-muted{
  color:var(--muted);
}

.hidden{
  display:none !important;
}

@media (max-width:900px){
  .page-wrap{
    max-width:100%;
  }
}

@media (max-width:640px){
  .container{
    max-width:100%;
    padding-left:0;
    padding-right:0;
  }

  .brand-title{
    display:none;
  }

  .head{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    padding:6px 14px;
    gap:8px;
    min-width:0;
  }

  .brand{
    order:1;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .logo{
    width:44px;
    height:43px;
    border-radius:14px;
  }

  .logo svg{
    width:20px;
    height:20px;
  }

  .main-nav{
    order:2;
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .main-nav::-webkit-scrollbar{
    display:none;
  }

  .main-nav a,
  .user-pill{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }

  .main-nav a{
    gap:6px;
    padding:.42rem .55rem;
    font-size:12px;
    white-space:nowrap;
    min-width:40px;
  }

  .main-nav a .nav-txt{
    display:none;
  }

  .main-nav a .nav-ico,
  .user-pill .u-ico{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    transform:translateY(-1px);
  }

  .user-pill{
    padding:.42rem .55rem;
    gap:6px;
    max-width:160px;
  }

  .user-pill .u-name{
    max-width:72px;
  }

  .user-pill .u-rank{
    display:inline;
    font-size:11px;
  }

  .hero{
    min-height:160px;
    padding:18px 16px;
  }

  .hero__inner{
    max-width:100%;
  }

  .hero p{
    font-size:16px;
  }

  .page-wrap{
    width:100%;
    max-width:100%;
    margin:18px auto 24px;
    padding-left:calc(16px + env(safe-area-inset-left));
    padding-right:calc(16px + env(safe-area-inset-right));
    padding-top:12px;
    padding-bottom:12px;
  }
}

@media (max-width:640px){
  html,
  body{
    width:100%;
    max-width:100vw;
    overflow-x:hidden;
  }

  body > *{
    max-width:100vw;
  }

  .container,
  .page-wrap,
  .main-nav{
    max-width:100%;
  }
}