/* ==== from login-preview.html ==== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Noto Sans SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:#f5f5f5;color:#333;line-height:1.6}
a{color:inherit;text-decoration:none;transition:color .2s}
img{max-width:100%;display:block}
ul,ol{list-style:none}
:root{--c-red:#e10600;--c-text:#333;--c-muted:#888;--c-border:#e8e8e8;--c-white:#fff;--c-card:#fff;--radius:6px;--max-width:1200px}
.container{max-width:var(--max-width);margin:0 auto;padding:0 16px}

/* ===== Shop Header ===== */
.shop-header{background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.shop-header-inner{display:flex;align-items:center;justify-content:space-between;height:100px;padding:0 24px;gap:24px}
.shop-logo{display:flex;align-items:center;flex-shrink:0;cursor:pointer}
.shop-logo img{height:60px;width:auto}
.shop-search{flex:1;max-width:560px;display:flex;align-items:stretch;height:44px;border:2px solid var(--c-red);border-radius:22px;overflow:hidden}
.shop-search select{border:none;background:#fafafa;padding:0 12px;font-size:13px;color:var(--c-text);outline:none;border-right:1px solid var(--c-border);cursor:pointer;min-width:90px}
.shop-search input{flex:1;border:none;padding:0 16px;font-size:14px;outline:none;color:var(--c-text)}
.shop-search button{background:var(--c-red);color:#fff;border:none;padding:0 24px;font-size:15px;cursor:pointer;font-weight:600;transition:background .2s;min-width:80px}
.shop-search button:hover{background:#c40500}
.shop-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.shop-action{display:flex;flex-direction:column;align-items:center;cursor:pointer;position:relative;min-width:44px}
.shop-action .icon{font-size:22px;line-height:1;margin-bottom:2px}
.shop-action .label{font-size:11px;color:var(--c-muted)}
.shop-action:hover .label{color:var(--c-red)}
.shop-action .cart-badge{position:absolute;top:-4px;right:-4px;background:var(--c-red);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ===== Shop Category Nav ===== */
.shop-cat-nav{background:#fff;border-bottom:2px solid var(--c-red)}
.shop-cat-nav-inner{display:flex;align-items:center;height:52px;padding:0 24px}
.shop-cat-all{background:var(--c-red);color:#fff;padding:0 24px;height:100%;display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;cursor:pointer;margin-right:32px;position:relative}
.shop-cat-all:hover{background:#c40500}
.shop-cat-dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:20px;z-index:200;min-width:820px;border-radius:0 0 8px 8px;grid-template-columns:repeat(5,1fr);gap:20px}
.shop-cat-all:hover .shop-cat-dropdown{display:grid}
.cat-dropdown-group h5{font-size:13px;font-weight:700;color:var(--c-red);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--c-border)}
.cat-dropdown-group a{display:block;font-size:13px;color:var(--c-text);padding:5px 0;transition:color .2s;white-space:nowrap}
.cat-dropdown-group a:hover{color:var(--c-red);padding-left:4px}
.shop-cat-menu{display:flex;align-items:center;gap:0;height:100%;flex:1}
.shop-cat-menu li{height:100%;display:flex;align-items:center}
.shop-cat-menu li a{padding:0 22px;font-size:17px;font-weight:600;color:var(--c-text);height:100%;display:flex;align-items:center;transition:color .2s}
.shop-cat-menu li a:hover{color:var(--c-red)}
.shop-cat-menu li.active a{color:var(--c-red)}

/* ===== Login Page ===== */
.login-page{min-height:600px;display:flex;align-items:center;justify-content:center;padding:48px 16px;background:linear-gradient(135deg,#f5f5f5 0%,#fff0f0 100%)}
.login-wrapper{display:grid;grid-template-columns:1fr 1fr;max-width:900px;width:100%;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.08)}

/* Left Brand Panel */
.login-brand{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);color:#fff;padding:48px 40px;display:flex;flex-direction:column;justify-content:space-between}
.login-brand .brand-logo{margin-bottom:32px}
.login-brand .brand-text h2{font-size:26px;font-weight:800;margin-bottom:12px;line-height:1.3}
.login-brand .brand-text p{font-size:14px;opacity:.8;line-height:1.8;margin-bottom:32px}
.login-brand .brand-features{margin-top:auto}
.login-brand .brand-feature{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:14px;opacity:.9}
.login-brand .brand-feature .icon{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.login-brand .brand-foot{margin-top:24px;font-size:12px;opacity:.5}

/* Right Form Panel */
.login-form{padding:48px 40px;display:flex;flex-direction:column}
.login-form h3{font-size:24px;font-weight:700;color:var(--c-text);margin-bottom:8px}
.login-form .sub{font-size:14px;color:var(--c-muted);margin-bottom:32px}
.login-form .sub a{color:var(--c-red);font-weight:600}

.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:14px;font-weight:600;color:var(--c-text);margin-bottom:8px}
.form-group label .required{color:var(--c-red);margin-left:2px}
.form-input{width:100%;height:46px;border:1px solid var(--c-border);border-radius:var(--radius);padding:0 14px;font-size:14px;color:var(--c-text);outline:none;transition:border-color .2s;font-family:inherit}
.form-input:focus{border-color:var(--c-red);box-shadow:0 0 0 3px rgba(225,6,0,.08)}
.form-input::placeholder{color:#ccc}

/* Password with toggle */
.password-group{position:relative}
.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:18px;color:var(--c-muted);user-select:none}
.password-toggle:hover{color:var(--c-text)}

/* Login options row */
.login-options{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.login-options label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-muted);cursor:pointer}
.login-options input[type=checkbox]{width:16px;height:16px;accent-color:var(--c-red);cursor:pointer}
.login-options a{font-size:13px;color:var(--c-red)}

/* Submit */
.login-submit{width:100%;height:48px;background:var(--c-red);color:#fff;border:none;border-radius:var(--radius);font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:8px}
.login-submit:hover{background:#c40500;transform:translateY(-1px);box-shadow:0 4px 12px rgba(225,6,0,.3)}

/* Register link */
.register-link{text-align:center;margin-top:24px;font-size:14px;color:var(--c-muted)}
.register-link a{color:var(--c-red);font-weight:600}

/* Benefits info */
.login-benefits{margin-top:32px;padding:16px;background:#fff8e1;border-radius:var(--radius);border:1px solid #ffe0b2}
.login-benefits h4{font-size:13px;font-weight:700;color:#e65100;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.login-benefits ul{list-style:none;padding:0}
.login-benefits li{font-size:12px;color:#bf6f00;padding:3px 0;padding-left:16px;position:relative}
.login-benefits li::before{content:'★';position:absolute;left:0;color:#ff9800}

/* ===== Shop Footer ===== */
.shop-footer{background:#fff;border-top:1px solid var(--c-border);margin-top:0}
.shop-footer-top{padding:40px 0 24px;border-bottom:1px solid var(--c-border)}
.shop-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:32px}
.shop-footer-col h4{font-size:15px;font-weight:700;color:var(--c-text);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--c-border)}
.shop-footer-col a{display:block;font-size:13px;color:var(--c-muted);margin-bottom:8px;transition:color .2s}
.shop-footer-col a:hover{color:var(--c-red)}
.shop-footer-contact .contact-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-muted);margin-bottom:6px}
.shop-footer-follow{display:flex;gap:10px;margin-top:8px}
.shop-footer-follow a{width:36px;height:36px;border-radius:50%;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:0;transition:all .2s}
.shop-footer-follow a:hover{background:var(--c-red);color:#fff}
.shop-footer-brand p{font-size:13px;color:var(--c-muted);line-height:1.8;margin-bottom:12px}
.shop-footer-brand .footer-logo{height:44px;width:auto;margin-bottom:12px}
.shop-footer-middle{padding:20px 0;border-bottom:1px solid var(--c-border)}
.payment-methods{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.payment-methods span{font-size:13px;color:var(--c-muted);margin-right:8px}
.payment-methods .pm{padding:4px 12px;background:#f5f5f5;border-radius:4px;font-size:12px;color:#666;font-weight:600}
.shop-footer-bottom{padding:16px 0;text-align:center;font-size:12px;color:var(--c-muted);line-height:1.8}
.shop-footer-bottom a{color:var(--c-muted);margin:0 6px}
.shop-footer-bottom a:hover{color:var(--c-red)}

/* ===== Responsive ===== */
@media(max-width:900px){
  .shop-header-inner{height:64px;padding:0 12px;gap:8px}
  .shop-logo img{height:40px}
  .shop-search{display:none}
  .shop-cat-nav{display:none}
  .login-wrapper{grid-template-columns:1fr;max-width:420px}
  .login-brand{display:none}
  .login-form{padding:32px 24px}
  .shop-footer-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .shop-footer-brand{grid-column:span 2}
  .shop-footer-contact{grid-column:span 2}
}


/* ==== from register-preview.html ==== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Noto Sans SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:#f5f5f5;color:#333;line-height:1.6}
a{color:inherit;text-decoration:none;transition:color .2s}
img{max-width:100%;display:block}
ul,ol{list-style:none}
:root{--c-red:#e10600;--c-text:#333;--c-muted:#888;--c-border:#e8e8e8;--c-white:#fff;--c-card:#fff;--radius:6px;--max-width:1200px}
.container{max-width:var(--max-width);margin:0 auto;padding:0 16px}

/* ===== Shop Header ===== */
.shop-header{background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.shop-header-inner{display:flex;align-items:center;justify-content:space-between;height:100px;padding:0 24px;gap:24px}
.shop-logo{display:flex;align-items:center;flex-shrink:0;cursor:pointer}
.shop-logo img{height:60px;width:auto}
.shop-search{flex:1;max-width:560px;display:flex;align-items:stretch;height:44px;border:2px solid var(--c-red);border-radius:22px;overflow:hidden}
.shop-search select{border:none;background:#fafafa;padding:0 12px;font-size:13px;color:var(--c-text);outline:none;border-right:1px solid var(--c-border);cursor:pointer;min-width:90px}
.shop-search input{flex:1;border:none;padding:0 16px;font-size:14px;outline:none;color:var(--c-text)}
.shop-search button{background:var(--c-red);color:#fff;border:none;padding:0 24px;font-size:15px;cursor:pointer;font-weight:600;transition:background .2s;min-width:80px}
.shop-search button:hover{background:#c40500}
.shop-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.shop-action{display:flex;flex-direction:column;align-items:center;cursor:pointer;position:relative;min-width:44px}
.shop-action .icon{font-size:22px;line-height:1;margin-bottom:2px}
.shop-action .label{font-size:11px;color:var(--c-muted)}
.shop-action:hover .label{color:var(--c-red)}
.shop-action .cart-badge{position:absolute;top:-4px;right:-4px;background:var(--c-red);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ===== Shop Category Nav ===== */
.shop-cat-nav{background:#fff;border-bottom:2px solid var(--c-red)}
.shop-cat-nav-inner{display:flex;align-items:center;height:52px;padding:0 24px}
.shop-cat-all{background:var(--c-red);color:#fff;padding:0 24px;height:100%;display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;cursor:pointer;margin-right:32px;position:relative}
.shop-cat-all:hover{background:#c40500}
.shop-cat-dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:20px;z-index:200;min-width:820px;border-radius:0 0 8px 8px;grid-template-columns:repeat(5,1fr);gap:20px}
.shop-cat-all:hover .shop-cat-dropdown{display:grid}
.cat-dropdown-group h5{font-size:13px;font-weight:700;color:var(--c-red);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--c-border)}
.cat-dropdown-group a{display:block;font-size:13px;color:var(--c-text);padding:5px 0;transition:color .2s;white-space:nowrap}
.cat-dropdown-group a:hover{color:var(--c-red);padding-left:4px}
.shop-cat-menu{display:flex;align-items:center;gap:0;height:100%;flex:1}
.shop-cat-menu li{height:100%;display:flex;align-items:center}
.shop-cat-menu li a{padding:0 22px;font-size:17px;font-weight:600;color:var(--c-text);height:100%;display:flex;align-items:center;transition:color .2s}
.shop-cat-menu li a:hover{color:var(--c-red)}
.shop-cat-menu li.active a{color:var(--c-red)}

/* ===== Register Page ===== */
.register-page{min-height:600px;display:flex;align-items:center;justify-content:center;padding:48px 16px;background:linear-gradient(135deg,#f5f5f5 0%,#fff0f0 100%)}
.register-wrapper{display:grid;grid-template-columns:1fr 1fr;max-width:900px;width:100%;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.08)}

/* Left Brand Panel */
.register-brand{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);color:#fff;padding:48px 40px;display:flex;flex-direction:column;justify-content:space-between}
.register-brand .brand-logo{margin-bottom:32px}
.register-brand .brand-logo img{height:40px}
.register-brand .brand-text h2{font-size:26px;font-weight:800;margin-bottom:12px;line-height:1.3}
.register-brand .brand-text p{font-size:14px;opacity:.8;line-height:1.8;margin-bottom:32px}
.register-brand .brand-features{margin-top:auto}
.register-brand .brand-feature{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:14px;opacity:.9}
.register-brand .brand-feature .icon{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.register-brand .brand-foot{margin-top:24px;font-size:12px;opacity:.5}

/* Right Form Panel */
.register-form{padding:48px 40px;display:flex;flex-direction:column}
.register-form h3{font-size:24px;font-weight:700;color:var(--c-text);margin-bottom:8px}
.register-form .sub{font-size:14px;color:var(--c-muted);margin-bottom:32px}
.register-form .sub a{color:var(--c-red);font-weight:600}

.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:14px;font-weight:600;color:var(--c-text);margin-bottom:8px}
.form-group label .required{color:var(--c-red);margin-left:2px}
.form-group label .hint{font-weight:400;font-size:12px;color:var(--c-muted);margin-left:8px}
.form-input{width:100%;height:46px;border:1px solid var(--c-border);border-radius:var(--radius);padding:0 14px;font-size:14px;color:var(--c-text);outline:none;transition:border-color .2s;font-family:inherit}
.form-input:focus{border-color:var(--c-red);box-shadow:0 0 0 3px rgba(225,6,0,.08)}
.form-input::placeholder{color:#ccc}

/* Verification code input */
.code-group{display:flex;gap:10px}
.code-group .form-input{flex:1}
.code-btn{white-space:nowrap;padding:0 20px;height:46px;border:1px solid var(--c-red);background:#fff;color:var(--c-red);border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;min-width:120px}
.code-btn:hover{background:#fff5f5}
.code-btn:disabled{border-color:#ccc;color:#999;cursor:not-allowed;background:#f5f5f5}

/* Password with toggle */
.password-group{position:relative}
.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:18px;color:var(--c-muted);user-select:none}
.password-toggle:hover{color:var(--c-text)}

/* Password strength */
.password-strength{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px}
.password-strength .bars{display:flex;gap:4px;flex:1}
.password-strength .bar{height:4px;flex:1;background:#e0e0e0;border-radius:2px;transition:background .2s}
.password-strength .bar.weak{background:#f44336}
.password-strength .bar.medium{background:#ff9800}
.password-strength .bar.strong{background:#4caf50}
.password-strength .label{color:var(--c-muted);white-space:nowrap}

/* Checkbox */
.form-check{margin-bottom:20px}
.form-check label{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--c-muted);cursor:pointer}
.form-check input[type=checkbox]{margin-top:2px;width:16px;height:16px;accent-color:var(--c-red);cursor:pointer}
.form-check a{color:var(--c-red)}

/* Submit */
.register-submit{width:100%;height:48px;background:var(--c-red);color:#fff;border:none;border-radius:var(--radius);font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:8px}
.register-submit:hover{background:#c40500;transform:translateY(-1px);box-shadow:0 4px 12px rgba(225,6,0,.3)}
.register-submit:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}

/* Divider */
.register-divider{display:flex;align-items:center;gap:16px;margin:24px 0;text-align:center}
.register-divider::before,.register-divider::after{content:'';flex:1;height:1px;background:var(--c-border)}
.register-divider span{font-size:12px;color:var(--c-muted)}

/* Social login */
.social-login{display:flex;gap:12px}
.social-btn{flex:1;height:44px;border:1px solid var(--c-border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;cursor:pointer;transition:all .2s;background:#fff}
.social-btn:hover{border-color:var(--c-red);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.social-btn .icon{font-size:20px}

/* Benefits info */
.register-benefits{margin-top:32px;padding:16px;background:#fff8e1;border-radius:var(--radius);border:1px solid #ffe0b2}
.register-benefits h4{font-size:13px;font-weight:700;color:#e65100;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.register-benefits ul{list-style:none;padding:0}
.register-benefits li{font-size:12px;color:#bf6f00;padding:3px 0;padding-left:16px;position:relative}
.register-benefits li::before{content:'★';position:absolute;left:0;color:#ff9800}

/* Email tip */
.email-tip{font-size:12px;color:var(--c-muted);margin-top:6px;line-height:1.5}
.email-tip .important{color:#e65100}

/* ===== Shop Footer ===== */
.shop-footer{background:#fff;border-top:1px solid var(--c-border);margin-top:0}
.shop-footer-top{padding:40px 0 24px;border-bottom:1px solid var(--c-border)}
.shop-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:32px}
.shop-footer-col h4{font-size:15px;font-weight:700;color:var(--c-text);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--c-border)}
.shop-footer-col a{display:block;font-size:13px;color:var(--c-muted);margin-bottom:8px;transition:color .2s}
.shop-footer-col a:hover{color:var(--c-red)}
.shop-footer-contact .contact-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-muted);margin-bottom:6px}
.shop-footer-follow{display:flex;gap:10px;margin-top:8px}
.shop-footer-follow a{width:36px;height:36px;border-radius:50%;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:0;transition:all .2s}
.shop-footer-follow a:hover{background:var(--c-red);color:#fff}
.shop-footer-brand p{font-size:13px;color:var(--c-muted);line-height:1.8;margin-bottom:12px}
.shop-footer-brand .footer-logo{height:44px;width:auto;margin-bottom:12px}
.shop-footer-middle{padding:20px 0;border-bottom:1px solid var(--c-border)}
.payment-methods{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.payment-methods span{font-size:13px;color:var(--c-muted);margin-right:8px}
.payment-methods .pm{padding:4px 12px;background:#f5f5f5;border-radius:4px;font-size:12px;color:#666;font-weight:600}
.shop-footer-bottom{padding:16px 0;text-align:center;font-size:12px;color:var(--c-muted);line-height:1.8}
.shop-footer-bottom a{color:var(--c-muted);margin:0 6px}
.shop-footer-bottom a:hover{color:var(--c-red)}

/* ===== Responsive ===== */
@media(max-width:900px){
  .shop-header-inner{height:64px;padding:0 12px;gap:8px}
  .shop-logo img{height:40px}
  .shop-search{display:none}
  .shop-cat-nav{display:none}
  .register-wrapper{grid-template-columns:1fr;max-width:420px}
  .register-brand{display:none}
  .register-form{padding:32px 24px}
  .shop-footer-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .shop-footer-brand{grid-column:span 2}
  .shop-footer-contact{grid-column:span 2}
}


/* ==== from member-preview.html ==== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Noto Sans SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:#f5f5f5;color:#333;line-height:1.6}
a{color:inherit;text-decoration:none;transition:color .2s}
img{max-width:100%;display:block}
ul,ol{list-style:none}
:root{--c-red:#e10600;--c-text:#333;--c-muted:#888;--c-border:#e8e8e8;--c-white:#fff;--c-card:#fff;--radius:6px;--max-width:1200px}
.container{max-width:var(--max-width);margin:0 auto;padding:0 16px}

/* ===== Shop Header ===== */
.shop-header{background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.shop-header-inner{display:flex;align-items:center;justify-content:space-between;height:100px;padding:0 24px;gap:24px}
.shop-logo{display:flex;align-items:center;flex-shrink:0;cursor:pointer}
.shop-logo img{height:60px;width:auto}
.shop-search{flex:1;max-width:560px;display:flex;align-items:stretch;height:44px;border:2px solid var(--c-red);border-radius:22px;overflow:hidden}
.shop-search select{border:none;background:#fafafa;padding:0 12px;font-size:13px;color:var(--c-text);outline:none;border-right:1px solid var(--c-border);cursor:pointer;min-width:90px}
.shop-search input{flex:1;border:none;padding:0 16px;font-size:14px;outline:none;color:var(--c-text)}
.shop-search button{background:var(--c-red);color:#fff;border:none;padding:0 24px;font-size:15px;cursor:pointer;font-weight:600;transition:background .2s;min-width:80px}
.shop-search button:hover{background:#c40500}
.shop-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.shop-action{display:flex;flex-direction:column;align-items:center;cursor:pointer;position:relative;min-width:44px}
.shop-action .icon{font-size:22px;line-height:1;margin-bottom:2px}
.shop-action .label{font-size:11px;color:var(--c-muted)}
.shop-action:hover .label{color:var(--c-red)}
.shop-action .cart-badge{position:absolute;top:-4px;right:-4px;background:var(--c-red);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ===== Shop Category Nav ===== */
.shop-cat-nav{background:#fff;border-bottom:2px solid var(--c-red)}
.shop-cat-nav-inner{display:flex;align-items:center;height:52px;padding:0 24px}
.shop-cat-all{background:var(--c-red);color:#fff;padding:0 24px;height:100%;display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;cursor:pointer;margin-right:32px;position:relative}
.shop-cat-all:hover{background:#c40500}
.shop-cat-dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:20px;z-index:200;min-width:820px;border-radius:0 0 8px 8px;grid-template-columns:repeat(5,1fr);gap:20px}
.shop-cat-all:hover .shop-cat-dropdown{display:grid}
.cat-dropdown-group h5{font-size:13px;font-weight:700;color:var(--c-red);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--c-border)}
.cat-dropdown-group a{display:block;font-size:13px;color:var(--c-text);padding:5px 0;transition:color .2s;white-space:nowrap}
.cat-dropdown-group a:hover{color:var(--c-red);padding-left:4px}
.shop-cat-menu{display:flex;align-items:center;gap:0;height:100%;flex:1}
.shop-cat-menu li{height:100%;display:flex;align-items:center}
.shop-cat-menu li a{padding:0 22px;font-size:17px;font-weight:600;color:var(--c-text);height:100%;display:flex;align-items:center;transition:color .2s}
.shop-cat-menu li a:hover{color:var(--c-red)}

/* ===== Member Banner ===== */
.member-banner{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);padding:40px 0}
.member-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:32px}
.member-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--c-red),#8b0000);display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;font-weight:700;flex-shrink:0}
.member-info{flex:1;color:#fff}
.member-info .name{font-size:24px;font-weight:700;margin-bottom:4px}
.member-info .meta{display:flex;gap:24px;font-size:13px;opacity:.85}
.member-info .meta span{display:flex;align-items:center;gap:4px}
.member-stats{display:flex;gap:32px}
.member-stat{text-align:center;color:#fff}
.member-stat .num{font-size:28px;font-weight:800;color:#fff}
.member-stat .label{font-size:12px;opacity:.7;margin-top:2px}

/* ===== Member Layout ===== */
.member-layout{display:flex;gap:24px;padding:24px 0;align-items:flex-start}
.member-sidebar{width:200px;flex-shrink:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);position:sticky;top:120px}
.member-sidebar ul{list-style:none}
.member-sidebar li{border-bottom:1px solid var(--c-border)}
.member-sidebar li:last-child{border-bottom:none}
.member-sidebar li a{display:flex;align-items:center;gap:10px;padding:14px 20px;font-size:15px;color:var(--c-text);transition:all .2s}
.member-sidebar li a:hover{background:#fef0f0;color:var(--c-red)}
.member-sidebar li.active a{background:#fef0f0;color:var(--c-red);font-weight:600;border-left:3px solid var(--c-red)}

.member-content{flex:1;min-width:0}

/* ===== Overview Cards ===== */
.overview-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.overview-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.06);cursor:pointer;transition:transform .2s,box-shadow .2s}
.overview-card:hover{transform:translateY(-4px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.overview-card .card-icon{font-size:28px;margin-bottom:8px}
.overview-card .card-num{font-size:24px;font-weight:800;color:var(--c-red)}
.overview-card .card-label{font-size:13px;color:var(--c-muted);margin-top:2px}

/* ===== Section Box ===== */
.section-box{background:#fff;border-radius:var(--radius);padding:24px;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.section-box-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--c-border)}
.section-box-head h3{font-size:18px;font-weight:700}
.section-box-head a{font-size:13px;color:var(--c-red)}

/* ===== Order Tabs ===== */
.order-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid var(--c-border)}
.order-tabs li{padding:10px 24px;font-size:15px;cursor:pointer;color:var(--c-muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s}
.order-tabs li:hover{color:var(--c-text)}
.order-tabs li.active{color:var(--c-red);border-bottom-color:var(--c-red);font-weight:600}

/* ===== Order Item ===== */
.order-item{border:1px solid var(--c-border);border-radius:var(--radius);margin-bottom:16px;overflow:hidden}
.order-item-head{background:#fafafa;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--c-muted)}
.order-item-head .left{display:flex;gap:24px;align-items:center}
.order-item-head .order-no{font-weight:600;color:var(--c-text)}
.order-item-body{padding:16px 20px;display:flex;align-items:center;gap:16px}
.order-item-body img,.order-item-body .od-img{width:80px;height:80px;border-radius:6px;object-fit:cover;flex-shrink:0;background:linear-gradient(135deg,#e10600,#8b0000);display:flex;align-items:center;justify-content:center;font-size:32px;color:rgba(255,255,255,.3)}
.order-item-info{flex:1;min-width:0}
.order-item-info .name{font-size:15px;font-weight:600;margin-bottom:4px}
.order-item-info .attrs{font-size:13px;color:var(--c-muted)}
.order-item-info .tags{display:flex;gap:6px;margin-top:4px}
.order-item-info .tags span{font-size:11px;padding:2px 8px;border-radius:10px;background:#f0f0f0;color:var(--c-muted)}
.order-item-info .tags span.stock{background:#e8f5e9;color:#2e7d32}
.order-item-info .tags span.presale{background:#fff3e0;color:#e65100}
.order-item-price{text-align:right;flex-shrink:0}
.order-item-price .price{font-size:16px;font-weight:700;color:var(--c-red)}
.order-item-price .qty{font-size:13px;color:var(--c-muted);margin-top:2px}
.order-item-price .points{font-size:12px;color:#e65100;margin-top:2px}
.order-item-foot{padding:12px 20px;border-top:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between}
.order-item-foot .total{font-size:15px}
.order-item-foot .total strong{color:var(--c-red);font-size:18px}
.order-item-foot .actions{display:flex;gap:8px}
.order-item-foot .actions button{padding:6px 16px;font-size:13px;border-radius:20px;cursor:pointer;border:1px solid var(--c-border);background:#fff;color:var(--c-text);transition:all .2s}
.order-item-foot .actions button:hover{border-color:var(--c-red);color:var(--c-red)}
.order-item-foot .actions button.primary{background:var(--c-red);color:#fff;border-color:var(--c-red)}
.order-item-foot .actions button.primary:hover{background:#c40500}
.order-status{font-weight:600;font-size:14px}
.order-status.pending{color:#e65100}
.order-status.shipping{color:#1565c0}
.order-status.delivered{color:#2e7d32}
.order-status.done{color:var(--c-muted)}
.order-status.cancelled{color:#999}

/* ===== Points Table ===== */
.points-summary{display:flex;align-items:center;gap:32px;background:linear-gradient(135deg,#fff8f0,#fff);border:1px solid #ffe0b2;border-radius:var(--radius);padding:20px 24px;margin-bottom:20px}
.points-summary .ps-main{text-align:center}
.points-summary .ps-main .num{font-size:36px;font-weight:800;color:var(--c-red)}
.points-summary .ps-main .label{font-size:13px;color:var(--c-muted)}
.points-summary .ps-detail{flex:1;font-size:13px;color:var(--c-muted);line-height:2}
.points-summary .ps-detail strong{color:var(--c-text)}
.points-table{width:100%;border-collapse:collapse}
.points-table th{text-align:left;padding:10px 12px;font-size:13px;color:var(--c-muted);border-bottom:2px solid var(--c-border);font-weight:600}
.points-table td{padding:12px;font-size:14px;border-bottom:1px solid var(--c-border)}
.points-table tr:last-child td{border-bottom:none}
.points-table .type-earn{color:#2e7d32;font-weight:600}
.points-table .type-use{color:var(--c-red);font-weight:600}
.points-table .type-expire{color:#999;font-weight:600}
.points-rules{margin-top:20px;padding:16px;background:#f9f9f9;border-radius:6px;font-size:13px;color:var(--c-muted);line-height:2}
.points-rules strong{color:var(--c-text)}

/* ===== Favorites Grid ===== */
.fav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fav-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s}
.fav-card:hover{transform:translateY(-4px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.fav-card .fav-img{height:180px;display:flex;align-items:center;justify-content:center;font-size:48px;color:rgba(255,255,255,.3);position:relative}
.fav-card .fav-img .remove-fav{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:background .2s}
.fav-card .fav-img .remove-fav:hover{background:var(--c-red)}
.fav-card .fav-info{padding:12px}
.fav-card .fav-brand{font-size:12px;color:var(--c-muted);margin-bottom:2px}
.fav-card .fav-name{font-size:14px;font-weight:600;margin-bottom:8px;line-height:1.4}
.fav-card .fav-price{display:flex;align-items:center;justify-content:space-between}
.fav-card .fav-price .current{font-size:16px;font-weight:700;color:var(--c-red)}
.fav-card .fav-price .original{font-size:12px;color:var(--c-muted);text-decoration:line-through}
.fav-card .fav-price .add-cart{font-size:12px;padding:4px 12px;background:var(--c-red);color:#fff;border-radius:20px;cursor:pointer}

/* ===== Address ===== */
.address-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.address-card{border:1px solid var(--c-border);border-radius:var(--radius);padding:16px;position:relative;transition:border-color .2s}
.address-card:hover{border-color:var(--c-red)}
.address-card.default{border-color:var(--c-red)}
.address-card .addr-tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;background:var(--c-red);color:#fff;margin-bottom:8px}
.address-card .addr-name{font-size:15px;font-weight:600;margin-bottom:4px}
.address-card .addr-phone{font-size:13px;color:var(--c-muted);margin-bottom:6px}
.address-card .addr-detail{font-size:13px;color:var(--c-text);line-height:1.6}
.address-card .addr-actions{position:absolute;top:12px;right:12px;display:flex;gap:8px}
.address-card .addr-actions a{font-size:12px;color:var(--c-muted);cursor:pointer}
.address-card .addr-actions a:hover{color:var(--c-red)}
.address-add{border:2px dashed var(--c-border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--c-muted);cursor:pointer;transition:all .2s;min-height:140px}
.address-add:hover{border-color:var(--c-red);color:var(--c-red)}

/* ===== Settings ===== */
.settings-form{max-width:500px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;font-size:14px;border:1px solid var(--c-border);border-radius:4px;outline:none;transition:border-color .2s}
.form-group input:focus,.form-group select:focus{border-color:var(--c-red)}
.form-group .hint{font-size:12px;color:var(--c-muted);margin-top:4px}
.form-actions{display:flex;gap:12px;margin-top:24px}
.form-actions button{padding:10px 32px;font-size:15px;border-radius:4px;cursor:pointer;border:none;transition:all .2s}
.form-actions .btn-save{background:var(--c-red);color:#fff}
.form-actions .btn-save:hover{background:#c40500}
.form-actions .btn-cancel{background:#f0f0f0;color:var(--c-text)}
.form-actions .btn-cancel:hover{background:#e0e0e0}

/* ===== Benefits & Footer ===== */
.benefits-section{background:#fff;padding:32px 0;border-top:1px solid var(--c-border)}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.benefit-item{display:flex;align-items:center;gap:12px}
.benefit-icon{font-size:28px;flex-shrink:0}
.benefit-text h4{font-size:15px;font-weight:600;margin-bottom:2px}
.benefit-text p{font-size:12px;color:var(--c-muted);line-height:1.5}

/* ===== Hidden panels ===== */
.panel{display:none}
.panel.active{display:block}

/* ===== Responsive ===== */
@media(max-width:960px){
  .member-layout{flex-direction:column}
  .member-sidebar{width:100%;position:static}
  .member-sidebar ul{display:flex;overflow-x:auto}
  .member-sidebar li{border-bottom:none;border-right:1px solid var(--c-border);flex-shrink:0}
  .overview-cards{grid-template-columns:repeat(2,1fr)}
  .fav-grid{grid-template-columns:repeat(2,1fr)}
  .address-list{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .shop-footer-grid{grid-template-columns:repeat(2,1fr)}
  .member-banner-inner{flex-direction:column;text-align:center}
  .member-stats{justify-content:center}
  .shop-search{display:none}
}

/* ===== 注册两步流程（2026-09-04：第一步仅邮箱验证，验证通过后第二步设置密码） ===== */
.reg-steps{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.reg-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-muted);font-weight:600;white-space:nowrap}
.reg-step .num{width:24px;height:24px;border-radius:50%;border:2px solid var(--c-border);display:flex;align-items:center;justify-content:center;font-size:12px;background:#fff;color:var(--c-muted);flex-shrink:0;transition:all .2s}
.reg-step.active{color:var(--c-text)}
.reg-step.active .num{background:var(--c-red);border-color:var(--c-red);color:#fff}
.reg-step.done .num{background:#4caf50;border-color:#4caf50;color:#fff}
.reg-step-line{flex:1;height:2px;background:var(--c-border);min-width:20px}
.step-back{display:inline-block;font-size:13px;color:var(--c-muted);margin-bottom:16px;cursor:pointer}
.step-back:hover{color:var(--c-red)}