:root{
  --bg:#050505;
  --surface:#0a0a0a;
  --card:#111111;
  --card2:#0d0d0d;
  --border:#1c1c1e;

  --accent:#ff3b30;
  --accent2:#d70015;
  --grad:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);

  --text:#f2f2f7;
  --muted:#8e8e93;

  --ok:#30d158;
  --warn:#ff9f0a;
  --danger:#ff453a;
  --info:#0a84ff;

  --shadow1:0 10px 30px rgba(0,0,0,.38);
  --shadow2:0 20px 80px rgba(0,0,0,.55);
  --ring:0 0 0 2px rgba(255,59,48,.22);

  --r-sm:12px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:24px;

  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --space-5:24px;
  --space-6:32px;

  --fs-1:11px;
  --fs-2:12px;
  --fs-3:14px;
  --fs-4:15px;
  --fs-5:16px;
  --fs-6:18px;
  --fs-7:22px;

  --lh-tight:1.15;
  --lh-base:1.35;

  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);

  --topbar-h:56px;
  --tabs-h:60px;

  --container-max:980px;

  color-scheme:dark;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  padding:var(--sat) var(--sar) var(--sab) var(--sal);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,59,48,.28)}

main,header,nav,section,footer{display:block}

.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:var(--topbar-h);
  padding:12px 16px;
  background:rgba(10,10,10,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;
}
.logo span{font-size:15px}
.logo svg{filter:drop-shadow(0 0 14px rgba(255,59,48,.25))}

.user-mini{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:120px;
  max-width:48%;
}
.user-mini > div{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:220px;
}
.avatar-small{
  width:30px;
  height:30px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}

.tabs{
  position:sticky;
  top:var(--topbar-h);
  z-index:49;
  display:flex;
  gap:2px;
  overflow-x:auto;
  background:rgba(15,17,22,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  scrollbar-width:none;
  min-height:var(--tabs-h);
}
.tabs::-webkit-scrollbar{display:none}
.tabs::before,.tabs::after{
  content:"";
  position:sticky;
  top:0;
  width:14px;
  flex:0 0 14px;
  pointer-events:none;
}
.tabs::before{left:0;background:linear-gradient(90deg,rgba(15,17,22,1) 0%,rgba(15,17,22,0) 100%)}
.tabs::after{right:0;background:linear-gradient(270deg,rgba(15,17,22,1) 0%,rgba(15,17,22,0) 100%)}

.tab{
  flex:1 0 86px;
  min-width:86px;
  height:var(--tabs-h);
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 0;
  transition:transform .12s ease,color .12s ease,background .12s ease;
}
.tab .ico{line-height:0}
.tab span:last-child{
  font-size:var(--fs-1);
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.tab:active{transform:scale(.98)}
.tab.active{
  color:var(--accent);
  position:relative;
}
.tab.active .ico svg{filter:drop-shadow(0 0 10px rgba(255,59,48,.55))}
.tab.active::after{
  content:"";
  position:absolute;
  bottom:0;
  width:40%;
  height:2px;
  background:var(--accent);
  border-radius:999px;
}

main{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
}

.page{
  display:none;
  padding:16px 16px 44px;
  padding-bottom:calc(44px + var(--sab));
  animation:pageIn .35s ease;
}
.page.active{display:block}
@keyframes pageIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.02) 100%),var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px;
  margin-bottom:14px;
  box-shadow:var(--shadow1);
  overflow:hidden;
}
.card:focus-within{border-color:rgba(255,59,48,.35);box-shadow:var(--shadow1),var(--ring)}
.card h2,.card h3{
  margin:0 0 10px 0;
  line-height:var(--lh-tight);
  letter-spacing:.2px;
}
.card h2{font-size:18px}
.card h3{font-size:16px}
.card p{
  margin:0 0 12px 0;
  color:rgba(242,242,247,.82);
  line-height:var(--lh-base);
  font-size:var(--fs-3);
}

.row-sb{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.row-sb > *{min-width:0}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
  text-transform:uppercase;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.06);
  color:rgba(242,242,247,.92);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.badge.accent{
  background:rgba(255,59,48,.14);
  border-color:rgba(255,59,48,.18);
  color:var(--accent);
}

.stat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.stat-item{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-md);
  padding:12px;
  text-align:center;
  overflow:hidden;
}
.stat-val{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:16px;
  font-weight:900;
  color:#fff;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.stat-label{
  margin-top:4px;
  font-size:var(--fs-1);
  color:rgba(142,142,147,.92);
  letter-spacing:.4px;
  text-transform:uppercase;
  font-weight:800;
}

.profile-hero{
  text-align:center;
  padding:22px;
}
.profile-hero h2{
  font-size:20px;
  margin:0 0 10px 0;
}
.avatar-big{
  width:96px;
  height:96px;
  border-radius:999px;
  object-fit:cover;
  border:2px solid rgba(255,59,48,.85);
  margin:0 auto 14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 28px rgba(255,59,48,.18);
}
.pulse{
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,59,48,.00))}
  50%{transform:scale(1.02);filter:drop-shadow(0 0 18px rgba(255,59,48,.20))}
  100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,59,48,.00))}
}

.input,textarea,select{
  width:100%;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  padding:14px;
  border-radius:var(--r-md);
  outline:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:var(--fs-4);
  line-height:1.25;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
textarea{resize:vertical;min-height:120px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.45) 50%),linear-gradient(135deg,rgba(255,255,255,.45) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 13px) calc(50% - 3px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.input:focus,textarea:focus,select:focus{
  border-color:rgba(255,59,48,.55);
  box-shadow:var(--ring),inset 0 1px 0 rgba(255,255,255,.04);
}
textarea::placeholder,.input::placeholder{color:rgba(142,142,147,.85)}

.btn{
  width:100%;
  border:none;
  border-radius:var(--r-md);
  padding:14px;
  color:#fff;
  background:var(--grad);
  font-weight:900;
  letter-spacing:.3px;
  box-shadow:0 10px 26px rgba(215,0,21,.22);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
.btn:active{transform:scale(.985)}
.btn:hover{filter:saturate(1.05) brightness(1.02)}
.btn:focus-visible{outline:none;box-shadow:0 10px 26px rgba(215,0,21,.22),var(--ring)}
.btn-sm{
  padding:10px 12px;
  min-height:40px;
  font-size:12px;
  border-radius:12px;
}
.btn-sec{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  box-shadow:none;
}
.btn-sec:hover{background:rgba(255,255,255,.08)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

#app-loader{
  position:fixed;
  inset:0;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(255,59,48,.18),transparent 55%),var(--bg);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .6s ease;
}
.loader-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:24px;
}
.loader-logo{
  width:120px;
  height:120px;
  margin-bottom:26px;
  filter:drop-shadow(0 0 24px rgba(255,59,48,.30));
  animation:loaderPulse 2.1s infinite ease-in-out;
}
@keyframes loaderPulse{
  0%{transform:scale(1);opacity:.82}
  50%{transform:scale(1.06);opacity:1;filter:drop-shadow(0 0 46px rgba(255,59,48,.55))}
  100%{transform:scale(1);opacity:.82}
}
.loader-bar{
  width:min(240px,70vw);
  height:4px;
  background:rgba(255,255,255,.10);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:14px;
}
.bar-fill{
  width:100%;
  height:100%;
  background:var(--accent);
  transform-origin:left;
  animation:loadBar 1.9s infinite linear;
}
@keyframes loadBar{
  0%{transform:translateX(-100%)}
  50%{transform:translateX(0)}
  100%{transform:translateX(100%)}
}
.loader-text{
  font-size:11px;
  letter-spacing:3px;
  color:rgba(142,142,147,.95);
  font-weight:900;
  text-transform:uppercase;
  text-align:center;
}

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.modal-overlay.open{display:flex;animation:modalIn .22s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.modal-card{
  width:min(420px,100%);
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.02) 100%),var(--card);
  border:1px solid rgba(255,59,48,.45);
  border-radius:22px;
  padding:22px;
  text-align:center;
  box-shadow:var(--shadow2);
}
.modal-card h3{margin:10px 0 8px 0;font-size:16px}
.modal-card p{margin:0;color:rgba(242,242,247,.86);font-size:13px;line-height:1.35}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:10px;
}
.ico-warn svg{filter:drop-shadow(0 0 18px rgba(255,59,48,.35))}

.rune-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:18px 0 0;
}
.rune-btn{
  height:58px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.rune-btn:hover{background:rgba(255,255,255,.08)}
.rune-btn:active{transform:scale(.985);background:rgba(255,59,48,.24);border-color:rgba(255,59,48,.35)}

#toast-container{
  position:fixed;
  left:0;
  right:0;
  bottom:calc(14px + var(--sab));
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:0 14px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  width:min(560px,100%);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(26,29,36,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 50px rgba(0,0,0,.65);
  color:#fff;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:800;
  animation:toastIn .22s ease;
}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.toast span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.toast.ok{border-color:rgba(48,209,88,.22)}
.toast.danger{border-color:rgba(255,69,58,.22)}

.footer{
  max-width:var(--container-max);
  margin:0 auto;
  text-align:center;
  font-size:11px;
  color:rgba(142,142,147,.9);
  padding:18px 16px;
  padding-bottom:calc(18px + var(--sab));
  opacity:.6;
}

@media (max-width: 420px){
  :root{--topbar-h:54px;--tabs-h:58px}
  .page{padding:14px 14px 44px;padding-bottom:calc(44px + var(--sab))}
  .card{padding:16px;border-radius:18px}
  .profile-hero{padding:18px}
  .avatar-big{width:92px;height:92px}
  .tab{min-width:82px}
  .user-mini{min-width:104px}
}

@media (max-width: 360px){
  .logo span{display:none}
  .tab{min-width:76px}
  .btn{min-height:44px}
  .rune-btn{height:54px}
}

@media (min-width: 768px){
  :root{--topbar-h:62px;--tabs-h:64px}
  body{background:radial-gradient(1200px 700px at 50% -10%,rgba(255,59,48,.14),transparent 58%),var(--bg)}
  .topbar{
    padding:14px 18px;
    border-bottom-color:rgba(255,255,255,.06);
  }
  .tabs{
    border-bottom-color:rgba(255,255,255,.06);
  }
  .page{padding:22px 18px 54px;padding-bottom:calc(54px + var(--sab))}
  .card{padding:20px}
  .profile-hero{padding:26px}
  .avatar-big{width:104px;height:104px}
  .stat-grid{gap:12px}
}

@media (min-width: 1024px){
  main{padding-bottom:10px}
  .page{
    padding:26px 18px 60px;
    padding-bottom:calc(60px + var(--sab));
  }
  .tabs{
    overflow-x:visible;
    justify-content:center;
    gap:0;
  }
  .tab{
    flex:0 0 120px;
    min-width:120px;
    border-left:1px solid rgba(255,255,255,.06);
  }
  .tab:first-of-type{border-left:none}
  .card{margin-bottom:16px}
  #toast-container{bottom:calc(18px + var(--sab))}
}

@media (hover: hover) and (pointer: fine){
  .card{transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
  .card:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.10);box-shadow:0 12px 36px rgba(0,0,0,.42)}
  .tab:hover{background:rgba(255,255,255,.04)}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

@supports (padding: max(0px)){
  body{padding:var(--sat) var(--sar) var(--sab) var(--sal)}
}