/* Page styles extracted from shop_customer_say.html. Keep after common.css and ui.css. */

    :root{
      --bg:#f5f5f5;
      --card:#ffffff;
      --line:#ededed;
      --line-soft:#f3f3f3;
      --text:#262626;
      --muted:#8f8f8f;
      --sub:#b8b8b8;
      --chip:#ffffff;
      --chip-on:#111111;
      --badge-bg:#fff6da;
      --badge:#b9871e;
      --reply-bg:#f8f8f8;
      --radius:10px;
    }
    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-sans,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Arial,sans-serif);}
    body{min-height:100vh;}
    button,input,textarea{font:inherit;}
    img{display:block;max-width:100%;}
    a{text-decoration:none;color:inherit;}
    .hidden{display:none!important;}

    .topbar{
      position:sticky;top:0;z-index:60;
      height:44px;background:#fff;border-bottom:1px solid var(--line);
      display:flex;align-items:center;justify-content:center;
    }
    .topbar-btn{
      position:absolute;left:0;top:0;width:44px;height:44px;
      display:flex;align-items:center;justify-content:center;
      border:none;background:none;padding:0;
    }
    .topbar-btn::before{
      content:"";display:block;width:10px;height:10px;
      border-left:1.8px solid #222;border-bottom:1.8px solid #222;
      transform:rotate(45deg);margin-left:5px;
    }
    .topbar-title{font-size:17px;font-weight:600;color:#111;letter-spacing:0;}

    .toolbar{
      position:sticky;top:44px;z-index:55;background:var(--bg);
      padding:8px 10px 6px;border-bottom:none;
    }
    .chip-scroll{
      display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    }
    .chip-scroll::-webkit-scrollbar{display:none;}
    .chip{
      flex:0 0 auto;height:28px;padding:0 12px;border:1px solid #ececec;border-radius:14px;
      background:var(--chip);color:#666;font-size:12px;font-weight:400;
    }
    .chip.active{background:var(--chip-on);border-color:var(--chip-on);color:#fff;font-weight:500;}
    .toolbar-meta{
      padding:7px 2px 0;font-size:11px;color:#a0a0a0;line-height:1.4;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }

    .shop-info{
      margin:10px 0 0;background:#fff;border:1px solid var(--line);border-radius:12px;
      padding:12px 12px 11px;box-shadow:none;
    }
    .shop-info-main{display:flex;align-items:center;gap:10px;min-width:0;}
    .shop-info-avatar{
      width:44px;height:44px;border-radius:50%;flex:0 0 auto;overflow:hidden;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(180deg,#f8f8f8 0%,#efefef 100%);color:#262626;font-size:18px;font-weight:600;
    }
    .shop-info-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
    .shop-info-meta{min-width:0;flex:1;}
    .shop-info-name-row{display:flex;align-items:center;gap:8px;min-width:0;}
    .shop-info-name{
      min-width:0;flex:1;font-size:16px;font-weight:600;color:#181818;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .shop-info-badge{
      flex:0 0 auto;display:inline-flex;align-items:center;height:20px;padding:0 8px;
      border-radius:10px;background:#f7f7f7;color:#7b7b7b;font-size:11px;white-space:nowrap;
    }
    .shop-info-desc{
      margin-top:4px;font-size:12px;line-height:1.5;color:#8d8d8d;
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
    }
    .shop-info-stats{
      margin-top:12px;padding-top:12px;border-top:1px solid #f3f3f3;
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
    }
    .shop-stat{min-width:0;padding:0 2px;}
    .shop-stat strong{
      display:block;font-size:15px;line-height:1.15;color:#1f1f1f;font-weight:600;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .shop-stat span{
      display:block;margin-top:4px;font-size:11px;line-height:1.2;color:#9c9c9c;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .shop-stat.is-empty strong{font-size:14px;color:#666;}
    .shop-info-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
    .shop-link{
      display:inline-flex;align-items:center;justify-content:center;
      height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--line);
      background:#fff;font-size:12px;color:#444;line-height:1;
    }
    .shop-link.primary{background:#111;border-color:#111;color:#fff;}

    .page{max-width:760px;margin:0 auto;padding:0 10px 18px;}
    .status{
      margin-top:10px;background:#fff;border-radius:var(--radius);
      border:1px solid var(--line);padding:24px 16px;text-align:center;
    }
    .status-title{font-size:15px;font-weight:600;color:#222;}
    .status-desc{margin-top:7px;font-size:13px;line-height:1.6;color:#8c8c8c;}
    .status-actions{margin-top:14px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
    .btn{
      min-width:88px;height:34px;padding:0 16px;border:none;border-radius:17px;
      background:#f3f3f3;color:#444;font-size:14px;
    }
    .btn.primary{background:#111;color:#fff;}

    .list{display:flex;flex-direction:column;gap:10px;padding-top:8px;}
    .card{
      background:var(--card);border-radius:var(--radius);
      border:1px solid var(--line);padding:12px 12px 12px;
      box-shadow:none;
    }
    .card-head{
      display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
      min-height:24px;
    }
    .head-main{
      min-width:0;flex:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
    }
    .verify-dot{
      width:8px;height:8px;border-radius:50%;flex:0 0 auto;
      background:#e7bf66;box-shadow:0 0 0 2px #fff4d6;
      margin-right:1px;margin-top:1px;
    }
    .name{
      max-width:140px;font-size:14px;font-weight:500;color:#2b2b2b;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .buy-badge{
      display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:10px;
      background:var(--badge-bg);color:var(--badge);font-size:11px;font-weight:400;
      white-space:nowrap;
    }
    .time{
      flex:0 0 auto;font-size:11px;color:#b4b4b4;white-space:nowrap;
      margin-left:6px;line-height:20px;
    }
    .content{
      margin-top:8px;font-size:15px;line-height:1.63;color:#262626;
      word-break:break-word;white-space:pre-wrap;
    }
    .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
    .tag{
      display:inline-flex;align-items:center;max-width:100%;height:22px;padding:0 8px;border-radius:11px;
      background:#f7f7f7;color:#7d7d7d;font-size:11px;line-height:1;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .images{
      margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
    }
    .images img{
      width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;background:#f1f1f1;
    }
    .img-fallback{
      width:100%;aspect-ratio:1/1;border-radius:6px;background:#f3f3f3;
      display:flex;align-items:center;justify-content:center;font-size:12px;color:#b0b0b0;
    }
    .product{
      margin-top:10px;padding:8px;border-radius:8px;background:#fafafa;
      display:flex;align-items:center;gap:10px;overflow:hidden;border:1px solid var(--line-soft);
    }
    .product-link{cursor:pointer;}
    .product-cover{
      width:54px;height:54px;border-radius:6px;object-fit:cover;background:#eee;flex:0 0 auto;
    }
    .product-main{min-width:0;flex:1;}
    .product-side{flex:0 0 auto;display:flex;align-items:center;gap:6px;color:#999;font-size:12px;}
    .product-cta{color:#666;white-space:nowrap;}
    .product-arrow{font-size:14px;line-height:1;color:#bcbcbc;transform:translateY(-1px);}
    .product-title{
      font-size:13px;line-height:1.4;color:#444;
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
    }
    .product-sub{margin-top:3px;font-size:12px;color:#a0a0a0;}
    .reply{
      margin-top:10px;padding:9px 10px;border-radius:8px;background:var(--reply-bg);
      font-size:12px;line-height:1.6;color:#777;border:1px solid var(--line-soft);
    }
    .reply strong{color:#555;font-weight:500;}
    .empty-tip{
      padding:16px 4px 2px;text-align:center;font-size:12px;color:#a0a0a0;
    }
    .load-more-wrap{padding-top:10px;}
    .load-more{
    width:100%;
    height:38px;
    border-radius:8px;
    background:#fff;
    border:1px solid var(--line);
    font-size:14px;
    color:#444;
    box-shadow:none;
}
    .load-more-note{margin-top:8px;text-align:center;font-size:11px;color:#aaaaaa;}

    .skeleton{
      background:#fff;border-radius:var(--radius);
      border:1px solid var(--line);padding:12px;
      box-shadow:none;
    }
    .sk-line,.sk-avatar,.sk-pic{
      background:linear-gradient(90deg,#f2f2f2 25%,#f8f8f8 37%,#f2f2f2 63%);
      background-size:400% 100%;animation:shine 1.4s infinite;
    }
    .sk-top{display:flex;justify-content:space-between;align-items:center;gap:10px;}
    .sk-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1;}
    .sk-avatar{width:8px;height:8px;border-radius:50%;}
    .sk-line{height:10px;border-radius:999px;}
    .sk-name{width:64px;}
    .sk-badge{width:92px;height:20px;border-radius:10px;}
    .sk-time{width:46px;}
    .sk-c1{margin-top:12px;width:100%;}
    .sk-c2{margin-top:8px;width:90%;}
    .sk-c3{margin-top:8px;width:58%;}
    .sk-grid{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
    .sk-pic{width:100%;aspect-ratio:1/1;border-radius:6px;}
    @keyframes shine{0%{background-position:100% 0;}100%{background-position:0 0;}}

    .viewer{
      position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:100;display:none;
    }
    .viewer.show{display:block;}
    .viewer-head{
      position:absolute;left:0;top:0;right:0;padding:calc(env(safe-area-inset-top) + 12px) 14px 10px;
      display:flex;align-items:center;justify-content:space-between;color:#fff;
    }
    .viewer-count{font-size:14px;opacity:.92;}
    .viewer-close{
      width:34px;height:34px;border:none;border-radius:17px;
      background:rgba(255,255,255,.16);color:#fff;font-size:22px;
    }
    .viewer-stage{
      position:absolute;inset:56px 0 18px;padding:16px;
      display:flex;align-items:center;justify-content:center;
    }
    .viewer-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;}
    .viewer-nav{
      position:absolute;top:50%;transform:translateY(-50%);
      width:34px;height:34px;border:none;border-radius:17px;
      background:rgba(255,255,255,.16);color:#fff;font-size:22px;
      display:flex;align-items:center;justify-content:center;
    }
    .viewer-nav.prev{left:10px;}
    .viewer-nav.next{right:10px;}

    .safe-bottom{height:calc(env(safe-area-inset-bottom) + 10px);}

    @media (min-width:768px){
      .page{padding-left:14px;padding-right:14px;}
      .images{grid-template-columns:repeat(4,1fr);}
    }