*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Arial;background:#f5f8fd;color:#172033}.topbar{background:#087cff;color:#fff;text-align:center;padding:8px;font-size:13px}header{background:#fff;position:sticky;top:0;z-index:10;box-shadow:0 4px 20px #12305d12}.head{max-width:1200px;margin:auto;padding:16px;display:flex;gap:18px;align-items:center}.logo{font-size:24px;font-weight:900;color:#087cff;text-decoration:none;white-space:nowrap}.search{display:flex;flex:1;max-width:620px}.search input{flex:1;padding:12px 15px;border:1px solid #dbe3ef;border-radius:12px 0 0 12px}.search button,.product button,.btn{border:0;background:#087cff;color:#fff;padding:12px 17px;border-radius:0 12px 12px 0;font-weight:800;cursor:pointer}.head nav{display:flex;gap:12px}.head nav a,.cats a,footer a{color:#172033;text-decoration:none}.cats{max-width:1200px;margin:auto;padding:0 16px 13px;display:flex;gap:18px;overflow:auto;white-space:nowrap}.container{max-width:1200px;margin:auto;padding:24px 16px;min-height:70vh}.hero{background:linear-gradient(135deg,#087cff,#0d5bd0);color:#fff;border-radius:24px;padding:45px;display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.hero h1{font-size:42px;margin:0 0 10px}.section{margin:28px 0}.section h2{margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product{background:#fff;border:1px solid #e6ebf3;border-radius:18px;padding:12px;overflow:hidden}.product a{text-decoration:none;color:inherit}.pic{aspect-ratio:3/4;background:#eef4fb;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}.pic img{width:100%;height:100%;object-fit:cover}.product h3{font-size:16px;margin:12px 3px 5px}.product .cat{font-size:12px;color:#72809a}.product strong{font-size:18px;color:#087cff}.product form button{width:100%;margin-top:10px;border-radius:10px}.cards{background:#fff;border-radius:20px;padding:20px;border:1px solid #e6ebf3}.row{display:flex;gap:20px;flex-wrap:wrap}.notice{padding:12px 15px;background:#eaf4ff;border-radius:12px;margin-bottom:16px}.table{width:100%;border-collapse:collapse;background:#fff}.table td,.table th{padding:12px;border-bottom:1px solid #edf0f5;text-align:left}.input{width:100%;padding:12px;border:1px solid #dbe3ef;border-radius:10px;margin:5px 0 12px}.btn{border-radius:10px;text-decoration:none;display:inline-block}footer{background:#10233f;color:#fff;padding:35px max(16px,calc((100% - 1200px)/2));display:flex;justify-content:space-between;gap:30px}footer a{color:#dbe8ff;display:block;margin:6px 0}.mobilebar{display:none}@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.head{flex-wrap:wrap}.search{order:3;max-width:none;flex-basis:100%}.hero{padding:28px}.hero h1{font-size:30px}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.container{padding:14px 10px}footer{padding-bottom:90px;flex-direction:column}.mobilebar{position:fixed;display:flex;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #dfe6f0;z-index:20;justify-content:space-around;padding:8px}.mobilebar a{color:#172033;text-decoration:none;text-align:center}.mobilebar small{display:block;font-size:10px}}