:root{--cyan:#21b5d2;--cyan-dark:#0595bf;--blue:#168cf0;--ice:#eefdff;--navy:#0b1f3b;--soft-line:#bfeaf2}
body{background:radial-gradient(circle at 92% 1%,#c9f5fb 0,transparent 28%),radial-gradient(circle at 8% 22%,#d8f8fc 0,transparent 30%),linear-gradient(180deg,#eafdff 0%,#f7feff 48%,#e9fbfd 100%);color:var(--navy)}
.empty[hidden]{display:none!important}
main{max-width:1900px;padding:28px 28px 42px}
header{position:relative;min-height:68px;padding-left:100px;margin-bottom:18px}header:before{content:"◇";position:absolute;left:14px;top:0;display:grid;width:66px;height:66px;place-items:center;border-radius:14px;background:linear-gradient(145deg,#48d2e7,#078dbd);color:#fff;font-size:38px;font-weight:900;box-shadow:0 10px 25px #0797bd33}header h1{font-size:34px;letter-spacing:-1px;color:#071c39}header p{font-size:15px;color:#55738b}.updated{padding:12px 22px;border-color:#ccecf2;border-radius:22px;background:#ffffffc7;color:#4e6a80;box-shadow:0 5px 20px #178fa417}
.kpis{gap:18px;margin-bottom:20px}.kpis article{min-height:128px;padding:17px 24px;border-color:#bfe8f0;border-radius:14px;background:linear-gradient(135deg,#ffffffed,#e9fbfdde);box-shadow:0 8px 22px #178fa413}.kpis article.accent{border-color:#42c3dd;background:linear-gradient(145deg,#55cde2,#0696bf);box-shadow:0 12px 28px #0498bd30}.kpis span{color:#38566e;font-size:14px;font-weight:700}.kpis strong{margin:10px 0 5px;color:#0a1f3c;font-size:36px}.kpis small{color:#648198;font-size:12px}.kpis .accent strong{color:#fff}
.toolbar{width:100%;max-width:100%;min-width:0;gap:25px;padding:9px 14px;border-color:#bfe8f0;border-radius:14px;background:#ffffff9e;box-shadow:0 8px 20px #168fa012}.periods{min-width:0;gap:10px}.periods button{min-width:54px;padding:10px 15px;border-color:#c5e8ef;border-radius:10px;color:#35556d;font-weight:700}.periods button.active{border-color:#54cce0;background:linear-gradient(#71dcec,#42c5db);color:#075e79;box-shadow:0 5px 13px #21b5d225}.filters{flex:1;min-width:0;justify-content:flex-end;gap:14px}.filters input,.filters select{min-width:0;max-width:100%;height:44px;border-color:#bfe4ec;border-radius:10px;background:#ffffffd9;color:#36536a}.filters input{width:min(520px,46vw)}
.section-head{align-items:center;margin:25px 5px 14px}.section-head>div{display:flex;align-items:baseline;gap:22px}.section-head h2{font-size:25px;color:#071d3c}.section-head p{font-size:13px;color:#59738a}.top-pagination{margin:0}.pagination label{display:flex;align-items:center;gap:5px;color:#48687f;font-size:13px;white-space:nowrap}.page-input{width:64px;height:34px;padding:0 7px;border:1px solid #b8e1ea;border-radius:8px;background:#fff;color:#173852;text-align:center;outline:none}.page-input:focus{border-color:#35bcd7;box-shadow:0 0 0 3px #21b5d21c}.products{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px}
.product.design-four{overflow:hidden;border:1px solid #b6e5ee;border-radius:13px;background:#ffffffd9;box-shadow:0 8px 20px #1595aa12;contain-intrinsic-size:245px;container-type:inline-size}.design-four .card-detail-area{padding:12px}.d4-hero{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;min-height:220px}.d4-cover{position:relative;overflow:hidden;width:220px;height:220px;aspect-ratio:1/1;border-radius:9px;background:#eefbfc}.d4-cover:before,.d4-cover:after{display:none}.d4-cover img{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;min-height:0;object-fit:cover!important;object-position:center;background:#eefbfc!important}.design-four .rank{z-index:2;top:8px;left:8px;padding:4px 7px;border-radius:6px;background:#173852e9;color:#fff;font-size:11px}.design-four .trend{z-index:2;right:8px;bottom:7px;padding:5px 9px;border-radius:8px;background:#fff;color:#f2343f;font-size:15px;box-shadow:0 4px 14px #153d5150}
.d4-info{position:relative;display:flex;min-width:0;box-sizing:border-box;flex-direction:column;padding:1px 1px 91px;color:#10243d}.design-four .d4-info h3{display:-webkit-box;min-height:52px;max-height:52px;margin:0 0 6px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#081d3a;font-size:15px;font-weight:800;line-height:1.2;text-shadow:none}.d4-category{align-self:flex-start;max-width:100%;margin:0 0 6px;padding:4px 8px;overflow:hidden;border:1px solid #9edee9;border-radius:6px;background:#e8fbfd;color:#1384a6;font-size:10px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.d4-shop{display:flex;min-width:0;align-items:center;gap:7px;margin-top:auto;color:#294b65;font-size:11px}.d4-shop b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.d4-shop-icon{display:grid;flex:0 0 21px;width:21px;height:21px;place-items:center;border:1px solid #6dcfe1;border-radius:5px;background:#effdff;color:#079bbb;font-size:13px}.d4-store-meta{display:none}.d4-chart{position:absolute;right:2px;bottom:43px;left:1px;display:flex;height:44px;align-items:flex-end;justify-content:space-around;gap:3px;padding:3px 7px 0;border:1px solid #c8edf3;border-radius:7px;background:linear-gradient(180deg,#f4fdff,#eafbfd)}.d4-bar-wrap{position:relative;display:flex;min-width:0;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;cursor:help}.d4-bar{display:block;width:min(14px,75%);min-height:5px;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#27c7dd,#1099d5);box-shadow:0 2px 5px #149fbd24}.d4-bar-wrap:hover .d4-bar{background:linear-gradient(180deg,#ff7077,#f02f3d)}.d4-bar-wrap small{margin-top:1px;color:#678599;font-size:7px;line-height:8px}
.d4-metrics{display:grid;grid-template-columns:minmax(56px,1fr) minmax(64px,1fr) minmax(92px,max-content) minmax(176px,max-content);align-items:end;gap:5px;margin:-44px 0 0 234px;background:transparent;box-shadow:none}.d4-metrics>div{display:block;min-width:0;padding:0 4px 0 0}.d4-metrics>div+div{border-left:0}.d4-metrics p{margin:0}.d4-metrics small{display:block;color:#536c81;font-size:9px;white-space:nowrap}.d4-metrics strong{display:block;margin-top:2px;overflow:hidden;color:#102743;font-size:14px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.d4-metrics .d4-price strong{min-width:max-content;overflow:visible;font-size:13px;text-overflow:clip}.d4-metrics strong.growth{color:#f02f3d}.d4-metrics .d4-actions{display:flex;min-width:176px;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;padding:0}.d4-metrics .publish-button,.d4-metrics .download-button,.d4-metrics .remove-selected-button{align-self:center;min-width:82px;padding:8px 8px;border:0;border-radius:7px;font-size:10px;white-space:nowrap}.d4-metrics .publish-button{background:linear-gradient(145deg,#19aef0,#087eea);color:#fff;box-shadow:0 5px 12px #0788dd28}.d4-metrics .publish-button:hover,.d4-metrics .publish-button.added{background:#087eea;color:#fff}.d4-metrics .download-button{border:1px solid #35bcd7;background:#f3fdff;color:#087fa3;box-shadow:0 4px 10px #159bb61c}.d4-metrics .download-button:hover{background:#dff9fd}.d4-metrics .remove-selected-button{border:1px solid #f0a3ad;background:#fff6f7;color:#d23b4c;box-shadow:0 4px 10px #d23b4c14}.d4-metrics .remove-selected-button:hover{background:#ffe8eb}.d4-metrics .remove-selected-button:disabled{cursor:wait;opacity:.68}.d4-metrics .download-button:disabled{cursor:wait;opacity:.68}.d4-metrics .publish-button b{display:none}.d4-monitor{display:none}
@container (max-width:650px){.d4-metrics{grid-template-columns:minmax(52px,1fr) minmax(58px,1fr) minmax(92px,max-content)}.d4-metrics .d4-actions{grid-column:1/-1;width:100%;min-width:0;margin-top:4px;justify-content:flex-end}.d4-metrics .publish-button{min-width:88px}.d4-metrics .download-button{min-width:76px}}
.pagination{justify-content:center;margin-top:28px}.pagination button{border-color:#b8e1ea;border-radius:8px;background:#ffffffc7;color:#31536c}.pagination span{color:#48687f}dialog{border:1px solid #b9e7ef;background:#f9feff}
@media(max-width:1450px){.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media(max-width:900px){header{padding-left:78px}header:before{left:0;width:58px;height:58px}.kpis{grid-template-columns:repeat(2,1fr)}.toolbar{align-items:stretch;flex-direction:column}.periods{flex-wrap:wrap}.filters{width:100%;justify-content:flex-start;flex-wrap:wrap}.filters input,.filters #category{flex:1 0 100%;width:100%}.filters #sort,.filters #order{flex:1 1 calc(50% - 7px);width:calc(50% - 7px)}.section-head{align-items:flex-start;flex-direction:column;gap:10px}.top-pagination{justify-content:flex-start;flex-wrap:wrap}.products{grid-template-columns:1fr!important}.pagination{flex-wrap:wrap}}@media(max-width:560px){main{padding:16px}.d4-hero{grid-template-columns:150px minmax(0,1fr);gap:9px;min-height:150px}.d4-cover{width:150px;height:150px}.d4-metrics{margin:-42px 0 0 159px;grid-template-columns:minmax(52px,1fr) minmax(58px,1fr) minmax(86px,max-content)}.d4-metrics .d4-actions{grid-column:1/-1;width:100%;min-width:0;margin-top:8px;justify-content:stretch}.d4-metrics .publish-button,.d4-metrics .download-button,.d4-metrics .remove-selected-button{flex:1}.design-four .d4-info h3{font-size:13px}.kpis article{min-height:105px;padding:14px}.kpis strong{font-size:28px}}

/* Balanced card v2: remove the dead vertical gap and give chart/actions separate lanes. */
.d4-cover img{object-fit:contain!important}
.d4-info{padding:1px 1px 104px}
.design-four .d4-info h3{min-height:44px;max-height:44px;-webkit-line-clamp:2;line-height:1.45}
.d4-shop{margin-top:2px}
.d4-chart{bottom:54px;height:48px;padding:4px 7px 1px}
.d4-metrics{align-items:center;gap:4px;margin:-42px 0 0 234px;padding-top:7px;border-top:1px solid #d8eef3}
@media(max-width:560px){.d4-metrics{margin:-40px 0 0 159px;padding-top:6px}}
/* Use only the real software logo rendered by .warehouse-brand. */
header{padding-left:0}header:before{display:none;content:none}@media(max-width:900px){header{padding-left:0}}