.app{min-height:100vh;display:flex;flex-direction:column}.header{background:#fff;box-shadow:0 2px 10px #0000001a;padding:1rem 0;position:sticky;top:0;z-index:100}.header .container{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 2rem}.logo{font-size:1.5rem;font-weight:700;color:#ea4335}.nav{display:flex;gap:2rem}.nav a{text-decoration:none;color:#333;transition:color .3s}.nav a:hover{color:#ea4335}.nav .admin-link{color:#f39c12;font-weight:500}.nav .admin-link:hover{color:#e67e22}.header-actions{display:flex;align-items:center;gap:.75rem}.user-info{font-size:.9rem;color:#333}.balance-display{font-size:.9rem;color:#28a745;font-weight:700;padding:.3rem .6rem;background:#f0fff4;border-radius:4px;border:1px solid #28a745}.register-btn{background:transparent;color:#4285f4;border:1px solid #4285f4;padding:.5rem 1rem;border-radius:5px;cursor:pointer;font-size:.9rem;transition:all .3s}.register-btn:hover{background:#4285f4;color:#fff}.login-btn{background:#4285f4;color:#fff;border:none;padding:.5rem 1rem;border-radius:5px;cursor:pointer;font-size:.9rem;transition:background .3s}.login-btn:hover{background:#3367d6}.logout-btn{background:#6c757d;color:#fff;border:none;padding:.5rem 1rem;border-radius:5px;cursor:pointer;font-size:.9rem;transition:background .3s}.logout-btn:hover{background:#5a6268}.cart-btn{background:#ea4335;color:#fff;border:none;padding:.5rem 1rem;border-radius:5px;cursor:pointer;font-size:1rem}.cart-btn:hover{background:#c5221f}.refresh-btn{background:#4285f4;color:#fff;border:none;padding:.5rem .8rem;border-radius:20px;cursor:pointer;font-size:1.1rem;transition:background .3s,transform .2s}.refresh-btn:hover{background:#3367d6;transform:rotate(180deg)}.hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center;padding:6rem 2rem}.hero h1{font-size:3rem;margin-bottom:1rem}.hero p{font-size:1.2rem;margin:.5rem 0}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.products{padding:4rem 0}.products h2{text-align:center;font-size:2rem;margin-bottom:2rem}.loading{text-align:center;font-size:1.2rem;color:#666}.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.category-section{margin-bottom:3rem}.category-title{font-size:1.8rem;color:#2c3e50;margin-bottom:1.5rem;padding-bottom:.5rem;border-bottom:3px solid #667eea;display:inline-block}.product-card.code-card{border-top:4px solid #28a745}.product-card.account-card{border-top:4px solid #667eea}.product-card{background:#fff;border-radius:10px;padding:2rem;text-align:center;box-shadow:0 4px 15px #0000001a;transition:transform .3s}.product-card:hover{transform:translateY(-5px)}.product-icon{font-size:4rem;margin-bottom:1rem}.product-card h3{font-size:1.3rem;margin-bottom:.5rem}.price{font-size:1.5rem;font-weight:700;color:#ea4335;margin-bottom:.5rem}.stock{color:#666;margin-bottom:1rem}.buy-btn{background:#ea4335;color:#fff;border:none;padding:.75rem 2rem;border-radius:5px;cursor:pointer;font-size:1rem;width:100%;transition:background .3s}.buy-btn:hover:not(:disabled){background:#c5221f}.buy-btn:disabled{background:#ccc;cursor:not-allowed}.product-card.out-of-stock{opacity:.7}.stock.no-stock{color:#dc3545;font-weight:700}.cart-item-stock{font-size:12px;color:#666;margin-bottom:5px}.cart-summary{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid #eee;margin-top:10px}.balance-info{font-size:14px}.balance-info .balance.enough{color:#28a745;font-weight:700}.balance-info .balance.not-enough{color:#dc3545;font-weight:700}.quantity-btn:disabled{cursor:not-allowed}.about{background:#fff;padding:4rem 0}.about h2{text-align:center;font-size:2rem;margin-bottom:2rem}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.feature{text-align:center;padding:2rem}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature h3{margin-bottom:.5rem}.contact{padding:4rem 0;text-align:center}.contact h2{font-size:2rem;margin-bottom:1rem}.footer{background:#333;color:#fff;text-align:center;padding:2rem 0;margin-top:auto}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal{background:#fff;border-radius:10px;padding:2rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;position:relative}.login-modal{max-width:400px}.close-btn{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;cursor:pointer;line-height:1;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#666;transition:all .3s}.close-btn:hover{background:#f0f0f0;border-radius:50%;color:#333}.modal h2{margin-bottom:.5rem;text-align:center}.login-hint{color:#666;margin-bottom:1.5rem;font-size:.9rem;text-align:center}.login-form{display:flex;flex-direction:column;gap:1rem}.login-form input,.order-form input{padding:.75rem;border:1px solid #ddd;border-radius:5px;font-size:1rem;transition:border-color .3s}.login-form input:focus,.order-form input:focus{outline:none;border-color:#4285f4}.remember-me{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#666;cursor:pointer}.remember-me input[type=checkbox]{cursor:pointer;width:auto;margin:0;padding:0}.remember-me span{-webkit-user-select:none;user-select:none}.login-submit-btn{background:#4285f4}.login-submit-btn:hover{background:#3367d6}.register-submit-btn{background:#28a745}.register-submit-btn:hover{background:#218838}.switch-auth{text-align:center;margin-top:1rem;color:#666;font-size:.9rem}.switch-auth button{background:none;border:none;color:#4285f4;cursor:pointer;padding:0 .25rem;font-size:.9rem;text-decoration:underline}.switch-auth button:hover{color:#3367d6}.cart-items{margin-bottom:1rem}.cart-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border-bottom:1px solid #eee;gap:1rem}.cart-item-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.cart-item-name{font-weight:500;color:#333}.cart-item-price{color:#ea4335;font-weight:700}.cart-item-actions{display:flex;align-items:center;gap:.5rem}.quantity-control{display:flex;align-items:center;gap:.5rem;border:1px solid #ddd;border-radius:4px;overflow:hidden}.quantity-btn{background:#f8f9fa;border:none;padding:.4rem .6rem;cursor:pointer;font-size:1rem;font-weight:700;color:#333;transition:background .2s;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.quantity-btn:hover{background:#e2e6ea}.quantity-btn:active{background:#dae0e5}.quantity{min-width:40px;text-align:center;font-weight:500}.quantity-input{width:50px;text-align:center;border:none;padding:.4rem;font-size:1rem;font-weight:500;background:#fff;-moz-appearance:textfield}.quantity-input::-webkit-outer-spin-button,.quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.quantity-input:focus{outline:none}padding: 0 .25rem; } .cart-total{text-align:right;font-size:1.2rem;margin-bottom:1rem}.remove-btn{background:#dc3545;color:#fff;border:none;padding:.25rem .5rem;border-radius:3px;cursor:pointer;font-size:.8rem;transition:background .3s}.remove-btn:hover{background:#c82333}.order-form{display:flex;flex-direction:column;gap:1rem}.submit-btn{background:#28a745;color:#fff;border:none;padding:.75rem;border-radius:5px;cursor:pointer;font-size:1rem}.submit-btn:hover{background:#218838}@media (max-width: 768px){.hero h1{font-size:2rem}.nav{display:none}.product-grid{grid-template-columns:1fr}.header-actions{gap:.5rem}.user-info{display:none}.register-btn,.login-btn,.logout-btn,.cart-btn{padding:.4rem .8rem;font-size:.85rem}.login-modal{width:95%;padding:1.5rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:#f5f7fa;color:#333}#root{min-height:100vh}