:root{--blue:#00549f;--blue-dark:#003d75;--sky:#eaf5ff;--ink:#15283a;--muted:#617487;--line:#d9e5ef;--green:#159447;--shadow:0 16px 45px rgba(18,61,99,.12)}
*{box-sizing:border-box}
html{font-family:Inter,"Segoe UI",Arial,sans-serif;background:#f3f8fc;color:var(--ink)}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% -20%,#cdeaff 0,transparent 35%),linear-gradient(180deg,#f8fcff 0,#eef5fa 100%)}
.topbar{min-height:82px;background:linear-gradient(120deg,var(--blue-dark),var(--blue));color:#fff;display:flex;align-items:center;gap:14px;padding:14px max(20px,calc((100vw - 1120px)/2));box-shadow:0 5px 18px rgba(0,61,117,.18)}
.brand-mark{width:48px;height:48px;border-radius:15px;background:#fff;color:var(--blue);display:grid;place-items:center;font-weight:900;font-size:26px;box-shadow:inset 0 -4px 0 #9bd24b}
h1,h2,p{margin:0}.topbar h1{font-size:1.35rem;line-height:1.15}.topbar p{font-size:.9rem;color:#cce7ff;margin-top:3px}
main{width:min(1120px,calc(100% - 28px));margin:28px auto 46px}
.search-card,.planogram-card,.empty-state{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.search-card{padding:22px;position:relative;z-index:2}.search-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.search-heading h2{font-size:1.35rem}.search-heading p{color:var(--muted);font-size:.93rem;margin-top:5px}.count{white-space:nowrap;background:var(--sky);color:var(--blue);border-radius:999px;padding:7px 12px;font-size:.82rem;font-weight:750}
.search-wrap{height:56px;border:2px solid #b9ccdc;border-radius:15px;display:flex;align-items:center;padding:0 14px;background:#fbfdff;transition:.2s}.search-wrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,84,159,.11);background:#fff}.search-wrap svg{width:23px;height:23px;fill:none;stroke:var(--blue);stroke-width:2;flex:none}.search-wrap input{border:0;outline:0;background:transparent;width:100%;height:100%;padding:0 12px;font-size:1rem;color:var(--ink)}.search-wrap input::placeholder{color:#8394a3}.search-wrap button{display:none;border:0;background:#e7eef4;color:#52687a;width:31px;height:31px;border-radius:50%;font-size:23px;line-height:27px;cursor:pointer}.search-wrap button.visible{display:block}
.results{position:absolute;left:22px;right:22px;top:calc(100% - 11px);background:#fff;border:1px solid var(--line);border-radius:0 0 18px 18px;box-shadow:0 18px 36px rgba(18,61,99,.2);max-height:390px;overflow:auto}.result{width:100%;border:0;border-bottom:1px solid #edf2f6;background:#fff;padding:13px 15px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:15px;cursor:pointer}.result:last-child{border-bottom:0}.result:hover,.result.active{background:#eef7ff}.result strong{display:block;color:var(--ink);font-size:.97rem}.result small{display:block;color:var(--muted);font-size:.79rem;margin-top:4px}.result .arrow{color:var(--blue);font-size:1.3rem}.no-result{padding:22px;text-align:center;color:var(--muted)}
.empty-state{margin-top:22px;min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:38px}.empty-state h2{font-size:1.3rem;margin-top:22px}.empty-state p{color:var(--muted);max-width:520px;margin-top:8px;line-height:1.55}.shelf-icon{width:92px;height:74px;border:3px solid #9bc6e8;border-radius:12px;padding:10px;background:#edf8ff}.shelf-icon span{display:block;height:8px;background:var(--blue);border-radius:4px;margin:7px 0;box-shadow:0 -5px 0 #fff}
.planogram-card{margin-top:22px;overflow:hidden}.planogram-header{padding:20px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line)}.eyebrow{font-size:.72rem;letter-spacing:.11em;font-weight:800;color:var(--blue)}.planogram-header h2{font-size:1.35rem;margin-top:4px}.planogram-header p{color:var(--muted);font-size:.87rem;margin-top:5px}.dot{padding:0 6px}.status{white-space:nowrap;background:#e9f7ee;color:#137b3d;border-radius:999px;padding:7px 11px;font-size:.78rem;font-weight:700}.status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px}.image-shell{position:relative;min-height:240px;background:linear-gradient(45deg,#f6f9fb 25%,#eef3f7 25%,#eef3f7 50%,#f6f9fb 50%,#f6f9fb 75%,#eef3f7 75%);background-size:24px 24px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:16px}.image-shell img{display:block;max-width:100%;height:auto;background:#fff;box-shadow:0 3px 18px rgba(29,52,73,.14)}.loader{position:absolute;color:var(--muted);font-size:.9rem}.planogram-footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 22px;background:#f8fbfd;border-top:1px solid var(--line);font-size:.78rem}.planogram-footer span{color:var(--muted)}.planogram-footer strong{color:var(--blue);word-break:break-word}
footer{text-align:center;color:#7b8c9b;font-size:.76rem;padding:0 15px 24px}
@media(max-width:640px){.topbar{min-height:72px;padding:12px 16px}.brand-mark{width:43px;height:43px;border-radius:13px}.topbar h1{font-size:1.16rem}.topbar p{font-size:.79rem}main{width:min(100% - 20px,1120px);margin-top:16px}.search-card{padding:16px;border-radius:18px}.search-heading{align-items:center}.search-heading h2{font-size:1.18rem}.search-heading p{font-size:.82rem;line-height:1.35}.count{font-size:.72rem;padding:6px 9px}.search-wrap{height:53px}.results{left:16px;right:16px}.empty-state{min-height:300px;padding:30px 20px;border-radius:18px}.empty-state h2{font-size:1.15rem}.empty-state p{font-size:.88rem}.planogram-card{border-radius:18px}.planogram-header{padding:17px;display:block}.status{display:inline-block;margin-top:12px}.planogram-header h2{font-size:1.18rem}.image-shell{padding:8px;min-height:200px}.image-shell img{max-width:none;width:auto;min-width:100%;max-height:none}.planogram-footer{padding:13px 17px}}
@media(prefers-reduced-motion:no-preference){.planogram-card{animation:rise .28s ease-out}@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}