/* Responsive shell for XiaoHuli H5.
   Mobile keeps full-screen app behavior; desktop gets a centered app viewport. */
:root {
  --fox-app-max-width: 430px;
  --fox-app-min-height: 100vh;
  --fox-desktop-bg: #0d1117;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body,
#app {
  min-height: 100vh;
}

* {
  box-sizing: border-box;
}

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

uni-page-body,
uni-page-wrapper,
uni-page,
uni-app,
#app {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  body {
    background: #000;
  }
}

@media (min-width: 768px) {
  html {
    background:
      radial-gradient(circle at 20% 0%, rgba(68, 120, 255, 0.18), transparent 34rem),
      radial-gradient(circle at 80% 10%, rgba(225, 65, 142, 0.14), transparent 30rem),
      var(--fox-desktop-bg);
  }

  body {
    min-height: 100vh;
    margin: 0;
    background: transparent;
  }

  body::before {
    content: "\0041\0049\6570\5B57\5206\8EAB";
    position: fixed;
    left: max(32px, calc((100vw - var(--fox-app-max-width)) / 2 - 320px));
    top: 42px;
    z-index: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  body::after {
    content: "\684C\9762\7AEF\9884\89C8\6A21\5F0F  ·  \79FB\52A8\7AEF\4FDD\6301 H5 \4F53\9A8C";
    position: fixed;
    left: max(32px, calc((100vw - var(--fox-app-max-width)) / 2 - 320px));
    top: 86px;
    z-index: 0;
    width: 260px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 14px;
    line-height: 1.7;
  }

  #app {
    position: relative;
    z-index: 1;
    width: var(--fox-app-max-width);
    max-width: 100vw;
    min-height: var(--fox-app-min-height);
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
    overflow: hidden;
  }

  uni-page,
  uni-page-wrapper,
  uni-page-body,
  uni-content,
  uni-main {
    width: 100% !important;
    max-width: var(--fox-app-max-width) !important;
  }

  uni-page {
    left: max(0px, calc((100vw - var(--fox-app-max-width)) / 2)) !important;
    right: auto !important;
    transform: none !important;
    overflow-x: hidden;
    background: #fff;
  }

  uni-page-head,
  uni-page-head .uni-page-head,
  uni-tabbar.uni-tabbar-bottom,
  uni-tabbar.uni-tabbar-bottom .uni-tabbar,
  uni-tabbar.uni-tabbar-top,
  uni-tabbar.uni-tabbar-top .uni-tabbar {
    width: var(--fox-app-max-width) !important;
    max-width: 100vw !important;
    left: max(0px, calc((100vw - var(--fox-app-max-width)) / 2)) !important;
    right: auto !important;
    transform: none !important;
  }

  uni-actionsheet .uni-actionsheet,
  uni-modal .uni-modal,
  .uni-picker-container .uni-picker-custom {
    max-width: min(92vw, 360px);
  }
}

@media (min-width: 768px) and (max-width: 1040px) {
  body::before,
  body::after {
    display: none;
  }
}

@media (min-width: 1440px) {
  :root {
    --fox-app-max-width: 460px;
  }
}

@media (min-width: 768px) {
  uni-page {
    margin: 0 auto !important;
  }

  uni-page-body > .page-container,
  .page-container {
    width: var(--fox-app-max-width) !important;
    max-width: var(--fox-app-max-width) !important;
    min-height: 100vh;
    margin: 0 auto !important;
  }

  .tab-bar {
    width: var(--fox-app-max-width) !important;
    max-width: var(--fox-app-max-width) !important;
    left: max(0px, calc((100vw - var(--fox-app-max-width)) / 2)) !important;
    right: auto !important;
  }

  .tab-bar .tab-bar-item {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }

  .tab-bar .btn-create {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

@media (min-width: 768px) {
  uni-page-refresh {
    width: var(--fox-app-max-width) !important;
    max-width: var(--fox-app-max-width) !important;
    overflow: hidden !important;
  }
}