/* 0点店铺 · 公共样式（E版·晴空浅蓝） */

  /* ===== 图纸配色（正式版可换）===== */
  :root{
    --main:#1C7ED6; --main-d:#1864AB; --main-l:#E7F5FF;
    --ink:#27313C; --sub:#7E8CA0; --line:#E7EDF5;
    --warn:#F08C00; --red:#E8590C; --card:#FFFFFF; --bg:#F5F9FE;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{font-family:"Microsoft YaHei","PingFang SC",sans-serif; background:var(--bg); color:var(--ink);}
  .wrap{max-width:1080px; margin:0 auto; padding:0 14px 90px;}

  /* ===== 顶部店招 ===== */
  .top{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
  .top-in{max-width:1080px; margin:0 auto; padding:10px 14px; display:flex; align-items:center; gap:14px;}
  .logo{font-size:20px; font-weight:bold; color:var(--main-d); cursor:pointer; white-space:nowrap;}
  .logo small{font-size:11px; color:var(--sub); font-weight:normal; margin-left:6px;}
  .search{flex:1; max-width:340px; position:relative;}
  .search input{width:100%; padding:8px 14px 8px 32px; border:1px solid var(--line); border-radius:18px; font-size:13px; outline:none; background:#F8FAFB;}
  .search input:focus{border-color:var(--main);}
  .search span{position:absolute; left:11px; top:7px; color:#ADB5BD; font-size:13px;}
  .nav{display:flex; gap:6px; margin-left:auto;}
  .nav button{border:0; background:transparent; padding:8px 12px; border-radius:10px; font-size:14px; color:var(--ink); cursor:pointer; position:relative;}
  .nav button:hover{background:#E7F5FF; color:#1864AB;}
  .nav button.on{background:var(--main); color:#fff; font-weight:bold;}
  .cart-badge{position:absolute; top:2px; right:2px; background:var(--red); color:#fff; font-size:10px; min-width:16px; height:16px; line-height:16px; border-radius:8px; padding:0 4px;}
  .admin-link{font-size:12px; color:var(--sub); border:1px dashed var(--line); padding:7px 10px; border-radius:10px; cursor:pointer;}
  .admin-link:hover{color:var(--main-d); border-color:var(--main);}

  /* ===== 前台 ===== */
  .banner{margin:16px 0; border-radius:16px; padding:26px 26px; color:#fff; background:linear-gradient(120deg,#4DABF7,#228BE6 60%,#1C7ED6); position:relative; overflow:hidden;}
  .banner h1{font-size:24px; margin-bottom:6px;}
  .banner p{font-size:13px; opacity:.9;}
  .banner .b2{position:absolute; right:-10px; bottom:-22px; font-size:88px; opacity:.15;}
  .cats{display:flex; gap:8px; margin:12px 0 16px; flex-wrap:wrap;}
  .cats button{border:1px solid var(--line); background:#fff; padding:7px 16px; border-radius:16px; font-size:13px; cursor:pointer; color:var(--ink);}
  .cats button.on{background:var(--main); border-color:var(--main); color:#fff; font-weight:bold;}
  .goods{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
  .g{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; cursor:pointer; transition:.15s;}
  .g:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.07); border-color:var(--main);}
  .g .pic{height:96px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:42px; margin-bottom:10px;}
  .g .nm{font-size:13.5px; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:38px;}
  .g .row{display:flex; align-items:center; justify-content:space-between; gap:6px;}
  .g .price{color:var(--red); font-weight:bold; font-size:15px;}
  .g .price small{font-size:11px;}
  .g .add{border:0; background:var(--main); color:#fff; padding:5px 10px; border-radius:9px; font-size:12px; cursor:pointer; white-space:nowrap;}
  .g .add:hover{background:#1864AB;}
  .g .off{position:absolute;}
  .tip{text-align:center; color:var(--sub); font-size:13px; padding:30px 0;}

  /* ===== 购物车 / 下单 ===== */
  .panel{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; margin-top:14px;}
  .panel h2{font-size:17px; margin-bottom:14px;}
  .cart-line{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line);}
  .cart-line .pic{width:44px; height:44px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:22px; flex:none;}
  .cart-line .nm{flex:1; font-size:13.5px;}
  .cart-line .pr{color:var(--red); font-size:13.5px; width:60px; text-align:right;}
  .cart-line .del{border:0;background:none;font-size:15px;cursor:pointer;opacity:.55;flex:none;padding:4px;}
  .cart-line.soldout{opacity:.72;}
  .cart-line .so-tag{color:var(--red);font-size:11px;margin-top:3px;}
  .cart-line .so-q{font-size:11.5px;color:var(--red);white-space:nowrap;}
  .qty{display:flex; align-items:center; gap:2px;}
  .qty button{width:24px; height:24px; border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer; font-size:14px; color:var(--ink);}
  .qty button:hover{background:var(--main-l);}
  .qty b{min-width:28px; text-align:center; font-size:14px;}
  .qty input.qty-in{width:42px; text-align:center; font-size:14px; border:1px solid var(--line); border-radius:6px; outline:none; padding:2px 2px;}
  .dv-chip{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px;color:#495057;cursor:pointer;flex:1;max-width:130px;}
  .dv-chip.on{border-color:#4DABF7;color:#1C7ED6;background:#E7F5FF;font-weight:bold;}
  .sort-row{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-size:12px;}
  .sort-row .sr-t{color:var(--sub);flex:none;}
  .sort-row select{padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;background:#fff;color:var(--ink);outline:none;}
  .cart-ft{display:flex; align-items:center; justify-content:space-between; padding-top:14px;}
  .total b{color:var(--red); font-size:20px;}
  .btn{border:0; border-radius:12px; padding:11px 22px; font-size:14px; cursor:pointer; font-weight:bold;}
  .btn.g{background:var(--main); color:#fff;}
  .btn.g:hover{background:var(--main-d);}
  .btn.ghost{background:#fff; border:1px solid var(--line); color:var(--sub);}
  .btn.sm{padding:7px 14px; font-size:12.5px; border-radius:9px;}
  .form-row{margin-bottom:12px;}
  .form-row label{display:block; font-size:12.5px; color:var(--sub); margin-bottom:5px;}
  .form-row input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; outline:none;}
  .form-row input:focus{border-color:var(--main);}
  .done-ico{font-size:56px; text-align:center; margin:10px 0;}
  .done-note{text-align:center; color:var(--sub); font-size:13px; margin:8px 0 18px;}

  /* ===== 后台 ===== */
  .admin-head{display:flex; align-items:center; gap:10px; margin:16px 0 4px;}
  .admin-head .tag{background:#212529; color:#fff; font-size:11px; padding:3px 8px; border-radius:6px;}
  .admin-tabs{display:flex; gap:6px; border-bottom:2px solid var(--line); margin:10px 0 14px;}
  .admin-tabs button{border:0; background:transparent; padding:10px 16px; font-size:14px; color:var(--sub); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px;}
  .admin-tabs button.on{color:var(--main-d); font-weight:bold; border-bottom-color:var(--main);}
  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px;}
  .stat{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px;}
  .stat .t{font-size:12px; color:var(--sub);}
  .stat .v{font-size:22px; font-weight:bold; margin-top:4px;}
  .stat .v.g{color:var(--main-d);} .stat .v.o{color:var(--warn);}
  table{width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--line);}
  th,td{padding:11px 10px; font-size:13px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle;}
  th{background:#F8FAFB; color:var(--sub); font-weight:normal; font-size:12.5px; white-space:nowrap;}
  tr:last-child td{border-bottom:0;}
  td .mini-pic{width:34px; height:34px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; vertical-align:middle; margin-right:8px;}
  .pill{display:inline-block; font-size:11px; padding:3px 9px; border-radius:10px;}
  .pill.up{background:var(--main-l); color:var(--main-d);}
  .pill.down{background:#FFF0E6; color:var(--red);}
  .pill.wait{background:#FFF4D6; color:#B07800;}
  .pill.sent{background:#E7F5FF; color:#1C7ED6;}
  .pill.fin{background:var(--main-l); color:var(--main-d);}
  .op-btn{border:1px solid var(--line); background:#fff; padding:4px 10px; border-radius:8px; font-size:12px; cursor:pointer; color:var(--ink);}
  .op-btn:hover{border-color:var(--main); color:var(--main-d);}
  .op-btn.red:hover{border-color:var(--red); color:var(--red);}
  .pager{display:flex; gap:6px; justify-content:flex-end; margin-top:12px; font-size:13px; color:var(--sub); align-items:center;}
  .pager button{width:26px; height:26px; border:1px solid var(--line); background:#fff; border-radius:7px; cursor:pointer;}

  /* ===== 弹窗 / 轻提示 ===== */
  .mask{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:99;}
  .mask.show{display:flex;}
  .box{background:#fff; border-radius:16px; padding:20px; width:min(420px,92vw); max-height:86vh; overflow:auto; position:relative;}
  .box-x{position:absolute; top:10px; right:12px; width:30px; height:30px; border-radius:50%; border:0; background:#F1F3F5; color:#495057; font-size:15px; line-height:1; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center;}
  .box-x:hover{background:#FFE3E3; color:#E03131;}
  .box h3{font-size:16px; margin-bottom:14px;}
  .box .row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13px;}
  .box .row .k{color:var(--sub);}
  .box .btn-row{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
  .toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:#212529; color:#fff; padding:10px 18px; border-radius:10px; font-size:13px; display:none; z-index:120;}
  .toast.show{display:block; animation:fade .2s;}
  @keyframes fade{from{opacity:0; transform:translate(-50%,8px);}to{opacity:1;}}
  .foot{position:fixed; left:0; right:0; bottom:0; background:#E7F1FF; color:#1C5BA0; font-size:12px; text-align:center; padding:7px; border-top:1px solid #FFD8A8; z-index:60;}
  .hidden{display:none !important;}

  /* ===== 手机版（小屏幕自动切换） ===== */
  @media (max-width:640px){
    .wrap{padding:0 10px 80px;}
    /* —— 前台顶部：店名一行 + 搜索一行 + 购物车在店名右边 —— */
    .top-front{flex-wrap:wrap; gap:6px 10px; padding:9px 10px;}
    .top-front .logo{font-size:19px; order:1; flex:1;}
    .top-front .search{order:3; flex-basis:100%; max-width:none;}
    .top-front .search span{top:9px;}
    .top-front .search input{padding:9px 14px 9px 34px; font-size:14px;}
    .top-front .guest-bar{order:2;}
    .top-front .guest-bar a{padding:6px 10px; font-size:12px;}
    .top-front .nav{order:2; margin-left:auto;}
    .top-front .nav button{padding:6px 10px; font-size:14px;}
    .top-front .cart-badge{top:-1px; right:-4px;}
    /* —— 后台顶部：店名/回前台 + 三个功能钮换行 —— */
    .top-admin{flex-wrap:wrap; gap:4px 8px; padding:8px 10px;}
    .top-admin .logo{font-size:16px; order:1;}
    .top-admin .back{order:2; margin-left:auto; font-size:12px; padding:6px 10px;}
    .top-admin .nav{order:3; flex-basis:100%; margin-left:0; justify-content:flex-start; overflow-x:auto; gap:2px;}
    .top-admin .nav button{font-size:13.5px; padding:7px 12px; white-space:nowrap;}
    .banner{padding:18px 16px; margin:12px 0;}
    .banner h1{font-size:19px;}
    .banner p{font-size:12px;}
    .banner .b2{font-size:56px; bottom:-14px;}
    .goods{grid-template-columns:repeat(2,1fr); gap:9px;}
    .g{padding:9px;}
    .g .pic{height:92px; font-size:36px; margin-bottom:8px;}
    .g .nm{font-size:13px; height:36px;}
    .g .price{font-size:14px;}
    .cats{gap:6px;}
    .cats button{font-size:13px; padding:6px 13px;}
    .panel{padding:14px; margin-top:10px;}
    .cart-line{gap:8px;}
    .cart-line .pic{width:40px; height:40px;}
    .cart-line .pr{width:52px; font-size:13px;}
    .cart-ft{flex-direction:column; gap:10px; align-items:stretch;}
    .cart-ft .btn{width:100%;}
    .cart-ft .total{text-align:center;}
    .total b{font-size:18px;}
    .form-row input{font-size:15px;}
    .form-row select{font-size:14px; padding:9px 6px;}
    .box{width:94vw; padding:16px;}
    .stats{grid-template-columns:repeat(2,1fr); gap:8px;}
    .stat{padding:11px 12px;}
    .stat .v{font-size:19px;}
    th,td{padding:9px 8px; font-size:12.5px;}
    .chip{padding:7px 11px; font-size:12.5px;}
    .btn.sm{padding:8px 14px; font-size:13px;}
    /* 后台表格窄屏可左右滑 */
    .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
    .table-scroll table{min-width:540px;}
    .admin-tabs{gap:2px;}
    .admin-tabs button{font-size:13px; padding:9px 10px;}
  }
  /* 手机横屏与小平板额外放宽商品图 */
  @media (min-width:641px) and (max-width:900px){
    .goods{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  }