.public-profile-wrap {margin:0 120px;}
.pp-header {display:flex;gap:20px;align-items:center;margin-bottom:24px;} 
.pp-avatar {width:96px;height:96px;border-radius:50%;object-fit:cover;} 
.pp-username {font-size:32px;font-weight:600;line-height:1.2;margin:0;color:var(--light);} 
.pp-summary {margin-top:6px;color:var(--light);} 
.pp-joined {margin-top:6px;font-size:14px;color:var(--text-color);} 
.pp-stats-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px;} 
.pp-stat {border-radius:16px;background:transparent;padding:16px;min-height:120px;outline:1px solid var(--card-border);box-shadow:0 5px 15px var(--dark);} 
.pp-stat-icon {width:40px;height:40px;margin-bottom:10px;padding:8px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center;color: var(--base);}
.pp-stat-title {font-size:14px;font-weight:300;margin:0 0 2px 0;color: var(--text-color);} 
.pp-stat-value {font-size:20px;font-weight:500;margin:0;color: var(--light);} 
@media (max-width:1200px){.public-profile-wrap{margin:0 40px;}} 
@media (max-width:992px){.pp-stats-grid{grid-template-columns:repeat(2,1fr);}} 
@media (max-width:576px){.public-profile-wrap{margin:0 16px; padding-bottom: 51px;}.pp-stats-grid{grid-template-columns:1fr;}.pp-username{font-size:26px;}}
.pp-tabs{display:flex;gap:24px;border-bottom:2px solid var(--card-border);margin-top:28px;}
.pp-tab{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 0;font-weight:600;color:#7a8594;text-decoration:none;transition:color .15s;}
.pp-tab:hover{color:var(--light);}
.pp-tab.is-active{color:var(--light);}
.pp-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:#2c9cdb;border-radius:3px;}
.pp-table{margin-top:16px;}
.pp-thead{display:grid;align-items:center;color:#9aa3af;font-weight:700;font-size:.95rem;padding:10px 6px;}
.pp-thead--positions{grid-template-columns:4fr 1fr 1fr 1fr;} /* ~60% / 13.3% / 13.3% / 13.3% */
.pp-thead--activity{
  grid-template-columns: 15% 60% 10% 15%;
}
.pp-th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-th--market{text-align:left;}
.pp-th--type{text-align:left;}
.pp-th--amount{text-align:center;}
.pp-empty{padding:36px 10px;text-align:center;color:#AAB4BF;font-weight:600;}
.pp-table .pp-th{text-transform:uppercase;font-weight:600!important;font-size:var(--fontSizes-xs,12px)!important;color:var(--colors-gray7,#858A98)!important;letter-spacing:2px!important;font-family:var(--fonts-sauce,"Open Sauce One",sans-serif);}
/* .footer-bottom {display:none !important;} */
.footer--light {display:none !important;}
.pp-tabs{position:relative;display:flex;gap:24px;border-bottom:2px solid var(--card-border);margin-top:28px;}
.pp-tab{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 0;font-weight:600;color:#7a8594;text-decoration:none;transition:color .18s;}
.pp-tab:hover{color:#dbe2ea;}
.pp-panels{margin-top:16px;}
.pp-panel.is-active{display:block;opacity:1;transform:translateY(0);}
.pp-tab-indicator{position:absolute;bottom:-2px;height:3px;width:0;background:#2c9cdb;border-radius:3px;transition:left .4s ease,width .4s ease;}
.pp-panel{display:none;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;}
.pp-thead--openorders{ grid-template-columns: 30% 10% 10% 10% 10% 10% auto 120px; }
.pp-thead--positions{ grid-template-columns: 30% 15% 15% 15% 15% auto; }

.pp-th--now{ display:flex; align-items:center; gap:8px; }
.pp-now-title{ font-weight:inherit; }
.pp-now-legend{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--colors-gray7,#858A98);
}
.pp-now-legend-arrow{ width:14px; height:14px; }
.pp-now-legend-text{ text-transform:uppercase; }
.pp-th--value{ text-align:center; }
.pp-th--timestamp{ text-align:right; }
/* Generic row container matching header grids */
.pp-row{ display:grid; align-items:center; padding:10px 6px; border-bottom:1px solid var(--card-border); }
.pp-table .pp-row:last-child{ border-bottom:none; }

/* Match header column widths */
.pp-table--positions .pp-row{ grid-template-columns: 30% 15% 15% 15% 15% auto; }
.pp-table--openorders .pp-row{ grid-template-columns: 30% 10% 10% 10% 10% 10% auto 120px; }
.pp-table--activity  .pp-row{ grid-template-columns: 15% 60% 10% 15%; }

/* Market cell with image + text stack */
.pp-market{
  display:flex; align-items:center; gap:12px; min-width:0; /* allow ellipsis */
}
.pp-market-img{
  width:48px; height:48px; border-radius:10px; object-fit:cover; flex:0 0 48px;
  background:#1c2333; /* fallback bg */
  outline:1px solid var(--card-border);
}
.pp-market-text{ display:flex; flex-direction:column; min-width:0; }
.pp-market-title{
  font-weight:600; color:var(--light); overflow:hidden; text-overflow:ellipsis;
}
.pp-market-sub{
  display:flex; align-items:center; gap:8px; min-width:0;
}

/* Outcome bubble (YES green / NO red; default blue-ish) */
.pp-outcome-chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-weight:700;
  font-size:12px; line-height:1; white-space:nowrap;
}
.pp-outcome--yes{ color:var(--yes-color); background:rgba(25,135,84,.18); }  /* green-ish */
.pp-outcome--no{  color:var(--no-color); background:rgba(220,53,69,.18); }  /* red-ish  */
.pp-outcome--def{ color:#0b5ed7; background:rgba(13,110,253,.15); } /* fallback */

/* Small gray after-chip text */
.pp-owned-note{font-size:12px; color:#9aa3af; font-weight:400; white-space:nowrap; }

/* Tiny dim value inside cells (e.g., arrows text) */
.pp-cell-sub{ font-size:12px; color:#9aa3af; }

/* Make NOW cell show inline arrow nicely */
.pp-now-cell{ display:flex; align-items:center; gap:4px;}
.pp-now-arrow{ width:14px; height:14px; vertical-align:middle; }
.pp-market--noimg { gap: 0; }

/* New, scoped utilities so we don't collide with existing cells */
.pp-col-center--activity { text-align: center; color: var(--light);} 
.pp-col-center {color: var(--light);}
.pp-col-right {color: var(--light);}
.pp-col-start            { text-align: left; color: var(--light);}     /* positions VALUE (start) */
.pp-col-right-ts         { text-align: right; color: var(--light);}    /* activity TIMESTAMP */
.pp-activity-icon{ width:16px; height:16px; margin-right:6px; vertical-align:middle; }
.pp-amount--pos{ color: var(--yes-color); font-weight:600; }
/* actions column */
.pp-th--actions{ text-align:right; color: var(--light);}
.pp-actions{ display:flex; justify-content:flex-end; gap:10px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; font-weight:600; cursor:pointer; border:1px solid transparent; background:transparent; color:inherit; }
.btn-primary{ background:#2c9cdb; color:#fff; border-color:#2c9cdb; }
.btn-danger{ background:transparent; color:#e55353; border-color:var(--card-border); }
.btn-danger:hover{ background:rgba(229,83,83,.1); }
.btn-primary:hover{ filter:brightness(1.05); }

/* sell modal */
.sell-modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:1000; }
.sell-modal{ width:min(680px, 92vw); background:var(--base); border:1px solid var(--card-border); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.sell-modal__header{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.sell-modal__img{ width:56px; height:56px; border-radius:10px; object-fit:cover; outline:1px solid var(--card-border); }
.sell-modal__title{ font-size:18px; font-weight:700; color:var(--light); }
.sell-modal__sub{ font-size:13px; color:#9aa3af; }
.sell-modal__row{ display:flex; gap:12px; align-items:flex-end; margin:10px 0; }
.sell-modal__col{ flex:1; }
.sell-modal__label{ font-size:12px; color:#9aa3af; margin-bottom:6px; display:block; }
.sell-modal__input{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--card-border); background:var(--base); color:var(--light); }
.sell-modal__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
/* modal close button (X) */
.sell-modal__close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--card-border); background:var(--base); color:#9aa3af;
  cursor:pointer;
}
.sell-modal__close:hover{ color:#c7cfdb; }

/* header now needs relative for absolute X */
.sell-modal{ position:relative; }

/* reuse chips inside modal */
.sell-meta-line{ display:flex; align-items:center; gap:10px; }
/* slightly larger chip in modal meta */
.pp-outcome-chip--modal {
  font-size: 13px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* POSITIONS */
.pp-table--positions.has-actions .pp-thead--positions,
.pp-table--positions.has-actions .pp-row {
  grid-template-columns: 30% 15% 15% 15% 15% auto; /* with ACTIONS */
}
.pp-table--positions.no-actions .pp-thead--positions,
.pp-table--positions.no-actions .pp-row {
  grid-template-columns: 30% 15% 15% 15% 25%;      /* without ACTIONS */
}

/* OPEN ORDERS */
.pp-table--openorders.has-actions .pp-thead--openorders,
.pp-table--openorders.has-actions .pp-row {
  grid-template-columns: 30% 10% 10% 10% 10% 10% auto 120px;
}
.pp-table--openorders.no-actions .pp-thead--openorders,
.pp-table--openorders.no-actions .pp-row {
  grid-template-columns: 30% 10% 10% 10% 10% 10% auto; /* drop last col */
}
.pp-market-title a.pp-market-title-link{
  color: var(--light);
  text-decoration: none;
}
.pp-market-title a.pp-market-title-link:hover{
  text-decoration: underline;
}
/* ========== MOBILE CARD MODE (<576px) ========== */
@media (max-width:576px){
  /* 1) Скрий таблица header-и */
  .pp-thead{ display:none; }

  /* 2) Универсален "card" вид за редовете */
  .pp-row{
    display:block;                /* от grid -> блокове един под друг */
    padding:14px 10px; 
    border-radius:12px;
    margin-bottom:12px;
    border: 1px solid var(--card-border);
    background:rgba(255,255,255,0.02); /* лек контраст; ако не искаш — махни */
  }
  .pp-row > *{ 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:10px; 
    padding:6px 0; 
  }
  .pp-row > *:last-child{ border-bottom:none; }

  /* Маркет клетката да си остане "media" блок, без label */
  .pp-market{ 
    display:flex; 
    justify-content:flex-start; 
    align-items:center; 
    gap:12px; 
    padding-bottom:8px;
  }

  .pp-actions{ display:none !important; }
  .pp-th--actions{ display:none !important; }
  .pp-table--positions .pp-row > :nth-child(2)::before{ content:"AVG→NOW"; margin-right:auto; opacity:.7; }
  .pp-table--positions .pp-row > :nth-child(3)::before{ content:"BET";      margin-right:auto; opacity:.7; }
  .pp-table--positions .pp-row > :nth-child(4)::before{ content:"TO WIN";   margin-right:auto; opacity:.7; }
  .pp-table--positions .pp-row > :nth-child(5){
    font-weight:700;
  }
  .pp-table--positions .pp-row > :nth-child(5)::before{ content:"VALUE";    margin-right:auto; opacity:.7; }
  .pp-table--openorders .pp-row > :nth-child(2)::before{ content:"SIDE";     margin-right:auto; opacity:.7; }
  .pp-table--openorders .pp-row > :nth-child(3)::before{ content:"OUTCOME";  margin-right:auto; opacity:.7; }
  .pp-table--openorders .pp-row > :nth-child(4)::before{ content:"PRICE";    margin-right:auto; opacity:.7; }
  .pp-table--openorders .pp-row > :nth-child(5)::before{ content:"FILLED";   margin-right:auto; opacity:.7; }
  .pp-table--openorders .pp-row > :nth-child(6){
    font-weight:700;
  }
  .pp-table--openorders .pp-row > :nth-child(6)::before{ content:"TOTAL";    margin-right:auto; opacity:.7; }
  .pp-table--openorders .pp-row > :nth-child(7){ display:none !important; }
  .pp-table--activity .pp-row > :nth-child(1){ 
    content: centered;
    border-bottom:none;
    padding-bottom:0;
  }
  .pp-table--activity .pp-row > :nth-child(2){ 
    border-top:1px solid var(--card-border);
    margin-top:6px; 
  }
  .pp-table--activity .pp-row > :nth-child(3){
    font-weight:700;
  }

  .pp-table--activity .pp-row > :nth-child(3)::before{ content:"VALUE";      margin-right:auto; opacity:.7; }
  .pp-table--activity .pp-row > :nth-child(4)::before{ content:"TIMESTAMP";       margin-right:auto; opacity:.7; }


  .pp-market-title{ white-space:normal; line-height:1.25; }
  .pp-owned-note{ white-space:normal; }
  .pp-outcome-chip{ transform:translateY(0); }
}

@media (max-width:576px){
  .pp-actions{
    display:flex !important;
    justify-content:center;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding-top:6px;
  }

  .pp-actions .btn{
    flex:0 0 auto;        /* stop stretching */
    width:auto;           /* fit-content */
    min-width:96px;       /* tweak 88–120px to taste */
    padding:8px 12px;     /* compact touch target */
    font-size:13px;
    border-radius:10px;
    justify-content: center;
    text-align: center;
  }

  /* Ensure earlier mobile rules that used 48% etc. don’t force width */
  .pp-table--positions .pp-actions .btn,
  .pp-table--openorders .pp-actions .btn{
    min-width:96px;       /* keep the same min width */
  }

  /* Keep EXPIRE hidden on mobile, but leave ACTIONS visible */
  .pp-table--openorders .pp-row > :nth-child(7){ display:none !important; }  /* EXPIRE */
}

/* ==== Activity: center icon + Bought/Sold together (all viewports) ==== */
.pp-th--type{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  color: var(--light);
}
.pp-activity-icon{
  margin-right:0;                  /* we rely on gap now */
}

/* If you want it centered only on mobile, wrap the above in: 
@media (max-width:576px){ ... } 
*/

/* (Optional polish) Keep actions aligned to the card’s bottom edge in mobile card mode */
@media (max-width:576px){
  .pp-row{
    position:relative;
  }
  .pp-actions{ 
    padding-top:6px; 
  }
}
.header-primary {border-bottom: 1px solid var(--base) !important; position: fixed !important;}

.toast-host{
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
  }
  .toast{
    pointer-events: auto;
    min-width: 260px;
    max-width: 420px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--card-border);
    background: var(--base);
    color: var(--light);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    transform: translateY(8px);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    font-size: 14px;
    line-height: 1.25;
  }
  .toast.is-show{
    opacity: 1;
    transform: translateY(0);
  }
  .toast__row{
    display:flex;
    align-items:flex-start;
    gap:10px;
  }
  .toast__title{
    font-weight: 800;
    margin: 0 0 4px 0;
    font-size: 13px;
    letter-spacing: .6px;
    text-transform: uppercase;
    opacity: .85;
  }
  .toast__msg{
    margin: 0;
    color: var(--light);
    opacity: .95;
  }
  .toast__close{
    margin-left:auto;
    border: 0;
    background: transparent;
    color: var(--light);
    opacity: .75;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    font-size: 16px;
  }
  .toast--success{ outline: 1px solid rgba(25,135,84,.35); }
  .toast--warn{    outline: 1px solid rgba(255,193,7,.35); }
  .toast--error{   outline: 1px solid rgba(220,53,69,.35); }
  
  #toastHost .toast { display: block !important; }
@media (max-width:1024px) {
  #toastHost {
    bottom: 80px; /* keeps toast above fixed bottom menu */
  }
}