* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    background-color: #f5f7fa;

    color: #333;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* 登录页面样式 */

.login-container {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    padding: 20px;

}



.login-card {

    background: white;

    border-radius: 20px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

    padding: 40px;

    width: 100%;

    max-width: 400px;

    text-align: center;

    animation: slideUp 0.5s ease-out;

}



@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.login-header h1 {

    color: #2c3e50;

    font-weight: 600;

    font-size: 1.8rem;

    margin-bottom: 10px;

}



.login-subtitle {

    color: #7f8c8d;

    font-size: 1rem;

    margin-bottom: 30px;

}



.login-form {

    margin-bottom: 30px;

}



.input-group {

    margin-bottom: 25px;

    text-align: left;

}



.input-group label {

    display: block;

    margin-bottom: 8px;

    color: #2c3e50;

    font-weight: 500;

    font-size: 0.95rem;

}



.input-group input {

    width: 100%;

    padding: 15px;

    border: 2px solid #e1e5eb;

    border-radius: 10px;

    font-size: 1rem;

    transition: all 0.3s ease;

    background-color: #f8f9fa;

}



.input-group input:focus {

    outline: none;

    border-color: #667eea;

    background-color: white;

    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);

}



.input-group input:invalid {

    border-color: #e74c3c;

}



.input-hint {

    margin-top: 5px;

    font-size: 0.85rem;

    color: #7f8c8d;

}



.login-btn {

    width: 100%;

    padding: 15px;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    border: none;

    border-radius: 10px;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.login-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);

}



.login-btn:active {

    transform: translateY(0);

}



.login-btn:disabled {

    opacity: 0.7;

    cursor: not-allowed;

    transform: none;

}



.btn-text {

    transition: opacity 0.3s ease;

}



.btn-loader {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.spinner {

    width: 20px;

    height: 20px;

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-top: 2px solid white;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



.login-footer p {

    color: #7f8c8d;

    font-size: 0.9rem;

}



/* 登录页面响应式设计 */

@media (max-width: 480px) {

    .login-container {

        padding: 15px;

    }

    

    .login-card {

        padding: 30px 20px;

    }

    

    .login-header h1 {

        font-size: 1.5rem;

    }

    

    .login-subtitle {

        font-size: 0.9rem;

    }

    

    .input-group input {

        padding: 12px;

        font-size: 0.95rem;

    }

    

    .login-btn {

        padding: 12px;

        font-size: 0.95rem;

    }

}



@media (max-width: 360px) {

    .login-card {

        padding: 25px 15px;

    }

    

    .login-header h1 {

        font-size: 1.4rem;

    }

}



.container {

    max-width: 100%;

    margin: 0 auto;

    padding: 15px;

}



.header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    padding-bottom: 15px;

    border-bottom: 1px solid #e1e5eb;

    flex-wrap: wrap;

    gap: 10px;

}



.header-center {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 1;

}



.auto-refresh-toggle-btn {

    display: flex;

    align-items: center;

    gap: 6px;

    background: #2c3e50;

    border: none;

    border-radius: 20px;

    padding: 6px 12px;

    cursor: pointer;

    transition: all 0.2s ease;

    color: white;

    font-size: 0.8rem;

    font-weight: 500;

    white-space: nowrap;

}



.auto-refresh-toggle-btn:hover {

    background: #34495e;

    transform: scale(1.02);

}



.auto-refresh-toggle-btn:active {

    transform: scale(0.98);

}



.auto-refresh-toggle-btn.disabled {

    background: #e74c3c;

}



.auto-refresh-toggle-btn.disabled:hover {

    background: #c0392b;

}



.refresh-icon {

    transition: transform 0.3s ease;

}



.auto-refresh-toggle-btn:not(.disabled) .refresh-icon {

    animation: spin 2s linear infinite;

}



@keyframes spin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



/* 下拉刷新提示样式 */

.pull-to-refresh-hint {

    position: fixed;

    top: -40px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    padding: 8px 12px;

    background: rgba(255, 255, 255, 0.95);

    border-radius: 8px;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

    z-index: 1000;

    transition: all 0.2s ease;

    opacity: 0;

    pointer-events: none;

    min-width: 80px;

}



.pull-refresh-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    background: #2c3e50;

    border-radius: 50%;

    color: white;

    transition: transform 0.3s ease;

}



.pull-refresh-icon.spinning {

    animation: spin 1s linear infinite;

}



.pull-refresh-text {

    font-size: 0.75rem;

    font-weight: 500;

    color: #2c3e50;

    white-space: nowrap;

}



.header h1 {

    color: #2c3e50;

    font-weight: 600;

    font-size: 1.5rem;

    flex: 1;

    min-width: 0;

}



.header-right {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

}



.connection-status {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

    font-size: 0.85rem;

    white-space: nowrap;

}



.user-info {

    display: flex;

    align-items: center;

    gap: 4px;

    color: #2c3e50;

    font-weight: 500;

}



.user-label {

    color: #7f8c8d;

}



.user-id {

    color: #667eea;

    font-weight: 600;

}



.status-row {

    display: flex;

    align-items: center;

    gap: 8px;

}



.status-indicator {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background-color: #f39c12;

    animation: pulse 1.5s infinite;

    flex-shrink: 0;

}



.status-indicator.connected {

    background-color: #2ecc71;

    animation: none;

}



.status-indicator.error {

    background-color: #e74c3c;

    animation: none;

}



@keyframes pulse {

    0% { opacity: 1; }

    50% { opacity: 0.5; }

    100% { opacity: 1; }

}



/* 布局切换按钮组 - 在header中 */

.header-left-controls {

    display: flex;

    align-items: center;

    gap: 8px;

}



.layout-toggle-group {

    display: flex;

    gap: 2px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    padding: 2px;

}



.sound-btn {

    background: #2c3e50;

    border: none;

    border-radius: 8px;

    padding: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

}



.sound-btn:hover {

    background: #34495e;

    color: white;

}



.sound-btn:active {

    transform: scale(0.95);

}



.sound-btn.muted {

    color: rgba(255, 255, 255, 0.6);

}



.sound-btn.muted:hover {

    color: white;

}



.layout-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    border: none;

    background-color: transparent;

    color: #6c757d;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

    padding: 0;

}



.layout-btn:hover {

    color: #495057;

    background-color: #f8f9fa;

}



.layout-btn.active {

    background-color: #007bff;

    color: white;

    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);

}



.layout-btn svg {

    transition: transform 0.2s ease;

}



.layout-btn:active svg {

    transform: scale(0.95);

}



.products-container {

    min-height: 300px;

}



/* 网格布局 - 手机一行两个，平板一行四个 */

.products-grid {

    display: grid;

    gap: 15px;

}



/* 手机端：一行两个 */

@media (max-width: 767px) {

    .products-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* 平板端：一行两个 */

@media (min-width: 768px) {

    .products-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* 极简布局 - 继承网格布局但不显示标题 */

.products-minimal {

    display: grid;

    gap: 15px;

}



/* 手机端：一行两个 */

@media (max-width: 767px) {

    .products-minimal {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* 平板端：一行两个 */

@media (min-width: 768px) {

    .products-minimal {

        grid-template-columns: repeat(2, 1fr);

    }

}



.product-card-minimal {

    background: white;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.product-card-minimal:hover {

    transform: translateY(-3px);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

}



.product-info-minimal {

    padding: 12px;

    padding-top: 8px;

}



.product-price-minimal {

    font-size: 1rem;

    font-weight: 700;

    color: #e74c3c;

    margin-bottom: 12px;

}



.product-links-minimal {

    display: flex;

    justify-content: space-between;

    gap: 8px;

}



.product-card {

    background: white;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.product-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

}



.product-image-container {

    position: relative;

    width: 100%;

    height: 180px;

}



.product-image {

    width: 100%;

    height: 100%;

    object-fit: contain;

    background-color: #f1f3f5;

    display: block;

}



.product-price-tag {

    position: absolute;

    bottom: 8px;

    left: 8px;

    background-color: rgba(52, 58, 64, 0.85);

    color: white;

    padding: 6px 10px;

    border-radius: 6px;

    font-size: 0.9rem;

    font-weight: 600;

    backdrop-filter: blur(4px);

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



.product-info {

    padding: 12px;

}



.product-name {

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: 12px;

    color: #2c3e50;

    display: -webkit-box;

    display: box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    box-orient: vertical;

    overflow: hidden;

    line-height: 1.4;

    min-height: 2.8em;

}



.product-links {

    display: flex;

    justify-content: space-between;

    gap: 8px;

}



.product-link {

    padding: 8px 12px;

    text-decoration: none;

    border-radius: 6px;

    font-size: 0.85rem;

    font-weight: 500;

    transition: all 0.2s;

    text-align: center;

    flex: 1;

    white-space: nowrap;

}



.detail-link {

    background-color: #ecf0f1;

    color: #2c3e50;

    text-decoration: none;

    border: none;

    cursor: pointer;

    font-family: inherit;

}



.detail-link:hover {

    background-color: #dde4e6;

    transform: scale(1.02);

}



.purchase-link {

    background-color: #3498db;

    color: white;

    font-size: 0.85rem;

}



.purchase-link:hover {

    background-color: #2980b9;

    transform: scale(1.02);

}



/* 列表布局 - 手机一行一个，平板一行两个 */

.products-list {

    display: grid;

    gap: 15px;

    grid-template-columns: 1fr;

}



/* 平板端：一行两个 */

@media (min-width: 768px) {

    .products-list {

        grid-template-columns: repeat(2, 1fr);

    }

}



.product-card-list {

    background: white;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    display: flex;

    align-items: center;

    padding: 15px;

}



.product-card-list:hover {

    transform: translateY(-3px);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

}



.product-image-section {

    flex-shrink: 0;

    margin-right: 15px;

}



.product-image-list {

    width: 100px;

    height: 100px;

    object-fit: contain;

    background-color: #f1f3f5;

    border-radius: 8px;

    display: block;

}



.product-content-section {

    flex: 1;

    min-width: 0;

    margin-right: 15px;

}



.product-name-list {

    font-size: 0.95rem;

    font-weight: 600;

    margin-bottom: 8px;

    color: #2c3e50;

    display: -webkit-box;

    display: box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    box-orient: vertical;

    overflow: hidden;

    line-height: 1.4;

    min-height: 2.6em;

}



.product-price-list {

    font-size: 1.1rem;

    font-weight: 700;

    color: #e74c3c;

}



.product-actions-section {

    display: flex;

    flex-direction: column;

    gap: 8px;

    flex-shrink: 0;

}



.detail-link-list, .purchase-link-list {

    display: block;

    width: 80px;

    padding: 8px 12px;

    text-decoration: none;

    border-radius: 6px;

    font-size: 0.8rem;

    font-weight: 500;

    transition: all 0.2s;

    text-align: center;

    white-space: nowrap;

}



.detail-link-list {

    background-color: #ecf0f1;

    color: #2c3e50;

    text-decoration: none;

    border: none;

    cursor: pointer;

    font-family: inherit;

}



.detail-link-list:hover {

    background-color: #dde4e6;

    transform: scale(1.02);

}



.purchase-link-list {

    background-color: #3498db;

    color: white;

    font-size: 0.8rem;

}



.purchase-link-list:hover {

    background-color: #2980b9;

    transform: scale(1.02);

}



.product-link.purchase-link-list {

    background-color: #3498db;

    color: white;

    text-decoration: none;

    border: none;

    cursor: pointer;

    font-family: inherit;

    font-size: 0.8rem;

    line-height: inherit;

    text-align: center;

}



.product-link.purchase-link-list:hover {

    background-color: #2980b9;

    color: white;

}



/* 所有立即购买按钮的通用样式 */

.product-link.purchase-link,

.product-link.purchase-link-list {

    background-color: #3498db !important;

    color: white !important;

    text-decoration: none;

    border: none;

    cursor: pointer;

    font-family: inherit;

    line-height: inherit;

    text-align: center;

}



.product-link.purchase-link:hover,

.product-link.purchase-link-list:hover {

    background-color: #2980b9 !important;

    color: white !important;

}



.empty-state {

    text-align: center;

    padding: 60px 20px;

    color: #7f8c8d;

    display: none;

}



.empty-state.active {

    display: block;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(20px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(30px) scale(0.95);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



@keyframes fadeOut {

    from {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

    to {

        opacity: 0;

        transform: translateY(20px) scale(0.95);

    }

}



/* 新商品推送悬浮按钮 */

.new-product-float-button {

    position: fixed;

    bottom: 30px;

    right: 30px;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    border: none;

    border-radius: 8px;

    padding: 10px 18px;

    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);

    cursor: pointer;

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    transform: translateX(100px);

    font-size: 0.85rem;

    font-weight: 600;

    user-select: none;

    -webkit-user-select: none;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 45px;

    line-height: 1.2;

}



.new-product-float-button.show {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}



.new-product-float-button:hover {

    transform: translateX(-5px);

    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);

}



.new-product-float-button:active {

    transform: translateX(-3px);

}



.new-product-float-button .arrow-icon {

    width: 16px;

    height: 16px;

}



.new-product-float-button:hover .arrow-icon {

    transform: translateY(-2px);

}



.new-product-float-button .button-text {

    white-space: nowrap;

}



/* 悬浮按钮的脉冲动画效果 */

@keyframes floatButtonPulse {

    0% {

        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);

    }

    50% {

        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.6), 0 0 0 8px rgba(102, 126, 234, 0.1);

    }

    100% {

        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);

    }

}



.new-product-float-button.has-new-products {

    animation: floatButtonPulse 2s infinite;

}



/* 响应式设计优化 */

@media (max-width: 480px) {

    .container {

        padding: 10px;

    }

    

    .header {

        margin-bottom: 15px;

        padding-bottom: 10px;

    }

    

    .header h1 {

        font-size: 1.3rem;

    }

    

    .layout-btn {

        width: 40px;

        height: 40px;

    }

    

    .layout-btn svg {

        width: 18px;

        height: 18px;

    }

    

    .products-grid {

        gap: 12px;

    }

    

    .product-card {

        border-radius: 10px;

    }

    

    .product-image-container {

        height: 160px;

    }

    

    .product-image {

        height: 100%;

    }

    

    .product-price-tag {

        font-size: 0.85rem;

        padding: 5px 8px;

        bottom: 6px;

        left: 6px;

    }

    

    .product-info {

        padding: 10px;

    }

    

    .product-name {

        font-size: 0.95rem;

        min-height: 2.6em;

    }

    

    .product-link {

        font-size: 0.8rem;

        padding: 8px 10px;

    }

    

    .product-card-list {

        padding: 12px;

        gap: 12px;

    }

    

    .product-image-section {

        margin-right: 12px;

    }

    

    .product-image-list {

        width: 80px;

        height: 80px;

    }

    

    .product-content-section {

        margin-right: 12px;

    }

    

    .product-name-list {

        font-size: 0.85rem;

        min-height: 2.4em;

        margin-bottom: 6px;

    }

    

    .product-price-list {

        font-size: 0.95rem;

    }

    

    .product-actions-section {

        gap: 6px;

    }

    

    .detail-link-list, .purchase-link-list {

        width: 60px;

        font-size: 0.75rem;

        padding: 6px 8px;

    }

    

    /* 悬浮按钮在小屏幕上的样式 */

    .new-product-float-button {

        bottom: 70px;

        right: 15px;

        padding: 10px 16px;

        font-size: 0.85rem;

    }

}



@media (max-width: 360px) {

    .header h1 {

        font-size: 1.2rem;

    }

    

    .connection-status {

        font-size: 0.8rem;

    }

    

    .layout-btn {

        width: 36px;

        height: 36px;

    }

    

    .layout-btn svg {

        width: 16px;

        height: 16px;

    }

    

    .product-image-container {

        height: 140px;

    }

    

    .product-image {

        height: 100%;

    }

    

    .product-card-list {

        padding: 10px;

        gap: 10px;

    }

    

    .product-image-list {

        width: 70px;

        height: 70px;

    }

    

    .product-name-list {

        font-size: 0.8rem;

        min-height: 2.2em;

    }

    

    .product-price-list {

        font-size: 0.9rem;

    }

    

    .detail-link-list, .purchase-link-list {

        width: 50px;

        font-size: 0.7rem;

        padding: 5px 6px;

    }

    

    /* 悬浮按钮在更小屏幕上的样式 */

    .new-product-float-button {

        bottom: 65px;

        right: 10px;

        padding: 8px 14px;

        font-size: 0.8rem;

    }

}



/* 平板端优化 */

@media (min-width: 768px) and (max-width: 1024px) {

    .container {

        max-width: 1024px;

        margin: 0 auto;

        padding: 20px;

    }

    

    .header h1 {

        font-size: 1.8rem;

    }

    

    .layout-controls {

        margin-bottom: 25px;

    }

    

    .products-grid {

        gap: 20px;

    }

    

    .products-list {

        gap: 20px;

    }

    

    .product-image-container {

        height: 280px;

    }

    

    .product-image {

        height: 100%;

    }

    

    .product-price-tag {

        font-size: 1rem;

        padding: 8px 14px;

    }

    

    .product-image-list {

        width: 120px;

        height: 120px;

    }

    

    .product-name-list {

        font-size: 1rem;

        min-height: 2.8em;

    }

    

    .product-price-list {

        font-size: 1.2rem;

    }

    

    .detail-link-list, .purchase-link-list {

        width: 90px;

        font-size: 0.85rem;

        padding: 10px 14px;

    }

}



/* 大卡片布局 - 手机一行一个，垂直排列 */

.products-large {

    display: grid;

    gap: 20px;

    grid-template-columns: 1fr;

}



/* 平板端：可以显示两列 */

@media (min-width: 768px) {

    .products-large {

        grid-template-columns: repeat(2, 1fr);

    }

}



.product-card-large {

    background: white;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

}



.product-card-large:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

}



.product-image-large {

    width: 100%;

    height: 300px;

    object-fit: contain;

    background-color: #f1f3f5;

    display: block;

    cursor: pointer;

}



.product-content-large {

    padding: 16px 20px;

}



.product-title-large {

    font-size: 0.9rem;

    font-weight: 600;

    margin-bottom: 8px;

    color: #2c3e50;

    display: -webkit-box;

    display: box;

    -webkit-line-clamp: 1;

    line-clamp: 1;

    -webkit-box-orient: vertical;

    box-orient: vertical;

    overflow: hidden;

    line-height: 1.4;

    min-height: 1.4em;

}



.product-price-large {

    font-size: 1.4rem;

    font-weight: 700;

    color: #e74c3c;

    margin-bottom: 16px;

}



.product-actions-large {

    display: flex;

    gap: 12px;

}



.detail-link-large, .purchase-link-large {

    flex: 1;

    padding: 12px 16px;

    text-decoration: none;

    border-radius: 8px;

    font-size: 0.9rem;

    font-weight: 500;

    transition: all 0.2s;

    text-align: center;

    white-space: nowrap;

    border: none;

    cursor: pointer;

    font-family: inherit;

}



.detail-link-large {

    background-color: #ecf0f1;

    color: #2c3e50;

}



.detail-link-large:hover {

    background-color: #dde4e6;

    transform: scale(1.02);

}



.purchase-link-large {

    background-color: #3498db;

    color: white;

}



.purchase-link-large:hover {

    background-color: #2980b9;

    transform: scale(1.02);

}



/* 移动端优化 */

@media (max-width: 767px) {

    .product-image-large {

        height: 250px;

    }

    

    .product-content-large {

        padding: 12px 16px;

    }

    

    .product-title-large {

        font-size: 0.85rem;

    }

    

    .product-price-large {

        font-size: 1.2rem;

    }

    

    .detail-link-large, .purchase-link-large {

        font-size: 0.85rem;

        padding: 10px 14px;

    }

}



/* 平板端优化 */

@media (min-width: 768px) and (max-width: 1024px) {

    .product-image-large {

        height: 280px;

    }

    

    .product-content-large {

        padding: 18px;

    }

    

    .product-title-large {

        font-size: 0.88rem;

    }

    

    .product-price-large {

        font-size: 1.3rem;

    }

}



/* 电脑端优化 */

@media (min-width: 1025px) {

    /* 极简布局：一行5个 */

    .products-minimal {

        grid-template-columns: repeat(5, 1fr);

        gap: 16px;

    }

    

    /* 网格布局：一行5个 */

    .products-grid {

        grid-template-columns: repeat(5, 1fr);

        gap: 16px;

    }

    

    /* 列表布局：一行两个 */

    .products-list {

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }

    

    /* 大卡片布局：一行3个 */

    .products-large {

        grid-template-columns: repeat(3, 1fr);

        gap: 20px;

    }

    

    /* 电脑端图片高度调整 */

    .product-image-container {

        height: 280px;

    }

    

    .product-image-large {

        height: 320px;

    }

}



/* 消息提示框容器 */

.toast-container {

    position: fixed;

    top: 20px;

    right: 20px;

    z-index: 10001;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 12px;

    max-width: 350px;

    pointer-events: none;

}



/* 消息提示框样式 */

.message-toast {

    transform: translateX(400px);

    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

    opacity: 0;

    width: auto;

    max-width: 350px;

    pointer-events: auto;

}



.message-toast.show {

    transform: translateX(0);

    opacity: 1;

}



.toast-content {

    background: white;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    padding: 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    border-left: 4px solid #667eea;

    width: max-content;

    min-width: 200px;

}



.toast-message {

    color: #2c3e50;

    font-size: 14px;

    line-height: 1.4;

    max-width: 300px;

    word-wrap: break-word;

}



/* 兼容旧的 ID 选择器 */

#toastMessage {

    color: #2c3e50;

    font-size: 14px;

    line-height: 1.4;

    max-width: 300px;

    word-wrap: break-word;

}



.toast-close {

    background: none;

    border: none;

    font-size: 18px;

    color: #6c757d;

    cursor: pointer;

    padding: 0;

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    transition: all 0.2s ease;

}



.toast-close:hover {

    background: rgba(0, 0, 0, 0.1);

    color: #2c3e50;

}



/* 移动端消息提示框样式 */

@media (max-width: 768px) {

    .toast-container {

        right: 10px;

        left: 10px;

        max-width: none;

        align-items: stretch;

    }

    

    .message-toast {

        transform: translateY(-100px);

        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

        opacity: 0;

        width: 100%;

        max-width: 100%;

    }

    

    .message-toast.show {

        transform: translateY(0);

        opacity: 1;

    }

    

    .toast-content {

        width: 100%;

        min-width: auto;

    }

    

    .toast-message {

        max-width: 100%;

    }

}



/* 平板横屏消息提示框样式 */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .toast-container {

        right: 20px;

        left: auto;

        max-width: 300px;

        align-items: flex-end;

        top: 80px;

    }

    

    .message-toast {

        transform: translateY(-100px);

        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

        opacity: 0;

        width: 100%;

        max-width: 300px;

    }

    

    .message-toast.show {

        transform: translateY(0);

        opacity: 1;

    }

    

    .toast-content {

        width: 100%;

        min-width: auto;

    }

    

    .toast-message {

        max-width: 100%;

    }

}



/* 加载弹窗样式 */

.loading-modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 10000;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

}



.loading-modal.show {

    opacity: 1;

    visibility: visible;

}



.loading-backdrop {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

}



.loading-content {

    position: relative;

    background: white;

    border-radius: 16px;

    padding: 32px;

    min-width: 200px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}



.loading-spinner {

    margin-bottom: 16px;

    display: flex;

    justify-content: center;

}



.loading-spinner .spinner {

    width: 40px;

    height: 40px;

    border: 3px solid #f3f3f3;

    border-top: 3px solid #667eea;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



.loading-text {

    font-size: 1rem;

    color: #2c3e50;

    font-weight: 500;

}



/* 移动端加载弹窗样式 */

@media (max-width: 768px) {

    .loading-content {

        padding: 24px;

        min-width: 160px;

        margin: 0 20px;

    }

    

    .loading-spinner .spinner {

        width: 32px;

        height: 32px;

        border-width: 2.5px;

    }

    

    .loading-text {

        font-size: 0.9rem;

    }

}



@media (max-width: 480px) {

    .loading-content {

        padding: 20px;

        min-width: 140px;

        margin: 0 16px;

    }

    

    .loading-spinner .spinner {

        width: 28px;

        height: 28px;

        border-width: 2px;

    }

    

    .loading-text {

        font-size: 0.85rem;

    }

}



/* 商品详情弹出界面样式 */

.product-detail-modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 9999;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

}



.product-detail-modal.show {

    opacity: 1;

    visibility: visible;

}



.modal-backdrop {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

}



.modal-content {

    position: relative;

    background: white;

    width: 100%;

    max-width: 600px;

    height: 100vh;

    max-height: 1150px;

    border-radius: 20px 20px 0 0;

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);

}





.modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 24px;

    border-bottom: 1px solid #f1f3f5;

    flex-shrink: 0;

}



.modal-title {

    font-size: 1.2rem;

    font-weight: 600;

    color: #2c3e50;

    margin: 0;

}



.modal-close {

    background: none;

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    color: #6c757d;

    transition: all 0.2s ease;

}



.modal-close:hover {

    background-color: #f8f9fa;

    color: #2c3e50;

}



.modal-body {

    flex: 1;

    overflow-y: auto;

    padding: 0;

    height: 100%;

}



/* 走马灯样式 */

.carousel-container {

    width: 100%;

    background: #f8f9fa;

}



.carousel-main {

    position: relative;

    width: 100%;

    height: 350px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.carousel-image-wrapper {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.carousel-main-image {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    border-radius: 8px;

    transition: opacity 0.3s ease;

}



.carousel-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;

    height: 48px;

    border-radius: 50%;

    border: none;

    background: rgba(0, 0, 0, 0.5);

    color: white;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

    z-index: 10;

    backdrop-filter: blur(4px);

}



.carousel-btn:hover {

    background: rgba(0, 0, 0, 0.7);

    transform: translateY(-50%) scale(1.1);

}



.carousel-btn:active {

    transform: translateY(-50%) scale(0.95);

}



.carousel-btn-prev {

    left: 16px;

}



.carousel-btn-next {

    right: 16px;

}



.carousel-thumbnails {

    display: flex;

    gap: 8px;

    padding: 16px;

    overflow-x: auto;

    justify-content: center;

    background: white;

    border-top: 1px solid #f1f3f5;

}



.carousel-thumbnail {

    width: 60px;

    height: 60px;

    border-radius: 8px;

    overflow: hidden;

    cursor: pointer;

    border: 2px solid transparent;

    transition: all 0.2s ease;

    flex-shrink: 0;

}



.carousel-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.carousel-thumbnail.active {

    border-color: #667eea;

    transform: scale(1.05);

}



.carousel-thumbnail:hover:not(.active) {

    border-color: #e1e5eb;

    transform: scale(1.02);

}



.detail-info {

    padding: 24px;

    background: white;

}



.detail-title {

    font-size: 1.3rem;

    font-weight: 600;

    color: #2c3e50;

    margin: 0 0 16px 0;

    line-height: 1.4;

    flex: 1;

}



.detail-title-container {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

}



.copy-title-btn {

    background: none;

    border: none;

    color: #666;

    cursor: pointer;

    padding: 4px;

    border-radius: 4px;

    transition: all 0.2s ease;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}



.copy-title-btn:hover {

    color: #007bff;

    background-color: rgba(0, 123, 255, 0.1);

}



.copy-title-btn:active {

    transform: scale(0.95);

}



.copy-title-btn.copied {

    color: #28a745;

}



.detail-mid-container {

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}



.detail-mid-tag {

    display: inline-block;

    padding: 4px 10px;

    background-color: #f0f9ff;

    color: #0369a1;

    border: 1px solid #bae6fd;

    border-radius: 6px;

    font-size: 0.8rem;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.2s ease;

    user-select: none;

}



.detail-mid-tag:hover {

    background-color: #e0f2fe;

    border-color: #7dd3fc;

    transform: scale(1.02);

}



.detail-mid-tag:active {

    transform: scale(0.98);

}



.copy-link-btn {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 4px 10px;

    background-color: #f0fdf4;

    color: #166534;

    border: 1px solid #bbf7d0;

    border-radius: 6px;

    font-size: 0.8rem;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.2s ease;

    user-select: none;

}



.copy-link-btn:hover {

    background-color: #dcfce7;

    border-color: #86efac;

    transform: scale(1.02);

}



.copy-link-btn:active {

    transform: scale(0.98);

}



.copy-link-btn.copied {

    background-color: #166534;

    color: white;

    border-color: #166534;

}



.detail-price-container {

    margin-bottom: 0px;

    display: flex;

    align-items: baseline;

    gap: 12px;

}



.detail-price {

    font-size: 1.8rem;

    font-weight: 700;

    color: #e74c3c;

}



.detail-convert-price {

    font-size: 1.1rem;

    font-weight: 500;

    color: #7f8c8d;

}



.detail-tags-container {

    margin-bottom: 16px;

    margin-top: -2px;

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    align-items: center;

}



.detail-tag {

    display: inline-block;

    padding: 3px 8px;

    border-radius: 4px;

    font-size: 0.75rem;

    font-weight: 500;

    line-height: 1.2;

    white-space: nowrap;

}



.detail-tag.loading {

    font-size: 1rem;

    font-weight: 700;

    background-color: #f3f4f6;

    color: #6b7280;

    border: 1px solid #e5e7eb;

}



.detail-tag.status-sold-out {

    background-color: #fee;

    color: #c53030;

    border: 1px solid #fed7d7;

}



.detail-tag.status-on-sale {

    background-color: #f0fdf4;

    color: #16a34a;

    border: 1px solid #bbf7d0;

}



.detail-tag.condition {

    background-color: #f8fafc;

    color: #475569;

    border: 1px solid #e2e8f0;

}



.detail-tag.shipping {

    background-color: #fef7ed;

    color: #ea580c;

    border: 1px solid #fed7aa;

}



.detail-tag.state {

    background-color: #f0f9ff;

    color: #0369a1;

    border: 1px solid #bae6fd;

}



.detail-tag.youfei {

    background-color: #f5f3ff;

    color: #7c3aed;

    border: 1px solid #ddd6fe;

}



.detail-purchase-btn {

    width: 100%;

    padding: 16px;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    border: none;

    border-radius: 12px;

    font-size: 1.1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    margin-bottom: 24px;

}



.detail-purchase-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);

}



.detail-purchase-btn:active {

    transform: translateY(0);

}



/* 卖家信息部分样式 */

.seller-info-section {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px;

    background-color: #f8f9fa;

    border-radius: 12px;

    margin-bottom: 24px;

    border: 1px solid #e1e5eb;

}



.seller-avatar {

    flex-shrink: 0;

}



.seller-avatar-img {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #e1e5eb;

    background-color: #f1f3f5;

}



.seller-details {

    flex: 1;

    min-width: 0;

}



.seller-name-row {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 4px;

}



.seller-name {

    font-size: 1rem;

    font-weight: 600;

    color: #2c3e50;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 200px;

}



.seller-verification {

    display: inline-block;

    padding: 2px 6px;

    border-radius: 4px;

    font-size: 0.7rem;

    font-weight: 500;

    white-space: nowrap;

}



.seller-verification.verified {

    background-color: #dcfce7;

    color: #166534;

    border: 1px solid #bbf7d0;

}



.seller-verification.unverified {

    background-color: #f1f5f9;

    color: #64748b;

    border: 1px solid #e2e8f0;

}



.seller-stats {

    margin-top: 2px;

}



.seller-stats-text {

    font-size: 0.95rem;

    color: #6c757d;

    line-height: 1.3;

}



.detail-content {

    border-top: 1px solid #f1f3f5;

    padding-top: 20px;

}



.content-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;

}



.content-title {

    font-size: 1.1rem;

    font-weight: 600;

    color: #2c3e50;

    margin: 0;

}



.translate-btn {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    background: #fff;

    border: 1px solid #e1e8ed;

    border-radius: 6px;

    color: #5a6c7d;

    font-size: 0.85rem;

    cursor: pointer;

    transition: all 0.2s ease;

}



.translate-btn:hover {

    background: #f8f9fa;

    border-color: #007bff;

    color: #007bff;

}



.translate-btn:active {

    transform: translateY(1px);

}



.translate-btn svg {

    flex-shrink: 0;

}



.translate-btn .animate-spin {

    animation: spin 1s linear infinite;

}



@keyframes spin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}



.content-text {

    font-size: 0.95rem;

    line-height: 1.6;

    color: #5a6c7d;

    white-space: pre-wrap;

    word-wrap: break-word;

    margin-bottom: 50px;

}



.content-text.loading {

    font-size: 1rem;

    font-weight: 700;

    color: #6b7280;

}



.content-spacer {

    height: 40px;

    width: 100%;

}



/* 移动端优化 */

@media (max-width: 768px) {

    .modal-content {

        max-width: 100%;

        height: 80vh;

        border-radius: 16px 16px 0 0;

    }

    

    .modal-header {

        padding: 16px 20px;

    }

    

    .modal-title {

        font-size: 1.1rem;

    }

    

    .modal-close {

        width: 36px;

        height: 36px;

    }

    

    .carousel-main {

        height: 300px;

    }

    

    .carousel-btn {

        width: 40px;

        height: 40px;

    }

    

    .carousel-btn-prev {

        left: 12px;

    }

    

    .carousel-btn-next {

        right: 12px;

    }

    

    .carousel-thumbnails {

        padding: 12px;

        gap: 6px;

    }

    

    .carousel-thumbnail {

        width: 50px;

        height: 50px;

    }

    

    .detail-info {

        padding: 20px;

    }

    

    .detail-title {

        font-size: 1.2rem;

    }

    

    .detail-price {

        font-size: 1.6rem;

    }

    

    .detail-convert-price {

        font-size: 1rem;

    }

    

    .detail-purchase-btn {

        padding: 14px;

        font-size: 1rem;

    }

    

    .seller-info-section {

        padding: 12px;

        gap: 10px;

    }

    

    .seller-avatar-img {

        width: 52px;

        height: 52px;

    }

    

    .seller-name {

        font-size: 0.95rem;

        max-width: 160px;

    }

    

    .seller-stats-text {

        font-size: 0.9rem;

    }

}







@media (max-width: 480px) {

    .carousel-main {

        height: 250px;

    }

    

    .carousel-btn {

        width: 36px;

        height: 36px;

    }

    

    .carousel-btn-prev {

        left: 8px;

    }

    

    .carousel-btn-next {

        right: 8px;

    }

    

    .detail-info {

        padding: 16px;

    }

    

    .detail-title {

        font-size: 1.1rem;

        margin-bottom: 12px;

    }

    

    .detail-price {

        font-size: 1.5rem;

        margin-bottom: 20px;

    }

    

    .detail-convert-price {

        font-size: 0.9rem;

    }

    

    .detail-purchase-btn {

        padding: 12px;

        font-size: 0.95rem;

        margin-bottom: 20px;

    }

    

    .content-title {

        font-size: 1rem;

    }

    

    .content-text {

        font-size: 0.9rem;

    }

}



/* 设置按钮样式 */

.settings-btn {

    background: #2c3e50;

    border: none;

    border-radius: 8px;

    padding: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

}



.settings-btn:hover {

    background: #34495e;

    color: white;

}



.settings-btn:active {

    transform: scale(0.95);

}



/* 侧边栏样式 */

.settings-sidebar {

    position: fixed;

    top: 0;

    right: -420px;

    width: 400px;

    height: 100vh;

    background: white;

    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);

    z-index: 10002;

    transition: right 0.3s ease;

    overflow-y: auto;

}



.settings-sidebar.show {

    right: 0;

}



.sidebar-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px;

    border-bottom: 1px solid #f1f3f5;

    background: #f8f9fa;

}



.sidebar-header h3 {

    margin: 0;

    color: #2c3e50;

    font-size: 1.2rem;

    font-weight: 600;

}



.close-sidebar-btn {

    background: none;

    border: none;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    color: #6c757d;

    transition: all 0.2s ease;

}



.close-sidebar-btn:hover {

    background-color: #e9ecef;

    color: #2c3e50;

}



.sidebar-content {

    padding: 20px;

}



.setting-group {

    margin-bottom: 30px;

}



.setting-row {

    display: flex;

    gap: 20px;

    align-items: flex-start;

    flex-wrap: nowrap;

}



.setting-item {

    min-width: 0; /* 防止flex项目溢出 */

}



.setting-item:first-child {

    flex: 0 0 auto;

    max-width: 140px;

}



.setting-item:nth-child(2) {

    flex: 1;

}



.setting-item h4 {

    margin: 0 0 15px 0;

    color: #2c3e50;

    font-size: 1rem;

    font-weight: 600;

}



.setting-group:last-child {

    margin-bottom: 0;

}

.price-threshold-input {

    margin-top: 15px;

    margin-bottom: 60px;

    padding: 12px;

    background: #f8f9fa;

    border-radius: 8px;

}

.price-threshold-input label {

    display: block;

    margin-bottom: 8px;

    font-size: 0.9rem;

    color: #666;

    font-weight: 500;

}

.price-threshold-input input {

    width: 100%;

    padding: 10px 12px;

    border: 1px solid #e1e5eb;

    border-radius: 6px;

    font-size: 1rem;

    color: #333;

    background: white;

    transition: all 0.2s ease;

}

.price-threshold-input input:focus {

    outline: none;

    border-color: #667eea;

    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);

}



.setting-group h4 {

    margin: 0 0 15px 0;

    color: #2c3e50;

    font-size: 1rem;

    font-weight: 600;

}



/* 图片加载线路单选按钮样式 */

.image-route-options {

    display: flex;

    gap: 8px;

}



/* 自动购买模式单选按钮样式 */

.auto-purchase-mode-options {

    display: flex;

    gap: 8px;

}



/* 购买线路单选按钮样式 */

.purchase-route-options {

    display: flex;

    gap: 8px;

}



.radio-option {

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    padding: 10px 12px;

    border: 2px solid #e9ecef;

    border-radius: 8px;

    background-color: #f8f9fa;

    transition: all 0.2s ease;

    flex: 1;

    min-height: 44px;

    min-width: 70px;

    white-space: nowrap;

}



.radio-option:hover {

    border-color: #667eea;

    background-color: #f0f2ff;

}



.radio-option input[type="radio"] {

    display: none;

}



.radio-label {

    color: #6c757d;

    font-size: 0.9rem;

    font-weight: 500;

    transition: all 0.2s ease;

    text-align: center;

}



/* 选中状态的样式 */

.radio-option:has(input[type="radio"]:checked) {

    border-color: #667eea;

    background-color: #667eea;

    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);

}



.radio-option:has(input[type="radio"]:checked) .radio-label {

    color: white;

    font-weight: 600;

}



/* 移除所有伪元素（圆点按钮） */

.radio-label::before,

.radio-label::after,

.radio-option input[type="radio"]:checked + .radio-label::before,

.radio-option input[type="radio"]:checked + .radio-label::after {

    display: none;

}



/* 自动购买模式描述文本样式 */

.auto-purchase-description {

    margin-top: 12px;

    padding: 10px;

    background-color: #f8f9fa;

    border-radius: 6px;

    border-left: 3px solid #667eea;

}



.auto-purchase-description p {

    margin: 0;

    font-size: 0.85rem;

    color: #6c757d;

    line-height: 1.4;

}



/* 优惠券描述样式 */

.coupon-description {

    margin-top: 12px;

    padding: 10px;

    background-color: #f8f9fa;

    border-radius: 6px;

    border-left: 3px solid #667eea;

}



.coupon-description p {

    margin: 0;

    font-size: 0.85rem;

    color: #6c757d;

    line-height: 1.4;

}



/* 侧边栏中的布局切换按钮组 */

.settings-sidebar .layout-toggle-group {

    display: flex;

    gap: 2px;

    background: #f8f9fa;

    border-radius: 8px;

    padding: 2px;

    width: fit-content;

}



.settings-sidebar .layout-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    border: none;

    background-color: transparent;

    color: #6c757d;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.2s ease;

    padding: 0;

}



.settings-sidebar .layout-btn:hover {

    color: #495057;

    background-color: #e9ecef;

}



.settings-sidebar .layout-btn.active {

    background-color: #007bff;

    color: white;

    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);

}



/* 侧边栏中的声音按钮 */

.settings-sidebar .sound-btn {

    background: #2c3e50;

    border: none;

    border-radius: 8px;

    padding: 12px 16px;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: white;

    font-size: 0.9rem;

}



.settings-sidebar .sound-btn:hover {

    background: #34495e;

    color: white;

}



.settings-sidebar .sound-btn:active {

    transform: scale(0.98);

}



.settings-sidebar .sound-btn.muted {

    color: rgba(255, 255, 255, 0.6);

}



.settings-sidebar .sound-btn.muted:hover {

    color: white;

}



.settings-sidebar .sound-btn.enabled {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

}



.settings-sidebar .sound-btn.enabled:hover {

    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);

    transform: scale(0.98);

}



/* 优惠券按钮样式 */

.settings-sidebar .coupon-toggle-btn {

    background: #2c3e50;

    border: none;

    border-radius: 8px;

    padding: 12px 16px;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: white;

    font-size: 0.9rem;

}



.settings-sidebar .coupon-toggle-btn:hover {

    background: #34495e;

    color: white;

}



.settings-sidebar .coupon-toggle-btn:active {

    transform: scale(0.98);

}



.settings-sidebar .coupon-toggle-btn.disabled {

    color: rgba(255, 255, 255, 0.6);

}



.settings-sidebar .coupon-toggle-btn.disabled:hover {

    color: white;

}



.settings-sidebar .coupon-toggle-btn.enabled {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

}



.settings-sidebar .coupon-toggle-btn.enabled:hover {

    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);

    transform: scale(0.98);

}



/* 遮罩层样式 */

.sidebar-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 10001;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;

}



.sidebar-overlay.show {

    opacity: 1;

    visibility: visible;

}



/* 响应式设计 */

@media (max-width: 480px) {

    .settings-sidebar {

        width: 320px;

        right: -340px;

    }

    

    .settings-sidebar.show {

        right: 0;

    }

    

    .sidebar-header {

        padding: 15px;

    }

    

    .sidebar-content {

        padding: 15px;

    }

    

    .setting-group {

        margin-bottom: 15px;

    }

    

    .settings-sidebar .layout-btn {

        width: 40px;

        height: 40px;

    }

    

    .settings-sidebar .sound-btn {

        padding: 10px 14px;

        font-size: 0.85rem;

    }

    

    .settings-sidebar .price-validation-btn {

        padding: 10px 14px;

        font-size: 0.85rem;

    }

    

    .settings-sidebar .setting-description {

        font-size: 0.8rem;

        margin-bottom: 10px;

        padding: 6px 0;

        padding-left: 10px;

    }

}



@media (max-width: 360px) {

    .settings-sidebar {

        width: 300px;

        right: -320px;

    }

    

    .settings-sidebar.show {

        right: 0;

    }

    

    .sidebar-header h3 {

        font-size: 1.1rem;

    }

    

    .settings-sidebar .layout-btn {

        width: 36px;

        height: 36px;

    }

    

    .settings-sidebar .sound-btn {

        padding: 8px 12px;

        font-size: 0.8rem;

    }

    

    .settings-sidebar .price-validation-btn {

        padding: 8px 12px;

        font-size: 0.8rem;

    }

    

    .settings-sidebar .setting-description {

        font-size: 0.75rem;

        margin-bottom: 8px;

        padding: 5px 0;

        padding-left: 8px;

    }

}



/* 价格校验按钮样式 */

.price-validation-btn {

    background: #2c3e50;

    border: none;

    border-radius: 8px;

    padding: 12px 16px;

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: white;

    font-size: 0.9rem;

    width: 100%;

}



.price-validation-btn:hover {

    background: #34495e;

    color: white;

}



.price-validation-btn:active {

    transform: scale(0.98);

}



.price-validation-btn.enabled {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    border-color: #667eea;

    color: white;

}



.price-validation-btn.enabled:hover {

    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);

    transform: scale(0.98);

}



.price-validation-btn svg {

    transition: all 0.2s ease;

}



.price-validation-btn-text {

    font-weight: 500;

}



/* 设置说明文本样式 */

.setting-description {

    font-size: 0.85rem;

    color: #666;

    line-height: 1.4;

    margin-bottom: 12px;

    padding: 8px 0;

    border-left: 3px solid #ff9800;

    padding-left: 12px;

    background: rgba(255, 152, 0, 0.05);

    border-radius: 0 4px 4px 0;

}



/* 价格确认弹窗样式 */

.price-confirm-modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 10000;

    display: none;

    animation: fadeIn 0.3s ease;

}



.price-confirm-modal.show {

    display: block;

}



.price-confirm-modal .modal-content {

    position: relative;

    background: white;

    border-radius: 16px;

    max-width: 400px;

    width: 90%;

    max-height: 90vh;

    margin: 100px auto;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

    animation: slideUp 0.3s ease;

    overflow: hidden;

}



.price-confirm-modal .modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 24px 16px;

    border-bottom: 1px solid #f0f0f0;

}



.price-confirm-modal .modal-title {

    font-size: 1.2rem;

    font-weight: 600;

    color: #2c3e50;

    margin: 0;

}



.price-confirm-modal .modal-close {

    background: none;

    border: none;

    width: 32px;

    height: 32px;

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

    color: #666;

}



.price-confirm-modal .modal-close:hover {

    background: #f5f5f5;

    color: #333;

}



.price-confirm-modal .modal-body {

    padding: 24px;

}



.price-change-info {

    text-align: center;

}



.price-warning-icon {

    margin-bottom: 16px;

}



.price-warning-icon svg {

    color: #ff9800;

}



.warning-text {

    color: #666;

    font-size: 1rem;

    margin-bottom: 24px;

    line-height: 1.5;

}



.price-comparison {

    background: #f8f9fa;

    border-radius: 12px;

    padding: 20px;

    margin-bottom: 24px;

}



.price-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;

}



.price-item:last-child {

    margin-bottom: 0;

}



.price-label {

    font-weight: 500;

    color: #666;

}



.price-value {

    font-weight: 600;

    font-size: 1.1rem;

}



.old-price .price-value {

    color: #27ae60;

    text-decoration: line-through;

}



.new-price .price-value {

    color: #e74c3c;

}



.modal-actions {

    display: flex;

    gap: 12px;

    justify-content: center;

}



.cancel-btn, .confirm-btn {

    padding: 12px 24px;

    border-radius: 8px;

    font-size: 0.9rem;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.2s ease;

    border: none;

    min-width: 100px;

}



.cancel-btn {

    background: #f8f9fa;

    color: #666;

    border: 1px solid #e1e5eb;

}



.cancel-btn:hover {

    background: #e9ecef;

    color: #495057;

}



.confirm-btn {

    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);

    color: white;

}



.confirm-btn:hover {

    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);

}



/* 移动端适配 */

@media (max-width: 480px) {

    .price-confirm-modal .modal-content {

        margin: 80px 20px;

        width: calc(100% - 40px);

        max-width: none;

    }

    

    .price-confirm-modal .modal-header {

        padding: 16px 20px 12px;

    }

    

    .price-confirm-modal .modal-body {

        padding: 20px;

    }

    

    .modal-actions {

        flex-direction: column;

    }

    

    .cancel-btn, .confirm-btn {

        width: 100%;

        min-width: auto;

    }

}