/* QUBRO 1.20.1: correct iPhone Telegram WebView horizontal clipping.
   Changes only regular page layout; immersive viewer and swipe tracks untouched. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;max-width:100%}
body{width:100%;max-width:100%;overflow-x:clip}
#app{width:100%;max-width:100%;min-width:0;overflow-x:clip}
.topbar{
  box-sizing:border-box;width:100%;max-width:1240px;min-width:0;
  height:auto;min-height:92px;gap:14px;padding-block:12px;
}
.topbar .brand{flex:1 1 auto;min-width:0;max-width:100%;gap:13px}
.topbar .brand-icon{
  width:70px;height:70px;min-width:70px;flex:0 0 70px;
  border:0;border-radius:0;background:transparent;box-shadow:none;
}
.topbar .brand-icon img{width:70px;height:70px;max-width:100%;object-fit:contain}
.topbar .brand-text{flex:1 1 auto;min-width:0;max-width:100%}
.topbar .brand-text strong{
  display:block;font-size:clamp(24px,3vw,30px);line-height:1.08;
  letter-spacing:.035em;overflow-wrap:normal
}
.topbar .brand-text small{
  display:block;font-size:clamp(9px,1.15vw,11px);
  letter-spacing:.035em;line-height:1.3;white-space:normal;overflow-wrap:anywhere
}
.topbar .topbar-actions{flex:0 1 auto;min-width:0;max-width:100%}
.shell,.intro,.io-dock{min-width:0;max-width:100%}
.intro{align-items:flex-start}
.intro>div{min-width:0;max-width:100%}
.intro .eyebrow{font-size:clamp(9px,2.5vw,11px);letter-spacing:.07em;min-width:0;overflow-wrap:anywhere}
.intro h1{max-width:100%;font-size:clamp(26px,6.5vw,38px);letter-spacing:-.04em;overflow-wrap:break-word;word-break:normal}
.intro p{max-width:100%;overflow-wrap:break-word}
#io-dock{box-sizing:border-box;flex-wrap:wrap;min-width:0}
#io-dock>*{max-width:100%;min-width:0}
@media(max-width:700px){
  .topbar{flex-wrap:wrap;justify-content:space-between;min-height:92px;padding:12px 14px;gap:7px}
  .topbar .brand{flex:1 1 100%;width:100%;gap:13px}
  .topbar .brand-icon{width:78px;height:78px;min-width:78px;flex-basis:78px}
  .topbar .brand-icon img{width:78px;height:78px}
  .topbar .brand-text strong{font-size:clamp(25px,6.6vw,31px);letter-spacing:.03em}
  .topbar .brand-text small{font-size:10px;letter-spacing:.025em;line-height:1.4}
  .topbar .topbar-actions{width:100%;flex:1 1 100%;justify-content:flex-end;flex-wrap:wrap;gap:8px}
  .topbar .topbar-actions>*{max-width:100%}
  .shell{padding-inline:clamp(12px,3.5vw,18px)}
  #io-dock{display:flex;gap:8px;padding:9px}
  #io-dock .io-import,#io-dock .io-export,#io-dock #cw-mobile-launch{
    flex:1 1 105px;min-width:0;padding:9px 8px;font-size:clamp(12px,3.3vw,15px);
  }
  #io-dock .io-format-label{flex:1 1 112px;min-width:0}
  .intro{margin-top:8px}
  .intro h1{font-size:clamp(26px,7vw,33px);line-height:1.17}
  .intro p{font-size:clamp(12px,3.4vw,14px);line-height:1.5}
}
@media(max-width:370px){
  .topbar .brand-icon{width:68px;height:68px;min-width:68px;flex-basis:68px}
  .topbar .brand-icon img{width:68px;height:68px}
  .topbar .brand-text strong{font-size:25px}
  .topbar .brand-text small{font-size:9px}
}