html{min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100dvh;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
button,.btn,a,input,select,textarea{touch-action:manipulation}
#network-status{position:fixed;top:0;left:0;right:0;z-index:500;padding:9px calc(16px + env(safe-area-inset-right)) 9px calc(16px + env(safe-area-inset-left));background:#9b2f2f;color:#fff;text-align:center;font-size:12px;box-shadow:0 3px 15px rgba(0,0,0,.2)}
#install-app{position:fixed;right:18px;bottom:18px;z-index:90;border:1px solid rgba(220,180,126,.5);border-radius:999px;padding:11px 17px;background:#24211c;color:#fff;box-shadow:0 12px 30px rgba(25,20,15,.28);font:600 13px/1 "Microsoft YaHei","PingFang SC",sans-serif}
#install-app[hidden]{display:none}
.nav-shift{display:none}

@media(max-width:900px){
  body{background:#f5f2ec}
  .shell{display:block;min-height:100dvh}
  .sidebar{position:fixed;inset:auto 0 0 0;z-index:80;width:auto;height:calc(64px + env(safe-area-inset-bottom));padding:6px max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-left));background:rgba(25,23,19,.97);box-shadow:0 -8px 30px rgba(24,18,11,.16);backdrop-filter:blur(18px)}
  .sidebar .brand,.sidebar-foot{display:none}
  .nav-shift{position:absolute;top:6px;bottom:env(safe-area-inset-bottom);z-index:3;display:grid;width:30px;min-height:52px;place-items:center;border:0;color:#ecd6b8;font-size:25px;line-height:1;background:linear-gradient(90deg,rgba(25,23,19,.98),rgba(25,23,19,.78));cursor:pointer}
  .nav-shift-prev{left:max(0px,env(safe-area-inset-left))}
  .nav-shift-next{right:max(0px,env(safe-area-inset-right));background:linear-gradient(270deg,rgba(25,23,19,.98),rgba(25,23,19,.78))}
  .nav-shift[hidden]{display:none}
  .nav{height:58px;display:flex;flex-direction:row;gap:3px;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;touch-action:pan-x;cursor:grab;scroll-behavior:smooth}
  .nav::-webkit-scrollbar{display:none}
  .nav.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
  .nav.dragging button{user-select:none;-webkit-user-select:none}
  .nav button{min-width:76px;height:52px;display:grid;place-items:center;flex:0 0 auto;padding:17px 9px 6px;border-radius:9px;text-align:center;font-size:11px;line-height:1.1;white-space:nowrap;scroll-snap-align:start}
  .nav button:before{left:50%;top:8px;width:5px;height:5px;transform:translateX(-50%)}
  .nav button.active{box-shadow:inset 0 -2px #c2945d;background:linear-gradient(0deg,rgba(184,137,81,.22),rgba(184,137,81,.04))}
  .main{min-height:100dvh;padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .topbar{position:sticky;top:0;z-index:60;height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));background:rgba(250,248,243,.94);backdrop-filter:blur(18px)}
  .topbar h1{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .content{padding:22px max(14px,env(safe-area-inset-right)) 30px max(14px,env(safe-area-inset-left))}
  .btn,.nav button,.modal-close,.viewer-close{min-height:44px}
  .btn-small{min-height:40px;padding:9px 12px}
  input,select,textarea,.field input,.field select,.field textarea,.toolbar input,.toolbar select{font-size:16px}
  .table-wrap,.report-chart-wrap{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;scrollbar-width:thin;overscroll-behavior-x:contain}
  .table th,.table td{padding:11px 12px}
  .modal-backdrop{align-items:end;padding:0}
  .modal{width:100vw;max-width:100vw;height:auto;max-height:calc(100dvh - env(safe-area-inset-top));border-radius:16px 16px 0 0}
  .modal-header{padding-top:18px}
  .modal-body{padding:18px 16px calc(20px + env(safe-area-inset-bottom))}
  .modal-footer{position:sticky;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fbf8f2}
  .viewer{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .viewer-tools{height:auto;min-height:66px;padding:8px;gap:7px;overflow-x:auto;justify-content:flex-start}
  .viewer-tools button{min-height:42px;white-space:nowrap}
  .viewer-tools input{min-width:110px}
  #toast-root{top:calc(72px + env(safe-area-inset-top));right:12px;left:12px}
  .toast{min-width:0;width:100%}
  #install-app{right:max(14px,env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom))}
}

@media(max-width:520px){
  .login-side{min-height:100dvh;padding:max(24px,env(safe-area-inset-top)) max(15px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(15px,env(safe-area-inset-left))}
  .login-card{padding:28px 21px}
  .login-mobile-brand img{width:62px;height:62px}
  .topbar{gap:8px}
  .topbar-title{min-width:0}
  .topbar h1{max-width:27vw;font-size:17px}
  .user-pill{gap:5px}
  .user-pill .avatar{display:none}
  .topbar .btn{padding:7px 8px;min-height:38px;font-size:11px}
  .content{padding-top:18px}
  .page-head{gap:13px;margin-bottom:20px}
  .page-head .actions{width:100%}
  .page-head .actions>.btn{flex:1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{min-width:0;padding:15px 12px}
  .stat strong{font-size:24px;overflow-wrap:anywhere}
  .panel-body{padding:16px}
  .product-grid,.link-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .link-card .cover{height:135px}
  .link-card .info{padding:12px}
  .link-card .actions{display:grid;grid-template-columns:1fr}
  .link-card .actions .btn{width:100%}
  .detail-list{grid-template-columns:105px minmax(0,1fr)}
  .detail-list dt,.detail-list dd{padding:10px 8px;font-size:12px}
  .gallery-download{display:grid;grid-template-columns:1fr 1fr}
  .gallery-download .btn{width:100%}
  .link-product-choice{padding:10px 8px;gap:7px}
  .link-product-info{gap:7px}
  .link-product-info img,.link-product-info .placeholder{width:46px;height:46px}
  .link-product-select{min-width:72px}
}