.planner{width:100%}.color-heading{background:#1e2a33;color:#fff;padding:10px;text-align:center;letter-spacing:2px;margin-bottom:20px;font-size:36px;font-weight:700}.main-row{display:flex;gap:30px;align-items:flex-start}.colors{width:35%}.image-area{width:65%;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#fff}.image-area img{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;transform:translate(-50%,-50%);transition:opacity .25s ease}.base-image{z-index:1}.roof-image{z-index:2}.side-image{z-index:3}.floating-btn{display:flex;align-items:center;gap:8px;animation:floatY 1.2s ease-in-out infinite;margin-bottom:15px;justify-content:center}@keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}.icon{width:36px;height:36px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.icon,.text{color:#ed2031}.text{font-size:20px;font-weight:700;animation:pulse 1.2s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.color-item{border:0;background:transparent;padding:0;text-align:center;cursor:pointer;color:inherit}.color-item.active{outline:2px solid #1e2a33;outline-offset:4px}.color-item span:last-child{display:block;font-size:13px;font-weight:300}.color-box{display:block;height:60px;border-radius:6px;margin-bottom:5px;position:relative;overflow:hidden}.color-box:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.12) 2px,rgba(0,0,0,.15) 3px,rgba(0,0,0,.15) 6px)}@media (max-width:768px){.main-row{flex-direction:column}.colors,.image-area{width:100%}.color-grid{grid-template-columns:repeat(2,1fr)}.color-heading{font-size:28px}}