/* Full store economics analysis · 2026-10-11 */

.store-analysis{
  display:grid;
  gap:14px;
  min-width:0;
  color:#eaf1fb;
}
.store-analysis-head{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  min-height:104px;
  padding:18px 20px;
  border:1px solid #294663;
  border-radius:18px;
  background:
    radial-gradient(circle at 88% 2%,rgba(46,110,211,.12),transparent 31%),
    linear-gradient(145deg,#0d1b2b,#07111c 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022),0 16px 38px rgba(0,0,0,.18);
}
.store-analysis-head::after{
  content:"";
  position:absolute;
  right:-60px;
  top:-126px;
  width:490px;
  height:170px;
  border:1px solid rgba(66,137,232,.36);
  border-radius:50%;
  transform:rotate(-7deg);
  box-shadow:0 0 16px rgba(53,119,220,.13);
}
.store-analysis-head>div{position:relative;z-index:1}
.store-analysis-head .eyebrow{
  color:#77a8de;
  font-size:9px;
  letter-spacing:.16em;
}
.store-analysis-head h3{
  margin:7px 0 6px;
  color:#f4f7fb;
  font-size:25px;
  line-height:1.1;
}
.store-analysis-head p{
  max-width:850px;
  margin:0;
  color:#899db3;
  font-size:11px;
  line-height:1.55;
}
.store-analysis-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.store-analysis-periods{
  display:flex;
  gap:4px;
  padding:4px;
  border:1px solid #294863;
  border-radius:11px;
  background:#071420;
}
.store-analysis-periods button{
  min-height:35px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#8298b1;
  font:inherit;
  font-size:9px;
  cursor:pointer;
}
.store-analysis-periods button:hover{
  color:#e7f1fc;
  border-color:#315879;
  background:#10253a;
}
.store-analysis-periods button.active{
  color:#fff;
  border-color:#3d81d3;
  background:linear-gradient(135deg,#174b87,#12345f);
  box-shadow:0 0 14px rgba(45,122,220,.11);
}
#storeAnalysisReload{
  min-height:43px;
  border-color:#31506d;
  border-radius:10px;
  background:#0b1a28;
  color:#afc0d2;
  font-size:9px;
}
.store-analysis-status{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 3px;
  color:#7890aa;
  font-size:9px;
}
.store-analysis-status .ok{color:#67d0a0}
.store-analysis-status b{color:#c8d6e6;font-weight:650}
.store-analysis-status small{margin-left:auto;color:#667d97}

/* KPI rail */
.store-analysis-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.store-analysis-kpi{
  position:relative;
  min-height:100px;
  overflow:hidden;
  display:grid;
  align-content:center;
  gap:5px;
  padding:15px 16px;
  border:1px solid #263f59;
  border-radius:16px;
  background:
    radial-gradient(circle at 90% 0%,rgba(62,119,198,.075),transparent 34%),
    linear-gradient(145deg,#0c1826,#07111b 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 11px 25px rgba(0,0,0,.14);
}
.store-analysis-kpi::after{
  content:"";
  position:absolute;
  right:-26px;
  bottom:-47px;
  width:120px;
  height:80px;
  border-radius:50%;
  border-top:1px solid rgba(94,147,212,.30);
}
.store-analysis-kpi span{
  position:relative;z-index:1;
  color:#7f95ae;
  font-size:9px;
}
.store-analysis-kpi strong{
  position:relative;z-index:1;
  color:#f3f7fb;
  font-size:22px;
  line-height:1.1;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.store-analysis-kpi small{
  position:relative;z-index:1;
  color:#657c95;
  font-size:8.5px;
}
.store-analysis-kpi.accent{border-color:#2e5e96}
.store-analysis-kpi.positive{border-color:#285847}
.store-analysis-kpi.positive strong{color:#8fd8b4}
.store-analysis-kpi.negative{border-color:#70424c}
.store-analysis-kpi.negative strong{color:#f2a8b3}
.store-analysis-kpi.warning{border-color:#665236}
.store-analysis-kpi.warning strong{color:#e8c785}

.store-analysis-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 12px;
  border:1px solid #4b4431;
  border-radius:10px;
  background:#19160f;
  color:#b9a77f;
  font-size:9.5px;
  line-height:1.5;
}
.store-analysis-note b{color:#e3c983}

/* Insights */
.store-analysis-insights{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.store-analysis-insight{
  min-height:118px;
  display:grid;
  align-content:start;
  gap:6px;
  padding:13px 14px;
  border:1px solid #29425d;
  border-radius:14px;
  background:linear-gradient(145deg,#0b1825,#07111b);
}
.store-analysis-insight>span{
  color:#7390ae;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.store-analysis-insight>b{
  color:#eef4fa;
  font-size:18px;
  font-variant-numeric:tabular-nums;
}
.store-analysis-insight p{
  margin:0;
  color:#8ca0b5;
  font-size:9px;
  line-height:1.5;
}
.store-analysis-insight.good{border-color:#2a5a49}
.store-analysis-insight.good>b{color:#8fd8b4}
.store-analysis-insight.attention{border-color:#5c4a31}
.store-analysis-insight.attention>b{color:#e6c07c}
.store-analysis-insight.bad{border-color:#6a3d47}
.store-analysis-insight.bad>b{color:#eea1ac}

/* Main panel grid */
.store-analysis-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
.store-analysis-panel{
  min-width:0;
  overflow:hidden;
  padding:14px;
  border:1px solid #263f5a;
  border-radius:16px;
  background:
    radial-gradient(circle at 92% 0%,rgba(43,104,195,.055),transparent 30%),
    linear-gradient(145deg,#0b1724,#07101a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.016),0 12px 28px rgba(0,0,0,.13);
}
.store-analysis-panel-wide{grid-column:1/-1}
.store-analysis-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.store-analysis-panel-head span{
  display:block;
  margin-bottom:4px;
  color:#6687a8;
  font-size:7.5px;
  font-weight:850;
  letter-spacing:.13em;
}
.store-analysis-panel-head h4{
  margin:0;
  color:#eaf1f8;
  font-size:14px;
}
.store-analysis-panel-head>small{
  color:#667d95;
  font-size:8px;
  text-align:right;
}
.store-analysis-empty{
  min-height:110px;
  display:grid;
  place-items:center;
  color:#647b95;
  font-size:9px;
}

/* Line chart */
.store-analysis-chart{min-height:300px}
.store-analysis-chart svg{
  display:block;
  width:100%;
  height:auto;
  min-height:270px;
}
.store-analysis-chart-legend{
  display:flex;
  justify-content:flex-end;
  gap:14px;
  margin:-4px 0 4px;
  color:#8196ad;
  font-size:8px;
}
.store-analysis-chart-legend span::before{
  content:"";
  display:inline-block;
  width:7px;height:7px;
  margin-right:5px;
  border-radius:50%;
  vertical-align:-1px;
}
.store-analysis-chart-legend .sales::before{background:#4f9eff}
.store-analysis-chart-legend .expenses::before{background:#ed7390}
.store-analysis-chart-legend .net::before{background:#70d4aa}
.analysis-grid-line{stroke:#1d354d;stroke-width:1}
.analysis-zero-line{stroke:#46617c;stroke-width:1.2;stroke-dasharray:4 5}
.analysis-axis-text{fill:#607892;font-size:9px}
.analysis-line{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.analysis-line.sales{stroke:#4f9eff}
.analysis-line.expenses{stroke:#ed7390}
.analysis-line.net{stroke:#70d4aa}
.analysis-area.sales{fill:rgba(79,158,255,.07)}

/* Donut */
.store-analysis-donut-wrap{
  display:grid;
  grid-template-columns:minmax(150px,.75fr) minmax(0,1.2fr);
  gap:16px;
  align-items:center;
}
.store-analysis-donut{
  width:min(180px,100%);
  aspect-ratio:1;
  margin:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  box-shadow:0 0 26px rgba(48,112,207,.08);
}
.store-analysis-donut::after{
  content:"";
  grid-area:1/1;
  width:64%;
  height:64%;
  border-radius:50%;
  background:#08131f;
  box-shadow:inset 0 0 0 1px #223d59;
}
.store-analysis-donut>div{
  grid-area:1/1;
  z-index:1;
  display:grid;
  place-items:center;
  text-align:center;
}
.store-analysis-donut b{
  color:#f0f5fa;
  font-size:16px;
}
.store-analysis-donut span{
  margin-top:3px;
  color:#6c839c;
  font-size:8px;
}
.store-analysis-donut-legend{display:grid;gap:8px}
.store-analysis-donut-legend>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  color:#8ea3b9;
  font-size:8.5px;
}
.store-analysis-donut-legend span{
  display:flex;
  align-items:center;
  gap:6px;
}
.store-analysis-donut-legend i{
  width:8px;height:8px;border-radius:2px;flex:0 0 8px;
}
.store-analysis-donut-legend b{
  color:#d8e3ef;
  font-size:8.5px;
}

/* 100 rubles */
.store-analysis-hundred{display:grid;gap:9px}
.store-analysis-hundred-base{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px;
  border:1px solid #2e5b8b;
  border-radius:10px;
  background:#0d2238;
}
.store-analysis-hundred-base b{font-size:20px;color:#e9f3ff}
.store-analysis-hundred-base span{font-size:8px;color:#7694b2}
.store-analysis-hundred-row{display:grid;gap:5px}
.store-analysis-hundred-row>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.store-analysis-hundred-row span{color:#8298af;font-size:8.5px}
.store-analysis-hundred-row b{color:#dce7f1;font-size:9px}
.store-analysis-hundred-row.minus b{color:#eba2ad}
.store-analysis-hundred-row.plus b,.store-analysis-hundred-row.net b{color:#8ad5b0}
.store-analysis-hundred-track{
  height:5px;
  overflow:hidden;
  border-radius:99px;
  background:#13253a;
}
.store-analysis-hundred-track i{
  display:block;height:100%;border-radius:inherit;background:#547da9;
}
.store-analysis-hundred-row.minus i{background:#c95f78}
.store-analysis-hundred-row.plus i{background:#56b68d}
.store-analysis-hundred-row.net i{background:#4f9eff}

/* Generic bars */
.store-analysis-bars{display:grid;gap:10px}
.store-analysis-bar-row{display:grid;gap:5px}
.store-analysis-bar-label{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-end;
}
.store-analysis-bar-label span{
  min-width:0;
  color:#93a8bd;
  font-size:8.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.store-analysis-bar-label b{
  flex:0 0 auto;
  color:#e3ebf4;
  font-size:8.5px;
  font-variant-numeric:tabular-nums;
}
.store-analysis-bar-track{
  height:6px;
  overflow:hidden;
  border-radius:99px;
  background:#12243a;
}
.store-analysis-bar-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#337ee0,#60b7f4);
  box-shadow:0 0 9px rgba(64,143,233,.13);
}
.store-analysis-bar-row>small{
  color:#5f7894;
  font-size:7.5px;
}

/* Product ranking */
.store-analysis-products{
  display:grid;
  border:1px solid #203a54;
  border-radius:12px;
  overflow:hidden;
}
.store-analysis-products-head,
.store-analysis-product-row{
  display:grid;
  grid-template-columns:minmax(300px,1.9fr) minmax(100px,.65fr) minmax(100px,.65fr) minmax(110px,.7fr);
  gap:12px;
  align-items:center;
}
.store-analysis-products-head{
  min-height:38px;
  padding:0 12px;
  background:#0f2033;
  color:#718ba5;
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.store-analysis-product-row{
  min-height:58px;
  padding:8px 12px;
  border-top:1px solid #1c344d;
  background:rgba(6,16,27,.52);
}
.store-analysis-product-row:hover{background:#0c1f31}
.store-analysis-product-main{min-width:0}
.store-analysis-product-main>b{
  display:block;
  color:#dfe9f3;
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.store-analysis-product-main>small{
  display:block;
  margin:3px 0 6px;
  color:#617b96;
  font-size:7.5px;
}
.store-analysis-product-main>div{
  height:4px;
  overflow:hidden;
  border-radius:99px;
  background:#11263b;
}
.store-analysis-product-main i{
  display:block;height:100%;border-radius:inherit;background:#408ce6;
}
.store-analysis-product-row>strong{
  color:#cbd8e4;
  font-size:9px;
  font-variant-numeric:tabular-nums;
}
.store-analysis-product-row>strong.negative{color:#e8a1aa}
.store-analysis-product-row>strong.positive{color:#87d1ad}
.store-analysis-footnote{
  margin:0;
  padding:9px 12px;
  border-top:1px solid #1d354f;
  color:#637c96;
  background:#091724;
  font-size:7.5px;
}

/* Price stats */
.store-analysis-price{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.store-analysis-price>div{
  padding:10px 11px;
  border:1px solid #223d59;
  border-radius:10px;
  background:#081522;
}
.store-analysis-price span{
  display:block;
  color:#69819b;
  font-size:7.5px;
}
.store-analysis-price b{
  display:block;
  margin-top:4px;
  color:#e6edf5;
  font-size:11px;
}

/* Quality */
.store-analysis-quality{display:grid;gap:6px}
.store-analysis-quality>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:34px;
  padding:0 9px;
  border:1px solid #203a54;
  border-radius:9px;
  background:#081521;
}
.store-analysis-quality span{color:#7790aa;font-size:8px}
.store-analysis-quality b{color:#d7e2ed;font-size:8.5px;text-align:right}
.store-analysis-quality .good{border-color:#285545}
.store-analysis-quality .good b{color:#88d3ad}
.store-analysis-quality .attention{border-color:#58482f}
.store-analysis-quality .attention b{color:#e0bd79}
.store-analysis-quality .bad{border-color:#633b44}
.store-analysis-quality .bad b{color:#eaa0aa}

/* Half comparison */
.store-analysis-halves{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.store-analysis-halves article{
  padding:11px;
  border:1px solid #233e5a;
  border-radius:11px;
  background:#081522;
}
.store-analysis-halves article>span{
  display:block;
  margin-bottom:8px;
  color:#7793af;
  font-size:8px;
  font-weight:800;
}
.store-analysis-halves article>div{
  display:flex;
  justify-content:space-between;
  gap:9px;
  margin-top:6px;
}
.store-analysis-halves small{color:#627b95;font-size:7.5px}
.store-analysis-halves b{color:#dce6ef;font-size:8.5px}
.store-analysis-halves b.positive{color:#87d2ac}
.store-analysis-halves b.negative{color:#e9a0a9}
.store-analysis-halves em{
  display:block;
  margin-top:8px;
  color:#617a94;
  font-size:7.5px;
  font-style:normal;
}

/* Metrics matrix */
.store-analysis-metrics{
  display:grid;
  border:1px solid #203b56;
  border-radius:12px;
  overflow:hidden;
}
.store-analysis-metrics-head,
.store-analysis-metric-row{
  display:grid;
  grid-template-columns:minmax(240px,1.2fr) minmax(160px,.6fr) minmax(300px,1.6fr);
  gap:14px;
  align-items:center;
}
.store-analysis-metrics-head{
  min-height:38px;
  padding:0 12px;
  background:#102137;
  color:#7089a5;
  font-size:7.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.store-analysis-metric-row{
  min-height:42px;
  padding:7px 12px;
  border-top:1px solid #1c344d;
  background:#07141f;
}
.store-analysis-metric-row:nth-child(odd){background:#081725}
.store-analysis-metric-row b{color:#aebfd0;font-size:8.5px;font-weight:600}
.store-analysis-metric-row strong{color:#e6edf5;font-size:9px;font-variant-numeric:tabular-nums}
.store-analysis-metric-row small{color:#667f99;font-size:8px}

@media(max-width:1320px){
  .store-analysis-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .store-analysis-insights{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1050px){
  .store-analysis-head{display:block}
  .store-analysis-head-actions{justify-content:flex-start;margin-top:14px}
  .store-analysis-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .store-analysis-insights{grid-template-columns:repeat(2,minmax(0,1fr))}
  .store-analysis-grid{grid-template-columns:1fr}
  .store-analysis-panel-wide{grid-column:auto}
  .store-analysis-products-head,
  .store-analysis-product-row{grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(90px,.6fr))}
}
@media(max-width:720px){
  .store-analysis-head{padding:14px;border-radius:14px}
  .store-analysis-periods{width:100%;overflow:auto}
  .store-analysis-periods button{flex:0 0 auto}
  .store-analysis-status{align-items:flex-start;flex-direction:column;gap:4px}
  .store-analysis-status small{margin-left:0}
  .store-analysis-kpis{grid-template-columns:1fr}
  .store-analysis-insights{grid-template-columns:1fr}
  .store-analysis-donut-wrap{grid-template-columns:1fr}
  .store-analysis-donut{width:160px}
  .store-analysis-products{overflow:auto}
  .store-analysis-products-head,
  .store-analysis-product-row{min-width:680px}
  .store-analysis-metrics{overflow:auto}
  .store-analysis-metrics-head,
  .store-analysis-metric-row{min-width:760px}
  .store-analysis-halves{grid-template-columns:1fr}
  .store-analysis-price{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .store-analysis-periods button,
  .store-analysis-product-row{transition:none!important}
}