.webshop-main { background: radial-gradient(circle at 90% 8%, rgba(222,171,104,.08), transparent 27%); }
.back-dashboard { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.42); color: #694f3d; font-size: 11px; font-weight: 650; white-space: nowrap; }
.back-dashboard:hover { border-color: var(--copper); color: var(--copper-dark); }
.shop-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 11px 0 13px; }
.shop-kpi-grid .kpi-card { height: 137px; }
.shop-dashboard-grid .panel { overflow: hidden; }
.shop-dashboard-grid .span-8 { grid-column: span 8; }
.shop-insight { min-height: 286px; }
.shop-insight .outline-button { display: inline-flex; align-items: center; text-decoration: none; }
.shop-sales-panel { min-height: 286px; }
.shop-line-chart { height: 205px; }
.shop-line-chart svg { height: 168px; }
.shop-line-chart .y-labels { height: 168px; }
.shop-line-chart .x-labels { padding-inline: 7px; }
.panel-period { padding: 4px 8px; border-radius: 6px; background: #f8eee1; color: #766a5f; font-size: 10px; }
.top-products-panel, .order-status-panel, .channels-panel { min-height: 290px; }
.product-list { display: grid; }
.product-list > div { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; min-height: 55px; border-bottom: 1px solid #eee4d9; }
.product-list > div:last-child { border: 0; }
.product-list strong, .product-list small { display: block; }.product-list strong { font-size: 12px; }.product-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }.product-list b { color: #4a3b30; font-size: 12px; }
.product-jar { display: grid; place-items: center; width: 29px; height: 37px; border: 1px solid rgba(67,48,29,.22); border-radius: 4px 4px 8px 8px; color: #f5d38a; background: #6a7046; font-family: Georgia,serif; font-size: 13px; box-shadow: inset 3px 0 rgba(255,255,255,.18); }
.gold-jar { background: #bc9347; }.green-jar { background:#687443; }.orange-jar { background:#b76a43; }.cream-jar { background:#a68c69; }
.status-list { display: grid; gap: 14px; margin-top: 14px; }
.status-list > div { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; font-size: 12px; }.status-list span { display: flex; align-items: center; gap: 8px; }.status-list b { font-size: 13px; }.status-list em { grid-column: 1 / -1; height: 7px; border-radius: 5px; background: #eee5da; overflow: hidden; }.status-list em::after { content:""; display:block; width:var(--progress); height:100%; border-radius:inherit; background: linear-gradient(90deg,#7d8c55,#93a36b); }
.status-dot { width: 9px; height: 9px; border-radius:50%; }.status-dot.new { background:#d98561; }.status-dot.processing { background:#d4a352; }.status-dot.ready { background:#7e8f56; }.status-dot.sent { background:#5d6f82; }
.channel-body { display:grid; grid-template-columns: 145px 1fr; align-items:center; gap:14px; margin-top:9px; }
.channel-donut { position:relative; width:140px; height:140px; border-radius:50%; background: conic-gradient(#d5a259 0 68%,#75864f 68% 87%,#453b2f 87%); }.channel-donut::after { content:""; position:absolute; inset:29px; border-radius:50%; background:#fffaf5; }.channel-donut div { position:absolute; z-index:1; inset:0; display:grid; place-content:center; text-align:center; }.channel-donut strong { font-size:20px; }.channel-donut small { color:var(--muted); font-size:10px; }
.channel-body ul { display:grid; gap:13px; margin:0; padding:0; list-style:none; }.channel-body li { display:grid; grid-template-columns:14px 1fr auto; gap:7px; align-items:center; font-size:11px; }.channel-body li i { width:12px; height:7px; border-radius:3px; }.channel-body .web { background:#d5a259; }.channel-body .insta { background:#75864f; }.channel-body .direct { background:#453b2f; }
.recent-orders-panel { min-height:292px; }.recent-orders-panel td { height:47px; }.recent-orders-panel tbody strong { color:#6d503d; }
.status-pill { display:inline-flex; align-items:center; justify-content:center; min-width:70px; height:23px; border-radius:12px; font-size:10px; font-weight:650; }.new-pill { color:#a44e35; background:#f7e1d7; }.pack-pill { color:#8a6625; background:#f5ead0; }.ready-pill { color:#617640; background:#e7eddc; }.sent-pill { color:#536576; background:#e3e8ec; }
.stock-panel { min-height:292px; }.stock-list { display:grid; }.stock-list > div { display:grid; grid-template-columns:33px 1fr auto; gap:10px; align-items:center; min-height:58px; border-bottom:1px solid #eee4d9; }.stock-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; font-weight:800; }.critical-stock { color:#b64040; background:#f7dddd; }.warning-stock { color:#946223; background:#f4e8cd; }.good-stock { color:#5f773e; background:#e3ebd8; }.stock-list strong,.stock-list small { display:block; }.stock-list strong { font-size:12px; }.stock-list small { color:var(--muted); font-size:10px; }.stock-list b { color:#75513b; font-size:10px; }

@media (max-width: 1050px) {
  .shop-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shop-insight { grid-column:span 5; }.shop-sales-panel { grid-column:span 7; }
}
@media (max-width: 820px) {
  .back-dashboard { display:none; }
  .shop-insight,.shop-sales-panel { grid-column:span 12; }
  .shop-dashboard-grid .shop-sales-panel,.shop-dashboard-grid .recent-orders-panel { grid-column:span 12; }
  .top-products-panel,.order-status-panel,.channels-panel,.stock-panel { grid-column:span 6; }
  .recent-orders-panel { grid-column:span 12; }
}
@media (max-width: 610px) {
  .shop-kpi-grid { grid-template-columns:1fr; }
  .shop-kpi-grid .kpi-card { height:113px; padding:14px 15px; }
  .shop-kpi-grid .kpi-card > strong { margin-top:8px; }
  .shop-kpi-grid .kpi-meta { margin-top:9px; }
  .shop-insight,.shop-sales-panel,.top-products-panel,.order-status-panel,.channels-panel,.recent-orders-panel,.stock-panel { grid-column:span 12; }
  .shop-sales-panel { min-height:310px; }
  .channel-body { grid-template-columns:130px 1fr; }.channel-donut { width:125px; height:125px; }
  .recent-orders-panel .table-wrap { overflow-x:auto; }.recent-orders-panel table { min-width:650px; }
}