*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Arial,sans-serif;background:#f4f6f9;color:#1d2433}
.top{background:#2d2169;color:#fff;padding:12px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.brand{font-weight:700;font-size:20px}
.btn{border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer}.pri{background:#1a79c4;color:#1d2433}.sec{background:#fff;color:#2d2169;margin-left:8px}
.wrap{max-width:1100px;margin:auto;padding:24px}.profile{background:#fff;border-radius:12px;padding:24px;display:flex;gap:20px;align-items:center;box-shadow:0 1px 4px #0001}
.avatar{width:96px;height:96px;border-radius:50%;background:#cfd8e3;display:flex;align-items:center;justify-content:center;font-size:11px;text-align:center;color:#556}
.profile h1{margin:0 0 4px}.muted{color:#667}.tabs{display:flex;gap:8px;margin:24px 0 16px}.tab{padding:10px 18px;border-radius:20px;border:1px solid #2d2169;background:#fff;color:#2d2169;cursor:pointer;font-weight:600}.tab.on{background:#2d2169;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.card{background:#fff;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 4px #0001;transition:.2s}.card:hover{transform:translateY(-3px);box-shadow:0 6px 16px #0002}
.card img,.ph{width:100%;height:190px;object-fit:cover}.ph{background:repeating-linear-gradient(45deg,#dfe5ec,#dfe5ec 12px,#e9eef3 12px,#e9eef3 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#556;font-weight:700}.ph small{font-weight:400}
.cb{padding:14px}.price{font-size:22px;font-weight:800;color:#2d2169}.t{font-weight:600;margin:4px 0}.specs,.loc{color:#556;font-size:14px;margin:3px 0}.tags span{display:inline-block;font-size:12px;background:#eef2f7;border-radius:10px;padding:3px 8px;margin:6px 4px 0 0}
.modal{display:none;position:fixed;inset:0;background:#0007;align-items:center;justify-content:center;z-index:9}.modal.open{display:flex}.box{background:#fff;border-radius:12px;padding:24px;width:min(440px,92vw);position:relative}.close{position:absolute;right:14px;top:10px;cursor:pointer;font-size:22px}
.box input,.box textarea,.box select{width:100%;padding:10px;margin:6px 0;border:1px solid #ccd;border-radius:8px;font:inherit}.msg{margin-top:8px;color:#2d2169}
.detail{background:#fff;border-radius:12px;overflow:hidden}.detail .ph,.detail img{height:380px}footer{text-align:center;color:#889;padding:30px;font-size:13px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.gal img{width:100%;height:170px;object-fit:cover;border-radius:8px;display:block}
.detail>img{width:100%;height:420px;object-fit:cover;display:block}
.top{background:#fff;border-bottom:3px solid #1a79c4}.top .logo{height:46px;display:block}
.pri{color:#fff}.sec{background:#2d2169;color:#fff}
.avatar{object-fit:contain;background:#fff;border:1px solid #e3e6ee}
@media(max-width:640px){.top{padding:10px 12px}.top .logo{height:34px}.btn{padding:8px 10px;font-size:13px}.sec{margin-left:4px}.wrap{padding:14px}.profile{padding:16px;gap:12px}.profile h1{font-size:22px}.avatar{width:64px;height:64px}.tabs{flex-wrap:wrap}.tab{padding:8px 12px}.detail>img{height:260px}.gal{grid-template-columns:repeat(2,1fr)}.gal img{height:130px}}