/* marketplace theme — light trust (Profi.ru / Fiverr / Stripe vibe) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
[hidden]{display:none!important;}

:root{
  /* surface */
  --bg:        #f6f7f9;
  --bg-2:      #ffffff;
  --bg-3:      #f1f3f6;
  --bg-soft:   #fafbfc;
  --line:      #e5e7eb;
  --line-2:    #d1d5db;
  /* text */
  --ink:       #0f172a;
  --ink-2:     #334155;
  --ink-3:     #64748b;
  --ink-4:     #94a3b8;
  /* accent */
  --accent:    #10b981;
  --accent-2:  #059669;
  --accent-3:  rgba(16,185,129,.1);
  --accent-4:  #047857;
  --accent-glow: 0 4px 14px rgba(16,185,129,.28);
  --info:      #2563eb;
  --warn:      #d97706;
  --danger:    #dc2626;
  /* shadows */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg: 0 14px 30px -12px rgba(15,23,42,.18), 0 4px 8px -4px rgba(15,23,42,.06);
  /* fonts */
  --mono:      'JetBrains Mono','Roboto Mono',monospace;
  --sans:      'Manrope','Inter',system-ui,sans-serif;
}

body{
  font-family:var(--sans);
  color:var(--ink);
  min-height:100vh;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-4);text-decoration:none;}
a:hover{color:var(--accent-2);}

/* ── header ────────────────────────────────────────────── */
.mp-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
}
.mp-brand{font:800 18px/1 var(--sans);letter-spacing:.04em;color:var(--ink);}
.mp-brand span{color:var(--accent);}
.mp-nav{display:flex;align-items:center;gap:24px;font:500 14px/1 var(--sans);}
.mp-nav a{color:var(--ink-3);transition:.15s;}
.mp-nav a:hover{color:var(--ink);}
.mp-nav a.is-active{color:var(--accent);font-weight:600;}
.mp-nav__bell{position:relative;display:inline-flex;align-items:center;gap:6px;}
.mp-nav__bell-dot{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--danger);color:#fff;
  font:800 10px/1 var(--mono);
}
.mp-nav__logout{color:var(--ink-4)!important;margin-left:8px;}
.mp-nav__logout:hover{color:var(--danger)!important;}
.mp-nav__cta{
  padding:7px 14px;border-radius:6px;
  background:var(--accent);color:#fff!important;
  box-shadow:var(--accent-glow);
}
.mp-nav__cta:hover{background:var(--accent-2);color:#fff!important;}

/* ── shell ─────────────────────────────────────────────── */
.mp-shell{max-width:1100px;margin:32px auto 80px;padding:0 24px;}
.mp-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px 22px;
  box-shadow:var(--shadow);
}

/* ── titles ────────────────────────────────────────────── */
.mp-h1{font:700 30px/1.15 var(--sans);color:var(--ink);margin:0 0 6px;letter-spacing:-.015em;}
.mp-h2{font:700 18px/1.2 var(--sans);color:var(--ink);margin:0 0 14px;letter-spacing:-.005em;}
.mp-sub{font:500 15px/1.6 var(--sans);color:var(--ink-3);margin:0 0 22px;}

/* ── btn ───────────────────────────────────────────────── */
.mp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border:1px solid transparent;border-radius:10px;cursor:pointer;
  font:600 14px/1 var(--sans);letter-spacing:.01em;
  transition:.15s;text-decoration:none;
}
.mp-btn--primary{background:var(--accent);color:#fff;box-shadow:var(--accent-glow);}
.mp-btn--primary:hover{background:var(--accent-2);color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px -3px rgba(16,185,129,.4);}
.mp-btn--ghost{background:#fff;color:var(--ink);border-color:var(--line-2);}
.mp-btn--ghost:hover{background:var(--bg-3);color:var(--ink);border-color:var(--ink-3);}
.mp-btn--full{width:100%;padding:13px 18px;font-size:15px;}
.mp-btn--big{padding:14px 22px;font-size:15px;}
.mp-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;}

/* ── form ──────────────────────────────────────────────── */
.mp-form{display:flex;flex-direction:column;gap:14px;}
.mp-field{display:flex;flex-direction:column;gap:6px;}
.mp-label{font:600 13px/1 var(--sans);color:var(--ink-2);}
.mp-input,.mp-select{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:10px;padding:12px 14px;color:var(--ink);
  font:500 15px/1.4 var(--sans);transition:.15s;
}
.mp-input::placeholder{color:var(--ink-4);}
.mp-input:hover,.mp-select:hover{border-color:var(--ink-3);}
.mp-input:focus,.mp-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,.15);}
.mp-input--ta{resize:vertical;min-height:88px;font-family:var(--sans);}
.mp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mp-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.mp-hint{font:500 12px/1.4 var(--sans);color:var(--ink-4);margin-top:2px;}

/* ── chips / tags ──────────────────────────────────────── */
.mp-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:6px;
  font:600 11px/1.5 var(--sans);letter-spacing:.02em;
  background:var(--bg-3);color:var(--ink-2);border:1px solid var(--line);
}
.mp-chip--gold{background:#ecfdf5;color:#047857;border-color:#a7f3d0;}
.mp-chip--green{background:#ecfdf5;color:#047857;border-color:#a7f3d0;}
.mp-chip--red{background:#fef2f2;color:#b91c1c;border-color:#fecaca;}
.mp-chip--blue{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}

/* ── alerts ────────────────────────────────────────────── */
.mp-error,.mp-success,.mp-info{
  padding:11px 14px;border-radius:10px;
  font:500 13px/1.5 var(--sans);margin:0;border:1px solid;
}
.mp-error{background:#fef2f2;border-color:#fecaca;color:#991b1b;}
.mp-success{background:#ecfdf5;border-color:#a7f3d0;color:#047857;}
.mp-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af;}

/* ── grid of listings (legacy) ─────────────────────────── */
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:18px;}
.mp-listing{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;
  display:flex;flex-direction:column;gap:10px;
  transition:.18s;cursor:pointer;text-decoration:none;color:inherit;
  box-shadow:var(--shadow-sm);
}
.mp-listing:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-lg);}
.mp-listing__top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.mp-listing__service{font:700 12px/1 var(--sans);color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;}
.mp-listing__range{font:700 18px/1.25 var(--sans);color:var(--ink);}
.mp-listing__desc{font:500 13px/1.5 var(--sans);color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mp-listing__bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);}
.mp-listing__price{font:700 18px/1 var(--sans);color:var(--accent-4);}
.mp-listing__price small{font:500 11px/1 var(--sans);color:var(--ink-4);display:block;margin-top:4px;letter-spacing:.04em;text-transform:uppercase;}
.mp-listing__meta{font:500 11px/1.45 var(--sans);color:var(--ink-4);text-align:right;}
.mp-listing__offers{font:600 12px/1 var(--sans);color:var(--accent-4);}

/* ── listing detail ───────────────────────────────────── */
.mp-detail{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;}
@media (max-width:880px){.mp-detail{grid-template-columns:1fr;}}
.mp-offer{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;transition:.15s;
}
.mp-offer.is-mine{border-color:var(--accent);background:#f0fdf4;}
.mp-offer__head{display:flex;justify-content:space-between;align-items:center;}
.mp-offer__booster{font:600 14px/1.2 var(--sans);color:var(--ink);}
.mp-offer__price{font:700 18px/1 var(--sans);color:var(--accent-4);}
.mp-offer__msg{font:500 14px/1.55 var(--sans);color:var(--ink-2);}
.mp-offer__meta{display:flex;gap:12px;font:500 12px/1.4 var(--sans);color:var(--ink-3);flex-wrap:wrap;}
.mp-stat{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;}
.mp-stat__label{font:600 11px/1 var(--sans);color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;}
.mp-stat__value{font:700 18px/1.2 var(--sans);color:var(--ink);}

/* ── booster stats в карточке отклика ─────────────────── */
.mp-bstats{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0;}
.mp-bstat{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:6px;
  background:#ecfdf5;border:1px solid #a7f3d0;
  color:#065f46;font:500 12px/1.4 var(--sans);
}
.mp-bstat b{color:var(--accent-4);font-weight:700;}
.mp-bstat--muted{background:var(--bg-3);border-color:var(--line);color:var(--ink-3);}
.mp-bfaceit{
  font:600 12px/1 var(--sans);color:var(--accent-4);
  text-decoration:none;align-self:flex-start;
}
.mp-bfaceit:hover{color:var(--accent);text-decoration:underline;}
.mp-bbio{
  font:500 13px/1.55 var(--sans);color:var(--ink-3);
  background:var(--bg-3);border-left:2px solid var(--line-2);
  padding:8px 12px;margin:4px 0;font-style:italic;
}

/* ── empty state ──────────────────────────────────────── */
.mp-empty{
  text-align:center;padding:60px 24px;
  background:#fff;border:1px dashed var(--line-2);border-radius:14px;color:var(--ink-3);
}
.mp-empty h3{font:700 18px/1.3 var(--sans);color:var(--ink);margin:0 0 6px;}

/* ── filter bar (legacy index.js) ─────────────────────── */
.mp-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.mp-filter{
  padding:9px 14px;border-radius:8px;
  background:#fff;border:1px solid var(--line);
  font:600 13px/1 var(--sans);
  color:var(--ink-2);cursor:pointer;transition:.15s;
}
.mp-filter:hover{color:var(--ink);background:var(--bg-3);}
.mp-filter.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:600px){
  .mp-shell{padding:0 18px;margin:24px auto 60px;}
  .mp-card{padding:20px 18px;border-radius:12px;}
  .mp-h1{font-size:24px;}
  .mp-h2{font-size:16px;}
  .mp-row,.mp-row-3{grid-template-columns:1fr;}
  .mp-hdr{padding:14px 20px;}
}

/* ── MP Footer (структурированный) ───────────────────────── */
.mp-footer{
  margin-top:60px;
  padding:48px 24px 24px;
  background:#fff;
  border-top:1px solid var(--line);
  color:var(--ink-3);
  font:500 13px/1.55 var(--sans);
}
.mp-footer__inner{
  max-width:1180px;margin:0 auto;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
  gap:36px 56px;
}
.mp-footer__brand{flex:1 1 280px;max-width:340px;}
.mp-footer__brand strong{
  display:block;font:800 18px/1 var(--sans);letter-spacing:.04em;color:var(--ink);margin-bottom:10px;
}
.mp-footer__brand strong span{color:var(--accent);}
.mp-footer__brand p{margin:0;color:var(--ink-3);}
.mp-footer__col{display:flex;flex-direction:column;gap:8px;flex:0 1 auto;}
.mp-footer__title{
  font:700 11px/1 var(--mono);color:var(--accent-4);
  letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:4px;
}
.mp-footer__col a{
  color:var(--ink-2);transition:color .15s ease;
}
.mp-footer__col a:hover{color:var(--accent-4);}
.mp-footer__bottom{
  max-width:1180px;margin:32px auto 0;
  padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  font:500 12px/1.4 var(--sans);color:var(--ink-4);
}
.mp-footer__bottom-meta{color:var(--ink-4);font-style:italic;}
@media (max-width: 720px){
  .mp-footer__inner{justify-content:flex-start;}
  .mp-footer__bottom{justify-content:center;text-align:center;}
}


/* === Support: my tickets thread === */
.sup-tickets { margin-bottom: 20px; }
.sup-tickets__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:12px; flex-wrap:wrap; }
.sup-tickets__list { display:flex; flex-direction:column; gap:8px; }

.sup-ticket-card {
  display:flex; flex-direction:column; gap:6px;
  text-align:left; cursor:pointer;
  background: var(--bg-2); border:1px solid var(--line-2);
  border-radius:10px; padding:14px 16px;
  font: inherit; color: var(--ink);
  transition: .15s;
}
.sup-ticket-card:hover { border-color: var(--accent); background: var(--bg-soft); }
.sup-ticket-card__top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sup-ticket-card__num { font: 700 12px/1 'JetBrains Mono', monospace; color: var(--accent-4); }
.sup-ticket-card__status {
  font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 8px; border-radius:5px;
}
.sup-ticket-card__status--open { background: rgba(16,185,129,.12); color: var(--accent); }
.sup-ticket-card__status--progress { background: rgba(99,102,241,.12); color: #6366f1; }
.sup-ticket-card__status--closed { background: var(--bg-3); color: var(--ink-4); }
.sup-ticket-card__date { margin-left:auto; font: 500 11px/1 'JetBrains Mono', monospace; color: var(--ink-4); }
.sup-ticket-card__subject { font: 700 14px/1.3 var(--sans); color: var(--ink); }
.sup-ticket-card__meta { font: 500 11px/1 var(--sans); color: var(--ink-3); }

.sup-thread { display:flex; flex-direction:column; gap:0; }
.sup-thread__head {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; background: var(--bg-2);
  border:1px solid var(--line-2); border-radius:10px 10px 0 0;
}
.sup-thread__title { font: 700 14px/1.2 var(--sans); color: var(--ink); flex:1; min-width:0; }
.sup-thread__status {
  font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 8px; border-radius:5px;
}
.sup-thread__status--open { background: rgba(16,185,129,.12); color: var(--accent); }
.sup-thread__status--closed { background: var(--bg-3); color: var(--ink-4); }
.sup-thread__msgs {
  border-left:1px solid var(--line-2); border-right:1px solid var(--line-2);
  padding:14px 14px;
  display:flex; flex-direction:column; gap:10px;
  min-height:200px; max-height:60vh; overflow-y:auto;
  background: var(--bg);
}
.sup-thread__empty { color: var(--ink-4); padding:20px; text-align:center; font: 500 13px/1.5 var(--sans); }
.sup-thread__form {
  display:flex; gap:8px; align-items:flex-end;
  padding:12px 14px;
  background: var(--bg-2);
  border:1px solid var(--line-2); border-top:0; border-radius: 0 0 10px 10px;
}
.sup-thread__form textarea { flex:1; }
.sup-thread__form button { min-height: 44px; }

.sup-msg { display:flex; flex-direction:column; gap:4px; max-width:80%; }
.sup-msg--user { align-self:flex-end; align-items:flex-end; }
.sup-msg--admin { align-self:flex-start; }
.sup-msg--system { align-self:center; max-width:100%; }
.sup-msg__bubble {
  padding:9px 13px; border-radius:12px;
  font: 500 14px/1.5 var(--sans); white-space: pre-wrap; word-wrap: break-word;
}
.sup-msg--user .sup-msg__bubble { background: var(--accent); color:#fff; border-bottom-right-radius:4px; }
.sup-msg--admin .sup-msg__bubble { background: var(--bg-2); border:1px solid var(--line-2); color: var(--ink); border-bottom-left-radius:4px; }
.sup-msg--system .sup-msg__bubble { background: transparent; color: var(--ink-4); font-size: 12px; border:1px dashed var(--line-2); padding: 5px 12px; border-radius: 6px; text-align:center; }
.sup-msg__meta { font: 500 10px/1 'JetBrains Mono', monospace; color: var(--ink-4); padding: 0 4px; }

@media (max-width: 768px) {
  .sup-thread__msgs { max-height: 50vh; min-height: 180px; }
  .sup-msg { max-width: 88%; }
  .sup-thread__form { flex-direction: column; align-items: stretch; }
  .sup-thread__form button { width: 100%; }
}

/* === First-time CTA on /me.html === */
.me-firstcta {
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.02));
  border: 1px solid rgba(16,185,129,.25);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  margin: 18px 0 24px;
}
.me-firstcta__icon { font-size: 40px; line-height: 1; margin-bottom: 12px; }
.me-firstcta__title { font: 800 22px/1.2 var(--sans); color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; }
.me-firstcta__sub { font: 500 14px/1.5 var(--sans); color: var(--ink-3); margin: 0 auto 18px; max-width: 480px; }
.mp-btn--big { padding: 14px 26px; font-size: 15px; }
@media (max-width: 768px) {
  .me-firstcta { padding: 24px 18px; }
  .me-firstcta__title { font-size: 18px; }
}