/* 优选商城 - 前台样式 */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:#f5f5f5;color:#333;min-height:100vh;display:flex;flex-direction:column}

/* ===== Header ===== */
.header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.header-inner{max-width:1200px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:20px;font-weight:700;color:#e74c3c;text-decoration:none;display:flex;align-items:center;gap:6px}
.logo-icon{font-size:22px}
.header-nav{display:flex;align-items:center;gap:12px}
.cart-btn{position:relative;background:none;border:1px solid #ddd;border-radius:20px;padding:6px 14px;font-size:18px;cursor:pointer;color:#e74c3c;transition:border-color .2s}
.cart-btn:hover{border-color:#e74c3c}
.cart-badge{position:absolute;top:-6px;right:-6px;background:#e74c3c;color:#fff;font-size:11px;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;padding:0 4px}

/* ===== Categories Bar ===== */
.categories-bar{background:#fff;border-bottom:1px solid #f0f0f0;padding:10px 0}
.categories-list{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;gap:8px;flex-wrap:wrap}
.cat-tag{padding:6px 16px;border-radius:20px;font-size:13px;cursor:pointer;background:#f5f5f5;color:#666;transition:all .2s;white-space:nowrap;user-select:none}
.cat-tag:hover{background:#fde8e8;color:#e74c3c}
.cat-tag.active{background:#e74c3c;color:#fff}

/* ===== Container & Product Grid ===== */
.container{flex:1;max-width:1200px;margin:0 auto;padding:20px 16px;width:100%}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.loading{grid-column:1/-1;text-align:center;padding:60px 20px;color:#999;font-size:15px}
.product-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06);transition:transform .2s,box-shadow .2s;cursor:pointer}
.product-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.1)}
.product-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.product-info{padding:12px}
.product-name{font-size:14px;font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-price{font-size:18px;font-weight:700;color:#e74c3c;margin-top:6px}

/* ===== Cart Sidebar ===== */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.cart-overlay.open{opacity:1;visibility:visible}
.cart-sidebar{position:fixed;top:0;right:0;width:380px;max-width:90vw;height:100vh;background:#fff;z-index:10000;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column}
.cart-overlay.open .cart-sidebar{transform:translateX(0)}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #eee}
.cart-header h3{font-size:18px;margin:0}
.cart-close{background:none;border:none;font-size:22px;cursor:pointer;color:#999;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}
.cart-close:hover{background:#f0f0f0}
.cart-items{flex:1;overflow-y:auto;padding:12px 20px}
.cart-empty{text-align:center;padding:40px 0 8px;font-size:15px;color:#999}
.cart-empty-hint{text-align:center;font-size:13px;color:#bbb;padding-bottom:20px}
.cart-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #f5f5f5;position:relative}
.cart-item-img{width:72px;height:72px;border-radius:8px;object-fit:cover;flex-shrink:0}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item-spec{font-size:12px;color:#999;margin-top:2px}
.cart-item-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.cart-item-price{font-size:15px;font-weight:600;color:#e74c3c}
.cart-item-qty{display:flex;align-items:center;gap:8px}
.cart-item-qty button{width:24px;height:24px;border:1px solid #ddd;border-radius:4px;background:#f5f5f5;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .15s}
.cart-item-qty button:hover{background:#e74c3c;color:#fff;border-color:#e74c3c}
.cart-item-qty span{font-size:14px;min-width:20px;text-align:center}
.cart-item-remove{position:absolute;top:12px;right:0;background:none;border:none;color:#ccc;font-size:16px;cursor:pointer;padding:4px;transition:color .15s}
.cart-item-remove:hover{color:#e74c3c}
.cart-footer{padding:16px 20px;border-top:1px solid #eee;background:#fff}
.cart-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:15px}
.cart-total-price{font-size:20px;font-weight:700;color:#e74c3c}
.cart-checkout{width:100%;padding:12px;background:#e74c3c;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}
.cart-checkout:hover{background:#c0392b}

/* ===== Product Modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-content{background:#fff;border-radius:16px;width:400px;max-width:90vw;max-height:90vh;overflow-y:auto;padding:24px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.2)}
.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:20px;cursor:pointer;color:#999;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}
.modal-close:hover{background:#f0f0f0}
.modal-product-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;margin-bottom:16px;background:#f5f5f5}
.modal-product-name{font-size:18px;font-weight:600;margin-bottom:8px}
.modal-product-price{font-size:22px;font-weight:700;color:#e74c3c;margin-bottom:20px}
.modal-spec-section{margin-bottom:14px}
.modal-spec-label{font-size:13px;color:#999;margin-bottom:6px}
.modal-spec-options{display:flex;gap:8px;flex-wrap:wrap}
.modal-spec-option{padding:6px 16px;border:1px solid #ddd;border-radius:6px;font-size:14px;background:#fff;cursor:pointer;transition:all .15s}
.modal-spec-option:hover{border-color:#e74c3c;color:#e74c3c}
.modal-spec-option.active{background:#e74c3c;color:#fff;border-color:#e74c3c}
.modal-qty{display:flex;align-items:center;gap:16px;margin:20px 0}
.modal-qty button{width:32px;height:32px;border:1px solid #ddd;border-radius:6px;background:#f5f5f5;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.modal-qty button:hover{background:#e74c3c;color:#fff;border-color:#e74c3c}
.modal-qty span{font-size:16px;font-weight:600;min-width:24px;text-align:center}
.modal-add-cart{width:100%;padding:12px;background:#e74c3c;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}
.modal-add-cart:hover{background:#c0392b}

/* ===== Toast ===== */
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:#fff;padding:10px 24px;border-radius:20px;font-size:14px;z-index:99999;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}

/* ===== Footer ===== */
.footer{background:#fff;border-top:1px solid #eee;padding:20px 16px;text-align:center;margin-top:auto}
.footer-links{display:flex;justify-content:center;gap:24px;margin-bottom:10px}
.footer-links a{color:#666;font-size:13px;text-decoration:none;transition:color .2s}
.footer-links a:hover{color:#e74c3c}
.footer-copy{color:#bbb;font-size:12px}


/* ===== Language Switcher ===== */
.lang-switcher{position:relative;display:inline-block}
.lang-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #ddd;border-radius:20px;background:#fff;font-size:13px;cursor:pointer;color:#333;transition:all .2s;white-space:nowrap}
.lang-btn:hover{border-color:#e74c3c;color:#e74c3c}
.lang-flag{font-size:16px;line-height:1}
.lang-name{font-size:13px}
.lang-arrow{font-size:10px;color:#999;transition:transform .2s}
.lang-switcher.open .lang-arrow{transform:rotate(180deg)}
.lang-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid #eee;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.12);min-width:180px;z-index:500;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .2s;max-height:320px;overflow-y:auto}
.lang-switcher.open .lang-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.lang-option{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;font-size:14px;color:#333;transition:background .15s}
.lang-option:first-child{border-radius:10px 10px 0 0}
.lang-option:last-child{border-radius:0 0 10px 10px}
.lang-option:hover{background:#fde8e8;color:#e74c3c}
.lang-option.active{background:#fff5f5;color:#e74c3c;font-weight:600}
.lang-option .lang-flag{font-size:18px}
@media(max-width:768px){
  .lang-btn{padding:4px 10px;font-size:12px}
  .lang-name{display:none}
  .lang-dropdown{right:-20px}
}

/* ===== Responsive ===== */
@media(max-width:768px){
  .header-inner{padding:0 12px;height:50px}
  .logo{font-size:18px}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .product-card{border-radius:8px}
  .product-info{padding:8px}
  .product-name{font-size:13px}
  .product-price{font-size:16px}
  .cart-sidebar{width:100vw;max-width:100vw}
  .modal-content{width:92vw;padding:20px;border-radius:12px}
  .categories-list{padding:0 12px}
  .cat-tag{padding:5px 12px;font-size:12px}
}

/* ===== User Auth & Dropdown ===== */
.user-auth-box{display:flex;align-items:center;gap:8px}
.user-auth-btn{padding:6px 14px;border:1px solid #ddd;border-radius:20px;background:#fff;font-size:13px;cursor:pointer;color:#333;transition:all .2s}
.user-auth-btn:hover{border-color:#e74c3c;color:#e74c3c}
.user-auth-btn-primary{background:#e74c3c;color:#fff;border-color:#e74c3c}
.user-auth-btn-primary:hover{background:#c0392b;border-color:#c0392b}
.user-avatar-wrap{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #ddd;border-radius:20px;background:#fff;cursor:pointer;transition:all .2s;user-select:none;position:relative}
.user-avatar-wrap:hover{border-color:#e74c3c}
.avatar-circle{width:28px;height:28px;border-radius:50%;background:#e74c3c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.avatar-label{font-size:13px;color:#333;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-arrow{font-size:10px;color:#999;transition:transform .2s}
.user-avatar-wrap.open .avatar-arrow{transform:rotate(180deg)}
.user-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid #eee;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.12);min-width:180px;z-index:500;display:none;overflow:hidden}
.user-dropdown.show{display:block}
.dropdown-item{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px;color:#333;text-decoration:none;transition:background .15s;cursor:pointer;border-bottom:1px solid #f5f5f5}
.dropdown-item:last-child{border-bottom:none}
.dropdown-item:hover{background:#fde8e8;color:#e74c3c}
.dropdown-divider{height:1px;background:#f0f0f0;margin:4px 0}
.dropdown-danger{color:#e74c3c}
.dropdown-danger:hover{background:#fff0f0}

/* ===== Auth Modal ===== */
.auth-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.auth-modal{background:#fff;border-radius:16px;width:400px;max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.2);overflow:hidden}
.auth-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}
.auth-modal-header h3{margin:0;font-size:18px;font-weight:700}
.auth-modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:#999;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}
.auth-modal-close:hover{background:#f0f0f0}
.auth-modal-body{padding:20px 24px}
.auth-form-group{margin-bottom:16px}
.auth-form-group label{display:block;font-size:13px;color:#666;margin-bottom:6px;font-weight:500}
.auth-form-group input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s}
.auth-form-group input:focus{border-color:#e74c3c}
.auth-modal-footer{display:flex;align-items:center;justify-content:flex-end;padding:0 24px 20px;gap:10px}
.auth-modal-cancel{padding:8px 18px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px;cursor:pointer;color:#666;transition:all .2s}
.auth-modal-cancel:hover{border-color:#999}
.auth-modal-confirm{padding:8px 18px;border:none;border-radius:8px;background:#e74c3c;color:#fff;font-size:14px;cursor:pointer;transition:background .2s}
.auth-modal-confirm:hover{background:#c0392b}

/* ===== Register Panel ===== */
.reg-panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;justify-content:flex-end}
.reg-panel{width:420px;max-width:100%;height:100vh;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,0.15);display:flex;flex-direction:column;overflow:hidden}
.reg-panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #f0f0f0}
.reg-panel-header h3{margin:0;font-size:18px;font-weight:700}
.reg-panel-close{background:none;border:none;font-size:20px;cursor:pointer;color:#999;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}
.reg-panel-close:hover{background:#f0f0f0}
.reg-panel-body{padding:24px;overflow-y:auto;flex:1}
.reg-panel-submit{width:100%;padding:12px;background:#e74c3c;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}
.reg-panel-submit:hover{background:#c0392b}
.reg-panel-submit:disabled{background:#ccc;cursor:not-allowed}
.reg-panel-footer{text-align:center;font-size:13px;color:#999}
.reg-panel-footer a{color:#e74c3c;text-decoration:none;margin-left:4px}

/* ===== Forgot Password ===== */
.forgot-panel{background:#fff;border-radius:16px;width:400px;max-width:100%;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,0.2)}

/* ===== Auth Responsive ===== */
@media(max-width:768px){
  .user-auth-box{gap:6px}
  .user-auth-btn{padding:5px 10px;font-size:12px}
  .avatar-label{display:none}
  .user-dropdown{right:-10px}
  .auth-modal{width:92vw;border-radius:12px}
  .reg-panel{width:100vw}
}