:root{--web-safe-top:0px}
html{background:#eef3fa}
body{min-height:100dvh;height:100dvh}
header{min-height:54px;padding:9px 14px;gap:11px;border-bottom:1px solid rgba(255,255,255,.13)}
header .logo{box-shadow:0 6px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35)}
#nav{min-width:0;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;white-space:nowrap;padding:2px 0}
#nav::-webkit-scrollbar{display:none}
#nav button{min-height:34px;border-radius:10px;padding:6px 13px;font-weight:800;letter-spacing:.05px}
#frame{min-height:0;background:linear-gradient(180deg,#f7faff,#eef3fa)}
.web-mobile-bar,.web-more-drawer{display:none}
.web-status-dot{width:8px;height:8px;border-radius:50%;background:#2bc77f;box-shadow:0 0 0 4px rgba(43,199,127,.13);display:inline-block;margin-right:6px}
@media(max-width:980px){
  header{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'logo nav actions' 'meta meta meta';padding:7px 9px;gap:6px 8px}
  header>img.logo{grid-area:logo}header>nav{grid-area:nav;margin-left:0}header>.sp{display:none}header>.meta{grid-area:meta;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;opacity:.8}
  .history-nav{display:none!important}#aboutBtn{grid-area:actions;margin-left:0;padding:7px 10px}
}
@media(max-width:760px){
  body{padding-bottom:64px}
  header{position:sticky;top:0;z-index:40;grid-template-columns:auto 1fr auto;min-height:50px}
  header b{font-size:12px}header>.meta{display:none}#aboutBtn{font-size:0;width:36px;height:36px;padding:0}#aboutBtn:after{content:'i';font-size:14px;font-weight:900}
  #nav{gap:3px}#nav button{font-size:10.5px;padding:6px 9px;min-height:32px}
  #frame{height:calc(100dvh - 114px)}
  .web-mobile-bar{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;height:64px;background:rgba(7,21,47,.98);border-top:1px solid rgba(255,255,255,.12);z-index:100;box-shadow:0 -10px 28px rgba(7,21,47,.22);padding:6px max(5px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))}
  .web-mobile-bar button{border:0;background:transparent;color:#dce7ff;font:800 9px/1.15 Calibri,'Segoe UI',sans-serif;border-radius:11px;padding:4px 2px;display:grid;place-items:center;gap:2px}.web-mobile-bar button span{font-size:17px}.web-mobile-bar button:active{background:rgba(82,121,255,.23);transform:scale(.97)}
  .web-more-drawer{display:block;position:fixed;z-index:110;left:10px;right:10px;bottom:72px;max-height:68dvh;overflow:auto;background:linear-gradient(180deg,#fff,#f5f8fd);border:1px solid #dce5f1;border-radius:20px;padding:13px;box-shadow:0 24px 70px rgba(8,21,47,.35);transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s ease}
  .web-more-drawer.show{transform:translateY(0);opacity:1;pointer-events:auto}.web-more-drawer h3{font:900 13px Calibri,'Segoe UI',sans-serif;color:#182746;margin:2px 4px 10px}.web-more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .web-more-grid button{min-height:48px;border:1px solid #dbe3ef;border-radius:13px;background:#fff;color:#24334f;font:850 11px Calibri,'Segoe UI',sans-serif;text-align:left;padding:8px 10px;box-shadow:0 4px 12px rgba(24,42,83,.06)}
  .web-more-grid button:nth-child(4n+1){border-left:4px solid #2f6bff}.web-more-grid button:nth-child(4n+2){border-left:4px solid #7a4dff}.web-more-grid button:nth-child(4n+3){border-left:4px solid #14b8a6}.web-more-grid button:nth-child(4n+4){border-left:4px solid #f6a62c}
  .auth-card{width:min(94vw,440px)!important}.profile-card{width:min(94vw,470px)!important}
}
@media(max-width:430px){#nav button:nth-child(n+4){display:none}.web-more-grid{grid-template-columns:1fr 1fr}}