/* Arena Core 0.5.3 — Recovery UI Pack 007: shop and forge */
:root{
  --ui007-gold:#efc76c;
  --ui007-blue:#66bdf5;
  --ui007-green:#68d69c;
  --ui007-violet:#a67bff;
  --ui007-red:#f46f7f;
  --ui007-panel:linear-gradient(180deg,rgba(17,37,58,.98),rgba(7,17,29,.99));
  --ui007-line:#2d4a65;
}

html.ui007-shop-forge #screen-shop,
html.ui007-shop-forge #screen-forge{
  padding-bottom:calc(var(--ui002-dock-height,76px) + max(24px,env(safe-area-inset-bottom)));
}

html.ui007-shop-forge #screen-shop > .shop-shell{display:none!important}
html.ui007-shop-forge #screen-shop > article.card:first-child{
  border-color:#4f4934;
  background:
    radial-gradient(circle at 88% 0,rgba(237,191,91,.15),transparent 34%),
    linear-gradient(180deg,#172638,#0a1725);
}
html.ui007-shop-forge #screen-shop .ui-page-head h2{
  margin:4px 0 6px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:28px;
}
html.ui007-shop-forge #screen-shop .catalog-summary{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
html.ui007-shop-forge #screen-shop .catalog-summary .metric{
  min-height:72px;
  border:1px solid #314c65;
  border-radius:13px;
  background:rgba(7,19,31,.72);
}

.ui007-shop{
  display:grid;
  grid-template-columns:240px minmax(470px,1fr) 300px;
  gap:11px;
  align-items:start;
  margin-top:12px;
}
.ui007-shop > .card{
  min-width:0;
  margin:0;
  border-radius:17px;
  border-color:var(--ui007-line);
  background:var(--ui007-panel);
}
.ui007-shop-nav,
.ui007-preview{
  position:sticky;
  top:72px;
}
.ui007-shop-nav{padding:13px}
.ui007-panel-kicker{
  color:#9ab0c5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.ui007-shop-nav h3{
  margin:5px 0 4px;
  color:#fff2c2;
  font-family:Georgia,"Times New Roman",serif;
  font-size:23px;
}
.ui007-shop-nav > p{
  margin:0 0 12px;
  color:#92a5b8;
  font-size:10px;
  line-height:1.45;
}
.ui007-departments{display:grid;gap:6px}
.ui007-department{
  width:100%;
  min-height:52px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid #2c465f;
  border-radius:12px;
  color:#ced9e5;
  background:#0a1928;
  text-align:left;
}
.ui007-department > span{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid #3a526b;
  border-radius:9px;
  background:#12263a;
  font-size:18px;
}
.ui007-department b{font-size:10px}
.ui007-department em{
  min-width:32px;
  padding:4px 6px;
  border-radius:999px;
  background:#ffffff0a;
  color:#899db1;
  font-size:8px;
  font-style:normal;
  text-align:center;
}
.ui007-department.active{
  border-color:#b68c43;
  color:#fff;
  background:linear-gradient(135deg,#3a2d18,#132238);
  box-shadow:inset 0 0 0 1px rgba(245,202,111,.12),0 8px 22px rgba(0,0,0,.22);
}
.ui007-department.active > span{border-color:#9c7435;background:#3b2b15}
.ui007-department.active em{color:#f4d98f;background:#ad7e2b24}
.ui007-rotation-note{
  margin-top:11px;
  padding:10px;
  border:1px solid #4b4167;
  border-radius:12px;
  background:linear-gradient(145deg,#201a34,#0e1b2b);
}
.ui007-rotation-note b,
.ui007-rotation-note span,
.ui007-rotation-note small{display:block}
.ui007-rotation-note b{color:#d5c4ff;font-size:10px}
.ui007-rotation-note span{margin-top:4px;color:#fff;font-size:13px;font-weight:900}
.ui007-rotation-note small{margin-top:6px;color:#8fa1b4;font-size:8px;line-height:1.45}

.ui007-shop-main{padding:12px}
.ui007-toolbar{
  display:grid;
  grid-template-columns:1.55fr repeat(5,minmax(115px,.8fr));
  gap:7px;
  padding:9px;
  border:1px solid #2c4862;
  border-radius:14px;
  background:#071725;
}
.ui007-toolbar label{display:grid;gap:4px;min-width:0}
.ui007-toolbar label > span{
  color:#8198ae;
  font-size:8px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.ui007-toolbar input,
.ui007-toolbar select{
  width:100%;
  min-width:0;
  min-height:40px;
  padding:8px 9px;
  border:1px solid #304b65;
  border-radius:10px;
  color:#eaf3fc;
  background:#0d2134;
  font-size:10px;
}
.ui007-toolbar input:focus,
.ui007-toolbar select:focus{outline:2px solid rgba(102,189,245,.24);border-color:#5aaee6}
.ui007-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 2px 8px;
  color:#dfe9f3;
  font-size:11px;
}
.ui007-result-head b{color:#8196ab;font-size:9px}
.ui007-items{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.ui007-item{
  position:relative;
  min-width:0;
  min-height:168px;
  padding:10px;
  border:1px solid #29455e;
  border-radius:14px;
  background:linear-gradient(145deg,#10253a,#081726);
  box-shadow:0 9px 24px rgba(0,0,0,.18);
  cursor:pointer;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.ui007-item:hover{border-color:#4e7596;transform:translateY(-1px)}
.ui007-item.selected{
  border-color:#d0a550;
  box-shadow:inset 0 0 0 1px rgba(240,199,108,.17),0 12px 28px rgba(0,0,0,.27);
}
.ui007-item.quality-rare{background:linear-gradient(145deg,#102a43,#081725)}
.ui007-item.quality-epic{border-color:#52427c;background:linear-gradient(145deg,#221b3a,#0b1727)}
.ui007-item.quality-legendary{border-color:#6d582c;background:linear-gradient(145deg,#2d2514,#0c1826)}
.ui007-item.quality-cursed{border-color:#713744;background:linear-gradient(145deg,#30161e,#0c1826)}
.ui007-item-top{display:grid;grid-template-columns:48px minmax(0,1fr);gap:9px;align-items:center}
.ui007-item-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid #38536c;
  border-radius:12px;
  background:linear-gradient(145deg,#1b3046,#0c1b2b);
  font-size:27px;
}
.ui007-item-top small{display:block;color:#8ea3b8;font-size:8px}
.ui007-item-top h4{
  margin:3px 0 2px;
  overflow:hidden;
  color:#f2f7fb;
  font-size:12px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ui007-item-top p{margin:0;color:#8195a9;font-size:8px}
.ui007-item-stats{
  min-height:49px;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:4px;
  margin-top:9px;
}
.ui007-item-stats > span{
  padding:4px 6px;
  border:1px solid #263f56;
  border-radius:7px;
  color:#91a5b8;
  background:#091828;
  font-size:8px;
}
.ui007-item-stats > span b{color:#dce9f4}
.ui007-no-stats{opacity:.65}
.ui007-item-bottom{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:8px}
.ui007-item-bottom strong{flex:0 0 auto;color:#f1cf7c;font-size:11px}
.ui007-availability{
  min-width:0;
  padding:5px 7px;
  overflow:hidden;
  border:1px solid #314a61;
  border-radius:999px;
  color:#91a5b8;
  background:#0a1928;
  font-size:7px;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ui007-availability.ok,.ui007-preview-status.ok{border-color:#39725a;color:#79dfac;background:#102b22}
.ui007-availability.warn,.ui007-preview-status.warn{border-color:#755a2c;color:#e7c778;background:#2b2211}
.ui007-availability.future,.ui007-preview-status.future{border-color:#4f4777;color:#c5b2ff;background:#1c1932}
.ui007-availability.muted,.ui007-preview-status.muted{opacity:.68}

.ui007-preview{padding:12px}
.ui007-preview-head{display:grid;grid-template-columns:66px minmax(0,1fr);gap:10px;align-items:center}
.ui007-preview-head > span{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border:1px solid #5a4a74;
  border-radius:14px;
  background:linear-gradient(145deg,#29213d,#0d1a2a);
  font-size:37px;
}
.ui007-preview-head small{color:#9faec1;font-size:8px}
.ui007-preview-head h3{margin:3px 0 3px;color:#fff;font-size:16px;line-height:1.2}
.ui007-preview-head p{margin:0;color:#8599ad;font-size:8px}
.ui007-preview-status{
  margin-top:10px;
  padding:8px 9px;
  border:1px solid #344e66;
  border-radius:10px;
  color:#a7b7c7;
  background:#0b1a29;
  font-size:9px;
  font-weight:850;
  text-align:center;
}
.ui007-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:9px}
.ui007-preview-grid > div{
  min-width:0;
  padding:8px;
  border:1px solid #263f57;
  border-radius:10px;
  background:#091827;
}
.ui007-preview-grid span{display:block;color:#788da2;font-size:7px;text-transform:uppercase}
.ui007-preview-grid b{display:block;margin-top:3px;overflow:hidden;color:#e8f0f7;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.ui007-preview-section{margin-top:9px;padding-top:9px;border-top:1px solid #20364b}
.ui007-preview-section > b{display:block;color:#a9bfd2;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.ui007-preview-section p{margin:5px 0 0;color:#d3dee8;font-size:9px;line-height:1.48}
.ui007-deltas{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ui007-deltas span{padding:5px 6px;border-radius:8px;font-size:8px}
.ui007-deltas .up{border:1px solid #32684f;color:#72dca4;background:#0f291f}
.ui007-deltas .down{border:1px solid #713d48;color:#f28b98;background:#2b151b}
.ui007-compare-empty{margin-top:6px;color:#8296a9;font-size:8px;line-height:1.4}
.ui007-preview .action{width:100%;min-height:44px;margin-top:11px;border-radius:11px}
.ui007-empty,.ui007-loading,.ui007-error{
  grid-column:1/-1;
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:18px;
  border:1px dashed #35506a;
  border-radius:14px;
  color:#899fb4;
  background:#081725;
  text-align:center;
  font-size:10px;
}
.ui007-empty b,.ui007-error b{color:#d8e4ee;font-size:12px}
.ui007-empty span,.ui007-error span{max-width:340px;line-height:1.45}
.ui007-error{border-color:#6a3845;color:#f0a2ad;background:#26131a}
.ui007-pagination{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:11px}
.ui007-pagination button{
  min-width:38px;
  min-height:38px;
  padding:6px;
  border:1px solid #304b65;
  border-radius:10px;
  color:#c7d4e0;
  background:#0b1d2d;
  font-size:10px;
  font-weight:850;
}
.ui007-pagination button.active{border-color:#c79b48;color:#fff1bf;background:#3a2a13}
.ui007-pagination button:disabled{opacity:.32}
.ui007-pagination span{color:#667b90;font-size:9px}

/* Forge: distinguish real mechanics from roadmap cards. */
html.ui007-shop-forge #screen-forge .forge-hero{
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:20px;
  border-color:#634c2e;
  background:
    radial-gradient(circle at 86% 12%,rgba(255,139,49,.21),transparent 34%),
    linear-gradient(180deg,#241d1b,#0e1721);
}
html.ui007-shop-forge #screen-forge .forge-hero h2{font-size:30px}
.ui007-forge-legend{display:flex;flex-wrap:wrap;gap:7px;margin:12px 2px 8px}
.ui007-forge-legend span{padding:6px 9px;border-radius:999px;font-size:8px;font-weight:900}
.ui007-forge-legend .working{border:1px solid #39715a;color:#79dda9;background:#102a21}
.ui007-forge-legend .future{border:1px solid #5c4c32;color:#d7b77b;background:#271e12}
html.ui007-shop-forge #screen-forge .forge-workbench-grid{gap:9px;margin-top:0}
.ui007-roadmap-card{
  position:relative;
  min-height:205px;
  display:flex;
  flex-direction:column;
  border-color:#4d4538!important;
  background:linear-gradient(145deg,#201d1b,#0b151f)!important;
}
.ui007-roadmap-card:before{
  content:"БУДУЩИЙ МОДУЛЬ";
  position:absolute;
  right:10px;
  top:10px;
  color:#9e8967;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}
.ui007-roadmap-card p{min-height:0!important;flex:1}
.ui007-roadmap-card .forge-status{border-color:#57492f;color:#cfad70;background:#261d11}
.ui007-working-forge{
  border-color:#765c9f!important;
  background:
    radial-gradient(circle at 90% 0,rgba(144,91,255,.18),transparent 35%),
    linear-gradient(180deg,#19182d,#0c1522)!important;
}
.ui007-working-forge .artifact-rule{border-color:#8d6bd1;color:#ddceff;background:#2d2344}

@media(max-width:1180px){
  .ui007-shop{grid-template-columns:220px minmax(430px,1fr)}
  .ui007-preview{position:static;grid-column:1/-1}
  .ui007-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ui007-toolbar .ui007-search{grid-column:span 2}
}

@media(max-width:820px){
  .ui007-shop{display:block}
  .ui007-shop-nav,.ui007-preview{position:static;margin-bottom:10px}
  .ui007-departments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui007-shop-main{margin-bottom:10px!important}
  .ui007-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui007-toolbar .ui007-search{grid-column:1/-1}
}

@media(max-width:590px){
  html.ui007-shop-forge #screen-shop .catalog-summary{grid-template-columns:1fr}
  .ui007-departments{grid-template-columns:1fr}
  .ui007-toolbar{grid-template-columns:1fr}
  .ui007-toolbar .ui007-search{grid-column:auto}
  .ui007-items{grid-template-columns:1fr}
  .ui007-result-head{align-items:flex-start;flex-direction:column;gap:3px}
  .ui007-preview-grid{grid-template-columns:1fr}
}

@media(orientation:landscape) and (max-height:520px) and (max-width:1100px){
  html.ui007-shop-forge #screen-shop,
  html.ui007-shop-forge #screen-forge{
    padding-top:66px!important;
    padding-bottom:20px!important;
  }
  html.ui007-shop-forge body:has(#screen-shop.active) .bottom-dock,
  html.ui007-shop-forge body:has(#screen-forge.active) .bottom-dock{
    top:max(4px,env(safe-area-inset-top))!important;
    bottom:auto!important;
  }
  .ui007-shop{grid-template-columns:200px minmax(430px,1fr);gap:8px}
  .ui007-shop-nav{position:relative;top:auto;max-height:330px;overflow:auto}
  .ui007-preview{position:static;grid-column:1/-1}
  .ui007-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ui007-toolbar .ui007-search{grid-column:span 2}
  .ui007-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui007-item{min-height:150px}
  html.ui007-shop-forge #screen-forge .forge-workbench-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}