:root{
  --bg-0:#111; --bg-1:#141414; --bg-2:#191919; --bg-3:#1c1c1c;
  --bd-0:#2a2a2a; --bd-1:#262626;
  --text:#eaeaea; --muted:#a9a9a9;
  --brand:#f0ad00; --ok:#0b6; --err:#a11616; --warn:#555;
}

/* My Account blocks */
.steam-payment-methods h2,
.ssp-listings h2{ margin:0 0 14px; font-weight:700; }

.steam-payment-methods .security-notice{
  background:#161616;border:1px solid #2b2b2b;border-radius:12px;
  padding:12px 14px;margin-bottom:12px;line-height:1.5
}
.steam-payment-methods .form-row{margin:10px 0}
.steam-payment-methods .form-row input{
  width:100%;background:#121212;border:1px solid var(--bd-0);color:#eee;border-radius:10px;padding:12px
}
.steam-payment-methods .form-row.columns{display:flex;gap:12px}
.steam-payment-methods .form-row.columns>div{flex:1}
.steam-payment-methods .submit .button{
  background:var(--brand);color:#111;border:0;padding:12px 18px;border-radius:12px;font-weight:800;cursor:pointer
}

.ssp-listings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ssp-listing-card{background:#121212;border:1px solid #222;border-radius:12px;padding:10px;display:flex;gap:12px;align-items:center}
.ssp-listing-card .thumb{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#1b1b1b;border-radius:8px;overflow:hidden}
.ssp-listing-card .thumb img{max-width:100%;max-height:100%}
.status{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px}
.status-ok{background:#0b6;color:#fff}
.status-bad{background:#a11616;color:#fff}
.status-wait{background:#555;color:#fff}

/* Header notice + logout */
.ssp-important{
  display:flex;align-items:center;gap:18px;
  padding:16px 18px;margin:0;
  background:linear-gradient(180deg,#1b1b1b,#141414);
  border:1px solid var(--bd-0); border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  line-height:1.5;
  font-size: 14px;
}
.ssp-important .ssp-link{ color:var(--brand); font-weight:800; }
.ssp-toolbar{ display:flex;justify-content:flex-end;background:transparent;border:0;padding:10px 0 0;margin-bottom:18px; }
.ssp-logout{ display:inline-block;background:#b21d1d;color:#fff;padding:10px 18px;border-radius:12px;font-weight:800;text-decoration:none;box-shadow:0 8px 22px rgba(178,29,29,.25); }
.ssp-logout:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(178,29,29,.35); }

@media (max-width:780px){
  .ssp-important{ flex-direction:column; align-items:flex-start; }
  .ssp-toolbar{ justify-content:stretch; }
  .ssp-logout{ width:100%; text-align:center; }
}

/* Toasts */
.ssp-toast{
  position:fixed;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  background:#222;
  color:#fff;
  padding:12px 14px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  z-index:10000;
  max-width:520px;
  width:max-content;
  font-weight:600;
  pointer-events:none; /* <- НЕ блокируем клики по навигации под собой */
}
.ssp-toast.success{ background:#0b6 }
.ssp-toast.error{ background:#a11616 }

@media (max-width:680px){
  .ssp-toast{ left:50%; transform:translateX(-50%); width:calc(100% - 32px); }
}


/* Inventory grid */
.ssp-centered{text-align:center}
.ssp-login{display:inline-block;padding:10px 14px;border-radius:10px;background:#111;color:#fff;text-decoration:none}
.ssp-error{background:#222;color:#eee;padding:12px;border-radius:10px}

.ssp-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:8px; }
.ssp-card{
  position:relative;background:#191919;color:#eaeaea;border:1px solid #262626;border-radius:14px;padding:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .06s, box-shadow .2s, border-color .2s; cursor:pointer; min-height:240px;
}
.ssp-card:not(.ssp-disabled):hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.35); border-color:#313131; }
.ssp-thumb{ height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px;border-radius:10px;background:#141414 }
.ssp-thumb img{max-width:100%;max-height:100%}
.ssp-name{font-size:13.5px;font-weight:700;line-height:1.25;margin-bottom:4px}
.ssp-type{opacity:.7;font-size:12px}

/* Reserving / statuses on cards */
.ssp-card.ssp-disabled{ background:#1c1c1c !important; filter:grayscale(.15); opacity:.9; pointer-events:none; }
.ssp-badge{ position:absolute; top:10px; left:10px; padding:5px 10px;border-radius:999px;font-size:11px; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; font-weight:800; box-shadow:0 6px 16px rgba(0,0,0,.22); }
.ssp-badge-pending{ background:#555; color:#fff; }
.ssp-badge-approved{ background:#0b6; color:#fff; }
.ssp-card.ssp-flag-pending .ssp-thumb::after,
.ssp-card.ssp-flag-approved .ssp-thumb::after{ content:""; position:absolute; inset:0; border-radius:12px; }
.ssp-card.ssp-flag-pending .ssp-thumb::after{ background:rgba(120,120,120,.10); }
.ssp-card.ssp-flag-approved .ssp-thumb::after{ background:rgba(0,180,90,.08); }

/* Modal (polished) */
.ssp-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:9999; }
.ssp-modal[hidden]{ display:none; }
.ssp-modal__dialog{
  width:min(560px, 92vw); max-height:86vh; overflow:auto;
  background:#111; color:#eee; border:1px solid #2a2a2a; border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.45); padding:18px 18px 16px; position:relative;
}
.ssp-modal__item{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.ssp-modal__item img{ width:56px; height:56px; object-fit:contain; border-radius:10px; background:#181818; }
.ssp-instructions{ background:#161616; border:1px solid #2a2a2a; border-radius:12px; padding:12px 14px; line-height:1.55; margin-bottom:12px; }
.form-group{ margin:10px 0; display:flex; flex-direction:column; gap:6px; }
.form-group input{ background:#1a1a1a; border:1px solid #2a2a2a; color:#eee; border-radius:10px; padding:10px 12px; }
.commission-note{ margin:6px 0 0; color:#cfcfcf; }
#ssp-net-amount{ font-weight:800; }
.ssp-actions{ margin-top:10px; }
.ssp-btn{ background:#0b6; color:#fff; border:0; padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer; }
.ssp-btn:hover{ filter:brightness(1.05); }
.ssp-modal__close{ position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#ff7a00; color:#111; font-weight:900; border:0; cursor:pointer; }
.ssp-modal__close:hover{ filter:brightness(1.08); }

body.ssp-modal-open{ overflow:hidden; }