/* IWBP-MOBILE-APP-SHELL-V1 */

.iwbp-mobile-appbar,
.iwbp-mobile-drawer-backdrop,
.iwbp-mobile-drawer,
.iwbp-mobile-bottom-nav{
  display:none;
}


@media(max-width:760px){

  :root{
    --iwbp-mobile-top-h:58px;
    --iwbp-mobile-bottom-h:66px;
    --iwbp-mobile-shell-bg:#0b0f14;
    --iwbp-mobile-shell-panel:#0e1319;
    --iwbp-mobile-shell-border:rgba(255,255,255,.070);
    --iwbp-mobile-shell-divider:rgba(255,255,255,.050);
    --iwbp-mobile-shell-text:#edf2f6;
    --iwbp-mobile-shell-muted:#74808b;
  }


  html{
    scroll-padding-top:
      calc(
        var(--iwbp-mobile-top-h) +
        env(safe-area-inset-top) +
        12px
      );
  }


  body{
    padding-top:
      calc(
        var(--iwbp-mobile-top-h) +
        env(safe-area-inset-top)
      )!important;

    padding-bottom:
      calc(
        var(--iwbp-mobile-bottom-h) +
        env(safe-area-inset-bottom)
      )!important;
  }


  body.iwbp-mobile-drawer-open{
    overflow:hidden!important;
  }


  /*
   * Desktop shell remains untouched.
   * On mobile we replace it with the app shell.
   */
  body > .topbar,
  body > .tabs{
    display:none!important;
  }


  /* =======================================================
     APP BAR
     ======================================================= */

  .iwbp-mobile-appbar{
    position:fixed;
    z-index:1600;

    top:0;
    left:0;
    right:0;

    height:
      calc(
        var(--iwbp-mobile-top-h) +
        env(safe-area-inset-top)
      );

    padding:
      env(safe-area-inset-top)
      10px
      0;

    display:grid;

    grid-template-columns:
      46px minmax(0,1fr) 46px;

    align-items:center;

    border-bottom:
      1px solid var(--iwbp-mobile-shell-border);

    background:
      rgba(11,15,20,.94);

    backdrop-filter:
      blur(18px)
      saturate(135%);

    -webkit-backdrop-filter:
      blur(18px)
      saturate(135%);

    box-shadow:
      0 8px 28px rgba(0,0,0,.16);
  }


  .iwbp-mobile-brand{
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    text-decoration:none;

    -webkit-tap-highlight-color:
      transparent;
  }


  .iwbp-mobile-brand img{
    display:block;

    width:27px;
    height:27px;

    object-fit:contain;

    opacity:.95;
  }


  .iwbp-mobile-appbar-center{
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    padding:0 8px;
  }


  .iwbp-mobile-appbar-project{
    display:flex;
    align-items:center;

    gap:6px;

    color:#697681;

    font-size:8px;
    font-weight:650;

    letter-spacing:.13em;

    line-height:1;

    text-transform:uppercase;
  }


  .iwbp-mobile-status-dot{
    width:5px;
    height:5px;

    flex:0 0 5px;

    border-radius:50%;

    background:#59636d;

    transition:
      background .18s ease,
      box-shadow .18s ease;
  }


  .iwbp-mobile-status-dot.online{
    background:#00d977;

    box-shadow:
      0 0 7px rgba(0,217,119,.38);
  }


  .iwbp-mobile-status-dot.offline{
    background:#d95162;

    box-shadow:
      0 0 7px rgba(217,81,98,.30);
  }


  .iwbp-mobile-appbar-title{
    width:100%;

    margin-top:4px;

    overflow:hidden;

    color:
      var(--iwbp-mobile-shell-text);

    font-size:13px;
    font-weight:650;

    line-height:1.15;

    letter-spacing:-.015em;

    text-overflow:ellipsis;
    white-space:nowrap;
  }


  .iwbp-mobile-menu-btn{
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    justify-self:end;

    border:0;
    border-radius:10px;

    background:transparent;

    color:#a5afb8;

    cursor:pointer;

    -webkit-tap-highlight-color:
      transparent;

    transition:
      background .15s ease,
      color .15s ease;
  }


  .iwbp-mobile-menu-btn:active{
    background:
      rgba(255,255,255,.045);

    color:#fff;
  }


  .iwbp-mobile-menu-btn svg{
    width:22px;
    height:22px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;
  }


  /* =======================================================
     DRAWER BACKDROP
     ======================================================= */

  .iwbp-mobile-drawer-backdrop{
    position:fixed;
    z-index:1690;

    inset:0;

    display:block;

    background:
      rgba(0,0,0,.58);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    backdrop-filter:
      blur(2px);

    -webkit-backdrop-filter:
      blur(2px);

    transition:
      opacity .20s ease,
      visibility 0s linear .20s;
  }


  body.iwbp-mobile-drawer-open
  .iwbp-mobile-drawer-backdrop{
    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transition:
      opacity .20s ease,
      visibility 0s;
  }


  /* =======================================================
     DRAWER
     ======================================================= */

  .iwbp-mobile-drawer{
    position:fixed;
    z-index:1700;

    top:0;
    bottom:0;
    right:0;

    width:
      min(
        88vw,
        360px
      );

    display:flex;

    flex-direction:column;

    border-left:
      1px solid var(--iwbp-mobile-shell-border);

    background:
      var(--iwbp-mobile-shell-panel);

    box-shadow:
      -20px 0 50px rgba(0,0,0,.30);

    transform:
      translateX(104%);

    transition:
      transform .22s cubic-bezier(.22,.75,.24,1);

    overflow:hidden;
  }


  body.iwbp-mobile-drawer-open
  .iwbp-mobile-drawer{
    transform:
      translateX(0);
  }


  .iwbp-mobile-drawer-head{
    min-height:
      calc(
        68px +
        env(safe-area-inset-top)
      );

    padding:
      calc(
        12px +
        env(safe-area-inset-top)
      )
      14px
      10px;

    display:flex;
    align-items:center;

    gap:11px;

    border-bottom:
      1px solid var(--iwbp-mobile-shell-divider);
  }


  .iwbp-mobile-drawer-logo{
    width:36px;
    height:36px;

    flex:0 0 36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
      1px solid rgba(255,255,255,.065);

    border-radius:9px;

    background:
      rgba(255,255,255,.018);
  }


  .iwbp-mobile-drawer-logo img{
    width:23px;
    height:23px;

    object-fit:contain;
  }


  .iwbp-mobile-drawer-brand{
    min-width:0;

    flex:1;
  }


  .iwbp-mobile-drawer-brand strong{
    display:block;

    color:#edf2f6;

    font-size:13px;
    font-weight:650;

    letter-spacing:-.01em;
  }


  .iwbp-mobile-drawer-brand span{
    display:block;

    margin-top:3px;

    color:#65717c;

    font-size:8px;
    font-weight:650;

    letter-spacing:.12em;

    text-transform:uppercase;
  }


  .iwbp-mobile-drawer-close{
    width:44px;
    height:44px;

    flex:0 0 44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:10px;

    background:transparent;

    color:#87939d;

    cursor:pointer;
  }


  .iwbp-mobile-drawer-close:active{
    background:
      rgba(255,255,255,.04);

    color:#fff;
  }


  .iwbp-mobile-drawer-close svg{
    width:20px;
    height:20px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;
  }


  .iwbp-mobile-drawer-scroll{
    flex:1;

    min-height:0;

    overflow-y:auto;

    overscroll-behavior:contain;

    -webkit-overflow-scrolling:touch;

    padding:
      14px
      12px
      18px;
  }


  .iwbp-mobile-drawer-label{
    padding:
      4px
      8px
      9px;

    color:#596570;

    font-size:8px;
    font-weight:700;

    letter-spacing:.13em;

    text-transform:uppercase;
  }


  .iwbp-mobile-drawer-nav{
    display:grid;

    gap:3px;
  }


  .iwbp-mobile-drawer-item{
    width:100%;

    min-height:48px;

    padding:
      0 11px;

    display:grid;

    grid-template-columns:
      32px minmax(0,1fr) 18px;

    align-items:center;

    gap:8px;

    border:
      1px solid transparent;

    border-radius:9px;

    background:transparent;

    color:#909ba5;

    font-family:
      'Inter',
      system-ui,
      sans-serif;

    font-size:12px;
    font-weight:550;

    text-align:left;

    text-decoration:none;

    cursor:pointer;

    -webkit-tap-highlight-color:
      transparent;

    transition:
      background .14s ease,
      border-color .14s ease,
      color .14s ease;
  }


  .iwbp-mobile-drawer-item:active{
    background:
      rgba(255,255,255,.025);
  }


  .iwbp-mobile-drawer-item.active{
    border-color:
      rgba(255,255,255,.065);

    background:
      rgba(255,255,255,.025);

    color:#edf2f6;
  }


  .iwbp-mobile-drawer-item-icon{
    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:7px;

    background:
      rgba(255,255,255,.018);

    color:#697681;
  }


  .iwbp-mobile-drawer-item.active
  .iwbp-mobile-drawer-item-icon{
    color:#b8c3cc;

    background:
      rgba(255,255,255,.035);
  }


  .iwbp-mobile-drawer-item-icon svg{
    width:16px;
    height:16px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.65;

    stroke-linecap:round;
    stroke-linejoin:round;
  }


  .iwbp-mobile-drawer-item-arrow{
    color:#4d5862;

    font-size:16px;

    text-align:center;
  }


  .iwbp-mobile-drawer-divider{
    height:1px;

    margin:
      15px 8px;

    background:
      var(--iwbp-mobile-shell-divider);
  }


  .iwbp-mobile-drawer-actions{
    display:grid;

    gap:7px;
  }


  .iwbp-mobile-drawer-action{
    min-height:48px;

    padding:
      0 13px;

    display:flex;
    align-items:center;

    gap:10px;

    border:
      1px solid rgba(255,255,255,.065);

    border-radius:9px;

    background:
      rgba(255,255,255,.018);

    color:#aab5be;

    font-family:
      'Inter',
      system-ui,
      sans-serif;

    font-size:11px;
    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    -webkit-tap-highlight-color:
      transparent;
  }


  .iwbp-mobile-drawer-action.primary{
    border-color:
      rgba(0,229,255,.12);

    background:
      rgba(0,229,255,.025);

    color:#dcebee;
  }


  .iwbp-mobile-drawer-action svg{
    width:17px;
    height:17px;

    flex:0 0 17px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.65;

    stroke-linecap:round;
    stroke-linejoin:round;
  }


  .iwbp-mobile-drawer-socials{
    display:grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:7px;
  }


  .iwbp-mobile-drawer-foot{
    padding:
      12px
      18px
      calc(
        12px +
        env(safe-area-inset-bottom)
      );

    border-top:
      1px solid var(--iwbp-mobile-shell-divider);

    color:#46515b;

    font-size:8px;
    font-weight:600;

    letter-spacing:.09em;

    text-align:center;

    text-transform:uppercase;
  }


  /* =======================================================
     BOTTOM NAVIGATION
     ======================================================= */

  .iwbp-mobile-bottom-nav{
    position:fixed;
    z-index:1580;

    left:0;
    right:0;
    bottom:0;

    height:
      calc(
        var(--iwbp-mobile-bottom-h) +
        env(safe-area-inset-bottom)
      );

    padding:
      5px
      5px
      calc(
        5px +
        env(safe-area-inset-bottom)
      );

    display:grid;

    grid-template-columns:
      repeat(5,minmax(0,1fr));

    align-items:stretch;

    border-top:
      1px solid var(--iwbp-mobile-shell-border);

    background:
      rgba(11,15,20,.95);

    backdrop-filter:
      blur(18px)
      saturate(135%);

    -webkit-backdrop-filter:
      blur(18px)
      saturate(135%);

    box-shadow:
      0 -10px 30px rgba(0,0,0,.15);

    transition:
      transform .18s ease,
      opacity .18s ease;
  }


  body.iwbp-mobile-keyboard
  .iwbp-mobile-bottom-nav{
    transform:
      translateY(105%);

    opacity:0;

    pointer-events:none;
  }


  .iwbp-mobile-bottom-item{
    min-width:0;
    min-height:52px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:4px;

    border:0;
    border-radius:9px;

    background:transparent;

    color:#5f6c77;

    font-family:
      'Inter',
      system-ui,
      sans-serif;

    font-size:8px;
    font-weight:650;

    letter-spacing:.015em;

    text-decoration:none;

    cursor:pointer;

    -webkit-tap-highlight-color:
      transparent;

    transition:
      color .14s ease,
      background .14s ease;
  }


  .iwbp-mobile-bottom-item:active{
    background:
      rgba(255,255,255,.025);
  }


  .iwbp-mobile-bottom-item.active{
    color:#edf2f6;
  }


  .iwbp-mobile-bottom-item svg{
    width:20px;
    height:20px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.65;

    stroke-linecap:round;
    stroke-linejoin:round;
  }


  .iwbp-mobile-bottom-item.active svg{
    stroke-width:1.9;
  }


  /* =======================================================
     APP-LIKE GLOBAL MOBILE RHYTHM
     ======================================================= */

  .page{
    min-width:0;
  }


  button,
  a{
    touch-action:manipulation;
  }


  input,
  textarea,
  select{
    scroll-margin-top:
      calc(
        var(--iwbp-mobile-top-h) +
        env(safe-area-inset-top) +
        14px
      );
  }


  @media(prefers-reduced-motion:reduce){

    .iwbp-mobile-drawer,
    .iwbp-mobile-drawer-backdrop,
    .iwbp-mobile-bottom-nav{
      transition:none!important;
    }
  }
}