/* layout.css — 三端骨架：桌面侧栏、顶栏、左侧抽屉、主内容区 */
  .layout{display:flex;min-height:100vh}

  .sidebar{
    width:236px;flex:0 0 236px;background:#fff;border-right:1px solid #e8edf6;
    padding:20px 14px;position:sticky;top:0;height:100vh;
    display:flex;flex-direction:column;gap:16px;overflow-y:auto;
  }
  .brand{
    display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;
    letter-spacing:.3px;padding:4px 8px 14px;border-bottom:1px dashed #eef2f8;
  }
  .brand-logo{font-size:22px}

  .side-title{
    font-size:12px;font-weight:700;color:#64748b;letter-spacing:1px;
    padding:0 10px;margin-bottom:8px;text-transform:uppercase;
  }
  .side-nav{display:flex;flex-direction:column;gap:4px}
  .side-item{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
    font-size:13.5px;color:#475569;cursor:pointer;transition:.18s;font-weight:500;
    user-select:none;width:100%;text-align:left;border:none;background:transparent;
  }
  .side-item:hover{background:#f1f5fb;color:#2563eb}
  .side-item.active{background:#eff6ff;color:#2563eb;font-weight:700}
  .side-item .si-icon{font-size:16px;line-height:1}
  .side-item .si-count{
    margin-left:auto;font-size:12px;color:#64748b;background:#f1f5fb;
    border-radius:999px;padding:1px 8px;font-weight:600;
  }
  .side-item.active .si-count{background:#dbeafe;color:#2563eb}
  /* 最新上架的 NEW 小标 */
  .si-new{
    margin-left:auto;font-size:10px;font-weight:800;color:#fff;letter-spacing:.6px;
    background:linear-gradient(135deg,#ef4444,#f97316);
    border-radius:999px;padding:1px 7px;
  }

  .side-vip{
    margin-top:auto;border-radius:16px;padding:16px;transition:.25s;
    background:linear-gradient(140deg,#fffbeb,#fef3c7);border:1px solid #fde68a;
  }
  .side-vip.active{background:linear-gradient(140deg,#ecfdf5,#d1fae5);border-color:#a7f3d0}
  .sv-title{font-size:13.5px;font-weight:800;color:#92400e}
  .side-vip.active .sv-title{color:#065f46}
  .sv-desc{font-size:12px;color:#b45309;margin-top:4px;line-height:1.6}
  .side-vip.active .sv-desc{color:#047857}
  .sv-btn{
    width:100%;margin-top:12px;padding:9px;border:none;border-radius:10px;cursor:pointer;
    font-size:12.5px;font-weight:700;color:#7c2d12;transition:.2s;
    background:linear-gradient(135deg,#fde68a,#fbbf24);
    box-shadow:0 8px 18px -10px rgba(245,158,11,.9);
  }
  .sv-btn:hover{transform:translateY(-1px)}
  .side-vip.active .sv-btn{background:#fff;color:#047857;border:1px solid #a7f3d0;box-shadow:none}

  .side-user{
    display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;
    cursor:pointer;transition:.18s;border:1px solid transparent;
    background:transparent;width:100%;text-align:left;
  }
  .side-user:hover{background:#f8fafc;border-color:#eef2f8}
  .avatar-mini{
    width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff;font-weight:700;font-size:14px;
    flex:0 0 auto;
  }
  .su-main{min-width:0;display:flex;flex-direction:column}
  .su-main b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .su-main span{font-size:12px;color:#64748b}

  .main-wrap{flex:1;min-width:0;padding:26px 0 50px}
  /* ===== 平台版：顶栏 / 左侧抽屉 ===== */
  .topbar{
    display:none;align-items:center;gap:10px;height:56px;padding:0 16px;
    position:sticky;top:0;z-index:80;
    background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
    border-bottom:1px solid #e8edf6;
  }
  .tb-brand{font-weight:800;font-size:15px;display:flex;align-items:center;gap:7px;white-space:nowrap}
  .tb-spacer{flex:1}
  .icon-btn{
    width:36px;height:36px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;
    display:grid;place-items:center;font-size:17px;color:#334155;cursor:pointer;
    transition:.18s;flex:0 0 auto;
  }
  .icon-btn:hover{background:#f1f5fb;color:#2563eb;border-color:#93c5fd}
  .drawer-mask{
    position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:110;
    opacity:0;visibility:hidden;
    transition:opacity .25s ease, visibility 0s linear .25s;
  }
  .drawer-mask.show{opacity:1;visibility:visible;transition:opacity .25s ease, visibility 0s}
  .side-head{display:flex;align-items:center;gap:8px;border-bottom:1px dashed #eef2f8}
  .side-head .brand{flex:1;min-width:0;border-bottom:none;padding-bottom:14px}
  .drawer-close{
    display:none;width:30px;height:30px;border-radius:9px;border:1px solid #e2e8f0;
    background:#fff;color:#64748b;cursor:pointer;place-items:center;font-size:14px;
    flex:0 0 auto;margin-bottom:12px;
  }
  .drawer-close:hover{background:#f1f5fb;color:#2563eb}
  .side-block + .side-block{margin-top:2px}
  .mobile-actions{display:none}
  .ma-btn{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:9px 12px;border-radius:11px;border:1px solid #e2e8f0;background:#fff;
    color:#334155;font-size:13px;font-weight:600;cursor:pointer;transition:.18s;
  }
  .ma-btn:hover{border-color:#93c5fd;color:#2563eb;background:#f8fbff}
  .ma-btn.vip{border-color:#fde68a;background:#fffbeb;color:#92400e}
  .ma-btn.vip:hover{background:#fef3c7;border-color:#fbbf24;color:#92400e}
  .sidebar::after{
    content:'';position:absolute;right:0;top:0;bottom:0;width:32px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),#fff);opacity:0;transition:opacity .2s;
  }
  .sidebar.can-scroll::after{opacity:1}