/* Piaoshan V1.8.0 mobile layout — isolated to <=768px so desktop stays frozen */
@media (max-width:768px){
  :root{--m-pad:16px;--m-radius:16px}
  html,body{max-width:100%;overflow-x:hidden}
  body{padding-bottom:68px;background:#fff}
  body.mobile-nav-open{overflow:hidden}
  .content-wrap{width:calc(100% - 32px)!important;max-width:none;margin-inline:16px!important}
  .page{min-height:calc(100dvh - 122px)}

  /* Header: real mobile layout */
  .top{height:60px!important;position:sticky;top:0;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);border-bottom:1px solid #edf3fb;box-shadow:0 3px 15px rgba(18,76,140,.06)}
  .top-inner{height:60px!important;padding:0 14px!important;display:flex!important;flex-wrap:nowrap!important;gap:8px!important;max-width:none}
  .brand{min-width:0;gap:0!important}
  .top .brand img{width:132px!important;height:42px!important;object-fit:contain!important;object-position:left center}
  .brand span{display:none!important}
  .top-actions{margin-left:auto!important;gap:4px!important;display:flex;align-items:center}
  .top-actions .search-btn{display:grid!important;place-items:center;width:40px;height:40px;font-size:27px!important;padding:0;background:transparent}
  .top-actions .login-link,.top-actions .signup-btn{display:none!important}
  .mobile-menu-toggle{display:grid;width:40px;height:40px;padding:10px;background:transparent;border-radius:10px;align-content:center;gap:4px}
  .mobile-menu-toggle span{display:block;height:2px;background:#0a2554;border-radius:2px}
  .top nav{display:none!important;position:fixed!important;top:68px!important;left:12px!important;right:12px!important;width:auto!important;height:auto!important;padding:10px!important;background:#fff!important;border:1px solid #e2ecf8!important;border-radius:16px!important;box-shadow:0 18px 45px rgba(10,57,112,.16)!important;z-index:100!important;overflow:visible!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px!important}
  body.mobile-nav-open .top nav{display:grid!important}
  .top nav button{height:46px!important;padding:0 12px!important;text-align:left!important;border-radius:11px!important;background:#f6f9fe!important;font-size:14px!important;color:#17345f!important}
  .top nav button.active{background:#eaf4ff!important;color:#0869fa!important}
  .top nav button.active:after{display:none!important}

  /* shared mobile hero */
  .hero-bg{background:linear-gradient(160deg,#eff9ff 0%,#dff0ff 58%,#b9e0ff 100%)}
  .hero-shell{display:flex!important;flex-direction:column!important;min-height:0!important;padding:28px 16px 10px!important;align-items:stretch!important}
  .hero-copy{padding:0!important;text-align:left}
  .hero-copy h1,.banner-copy h1{font-size:34px!important;line-height:1.18!important;letter-spacing:-.5px!important;margin:0 0 12px!important}
  .hero-copy p,.banner-copy p{font-size:14px!important;line-height:1.75!important;margin:0 0 16px!important}
  .hero-copy p br{display:none}
  .hero-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
  .hero-actions .jumbo{font-size:15px!important;padding:12px 10px!important;border-radius:13px!important}
  .hero-visual{order:2;width:100%!important;min-height:225px!important;height:225px!important;margin:2px 0 0!important;display:flex!important;align-items:flex-end;justify-content:center}
  .hero-visual img{width:100%!important;max-width:430px!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important}
  .benefit-row{order:3;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:10px!important}
  .benefit-row>div{display:grid!important;grid-template-columns:38px 1fr!important;column-gap:8px!important;align-items:center!important;padding:11px 10px!important;background:rgba(255,255,255,.83)!important;border:1px solid rgba(215,232,249,.95)!important;border-radius:14px!important;box-shadow:0 8px 22px rgba(34,91,150,.05)!important;text-align:left}
  .benefit-row .ui-icon{width:30px!important;height:30px!important}
  .benefit-row b{font-size:13px!important}
  .benefit-row small{font-size:10px!important;grid-column:2!important;white-space:normal!important}

  /* home */
  #home .hero-shell{padding-bottom:16px!important}
  .home-cards,.quick-grid{grid-template-columns:1fr!important;gap:12px!important;margin:14px 16px 0!important;width:auto!important}
  .feature-card{padding:18px 16px!important;border-radius:16px!important}
  .feature-head{gap:11px!important;margin-bottom:14px!important}
  .feature-icon{width:46px!important;height:46px!important}
  .feature-head h2{font-size:19px!important}
  .inline-control{gap:8px!important}
  .inline-control input{height:46px!important;font-size:14px!important}
  .inline-control button{padding:0 14px!important;height:46px!important}
  .card-points{line-height:1.9;margin-top:12px!important}
  .stat-strip{grid-template-columns:repeat(2,1fr)!important;gap:0!important;margin:12px 16px!important;width:auto!important;padding:0!important;overflow:hidden}
  .stat-strip>div{padding:16px 8px!important;border-right:1px solid #e4edf8!important;border-bottom:1px solid #e4edf8!important}
  .stat-strip>div:nth-child(2n){border-right:0!important}
  .stat-strip>div:nth-last-child(-n+2){border-bottom:0!important}
  .stat-strip b{font-size:15px!important}
  .scenario{margin:12px 16px 16px!important;padding:18px 12px!important;width:auto!important}
  .scenario-grid{grid-template-columns:repeat(2,1fr)!important;gap:9px!important}
  .scenario-grid div{display:flex!important;align-items:center;gap:8px!important;justify-content:flex-start;padding:12px!important;text-align:left}
  .scenario-grid img{width:28px!important;height:28px!important}

  /* transfer */
  #transfer .perks{width:calc(100% - 32px)!important;margin:12px 16px 0!important;grid-template-columns:repeat(2,1fr)!important;padding:4px!important;border-radius:16px!important}
  #transfer .perks>div{min-height:104px!important;padding:13px 8px!important;border-right:0!important;border-bottom:1px solid #e6eef9!important}
  #transfer .perks>div:nth-last-child(-n+2){border-bottom:0!important}
  #transfer .transfer-connect-row{width:calc(100% - 32px)!important;margin:14px 16px 14px!important}
  #transfer .connect-card{display:block!important;padding:16px!important;border-radius:16px!important}
  #transfer .connect-left,#transfer .connect-right{width:100%!important;max-width:none!important;border:0!important;padding:0!important}
  #transfer .connect-left{margin-bottom:14px!important}
  #transfer .connect-code-box{margin:12px 0!important}
  #transfer .connect-tabs{margin-bottom:10px!important}
  #transfer .pair-area{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  #transfer .pair-area input,#transfer .pair-area button{height:46px!important;width:100%!important}
  #transfer .chat-shell{width:calc(100% - 32px)!important;margin:0 16px 14px!important;padding:14px!important;border-radius:16px!important}
  #transfer .chat-title{align-items:flex-start!important;gap:8px!important}
  #transfer .messages{height:235px!important;margin:10px 0 12px!important;padding:12px!important}
  #transfer .bubble{max-width:92%!important}
  #transfer .composer{grid-template-columns:44px minmax(0,1fr)!important;gap:8px!important}
  #transfer .composer button{grid-column:1/-1!important;width:100%!important;height:46px!important}

  /* quick transfer */
  #quick .quick-grid{margin-top:14px!important;margin-bottom:12px!important}
  #quick .upload-zone{min-height:170px!important}
  #quick .file-types{grid-template-columns:repeat(2,1fr)!important;gap:8px!important;margin-top:16px!important}
  #quick .file-types span{padding:14px 6px!important}
  #quick .quick-stat-strip{margin:12px 16px 16px!important}

  /* files */
  .file-hero{min-height:150px!important;height:auto!important}
  .file-hero-inner{height:auto!important;min-height:150px!important;padding:22px 0!important;display:block!important}
  .file-hero h1{font-size:32px!important;line-height:1.2!important}
  .file-hero p{font-size:14px!important}
  .file-hero img{display:none!important}
  .file-workspace{display:block!important;margin:12px 16px 16px!important;width:auto!important;border:0!important;box-shadow:none!important;overflow:visible!important}
  .file-sidebar{display:flex!important;overflow-x:auto!important;gap:8px!important;padding:0 0 10px!important;background:transparent!important;scrollbar-width:none}
  .file-sidebar::-webkit-scrollbar{display:none}
  .file-sidebar button{flex:0 0 auto!important;min-width:auto!important;height:40px!important;padding:0 13px!important;border:1px solid #e0eaf7!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important}
  .file-sidebar button img{width:17px!important;height:17px!important}
  .file-sidebar .primary{height:40px!important;padding:0 16px!important;order:-1}
  .file-sidebar hr,.file-sidebar .storage-note{display:none!important}
  .file-main{border:1px solid #e3edf8!important;border-radius:16px!important;overflow:hidden!important}
  .file-toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding:12px!important}
  .file-toolbar input{grid-column:1/-1!important;height:42px!important}
  .file-table-head{display:none!important}
  .file-table .file-row{display:grid!important;grid-template-columns:1fr auto!important;gap:6px 10px!important;padding:14px!important;border-bottom:1px solid #edf2f8!important;font-size:13px!important;align-items:center}
  .file-table .file-row>span:first-child{font-weight:700!important;color:#153562!important;overflow-wrap:anywhere}
  .file-table .file-row>span:nth-child(2){grid-column:1;color:#7a8daa!important;font-size:11px!important}
  .file-table .file-row>span:nth-child(3){display:block!important;grid-column:1;color:#98a7bb!important;font-size:10px!important}
  .file-table .file-actions{grid-column:2!important;grid-row:1/4!important;display:flex!important;flex-direction:column!important;gap:8px!important;align-items:flex-end!important}

  /* articles/content/help */
  .article-list-wrap,.article-detail-wrap,.cms-content-wrap{margin:12px 16px!important;width:auto!important}
  .article-list{grid-template-columns:1fr!important;gap:10px!important}
  .article-card{min-height:0!important;padding:17px!important}
  .article-card h3{font-size:18px!important}
  .article-detail{padding:18px 16px!important}
  .article-detail h1{font-size:26px!important;line-height:1.35!important}
  .cms-content{font-size:16px!important;line-height:1.85!important;overflow-wrap:anywhere}
  .cms-content img{max-width:100%!important;height:auto!important}
  .cms-content table{display:block!important;max-width:100%!important;overflow-x:auto!important;white-space:nowrap}
  .help-search-row{margin-top:12px!important}
  .help-search{width:100%!important;height:44px!important}
  .help-layout{display:block!important;margin:12px 16px 16px!important;width:auto!important}
  .help-layout aside{display:flex!important;overflow-x:auto!important;gap:7px!important;padding:8px!important;position:static!important;border-radius:14px!important;margin-bottom:12px!important}
  .help-layout aside b{display:none!important}
  .help-layout aside a{flex:0 0 auto!important;padding:9px 12px!important;border:1px solid #e2edf8!important;border-radius:10px!important;background:#f7fbff!important}
  .faq{padding:14px!important;border-radius:16px!important}
  .faq h2{font-size:20px!important}
  .faq details{padding:13px 0!important}

  /* footer */
  .site-footer{margin-top:0!important;padding:18px 0 12px!important}
  .footer-top{display:block!important;padding:0!important;border-bottom:1px solid #edf2f8!important}
  .footer-logo{display:grid!important;grid-template-columns:auto 1fr!important;gap:5px 10px!important;min-height:0!important;flex-basis:auto!important;margin-bottom:14px!important}
  .footer-logo img{width:126px!important;height:42px!important;grid-row:1/3!important}
  .footer-logo>span:not(.hidden){font-size:10px!important;white-space:normal!important}
  .footer-menu{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:8px 12px!important;justify-content:stretch!important;margin-bottom:14px!important;white-space:normal!important}
  .footer-menu a{padding:7px 0!important}
  .footer-friends{display:block!important;min-width:0!important;padding:10px 0 14px!important;border:0!important}
  .footer-links{margin-top:6px!important;gap:8px!important}
  .footer-bottom{display:block!important;padding:12px 0 0!important;line-height:1.9!important}
  .filings{display:block!important}

  /* auth: mobile sheet */
  .account-dialog[open]{padding:16px!important;align-items:center!important;background:rgba(7,28,61,.72)!important}
  .account-dialog .auth-dialog{width:100%!important;max-width:430px!important;height:auto!important;max-height:calc(100dvh - 32px)!important;border-radius:20px!important;overflow:auto!important;display:block!important}
  .auth-aside{display:none!important}
  .auth-form{padding:34px 20px 22px!important;background:#fff!important}
  .auth-switch{margin-top:8px!important}
  .auth-form h2{font-size:25px!important}
  .auth-form input{height:48px!important;font-size:16px!important}
  .dialog-close{right:12px!important;top:8px!important}

  /* mobile bottom nav */
  .mobile-bottom-nav{display:grid!important;grid-template-columns:repeat(5,1fr)!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;height:64px!important;padding:4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;background:rgba(255,255,255,.97)!important;border-top:1px solid #dfe9f6!important;box-shadow:0 -6px 20px rgba(13,67,127,.08)!important;z-index:80!important;backdrop-filter:blur(14px)!important}
  .mobile-bottom-nav button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;background:transparent!important;color:#667b99!important;font-size:10px!important;padding:0!important}
  .mobile-bottom-nav button span{font-size:22px!important;line-height:1!important;color:#365a86!important}
  .mobile-bottom-nav button b{font-size:10px!important;font-weight:600!important;white-space:nowrap}
  .mobile-bottom-nav button.active,.mobile-bottom-nav button.active span{color:#086af6!important}
  #toast{bottom:78px!important;max-width:calc(100% - 32px)!important;text-align:center!important}
}

@media (min-width:769px){
  .mobile-menu-toggle,.mobile-bottom-nav{display:none!important}
}

@media (max-width:768px){
  /* Transfer connection card exact mobile stacking for current DOM */
  #transfer .transfer-connect-row .transfer-connect-card{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"info" "tabs" "pair" "note"!important;
    gap:12px!important;
    padding:16px!important;
    min-height:0!important;
  }
  #transfer .transfer-connect-info{
    grid-area:info!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 72px!important;
    gap:12px!important;
    align-items:center!important;
    padding:0 0 14px!important;
    border-right:0!important;
    border-bottom:1px solid #e7eef8!important;
  }
  #transfer .transfer-connect-info p{font-size:12px!important;line-height:1.7!important}
  #transfer .connect-code-mark{width:68px!important;height:68px!important;border-radius:18px!important}
  #transfer .connect-code-mark span{font-size:29px!important}
  #transfer .transfer-connect-row .connect-tabs{grid-area:tabs!important;height:42px!important}
  #transfer .transfer-connect-row .pair-area{grid-area:pair!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  #transfer .transfer-connect-row .connect-card>small{grid-area:note!important;font-size:10px!important;line-height:1.6!important}

  /* Three-step strip becomes a compact vertical mobile guide */
  #transfer .steps{padding:8px 16px 18px!important}
  #transfer .steps h2{font-size:20px!important;margin:8px 0 12px!important;text-align:left}
  #transfer .steps>div{grid-template-columns:1fr!important;gap:8px!important}
  #transfer .steps article{padding:13px!important;border-radius:14px!important}
  #transfer .steps article>b{font-size:18px!important;padding:4px 11px!important}
  #transfer .steps article h3{font-size:14px!important;margin:0!important}
  #transfer .steps article p{font-size:11px!important;margin:2px 0 0!important}
}


/* ===== Piaoshan V1.8.1 mobile visual calibration ===== */
@media (max-width:768px){
  :root{--m-nav-h:62px}
  body{padding-bottom:calc(var(--m-nav-h) + env(safe-area-inset-bottom,0px))!important}

  /* 1. Feature cards: one mobile component across home / transfer / quick */
  .benefit-row>div{
    min-height:72px!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:2px!important;
    padding:11px 12px!important;
    align-content:center!important;
  }
  .benefit-row .ui-icon{
    grid-column:1!important;grid-row:1/3!important;
    width:34px!important;height:34px!important;
    padding:7px!important;box-sizing:border-box!important;
    border:1px solid #d4e8fb!important;border-radius:11px!important;
    background:#f3f9ff!important;
    object-fit:contain!important;
    align-self:center!important;
  }
  .benefit-row b{
    grid-column:2!important;grid-row:1!important;
    min-width:0!important;margin:0!important;
    font-size:14px!important;line-height:1.25!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    align-self:end!important;
  }
  .benefit-row small{
    grid-column:2!important;grid-row:2!important;
    min-width:0!important;margin:0!important;
    font-size:11px!important;line-height:1.25!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    color:#6f829d!important;align-self:start!important;
  }

  /* transfer detailed perks: compact two-column mobile cards */
  #transfer .perks{gap:9px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
  #transfer .perks>div{
    min-height:78px!important;
    display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;grid-template-rows:auto auto!important;
    column-gap:9px!important;row-gap:2px!important;align-content:center!important;
    padding:10px 11px!important;background:#fff!important;border:1px solid #e0ebf7!important;border-radius:14px!important;
  }
  #transfer .perks .perk-icon{grid-column:1!important;grid-row:1/3!important;width:34px!important;height:34px!important;align-self:center!important;margin:0!important}
  #transfer .perks b{grid-column:2!important;grid-row:1!important;font-size:13px!important;line-height:1.25!important;white-space:nowrap!important}
  #transfer .perks small{grid-column:2!important;grid-row:2!important;font-size:10px!important;line-height:1.25!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  /* 2. Bottom navigation: compact, real SVG icons */
  .mobile-bottom-nav{
    display:grid!important;grid-template-columns:repeat(5,1fr)!important;
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    height:calc(var(--m-nav-h) + env(safe-area-inset-bottom,0px))!important;
    padding:5px 8px env(safe-area-inset-bottom,0px)!important;
    background:rgba(255,255,255,.97)!important;backdrop-filter:blur(16px)!important;
    border-top:1px solid #e5edf7!important;box-shadow:0 -5px 20px rgba(19,62,110,.07)!important;
    z-index:120!important;
  }
  .mobile-bottom-nav button{
    border:0!important;background:transparent!important;padding:3px 1px!important;margin:0!important;
    min-width:0!important;height:52px!important;border-radius:10px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
    color:#647a98!important;font-size:10px!important;line-height:1!important;
  }
  .mobile-bottom-nav button img{display:block!important;width:21px!important;height:21px!important;color:currentColor!important;filter:none!important}
  .mobile-bottom-nav button b{font-size:10px!important;font-weight:600!important;white-space:nowrap!important;color:currentColor!important}
  .mobile-bottom-nav button.active{color:#0873ff!important;background:#f2f8ff!important}
  .mobile-bottom-nav button.active img{filter:invert(38%) sepia(98%) saturate(3292%) hue-rotate(205deg) brightness(101%) contrast(101%)!important}
  .mobile-bottom-nav button:not(.active) img{filter:brightness(0) saturate(100%) invert(43%) sepia(19%) saturate(784%) hue-rotate(177deg) brightness(94%) contrast(86%)!important}

  /* 3. Footer: much shorter on phones */
  .site-footer{padding:18px 0 14px!important;margin-top:18px!important;background:#fff!important}
  .site-footer .content-wrap{width:calc(100% - 32px)!important;margin:0 16px!important}
  .footer-top{display:block!important;padding:0!important}
  .footer-logo{display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;align-items:center!important;column-gap:10px!important;margin-bottom:14px!important}
  .footer-logo img{width:112px!important;height:36px!important;object-fit:contain!important;object-position:left center!important}
  #footerSlogan{font-size:11px!important;line-height:1.45!important;color:#566d8d!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .footer-menu{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px 10px!important;margin:0 0 12px!important}
  .footer-menu a{font-size:12px!important;padding:7px 0!important;color:#314c70!important;text-align:left!important;white-space:nowrap!important}
  .footer-friends{display:flex!important;align-items:center!important;gap:8px!important;padding:10px 0!important;border-top:1px solid #edf2f8!important;border-bottom:1px solid #edf2f8!important;font-size:11px!important;overflow:hidden!important}
  .footer-friends b{flex:0 0 auto!important;font-size:11px!important}
  .footer-links{display:flex!important;gap:8px!important;overflow-x:auto!important;white-space:nowrap!important;scrollbar-width:none!important}
  .footer-links::-webkit-scrollbar{display:none!important}
  .footer-bottom{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;padding-top:11px!important;font-size:10px!important;color:#7f90a8!important}
  .footer-bottom>span,.filings{font-size:10px!important;line-height:1.4!important}
  #footerBottomText{display:none!important}

  /* 4. File manager: true mobile hero */
  #files .file-hero{min-height:260px!important;height:260px!important;overflow:hidden!important;background:linear-gradient(155deg,#f4fbff 0%,#dff1ff 55%,#c9e8ff 100%)!important}
  #files .file-hero-inner{position:relative!important;display:block!important;min-height:260px!important;height:260px!important;padding:24px 16px 0!important;overflow:hidden!important}
  #files .file-hero-inner>div:first-child{position:relative!important;z-index:2!important;max-width:100%!important}
  #files .file-hero h1{font-size:29px!important;line-height:1.15!important;margin:0 0 9px!important;letter-spacing:-.4px!important}
  #files .file-hero p{font-size:13px!important;line-height:1.6!important;margin:0 0 8px!important;max-width:90%!important}
  #files .file-hero-inner>div:first-child>div{font-size:11px!important;line-height:1.7!important;white-space:normal!important;max-width:75%!important;color:#385c86!important}
  #files .file-hero img{
    display:block!important;content:url('mobile-files-hero.svg')!important;
    position:absolute!important;right:-24px!important;bottom:-15px!important;
    width:270px!important;height:155px!important;object-fit:contain!important;object-position:right bottom!important;
    opacity:1!important;z-index:1!important;
  }
  #files .file-workspace{margin-top:10px!important}
  #files .file-toolbar{padding:10px!important;grid-template-columns:1fr 1fr!important}
  #files .file-toolbar button{height:40px!important;font-size:13px!important;padding:0 10px!important}
  #files .file-toolbar input{height:40px!important;font-size:13px!important;border-radius:11px!important;padding:0 12px!important}
  #files .file-sidebar{padding-bottom:8px!important}
  #files .file-sidebar button{height:36px!important;padding:0 11px!important;font-size:12px!important;border-radius:10px!important}
  #files .file-sidebar .primary{height:36px!important;font-size:12px!important}
  #files .file-table .file-row{padding:12px!important;font-size:12px!important}
  #files .file-table .file-row>span:first-child{font-size:13px!important}

  /* 5. Fine tune compact phones */
  @media (max-width:390px){
    .hero-copy h1,.banner-copy h1{font-size:31px!important}
    .benefit-row>div{padding:10px!important;grid-template-columns:34px minmax(0,1fr)!important;column-gap:8px!important}
    .benefit-row .ui-icon{width:32px!important;height:32px!important;padding:6px!important}
    .benefit-row b{font-size:13px!important}
    .benefit-row small{font-size:10px!important}
    #files .file-hero h1{font-size:27px!important}
    #files .file-hero img{right:-38px!important;width:245px!important}
    .footer-menu{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  }
}


/* Piaoshan V1.8.2 mobile detail refinement */
@media (max-width:768px){
  /* Frontend never exposes the independent admin console. */
  #adminNav{display:none!important}

  /* Header search + menu focus: consistent branded icons, no orange tap outline. */
  .top-actions .search-btn img{display:block;width:22px;height:22px;object-fit:contain}
  .top-actions .search-btn,.mobile-menu-toggle{-webkit-tap-highlight-color:transparent!important;outline:none!important;border:1px solid transparent!important}
  .top-actions .search-btn:focus-visible,.mobile-menu-toggle:focus-visible{outline:2px solid #2580ff!important;outline-offset:2px!important;border-color:transparent!important}
  .mobile-menu-toggle:focus:not(:focus-visible),.top-actions .search-btn:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}

  /* Latest news gets its own mobile hero illustration instead of the file-manager artwork. */
  #articles .articles-hero{min-height:252px!important;height:252px!important;overflow:hidden!important;background:linear-gradient(155deg,#f5fbff 0%,#dff1ff 58%,#cae9ff 100%)!important}
  #articles .articles-hero .file-hero-inner{position:relative!important;min-height:252px!important;height:252px!important;padding:22px 16px 0!important;display:block!important;overflow:hidden!important}
  #articles .articles-hero .file-hero-inner>div:first-child{position:relative!important;z-index:2!important;max-width:70%!important}
  #articles .articles-hero h1{font-size:29px!important;line-height:1.16!important;margin:0 0 9px!important;letter-spacing:-.35px!important}
  #articles .articles-hero p{font-size:13px!important;line-height:1.55!important;margin:0 0 8px!important}
  #articles .articles-hero .file-hero-inner>div:first-child>div{font-size:11px!important;line-height:1.65!important;color:#375c87!important;white-space:normal!important}
  #articles .articles-hero img{display:block!important;content:url('mobile-news-hero.svg')!important;position:absolute!important;right:-10px!important;bottom:-4px!important;width:230px!important;height:160px!important;object-fit:contain!important;object-position:right bottom!important;z-index:1!important}
  #articles .article-list-wrap{margin-top:14px!important}
  #articles .article-list-head h2{font-size:24px!important;margin-bottom:4px!important}
  #articles .article-list-head p{font-size:12px!important}

  /* File manager: compact, touch-first controls. */
  #files .file-workspace{margin-top:12px!important}
  #files .file-sidebar{display:flex!important;align-items:center!important;gap:7px!important;padding:0 0 10px!important;background:transparent!important;border:0!important;overflow-x:auto!important}
  #files .file-sidebar .primary{order:-2!important;position:sticky!important;left:0!important;z-index:2!important;background:linear-gradient(135deg,#12a9ff,#0969f4)!important;color:#fff!important;border:0!important;box-shadow:6px 0 12px rgba(255,255,255,.95)!important}
  #files .file-sidebar button{min-height:38px!important;height:38px!important;padding:0 12px!important;font-size:12px!important;border:1px solid #dfeaf7!important;background:#fff!important;border-radius:11px!important;white-space:nowrap!important}
  #files .file-sidebar button.active{background:#eef6ff!important;color:#076cf6!important;border-color:#bcdcff!important}
  #files .file-main{border:1px solid #e2edf8!important;border-radius:16px!important;background:#fff!important;box-shadow:0 8px 24px rgba(22,72,125,.05)!important;padding:0!important}
  #files .file-toolbar{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;gap:8px!important;padding:12px!important;background:#fff!important;border-bottom:1px solid #edf3f9!important}
  #files #fileSearch{grid-column:1/-1!important;grid-row:1!important;height:44px!important;padding:0 14px 0 42px!important;border:1px solid #d8e6f5!important;border-radius:12px!important;background:#f8fbff url('icons/search.svg') no-repeat 14px center!important;background-size:18px 18px!important;font-size:13px!important;color:#17375f!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important}
  #files #fileSearch:focus{border-color:#77b6ff!important;box-shadow:0 0 0 3px rgba(48,139,255,.12)!important;background-color:#fff!important;outline:none!important}
  #files #refreshFiles{grid-column:1!important;grid-row:2!important;width:44px!important;padding:0!important;font-size:0!important;background:#eef6ff!important;border:1px solid #cfe3fb!important;box-shadow:none!important;color:#0872ff!important;position:relative!important}
  #files #refreshFiles:before{content:'↻';font-size:21px!important;line-height:1!important}
  #files .file-toolbar [data-page="transfer"]{grid-column:2!important;grid-row:2!important;height:42px!important;font-size:13px!important;border-radius:11px!important}
  #files .file-table{min-height:210px!important}
  #files .file-table:empty:before{content:'暂无文件';display:block;padding:55px 16px;text-align:center;color:#7b8da7;font-size:13px}

  /* Transfer capability cards: exactly six on mobile, complete 3x2 grid, every card boxed. */
  #transfer .perks{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;width:calc(100% - 32px)!important;margin:12px 16px 14px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
  #transfer .perks>div{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;grid-template-rows:auto auto!important;min-height:78px!important;padding:10px 11px!important;border:1px solid #dce9f7!important;border-radius:14px!important;background:#fff!important;box-shadow:0 5px 15px rgba(27,78,132,.035)!important;box-sizing:border-box!important}
  #transfer .perks>div:nth-child(7){display:none!important}
  #transfer .perks>div:nth-child(n){border-right:1px solid #dce9f7!important;border-bottom:1px solid #dce9f7!important}

  /* Mobile footer simpler and denser. */
  .site-footer{padding:15px 0 12px!important;margin-top:14px!important}
  .footer-logo{grid-template-columns:104px minmax(0,1fr)!important;margin-bottom:10px!important}
  .footer-logo img{width:104px!important;height:34px!important}
  .footer-menu{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px 8px!important;margin-bottom:8px!important}
  .footer-menu a{font-size:11px!important;padding:5px 0!important}
  .footer-friends{padding:7px 0!important;font-size:10px!important}
  .footer-bottom{padding-top:8px!important;gap:2px!important}
}

@media (max-width:390px){
  #articles .articles-hero .file-hero-inner>div:first-child{max-width:76%!important}
  #articles .articles-hero img{width:205px!important;right:-18px!important}
  #files .file-sidebar button{padding:0 10px!important;font-size:11px!important}
}


/* Piaoshan V1.8.3 mobile compact footer + compact heroes */
@media (max-width:768px){
  /* Footer: mobile keeps only logo + slogan. */
  .site-footer{margin-top:12px!important;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px))!important;background:#fff!important;border-top:1px solid #e8f0f8!important}
  .site-footer .content-wrap{width:calc(100% - 32px)!important;margin:0 16px!important}
  .footer-top{display:block!important;padding:0!important;border:0!important}
  .footer-logo{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;margin:0!important;text-align:center!important}
  .footer-logo img{display:block!important;width:108px!important;height:35px!important;object-fit:contain!important;object-position:center!important}
  #footerSlogan{display:block!important;font-size:11px!important;line-height:1.4!important;color:#627896!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;text-align:center!important}
  .footer-menu,.footer-friends,.footer-bottom,#footerBrand,#footerDescription{display:none!important}

  /* Compact shared mobile hero: half-height, left copy + right real illustration. */
  #files .file-hero,
  #articles .articles-hero{min-height:142px!important;height:142px!important;overflow:hidden!important;background:linear-gradient(155deg,#f5fbff 0%,#e5f4ff 58%,#cce9ff 100%)!important}
  #files .file-hero-inner,
  #articles .articles-hero .file-hero-inner{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:142px!important;height:142px!important;padding:15px 16px!important;overflow:hidden!important}
  #files .file-hero-inner>div:first-child,
  #articles .articles-hero .file-hero-inner>div:first-child{position:relative!important;z-index:2!important;max-width:58%!important;padding:0!important}
  #files .file-hero h1,
  #articles .articles-hero h1{font-size:24px!important;line-height:1.12!important;margin:0 0 6px!important;letter-spacing:-.25px!important}
  #files .file-hero p,
  #articles .articles-hero p{font-size:11px!important;line-height:1.55!important;margin:0!important;max-width:100%!important;color:#274f7b!important}
  #files .file-hero-inner>div:first-child>div,
  #articles .articles-hero .file-hero-inner>div:first-child>div{display:none!important}
  #files .file-hero img,
  #articles .articles-hero img{display:block!important;position:absolute!important;right:2px!important;bottom:0!important;width:48%!important;height:132px!important;object-fit:contain!important;object-position:right center!important;opacity:1!important;z-index:1!important}
  #files .file-hero img{content:url('mobile-files-hero-v183.svg')!important}
  #articles .articles-hero img{content:url('mobile-news-hero-v183.svg')!important}
  #files .file-workspace{margin-top:8px!important}
  #articles .article-list-wrap{margin-top:10px!important}
  #articles .article-list-head h2{font-size:21px!important;margin-bottom:2px!important}
  #articles .article-list-head p{font-size:11px!important}
}

@media (max-width:390px){
  #files .file-hero,
  #articles .articles-hero{height:136px!important;min-height:136px!important}
  #files .file-hero-inner,
  #articles .articles-hero .file-hero-inner{height:136px!important;min-height:136px!important;padding:13px 14px!important}
  #files .file-hero h1,
  #articles .articles-hero h1{font-size:22px!important}
  #files .file-hero p,
  #articles .articles-hero p{font-size:10.5px!important}
  #files .file-hero img,
  #articles .articles-hero img{width:49%!important;height:124px!important;right:-4px!important}
  .footer-logo img{width:102px!important;height:33px!important}
  #footerSlogan{font-size:10.5px!important}
}