:root{
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --app-green:#0a4a41;
  --app-green-soft:#e9f5f1;
  --app-shadow:0 10px 35px rgba(15,48,42,.10);
}
html{scroll-behavior:smooth}
body{overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
.filter-toggle,.app-tabbar{display:none}
.install-app-button{display:none;position:fixed;z-index:50;right:18px;bottom:22px;min-height:46px;padding:12px 18px;border:0;border-radius:26px;background:#dba84f;color:#17332d;font-weight:900;box-shadow:0 10px 30px rgba(26,53,47,.24)}
.install-app-button:disabled{opacity:.6}
.photo-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.upload-choice{position:relative;min-height:112px;margin:0;padding:20px 14px;border:1px dashed #82afa5;border-radius:14px;background:#f4fbf9;text-align:center;align-items:center;justify-content:center}
.upload-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;pointer-events:auto}
.upload-choice b{font-size:16px;color:var(--green)}
.upload-choice span{font-weight:400;color:var(--muted)}
.upload-hint{margin:10px 0 12px;color:var(--muted);font-size:12px}
.photo-count{margin-top:8px;color:var(--green);font-size:13px;font-weight:700}
.mobile-meta{display:none}

@media(max-width:760px){
  body{background:#f1f5f3}
  body.modal-open{overflow:hidden}
  button,input,select,textarea{min-height:46px}
  input,select,textarea{font-size:16px}
  .login-shell{min-height:100dvh;background:linear-gradient(180deg,#0a4a41 0 29%,#f5f8f7 29%)}
  .brand-panel{min-height:29vh;padding:calc(34px + env(safe-area-inset-top,0px)) 22px 26px;background:none}
  .brand-panel .logo{width:54px;height:54px;border-radius:16px;font-size:27px}
  .brand-panel h1{font-size:36px;margin:14px 0 4px}
  .brand-panel p{font-size:15px}
  .login-card{width:calc(100% - 28px);margin:-5px 14px 20px;padding:24px 20px;border-radius:22px;background:#fff;box-shadow:var(--app-shadow)}
  .login-card h2{font-size:26px;margin:8px 0}
  .login-card label{margin:14px 0}
  .login-card .primary{min-height:50px;border-radius:13px;font-size:16px}
  .login-actions{margin-top:14px}
  .register-head h2{font-size:25px;margin:5px 0}
  header{position:sticky;top:0;z-index:15;height:66px;padding:calc(env(safe-area-inset-top,0px) / 2) 14px 0;background:rgba(8,58,52,.97);backdrop-filter:blur(14px)}
  .logo.small{width:38px;height:38px}
  .header-brand b{font-size:18px}
  .header-brand small{font-size:11px}
  .head-actions{gap:0}
  .head-actions .ghost{min-height:40px;padding:7px 12px;border-radius:12px}
  .content{padding:18px 12px calc(92px + var(--safe-bottom))}
  .hero{padding:5px 4px 0}
  .hero .eyebrow{font-size:10px;letter-spacing:1.6px}
  .hero h1{font-size:27px;line-height:1.25;margin:6px 0}
  .hero p{font-size:14px;line-height:1.7;margin:0}
  .hero-actions{display:flex;align-self:flex-start}
  .hero-actions #addBtn{display:none}
  .hero-actions .approval-button{min-height:42px;padding:8px 10px;font-size:12px}
  .member-note{margin-top:9px;padding:9px 11px;border-radius:11px;background:#e9f5f1;color:#315d54;font-size:12px}
  .stats{margin:18px 0;gap:9px}
  .stats article{min-height:116px;padding:15px 14px;border:0;border-radius:18px;box-shadow:0 6px 24px rgba(15,48,42,.06)}
  .stats span{font-size:13px}
  .stats strong{font-size:30px;margin:9px 0 2px}
  .stats small{font-size:11px}
  .panel{border:0;border-radius:20px;box-shadow:var(--app-shadow);overflow:hidden}
  .panel-head{padding:18px 14px 13px}
  .panel-head h2{font-size:21px}
  .panel-head p{font-size:12px}
  .search{height:48px;margin-top:14px}
  .search input{height:48px;border-radius:13px 0 0 13px;padding-left:13px}
  .search button{min-width:64px;height:48px;border-radius:0 13px 13px 0;font-size:15px}
  .filter-toggle{display:flex;width:calc(100% - 28px);margin:0 14px 12px;min-height:46px;align-items:center;justify-content:space-between;border:1px solid #d8e5e1;border-radius:12px;background:#f6faf8;color:var(--app-green);padding:0 14px;font-weight:700}
  .filter-toggle b{font-size:12px}
  .filters{display:none;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 14px 14px;background:#fff;border-bottom:1px solid var(--line)}
  .filters.is-open{display:grid}
  .filters select{min-width:0;height:46px;padding:8px 10px;border-radius:12px}
  .filters .ghost{min-height:46px;border-radius:12px}
  .result-meta{padding:11px 15px;background:#f8fbfa;font-size:12px;font-weight:700;color:#57716b}
  .shop-list{min-height:125px}
  .shop-row{position:relative;grid-template-columns:68px minmax(0,1fr) 48px;gap:11px;padding:14px;border-bottom:1px solid #edf1ef;background:#fff}
  .shop-row:active{background:#f2f8f6}
  .cover{width:68px;height:68px;border-radius:14px}
  .shop-main b{font-size:15px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shop-main>small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shop-row>.shop-cell{display:none!important}
  .shop-row>.ghost{width:48px;height:36px;min-height:36px;padding:0;border-color:#cfe1dc;border-radius:11px;color:var(--green);font-size:12px}
  .mobile-meta{display:flex;gap:5px;margin-top:7px;align-items:center;overflow:hidden}
  .mobile-meta span{white-space:nowrap;padding:3px 6px;border-radius:8px;background:#eef6f3;color:#315d54;font-size:10px}
  .empty{padding:38px 20px;line-height:1.7}
  .app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(68px + var(--safe-bottom));display:grid;grid-template-columns:repeat(5,1fr);align-items:start;padding:6px 6px var(--safe-bottom);background:rgba(255,255,255,.97);border-top:1px solid #dce6e2;box-shadow:0 -8px 28px rgba(19,54,47,.09);backdrop-filter:blur(16px)}
  .install-app-button{display:block;right:14px;bottom:calc(78px + var(--safe-bottom));min-height:48px;padding:12px 17px}
  .app-tabbar button{position:relative;display:flex;min-width:0;min-height:54px;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;background:none;color:#71817d;padding:0}
  .app-tabbar button>span{font-size:21px;line-height:1}
  .app-tabbar button>small{font-size:10px}
  .app-tabbar button.active{color:var(--app-green);font-weight:800}
  .app-tabbar .add-tab{transform:translateY(-17px);color:#fff}
  .app-tabbar .add-tab>span{display:grid;width:52px;height:52px;place-items:center;border-radius:18px;background:linear-gradient(145deg,#0c6558,#083f38);font-size:30px;box-shadow:0 9px 22px rgba(8,74,65,.35)}
  .app-tabbar .add-tab>small{margin-top:4px;color:var(--app-green);font-weight:800}
  .mobile-fab{display:none!important}
  dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  dialog::backdrop{background:#0a211d88}
  dialog form{min-height:100%;padding-bottom:76px}
  .dialog-head{min-height:70px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px}
  .dialog-head h2{font-size:21px}
  .dialog-head .close,.close-detail{width:44px;height:44px;min-height:44px;border-radius:14px;background:#eff5f3;font-size:25px}
  .form-section{padding:18px 16px}
  .form-section h3{font-size:17px}
  .form-section label{margin:14px 0}
  .form-section input,.form-section select,.form-section textarea{border-radius:12px}
  .grid{display:block}
  .location{width:100%;min-height:48px;border-radius:12px}
  .ocr-box{min-height:118px;margin:0;padding:20px 14px;border-radius:15px}
  .photo-actions{gap:10px}
  .upload-choice{min-height:112px;margin:0;padding:17px 10px;border-radius:15px}
  .upload-choice b{font-size:16px}
  .preview{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible}
  .preview img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px}
  .dialog-actions{position:fixed;z-index:5;left:0;right:0;bottom:0;padding:10px 14px calc(10px + var(--safe-bottom));background:rgba(255,255,255,.97);box-shadow:0 -8px 25px rgba(20,48,42,.08)}
  .dialog-actions button{min-height:48px;border-radius:13px}
  .detail-block{padding:18px 16px 90px}
  .detail-block dl{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .review-form .primary{width:100%;min-height:48px}
  .approval-content{padding:16px 14px 90px}
  .approval-item{align-items:flex-start;flex-direction:column;padding:14px}
  .approval-actions{width:100%}
  .approval-actions button{flex:1;min-height:46px}
}

@media(min-width:761px){
  .filter-toggle{display:none!important}
}

/* 手机端视觉与单手操作增强 */
@media(max-width:760px){
  *{scrollbar-width:none}
  *::-webkit-scrollbar{display:none}
  body{
    color:#122622;
    background:
      radial-gradient(circle at 100% 0,rgba(20,133,109,.09),transparent 35%),
      #f2f6f4;
    -webkit-font-smoothing:antialiased
  }
  .login-shell{
    background:
      radial-gradient(circle at 88% 5%,rgba(83,196,165,.25),transparent 30%),
      linear-gradient(180deg,#073f38 0 30%,#f2f6f4 30% 100%)
  }
  .brand-panel{
    min-height:30vh;
    justify-content:flex-start;
    padding-left:26px;
    padding-right:26px
  }
  .brand-panel .logo{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 12px 35px rgba(0,0,0,.13)
  }
  .brand-panel h1{
    letter-spacing:2px;
    text-shadow:0 3px 16px rgba(0,0,0,.12)
  }
  .brand-panel p{color:rgba(255,255,255,.82)}
  .login-card{
    position:relative;
    margin-top:-10px;
    padding:25px 20px 22px;
    border:1px solid rgba(255,255,255,.8);
    box-shadow:0 20px 55px rgba(12,50,43,.14)
  }
  .login-card:before{
    content:"";
    position:absolute;
    top:8px;
    left:50%;
    width:42px;
    height:4px;
    transform:translateX(-50%);
    border-radius:8px;
    background:#dce7e3
  }
  .login-card .eyebrow{display:block;margin-top:4px}
  .login-tabs{
    gap:4px;
    padding:5px;
    border:1px solid #e3ebe8;
    background:#f2f6f4
  }
  .login-tabs button{min-height:44px}
  .login-card input{
    min-height:50px;
    border-color:#d8e4e0;
    border-radius:13px;
    background:#fbfdfc
  }
  .login-card input:focus{background:#fff}
  .code-row{grid-template-columns:minmax(0,1fr) 112px}
  .code-row button{min-height:50px;border-radius:13px}
  .login-actions{
    margin-top:18px;
    padding-top:15px;
    border-top:1px solid #edf2f0;
    gap:2px 5px;
    line-height:1.45
  }
  .login-actions .link-button{min-height:38px;padding:5px 3px;font-size:13px}
  .back-button{display:inline-flex;min-height:40px;align-items:center}
  .agreement{
    padding:11px;
    border-radius:12px;
    background:#f5f8f7
  }
  header{
    height:70px;
    padding-left:16px;
    padding-right:12px;
    box-shadow:0 5px 24px rgba(7,50,44,.18)
  }
  .header-brand{gap:10px}
  .head-actions .ghost{
    border-color:rgba(255,255,255,.28);
    background:rgba(255,255,255,.08)
  }
  .hero{
    display:block;
    position:relative;
    padding:18px 16px;
    border:1px solid #deebe7;
    border-radius:20px;
    background:
      radial-gradient(circle at 100% 0,rgba(34,151,124,.14),transparent 45%),
      linear-gradient(145deg,#fff,#f6fbf9);
    box-shadow:0 10px 34px rgba(18,65,56,.07);
    overflow:hidden
  }
  .hero>div:first-child{min-width:0}
  .hero h1{margin:8px 0;font-size:25px;line-height:1.25}
  .hero p{margin:0;padding-right:0;line-height:1.65}
  .hero-actions{
    position:static;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
    width:100%;
    margin-top:16px;
    gap:8px
  }
  .hero-actions .approval-button{
    display:flex;
    min-width:0;
    min-height:50px;
    align-items:center;
    justify-content:center;
    padding:8px 6px;
    border:0;
    border-radius:13px;
    background:#fff7e6;
    box-shadow:0 4px 14px rgba(132,90,18,.12);
    line-height:1.35;
    white-space:nowrap
  }
  .hero-actions .approval-button span{flex:none;margin-left:4px}
  .member-note{
    display:inline-flex;
    align-items:center;
    line-height:1.6
  }
  .stats{margin:12px 0 16px}
  .stats article{
    position:relative;
    min-height:112px;
    border:1px solid #e5ece9;
    background:linear-gradient(155deg,#fff 0 70%,#f0f7f4);
    overflow:hidden
  }
  .stats article:after{
    content:"";
    position:absolute;
    right:-18px;
    bottom:-24px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:rgba(20,133,109,.07)
  }
  .stats .risk:after{background:rgba(174,62,53,.07)}
  .stats strong{line-height:1}
  .panel{
    border:1px solid #e1eae7;
    background:#f7faf9
  }
  .panel-head{
    position:sticky;
    top:70px;
    z-index:8;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px)
  }
  .search{box-shadow:0 5px 18px rgba(24,71,62,.07);border-radius:13px}
  .filter-toggle{background:#fff}
  .filters.is-open{gap:10px;padding-top:7px}
  .result-meta{border-top:1px solid #edf2f0}
  .shop-list{padding:8px;background:#f5f8f7}
  .shop-row{
    margin-bottom:8px;
    padding:12px;
    border:1px solid #e6eeeb;
    border-radius:16px;
    box-shadow:0 4px 15px rgba(20,59,52,.04)
  }
  .shop-row:last-child{margin-bottom:0}
  .shop-row>.ghost{
    border:0;
    background:#eaf5f1;
    font-weight:800
  }
  .mobile-meta span:first-child{background:#e3f3ed;color:#0a5d4f}
  .app-tabbar{
    height:calc(72px + var(--safe-bottom));
    padding-top:7px;
    border-radius:20px 20px 0 0
  }
  .app-tabbar button>small{font-size:11px}
  .app-tabbar .add-tab>span{border-radius:50%}
  dialog{background:#f6f9f8}
  .dialog-head{
    background:rgba(255,255,255,.97);
    box-shadow:0 4px 16px rgba(20,53,47,.06)
  }
  .form-section{margin-bottom:8px;border:0;background:#fff}
  .form-section h3{
    display:flex;
    align-items:center;
    gap:8px
  }
  .form-section h3:before{
    content:"";
    width:4px;
    height:16px;
    border-radius:4px;
    background:#13806c
  }
  .upload-choice{background:linear-gradient(145deg,#f8fcfb,#edf8f5)}
  .detail-block>h3{margin-top:25px;padding-bottom:9px;border-bottom:1px solid #e1e9e6}
  .review-form{padding:15px;border:1px solid #e0e9e6;background:#fff}
}

@media(max-width:370px){
  .login-card{width:calc(100% - 20px);margin-left:10px;margin-right:10px;padding-left:16px;padding-right:16px}
  .code-row{grid-template-columns:minmax(0,1fr) 104px}
  .login-actions .login-divider{display:none}
  .hero-actions{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));margin-top:13px;gap:6px}
  .hero-actions .approval-button{padding-left:4px;padding-right:4px;font-size:11px}
  .stats article{padding:13px 11px}
  .stats strong{font-size:27px}
}