/* UKRCRAFT Market — локальні стилі (працює разом з /style.css) */

.mPage { padding-bottom: 84px; }

.wrap { width: min(1100px, 100%); margin: 0 auto; }

.mHero{
  padding: 22px 18px 18px;
}

.mTopRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.mBadges{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 900;
  font-size: 12px;
}

.pillGhost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 800;
}

.pillDot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset;
}
.pillDot.ok{ background:#35ff83; }
.pillDot.bad{ background:#ff4d4d; }

.mTopActions{ display:flex; gap:10px; align-items:center; }

.btn{ /* підхопить глобальні стилі з /style.css, але якщо їх нема — мінімум працюватиме */
  border:none;
  text-decoration:none;
  cursor:pointer;
  border-radius: 18px;
  padding: 13px 16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 950;
  font-size: 13px;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btnGhost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: inherit;
}

.mTitle{
  margin: 12px 0 6px;
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: .2px;
}
.mSub{
  margin:0 0 14px;
  opacity:.92;
  max-width: 78ch;
}

/* stats */
.mStats{
  margin: 12px 0 10px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.mStat{
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px;
  backdrop-filter: blur(10px);
}
.mStatK{
  font-size: 11px;
  opacity: .85;
  font-weight: 900;
  letter-spacing: .3px;
}
.mStatV{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 950;
}

/* toolbar */
.mToolbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin: 12px 0 10px;
}

.mSearch{
  flex: 1 1 380px;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.mSearchIco{ opacity:.9; }
.mSearchInput{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color: inherit;
  font-size: 14px;
}

.mIconBtn{
  border:0;
  cursor:pointer;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: inherit;
}
.mIconBtn:hover{ background: rgba(255,255,255,.12); }

.mControls{
  display:flex;
  gap:10px;
  align-items:center;
  flex: 0 0 auto;
}

.mSelect{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: inherit;
  outline: none;
}

.mToggle{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor:pointer;
}
.mToggle:hover{ background: rgba(255,255,255,.10); }
.mToggle.isOn{
  background: rgba(255,212,0,.14);
  border-color: rgba(255,212,0,.22);
}

.mChips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 8px 0 0;
}

.chip{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: inherit;
  padding: 8px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
}
.chip:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); }
.chip.isActive{
  background: rgba(30,90,255,.22);
  border-color: rgba(30,90,255,.35);
}

/* help */
.mHelp{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.mHelpGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mHelpCard{
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
}
.mHelpTitle{ font-weight: 900; margin-bottom: 6px; }
.mHelpText{ opacity:.92; font-size: 13px; line-height: 1.4; }
.mKbdRow{ display:flex; align-items:center; justify-content:space-between; padding:4px 0; gap:10px; }
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

.hidden{ display:none !important; }
.mHideSm{ display:inline-flex; }

/* grid */
.mGrid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 18px 0;
}

.mPanel{
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  padding: 14px;
  backdrop-filter: blur(10px);
}

.mPanelWide{ min-height: 420px; }

.mPanelTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.mPanelKicker{
  opacity:.9;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .3px;
}

.mPanelTitle{
  font-size: 18px;
  font-weight: 950;
  margin-top: 2px;
}

.mMiniBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,212,0,.14);
  border: 1px solid rgba(255,212,0,.22);
  font-weight: 900;
}

.mTemplates{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 6px;
}
.mTpl{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: inherit;
  padding: 8px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 900;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.mTpl:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,212,0,.22);
}

.mForm{ display:flex; flex-direction:column; gap:10px; }

.mRow2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mLbl{
  font-size: 12px;
  opacity:.9;
  font-weight: 900;
  margin-bottom: 4px;
  display:block;
}

.mInputRow{
  display:flex;
  align-items:center;
  gap:10px;
}

.mAvatar{
  width:32px;height:32px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}

.mInp, .mTa{
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  color: inherit;
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
}
.mTa{ resize: vertical; min-height: 110px; }

.mInp:focus, .mTa:focus{
  border-color: rgba(30,90,255,.45);
  box-shadow: 0 0 0 3px rgba(30,90,255,.18);
}

.mHint{ font-size: 12px; opacity: .8; }
.mHint.bad{ color: #ffb3b3; opacity: 1; }

.mFormActions{
  display:flex;
  gap:10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.mStatus{
  min-height: 18px;
  font-size: 13px;
  opacity: .95;
}

.mNote{
  margin-top: 8px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.mNoteTitle{ font-weight: 950; margin-bottom: 4px; }
.mNoteText{ opacity: .9; font-size: 13px; line-height: 1.4; }

/* list */
.mCounters{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mCount{ font-weight: 950; opacity:.95; }
.mPill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  opacity:.95;
  font-size: 12px;
}

.mList{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.mCard{
  border-radius: 20px;
  padding: 12px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
}
.mCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 220px at 0% 0%, rgba(30,90,255,.18), transparent 60%),
              radial-gradient(700px 220px at 100% 100%, rgba(255,212,0,.14), transparent 60%);
  pointer-events:none;
}

.mCard.soon{
  border-color: rgba(255,212,0,.30);
  box-shadow: 0 0 0 3px rgba(255,212,0,.10);
}

.mCardTop{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}

.mType{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 950;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.mTime{
  font-size: 12px;
  opacity:.9;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.mCardTitle{
  position:relative;
  font-weight: 950;
  font-size: 16px;
  margin: 2px 0 6px;
}

.mMeta{
  position:relative;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
  opacity:.9;
  font-size: 12px;
  margin-bottom: 8px;
}
.mMetaItem{ display:inline-flex; gap:7px; align-items:center; }

.mNickRow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.mNickRow img{
  width: 18px;
  height: 18px;
  border-radius: 6px;
}

.mText{
  position:relative;
  opacity:.92;
  line-height: 1.45;
  font-size: 13px;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

.mBottom{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

.mContact{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  max-width: 100%;
}
.mContact span{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.mBtns{
  display:flex;
  gap:8px;
  align-items:center;
}

.mMiniBtn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: inherit;
  padding: 7px 10px;
  border-radius: 14px;
  cursor:pointer;
}
.mMiniBtn:hover{ background: rgba(255,255,255,.10); }

.mMiniBtn.star.isOn{
  background: rgba(255,212,0,.16);
  border-color: rgba(255,212,0,.22);
}

.mEmpty{
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  opacity:.95;
}

.mBottomTip{
  margin-top: 12px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.mBottomTipTitle{ font-weight: 950; margin-bottom: 4px; }
.mBottomTipText{ opacity:.9; font-size: 13px; line-height: 1.4; }

.mFooter{ margin-top: 10px; }

/* responsive */
@media (max-width: 980px){
  .mGrid{ grid-template-columns: 1fr; }
  .mList{ grid-template-columns: 1fr; }
  .mHelpGrid{ grid-template-columns: 1fr; }
  .mHideSm{ display:none; }
  .mStats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px){
  .mRow2{ grid-template-columns: 1fr; }
  .mSearch{ flex: 1 1 100%; }
  .mControls{ width: 100%; }
  .mSelect, .mToggle{ flex: 1 1 auto; }
}