/* =============================================================
   Kwata Predict — Kalshi-style UI
   Mobile-first. Uses --kw-* design tokens only.
   ============================================================= */



.kwata-predict {
    --kp-shell-nav-offset: clamp(92px, 18vw, 120px);
    --kp-shell-nav-gap: clamp(12px, 3vw, 20px);
    padding: 0;
    background: var(--kw-bg-secondary);
    min-height: 100vh;
    font-family: var(--kw-font);
    color: var(--kw-text);
}

.kwata-predict *,
.kwata-predict *::before,
.kwata-predict *::after {
    box-sizing: border-box;
}

/* ── TOP BAR ──────────────────────────────────────────────── */

.kp-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--kw-space-sm);
    padding: var(--kw-space-sm) var(--kw-space-lg);
    background: var(--kw-bg);
    border-bottom: 1px solid var(--kw-border);
    min-height: 56px;
}

.kp-topbar__back {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--kw-radius-full);
    cursor: pointer;
    color: var(--kw-text);
    flex-shrink: 0;
    transition: background var(--kw-transition);
}

.kp-topbar__back:hover { background: var(--kw-bg-tertiary); }

.kp-topbar__back svg {
    width: 22px;
    height: 22px;
}

.kp-topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--kw-space-sm);
    color: var(--kw-text);
    flex: 1;
    min-width: 0;
    text-decoration: none;
}

.kp-topbar__logo {
    display: block;
    width: auto;
    max-width: clamp(34px, 8vw, 42px);
    height: clamp(34px, 8vw, 42px);
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}

.kp-topbar__brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kp-topbar__brand-title {
    font-size: var(--kw-text-lg);
    font-weight: var(--kw-font-weight-bold);
    line-height: 1.1;
    color: var(--kw-text) !important;
}

.kp-topbar__brand-sub {
    font-size: var(--kw-text-xs);
    color: var(--kw-text-secondary) !important;
    line-height: 1.1;
}

.kp-topbar__right {
    display: flex;
    align-items: center;
    gap: var(--kw-space-sm);
    flex-shrink: 0;
}

.kp-topbar__balance {
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-accent);
    background: var(--kw-accent-light);
    padding: var(--kw-space-xs) var(--kw-space-md);
    border-radius: var(--kw-radius-full);
    white-space: nowrap;
}

.kp-topbar__login {
    display: inline-flex;
    align-items: center;
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-accent);
    text-decoration: none;
    padding: var(--kw-space-xs) var(--kw-space-md);
    border: 1px solid var(--kw-accent);
    border-radius: var(--kw-radius-full);
    transition: background var(--kw-transition);
}

.kp-topbar__login:hover { background: var(--kw-accent-light); }

/* ── SCREENS ──────────────────────────────────────────────── */

.kp-screen {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--kw-space-lg);
    padding-bottom: calc(124px + var(--kp-shell-nav-offset) + var(--kp-shell-nav-gap));
}

/* ── BROWSE HERO ──────────────────────────────────────────── */

.kp-browse-hero {
    padding: var(--kw-space-lg) 0 var(--kw-space-md);
}

.kp-browse-hero__title {
    margin: 0 0 var(--kw-space-xs);
    font-size: var(--kw-text-xl);
    font-weight: var(--kw-font-weight-bold);
    line-height: 1.2;
}

.kp-browse-hero__sub {
    margin: 0;
    font-size: var(--kw-text-sm);
    color: var(--kw-text-secondary);
}

/* ── CATEGORY TABS ────────────────────────────────────────── */

.kp-cats {
    display: flex;
    gap: var(--kw-space-sm);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--kw-space-xs);
    margin-bottom: var(--kw-space-md);
    -webkit-overflow-scrolling: touch;
}

.kp-cats::-webkit-scrollbar { display: none; }

.kp-cat {
    all: unset;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: var(--kw-space-xs) var(--kw-space-md);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-full);
    background: var(--kw-bg);
    color: var(--kw-text-secondary);
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--kw-transition), border-color var(--kw-transition), color var(--kw-transition);
}

.kp-cat--active,
.kp-cat:hover {
    background: var(--kw-accent);
    border-color: var(--kw-accent);
    color: var(--kw-bg);
}

/* ── FILTER ROW ───────────────────────────────────────────── */

.kp-filter-row {
    display: flex;
    align-items: center;
    gap: var(--kw-space-sm);
    margin-bottom: var(--kw-space-lg);
}

.kp-select {
    height: 36px;
    padding: 0 var(--kw-space-md);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-md);
    background: var(--kw-bg);
    color: var(--kw-text);
    font-size: var(--kw-text-sm);
    font-family: var(--kw-font);
    cursor: pointer;
    outline: none;
}

.kp-btn-ghost {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--kw-space-xs);
    height: 36px;
    padding: 0 var(--kw-space-md);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-md);
    background: var(--kw-bg);
    color: var(--kw-text-secondary);
    font-size: var(--kw-text-sm);
    cursor: pointer;
    transition: border-color var(--kw-transition), color var(--kw-transition);
}

.kp-btn-ghost:hover {
    border-color: var(--kw-accent);
    color: var(--kw-accent);
}

.kp-btn-icon svg {
    width: 16px;
    height: 16px;
}

/* ── NOTICE ───────────────────────────────────────────────── */

.kp-notice {
    padding: var(--kw-space-sm) var(--kw-space-md);
    border-radius: var(--kw-radius-md);
    font-size: var(--kw-text-sm);
    border: 1px solid transparent;
    margin-bottom: var(--kw-space-md);
}

.kp-notice--error   { background: var(--kw-danger-light);  color: var(--kw-danger);  border-color: var(--kw-danger-light); }
.kp-notice--success { background: var(--kw-success-light); color: var(--kw-success); border-color: var(--kw-success-light); }
.kp-notice--warning { background: var(--kw-warning-light); color: var(--kw-warning); border-color: var(--kw-warning-light); }

/* ── MARKET LIST ──────────────────────────────────────────── */

.kp-markets {
    display: flex;
    flex-direction: column;
    gap: var(--kw-space-md);
}

/* ── MARKET CARD ──────────────────────────────────────────── */

.kp-card {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: linear-gradient(180deg, var(--kw-bg) 0%, var(--kw-bg-secondary) 100%);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--kw-transition), transform var(--kw-transition);
    box-shadow: var(--kw-shadow-md);
}

.kp-card[data-category="sports"] {
    background: linear-gradient(180deg, var(--kw-bg) 0%, var(--kw-success-light) 100%);
}

.kp-card[data-category="entertainment"],
.kp-card[data-category="campus"] {
    background: linear-gradient(180deg, var(--kw-bg) 0%, var(--kw-accent-light) 100%);
}

.kp-card[data-category="cameroon_news"] {
    background: linear-gradient(180deg, var(--kw-bg) 0%, var(--kw-warning-light) 100%);
}

.kp-card[data-category="community"] {
    background: linear-gradient(180deg, var(--kw-bg) 0%, rgba(255, 96, 122, 0.1) 100%);
}

.kp-card[data-category="finance"] {
    background: linear-gradient(180deg, var(--kw-bg) 0%, rgba(16, 185, 129, 0.12) 100%);
}

.kp-card:hover,
.kp-card:focus-visible {
    box-shadow: var(--kw-shadow-md);
    transform: translateY(-1px);
    outline: 2px solid var(--kw-accent);
    outline-offset: 2px;
}

/* Card top category band */
.kp-card__top {
    display: flex;
    align-items: center;
    gap: var(--kw-space-sm);
    padding: var(--kw-space-xs) var(--kw-space-md);
    font-size: var(--kw-text-xs);
    font-weight: var(--kw-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--kw-bg-tertiary);
    color: var(--kw-text-secondary) !important;
}

.kp-card__top[data-category="sports"]       { background: var(--kw-success-light); color: var(--kw-success) !important; }
.kp-card__top[data-category="entertainment"]{ background: var(--kw-accent-light);  color: var(--kw-accent) !important; }
.kp-card__top[data-category="cameroon_news"]{ background: var(--kw-warning-light); color: var(--kw-warning) !important; }
.kp-card__top[data-category="finance"]      { background: var(--kw-success-light); color: var(--kw-success) !important; }
.kp-card__top[data-category="campus"]       { background: var(--kw-accent-light);  color: var(--kw-accent-dark) !important; }

.kp-card__top > span:first-child { color: inherit !important; }

.kp-card__cat-icon  { font-size: 1em; }
.kp-card__cat-label { flex: 1; }

.kp-card__status {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: var(--kw-radius-full);
    font-size: var(--kw-text-xs);
    text-transform: uppercase;
    font-weight: var(--kw-font-weight-bold);
}

.kp-card__status--open     { background: var(--kw-success-light); color: var(--kw-success) !important; }
.kp-card__status--closed,
.kp-card__status--halted   { background: var(--kw-warning-light); color: var(--kw-warning) !important; }
.kp-card__status--resolved { background: var(--kw-accent-light);  color: var(--kw-accent) !important; }
.kp-card__status--cancelled{ background: var(--kw-danger-light);  color: var(--kw-danger) !important; }

.kp-card__body {
    padding: var(--kw-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--kw-space-sm);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
}

.kp-card__q {
    margin: 0;
    font-size: var(--kw-text-base);
    font-weight: var(--kw-font-weight-bold);
    line-height: 1.35;
    color: var(--kw-text);
}

.kp-card__bar {
    display: flex;
    height: 6px;
    border-radius: var(--kw-radius-full);
    overflow: hidden;
}

.kp-card__bar-yes {
    background: var(--kw-success);
    border-radius: var(--kw-radius-full) 0 0 var(--kw-radius-full);
    transition: width 0.4s ease;
    min-width: 4px;
}

.kp-card__bar-no {
    background: var(--kw-danger);
    flex: 1;
    border-radius: 0 var(--kw-radius-full) var(--kw-radius-full) 0;
    min-width: 4px;
}

.kp-card__probs {
    display: flex;
    gap: var(--kw-space-md);
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-bold);
}

.kp-card__outcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kw-space-sm);
}

.kp-card__outcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kw-space-sm);
    padding: var(--kw-space-sm) var(--kw-space-md);
    border-radius: var(--kw-radius-md);
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-bold);
}

.kp-card__outcome span { color: inherit !important; }

.kp-card__outcome--yes {
    background: var(--kw-success-light);
    color: var(--kw-success) !important;
}

.kp-card__outcome--no {
    background: var(--kw-danger-light);
    color: var(--kw-danger) !important;
}

.kp-card__outcome-label {
    letter-spacing: 0.04em;
}

.kp-card__outcome-value {
    font-size: var(--kw-text-base);
}

.kp-card__prob--yes { color: var(--kw-success); }
.kp-card__prob--no  { color: var(--kw-danger); }

.kp-card__meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--kw-space-md);
    font-size: var(--kw-text-xs);
    color: var(--kw-text-muted) !important;
}

.kp-card__meta span { color: inherit !important; }

/* ── DETAIL HERO ──────────────────────────────────────────── */

.kp-hero {
    background: var(--kw-bg);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    overflow: hidden;
    margin-bottom: var(--kw-space-sm);
}

.kp-hero__header {
    display: flex;
    align-items: center;
    gap: var(--kw-space-sm);
    padding: var(--kw-space-xs) var(--kw-space-lg);
    font-size: var(--kw-text-xs);
    font-weight: var(--kw-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--kw-bg-tertiary);
    color: var(--kw-text-secondary) !important;
}

.kp-hero[data-category="sports"] .kp-hero__header     { background: var(--kw-success-light); color: var(--kw-success) !important; }
.kp-hero[data-category="entertainment"] .kp-hero__header { background: var(--kw-accent-light);  color: var(--kw-accent) !important; }
.kp-hero[data-category="cameroon_news"] .kp-hero__header { background: var(--kw-warning-light); color: var(--kw-warning) !important; }
.kp-hero[data-category="finance"] .kp-hero__header    { background: var(--kw-success-light); color: var(--kw-success) !important; }
.kp-hero[data-category="campus"] .kp-hero__header     { background: var(--kw-accent-light);  color: var(--kw-accent-dark) !important; }

.kp-hero__header > span:first-child { color: inherit !important; }

.kp-hero__badge {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: var(--kw-radius-full);
    font-size: var(--kw-text-xs);
    text-transform: uppercase;
    font-weight: var(--kw-font-weight-bold);
}

.kp-hero__badge--open     { background: var(--kw-success-light); color: var(--kw-success) !important; }
.kp-hero__badge--closed,
.kp-hero__badge--halted   { background: var(--kw-warning-light); color: var(--kw-warning) !important; }
.kp-hero__badge--resolved { background: var(--kw-accent-light);  color: var(--kw-accent) !important; }
.kp-hero__badge--cancelled{ background: var(--kw-danger-light);  color: var(--kw-danger) !important; }

.kp-hero__q {
    margin: 0;
    padding: var(--kw-space-lg);
    font-size: var(--kw-text-xl);
    font-weight: var(--kw-font-weight-bold);
    line-height: 1.25;
    color: var(--kw-text);
}

.kp-hero__desc {
    margin: 0;
    padding: 0 var(--kw-space-lg) var(--kw-space-md);
    font-size: var(--kw-text-sm);
    color: var(--kw-text-secondary) !important;
    line-height: 1.5;
}

.kp-hero__bar-wrap {
    padding: 0 var(--kw-space-lg) var(--kw-space-md);
}

.kp-hero__bar {
    display: flex;
    height: 44px;
    border-radius: var(--kw-radius-md);
    overflow: hidden;
    gap: 2px;
}

.kp-hero__bar-yes,
.kp-hero__bar-no {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-bg);
    transition: width 0.4s ease;
    min-width: 44px;
}

.kp-hero__bar-yes {
    background: var(--kw-success);
    border-radius: var(--kw-radius-md) 0 0 var(--kw-radius-md);
}

.kp-hero__bar-no {
    background: var(--kw-danger);
    flex: 1;
    border-radius: 0 var(--kw-radius-md) var(--kw-radius-md) 0;
}

.kp-hero__bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--kw-space-xs);
    font-size: var(--kw-text-xs);
    font-weight: var(--kw-font-weight-medium);
}

.kp-hero__bar-label--yes { color: var(--kw-success); }
.kp-hero__bar-label--no  { color: var(--kw-danger); }

.kp-hero__outcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kw-space-sm);
    margin-top: var(--kw-space-sm);
}

.kp-hero__outcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kw-space-sm);
    padding: var(--kw-space-sm) var(--kw-space-md);
    border-radius: var(--kw-radius-md);
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-bold);
}

.kp-hero__outcome span { color: inherit !important; }

.kp-hero__outcome--yes {
    background: var(--kw-success-light);
    color: var(--kw-success) !important;
}

.kp-hero__outcome--no {
    background: var(--kw-danger-light);
    color: var(--kw-danger) !important;
}

.kp-hero__outcome-value {
    font-size: var(--kw-text-base);
}

.kp-hero__stats {
    display: flex;
    border-top: 1px solid var(--kw-border);
}

.kp-hero__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--kw-space-md) var(--kw-space-sm);
    border-right: 1px solid var(--kw-border);
}

.kp-hero__stat:last-child { border-right: none; }

.kp-hero__stat span { color: inherit !important; }

.kp-hero__stat-v {
    font-size: var(--kw-text-md);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-text) !important;
}

.kp-hero__stat-l {
    font-size: var(--kw-text-xs);
    color: var(--kw-text-muted) !important;
}

/* Market chart */

.kp-market-chart {
    background: var(--kw-bg);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    overflow: hidden;
    margin-bottom: var(--kw-space-sm);
}

.kp-market-chart__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kw-space-md);
    padding: var(--kw-space-lg);
    border-bottom: 1px solid var(--kw-border);
    flex-wrap: wrap;
}

.kp-market-chart__header-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kp-market-chart__eyebrow {
    margin: 0;
    font-size: var(--kw-text-xs);
    font-weight: var(--kw-font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kw-text-muted) !important;
}

.kp-market-chart__title {
    margin: 0;
    font-size: var(--kw-text-lg);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-text) !important;
}

.kp-market-chart__meta {
    margin: 0;
    font-size: var(--kw-text-sm);
    color: var(--kw-text-secondary) !important;
}

.kp-market-chart__ranges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--kw-bg-secondary);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-full);
    padding: 4px;
}

.kp-chart-range {
    all: unset;
    box-sizing: border-box;
    min-width: 44px;
    padding: 7px 12px;
    border-radius: var(--kw-radius-full);
    text-align: center;
    cursor: pointer;
    font-family: var(--kw-font);
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-text-secondary) !important;
    transition: background var(--kw-transition), color var(--kw-transition);
    -webkit-tap-highlight-color: transparent;
}

.kp-chart-range--active {
    background: var(--kw-accent);
    color: var(--kw-bg) !important;
}

.kwata-predict .kp-chart-range:hover,
.kwata-predict .kp-chart-range:focus,
.kwata-predict .kp-chart-range:focus-visible,
.kwata-predict .kp-chart-range:active {
    background: var(--kw-accent-light) !important;
    color: var(--kw-accent) !important;
    outline: none;
}

.kwata-predict .kp-chart-range--active,
.kwata-predict .kp-chart-range--active:hover,
.kwata-predict .kp-chart-range--active:focus,
.kwata-predict .kp-chart-range--active:focus-visible,
.kwata-predict .kp-chart-range--active:active {
    background: var(--kw-accent) !important;
    color: var(--kw-bg) !important;
    outline: none;
}

.kp-market-chart__canvas-wrap {
    position: relative;
    height: 320px;
    padding: var(--kw-space-md) var(--kw-space-lg) var(--kw-space-lg);
}

.kp-market-chart__canvas {
    width: 100%;
    height: 100%;
}

.kp-market-chart__fallback {
    position: absolute;
    inset: var(--kw-space-md) var(--kw-space-lg) var(--kw-space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed var(--kw-border);
    border-radius: var(--kw-radius-md);
    background: var(--kw-bg-secondary);
    color: var(--kw-text-secondary) !important;
    font-size: var(--kw-text-sm);
    padding: var(--kw-space-lg);
}

.kp-market-chart__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--kw-space-sm);
    padding: 0 var(--kw-space-lg) var(--kw-space-lg);
}

.kp-chart-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--kw-space-md);
    border-radius: var(--kw-radius-md);
    border: 1px solid var(--kw-border);
    background: var(--kw-bg-secondary);
}

.kp-chart-stat--yes {
    background: var(--kw-success-light);
    border-color: transparent;
}

.kp-chart-stat--no {
    background: var(--kw-danger-light);
    border-color: transparent;
}

.kp-chart-stat__label {
    font-size: var(--kw-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kw-text-muted) !important;
}

.kp-chart-stat__value {
    font-size: var(--kw-text-lg);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-text) !important;
    line-height: 1.2;
}

.kp-chart-stat--yes .kp-chart-stat__label,
.kp-chart-stat--yes .kp-chart-stat__value {
    color: var(--kw-success) !important;
}

.kp-chart-stat--no .kp-chart-stat__label,
.kp-chart-stat--no .kp-chart-stat__value {
    color: var(--kw-danger) !important;
}

/* ── DETAIL BODY / TABS ────────────────────────────────────── */

.kp-detail-body {
    background: var(--kw-bg);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    overflow: hidden;
    box-shadow: var(--kw-shadow-sm);
}

.kp-tabs {
    display: flex;
    gap: var(--kw-space-sm);
    border-bottom: 1px solid var(--kw-border);
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--kw-bg-secondary);
    padding: var(--kw-space-md);
}

.kp-tabs::-webkit-scrollbar { display: none; }

.kp-tab {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: var(--kw-space-sm) var(--kw-space-md);
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-medium);
    color: var(--kw-text-secondary) !important;
    cursor: pointer;
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-full);
    white-space: nowrap;
    transition: color var(--kw-transition), border-color var(--kw-transition), background var(--kw-transition), box-shadow var(--kw-transition);
    font-family: var(--kw-font);
    background: var(--kw-bg);
    box-shadow: var(--kw-shadow-sm);
}

.kp-tab:hover {
    color: var(--kw-accent) !important;
    border-color: var(--kw-accent-light);
    background: var(--kw-accent-light);
}

.kp-tab--active,
.kp-tab--active:hover {
    color: var(--kw-bg) !important;
    border-color: var(--kw-accent);
    background: var(--kw-accent);
    box-shadow: none;
}

.kp-tab-panel {
    padding: var(--kw-space-lg);
    padding-top: var(--kw-space-md);
}

.kp-activity-stack {
    display: flex;
    flex-direction: column;
    gap: var(--kw-space-md);
}

.kp-activity-card {
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-md);
    background: var(--kw-bg-secondary);
    padding: var(--kw-space-md);
    box-shadow: var(--kw-shadow-sm);
}

.kp-activity-card__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--kw-space-sm);
}

.kp-activity-card__title {
    margin: 0;
    font-size: var(--kw-text-base);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-text) !important;
}

.kp-activity-card__sub {
    margin: 0;
    font-size: var(--kw-text-xs);
    color: var(--kw-text-secondary) !important;
}

.kp-order-list {
    display: flex;
    flex-direction: column;
    gap: var(--kw-space-sm);
}

.kp-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kw-space-md);
    padding: var(--kw-space-sm) var(--kw-space-md);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-md);
    background: var(--kw-bg);
}

.kp-order-row__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kp-order-row__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kw-space-xs);
}

.kp-order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 var(--kw-space-sm);
    border-radius: var(--kw-radius-full);
    font-size: var(--kw-text-xs);
    font-weight: var(--kw-font-weight-bold);
}

.kp-order-badge--buy {
    background: var(--kw-accent-light);
    color: var(--kw-accent) !important;
}

.kp-order-badge--sell {
    background: var(--kw-warning-light);
    color: var(--kw-warning) !important;
}

.kp-order-badge--yes {
    background: var(--kw-success-light);
    color: var(--kw-success) !important;
}

.kp-order-badge--no {
    background: var(--kw-danger-light);
    color: var(--kw-danger) !important;
}

.kp-order-row__title {
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-medium);
    color: var(--kw-text) !important;
}

.kp-order-row__meta {
    font-size: var(--kw-text-xs);
    color: var(--kw-text-secondary) !important;
}

.kp-order-cancel {
    all: unset;
    box-sizing: border-box;
    padding: var(--kw-space-sm) var(--kw-space-md);
    border-radius: var(--kw-radius-full);
    background: var(--kw-bg-tertiary);
    color: var(--kw-text) !important;
    font-size: var(--kw-text-xs);
    font-weight: var(--kw-font-weight-bold);
    cursor: pointer;
    flex-shrink: 0;
}

.kp-order-cancel:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.kp-book-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kw-space-sm);
}

.kp-book-panel {
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-md);
    background: var(--kw-bg);
    overflow: hidden;
}

.kp-book-panel--yes .kp-book-panel__head {
    background: var(--kw-success-light);
}

.kp-book-panel--no .kp-book-panel__head {
    background: var(--kw-danger-light);
}

.kp-book-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kw-space-sm);
    padding: var(--kw-space-sm) var(--kw-space-md);
}

.kp-book-panel__title {
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-text) !important;
}

.kp-book-panel__total {
    font-size: var(--kw-text-xs);
    color: var(--kw-text-secondary) !important;
}

.kp-book-levels {
    display: flex;
    flex-direction: column;
}

.kp-book-level {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: var(--kw-space-sm);
    align-items: center;
    padding: var(--kw-space-sm) var(--kw-space-md);
    border-top: 1px solid var(--kw-border);
}

.kp-book-level__price {
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-text) !important;
}

.kp-book-level__prob {
    font-size: var(--kw-text-xs);
    color: var(--kw-text-secondary) !important;
}

.kp-book-level__qty {
    font-size: var(--kw-text-xs);
    color: var(--kw-text-muted) !important;
    text-align: right;
}

.kp-book-empty,
.kp-pos-empty-note {
    padding: var(--kw-space-md);
    font-size: var(--kw-text-sm);
    color: var(--kw-text-secondary) !important;
    background: var(--kw-bg);
    border-radius: var(--kw-radius-md);
}

/* ── RECENT TRADES ────────────────────────────────────────── */

.kp-trades {
    display: flex;
    flex-direction: column;
}

.kp-trade-row {
    display: flex;
    align-items: center;
    gap: var(--kw-space-md);
    padding: var(--kw-space-sm) 0;
    border-bottom: 1px solid var(--kw-border);
    font-size: var(--kw-text-sm);
}

.kp-trade-row:last-child { border-bottom: none; }

.kp-trade-side {
    padding: 2px var(--kw-space-sm);
    border-radius: var(--kw-radius-sm);
    font-size: var(--kw-text-xs);
    font-weight: var(--kw-font-weight-bold);
    min-width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.kp-trade-side--yes { background: var(--kw-success-light); color: var(--kw-success); }
.kp-trade-side--no  { background: var(--kw-danger-light);  color: var(--kw-danger); }

.kp-trade-time {
    margin-left: auto;
    color: var(--kw-text-muted);
    font-size: var(--kw-text-xs);
    flex-shrink: 0;
}

/* ── RULES TEXT ───────────────────────────────────────────── */

.kp-rules-text {
    font-size: var(--kw-text-sm);
    color: var(--kw-text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0 0 var(--kw-space-md);
}

/* ── RELATED MARKETS ──────────────────────────────────────── */

.kp-related-list {
    display: flex;
    flex-direction: column;
    gap: var(--kw-space-sm);
}

.kp-related-card {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--kw-space-xs);
    width: 100%;
    padding: var(--kw-space-md);
    background: var(--kw-bg-secondary);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-md);
    cursor: pointer;
    transition: background var(--kw-transition);
}

.kp-related-card:hover { background: var(--kw-bg-tertiary); }

.kp-related-card__q {
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-medium);
    color: var(--kw-text);
    line-height: 1.3;
}

.kp-related-card__bar {
    display: flex;
    height: 4px;
    border-radius: var(--kw-radius-full);
    overflow: hidden;
}

.kp-related-card__bar-yes {
    background: var(--kw-success);
    border-radius: var(--kw-radius-full) 0 0 var(--kw-radius-full);
    min-width: 4px;
}

.kp-related-card__bar-no {
    flex: 1;
    background: var(--kw-danger);
    border-radius: 0 var(--kw-radius-full) var(--kw-radius-full) 0;
    min-width: 4px;
}

.kp-related-card__probs {
    display: flex;
    gap: var(--kw-space-sm);
    font-size: var(--kw-text-xs);
    font-weight: var(--kw-font-weight-bold);
}

.kp-related-card__outcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kw-space-sm);
}

.kp-related-card__probs .kp-card__prob--yes { color: var(--kw-success); }
.kp-related-card__probs .kp-card__prob--no  { color: var(--kw-danger); }

/* ── MY POSITION ──────────────────────────────────────────── */

.kp-pos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kw-space-md);
}

.kp-pos-cell {
    background: var(--kw-bg-secondary);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-md);
    padding: var(--kw-space-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--kw-shadow-sm);
}

.kp-pos-v {
    font-size: var(--kw-text-xl);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-text);
}

.kp-pos-v--yes { color: var(--kw-success); }
.kp-pos-v--no  { color: var(--kw-danger); }

.kp-pos-l {
    font-size: var(--kw-text-xs);
    color: var(--kw-text-secondary);
}

.kp-pos-cell span { color: inherit !important; }

.kp-pos-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kw-space-sm);
    margin-top: var(--kw-space-md);
}

.kp-pos-action {
    all: unset;
    box-sizing: border-box;
    padding: var(--kw-space-sm) var(--kw-space-md);
    text-align: center;
    border-radius: var(--kw-radius-md);
    cursor: pointer;
    font-family: var(--kw-font);
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-bold);
    border: 1px solid transparent;
}

.kp-pos-action--yes {
    background: var(--kw-success-light);
    border-color: var(--kw-success-light);
    color: var(--kw-success) !important;
}

.kp-pos-action--no {
    background: var(--kw-danger-light);
    border-color: var(--kw-danger-light);
    color: var(--kw-danger) !important;
}

/* ── STICKY TRADE BAR ─────────────────────────────────────── */

.kp-trade-bar {
    position: fixed;
    bottom: calc(var(--kp-shell-nav-offset) + var(--kp-shell-nav-gap));
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--kw-bg);
    border-top: 1px solid var(--kw-border);
    padding: var(--kw-space-sm) var(--kw-space-lg);
    padding-bottom: max(var(--kw-space-sm), env(safe-area-inset-bottom, 0px));
    box-shadow: var(--kw-shadow-lg);
}

.kp-detail-spacer {
    height: calc(64px + var(--kp-shell-nav-offset) + var(--kp-shell-nav-gap));
}

.kp-trade-bar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kw-space-sm);
    max-width: 640px;
    margin: 0 auto;
}

.kp-trade-btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--kw-space-sm) var(--kw-space-md);
    border-radius: var(--kw-radius-md);
    cursor: pointer;
    font-family: var(--kw-font);
    font-weight: var(--kw-font-weight-bold);
    gap: 1px;
    transition: opacity var(--kw-transition), transform var(--kw-transition);
    min-height: 54px;
    -webkit-tap-highlight-color: transparent;
}

.kp-trade-btn:hover  { opacity: 0.9; transform: translateY(-1px); }
.kp-trade-btn:active { transform: translateY(0); }

.kp-trade-btn--yes { background: var(--kw-success); color: var(--kw-bg); }
.kp-trade-btn--no  { background: var(--kw-danger);  color: var(--kw-bg); }

.kp-trade-btn span { color: inherit !important; }

.kp-trade-bar .kp-trade-btn--yes {
    background: var(--kw-success);
    border: 1px solid var(--kw-success);
    color: var(--kw-bg) !important;
}

.kp-trade-bar .kp-trade-btn--no {
    background: var(--kw-danger);
    border: 1px solid var(--kw-danger);
    color: var(--kw-bg) !important;
}

.kwata-predict .kp-trade-btn--yes,
.kwata-predict .kp-trade-btn--yes:hover,
.kwata-predict .kp-trade-btn--yes:focus,
.kwata-predict .kp-trade-btn--yes:focus-visible,
.kwata-predict .kp-trade-btn--yes:active {
    background: var(--kw-success) !important;
    border-color: var(--kw-success) !important;
    color: var(--kw-bg) !important;
    outline: none;
}

.kwata-predict .kp-trade-btn--no,
.kwata-predict .kp-trade-btn--no:hover,
.kwata-predict .kp-trade-btn--no:focus,
.kwata-predict .kp-trade-btn--no:focus-visible,
.kwata-predict .kp-trade-btn--no:active {
    background: var(--kw-danger) !important;
    border-color: var(--kw-danger) !important;
    color: var(--kw-bg) !important;
    outline: none;
}

.kp-trade-btn__label { font-size: var(--kw-text-sm); opacity: 0.85; }
.kp-trade-btn__price { font-size: var(--kw-text-lg); }

/* ── STICKY HOW-IT-WORKS FOOTER ──────────────────────────── */

.kp-sticky-foot {
    position: fixed;
    bottom: calc(var(--kp-shell-nav-offset) + var(--kp-shell-nav-gap));
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    justify-content: center;
    padding: var(--kw-space-sm) var(--kw-space-lg);
    padding-bottom: max(var(--kw-space-sm), env(safe-area-inset-bottom, 0px));
    background: var(--kw-bg);
    border-top: 1px solid var(--kw-border);
}

.kp-hiw-trigger {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--kw-space-sm);
    padding: var(--kw-space-sm) var(--kw-space-xl);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-full);
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-medium);
    color: var(--kw-text-secondary);
    cursor: pointer;
    background: var(--kw-bg-secondary);
    font-family: var(--kw-font);
    transition: border-color var(--kw-transition), color var(--kw-transition);
}

.kp-hiw-trigger:hover {
    border-color: var(--kw-accent);
    color: var(--kw-accent);
}

/* ── TRADE SHEET ──────────────────────────────────────────── */

.kp-trade-sheet {
    max-width: 540px;
    width: 100%;
}

.kp-sheet-body {
    padding: var(--kw-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--kw-space-lg);
}

.kp-sheet-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    background: var(--kw-bg-tertiary);
    border-radius: var(--kw-radius-md);
    padding: 4px;
}

.kp-action-btn {
    all: unset;
    box-sizing: border-box;
    text-align: center;
    padding: var(--kw-space-sm) var(--kw-space-md);
    border-radius: calc(var(--kw-radius-md) - 2px);
    font-size: var(--kw-text-base);
    font-weight: var(--kw-font-weight-bold);
    cursor: pointer;
    color: var(--kw-text-secondary) !important;
    transition: background var(--kw-transition), color var(--kw-transition);
    font-family: var(--kw-font);
    -webkit-tap-highlight-color: transparent;
}

.kwata-predict .kp-action-btn:hover,
.kwata-predict .kp-action-btn:focus,
.kwata-predict .kp-action-btn:focus-visible,
.kwata-predict .kp-action-btn:active {
    background: var(--kw-bg) !important;
    color: var(--kw-text) !important;
    outline: none;
}

.kp-action-btn--active[data-action="buy"] {
    background: var(--kw-accent);
    color: var(--kw-bg) !important;
}

.kp-action-btn--active[data-action="sell"] {
    background: var(--kw-danger);
    color: var(--kw-bg) !important;
}

.kwata-predict .kp-action-btn--active[data-action="buy"],
.kwata-predict .kp-action-btn--active[data-action="buy"]:hover,
.kwata-predict .kp-action-btn--active[data-action="buy"]:focus,
.kwata-predict .kp-action-btn--active[data-action="buy"]:focus-visible,
.kwata-predict .kp-action-btn--active[data-action="buy"]:active {
    background: var(--kw-accent) !important;
    color: var(--kw-bg) !important;
    outline: none;
}

.kwata-predict .kp-action-btn--active[data-action="sell"],
.kwata-predict .kp-action-btn--active[data-action="sell"]:hover,
.kwata-predict .kp-action-btn--active[data-action="sell"]:focus,
.kwata-predict .kp-action-btn--active[data-action="sell"]:focus-visible,
.kwata-predict .kp-action-btn--active[data-action="sell"]:active {
    background: var(--kw-danger) !important;
    color: var(--kw-bg) !important;
    outline: none;
}

.kp-sheet-sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: var(--kw-bg-tertiary);
    border-radius: var(--kw-radius-md);
    padding: 4px;
}

.kp-side-btn {
    all: unset;
    box-sizing: border-box;
    text-align: center;
    padding: var(--kw-space-sm) var(--kw-space-md);
    border-radius: calc(var(--kw-radius-md) - 2px);
    font-size: var(--kw-text-base);
    font-weight: var(--kw-font-weight-bold);
    cursor: pointer;
    color: var(--kw-text-secondary) !important;
    transition: all var(--kw-transition);
    font-family: var(--kw-font);
    -webkit-tap-highlight-color: transparent;
}

.kp-side-btn--active.kp-side-btn--yes { background: var(--kw-success); color: var(--kw-bg) !important; }
.kp-side-btn--active.kp-side-btn--no  { background: var(--kw-danger);  color: var(--kw-bg) !important; }
.kp-side-btn--yes:not(.kp-side-btn--active):hover { background: var(--kw-success-light); color: var(--kw-success) !important; }
.kp-side-btn--no:not(.kp-side-btn--active):hover  { background: var(--kw-danger-light);  color: var(--kw-danger) !important; }

.kwata-predict .kp-side-btn:focus,
.kwata-predict .kp-side-btn:focus-visible,
.kwata-predict .kp-side-btn:active {
    outline: none;
}

.kwata-predict .kp-side-btn--active.kp-side-btn--yes,
.kwata-predict .kp-side-btn--active.kp-side-btn--yes:hover,
.kwata-predict .kp-side-btn--active.kp-side-btn--yes:focus,
.kwata-predict .kp-side-btn--active.kp-side-btn--yes:focus-visible,
.kwata-predict .kp-side-btn--active.kp-side-btn--yes:active {
    background: var(--kw-success) !important;
    color: var(--kw-bg) !important;
}

.kwata-predict .kp-side-btn--active.kp-side-btn--no,
.kwata-predict .kp-side-btn--active.kp-side-btn--no:hover,
.kwata-predict .kp-side-btn--active.kp-side-btn--no:focus,
.kwata-predict .kp-side-btn--active.kp-side-btn--no:focus-visible,
.kwata-predict .kp-side-btn--active.kp-side-btn--no:active {
    background: var(--kw-danger) !important;
    color: var(--kw-bg) !important;
}

.kp-sheet-question {
    margin: 0;
    font-size: var(--kw-text-base);
    color: var(--kw-text-secondary);
    line-height: 1.45;
}

.kp-sheet-price-row {
    display: flex;
    gap: var(--kw-space-xl);
}

.kp-price-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kp-price-info__label {
    font-size: var(--kw-text-xs);
    color: var(--kw-text-muted) !important;
}

.kp-price-info__value {
    font-size: var(--kw-text-lg);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-text) !important;
}

.kp-price-info span { color: inherit !important; }

.kp-price-info__value--green { color: var(--kw-success) !important; }

.kp-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kw-space-md);
}

.kp-qty-row__label {
    font-size: var(--kw-text-base);
    font-weight: var(--kw-font-weight-medium);
}

.kp-qty-ctrl {
    display: flex;
    align-items: center;
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-md);
    overflow: hidden;
}

.kp-qty-btn {
    all: unset;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kw-text-lg);
    color: var(--kw-text);
    background: var(--kw-bg-secondary);
    cursor: pointer;
    transition: background var(--kw-transition);
    font-family: var(--kw-font);
    -webkit-tap-highlight-color: transparent;
}

.kp-qty-btn:hover { background: var(--kw-bg-tertiary); }

.kwata-predict .kp-qty-btn,
.kwata-predict .kp-qty-btn:hover,
.kwata-predict .kp-qty-btn:focus,
.kwata-predict .kp-qty-btn:focus-visible,
.kwata-predict .kp-qty-btn:active {
    background: var(--kw-bg-secondary) !important;
    color: var(--kw-text) !important;
    outline: none;
}

.kwata-predict .kp-qty-btn:hover,
.kwata-predict .kp-qty-btn:focus,
.kwata-predict .kp-qty-btn:focus-visible,
.kwata-predict .kp-qty-btn:active {
    background: var(--kw-bg-tertiary) !important;
}

.kp-qty-input {
    width: 70px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--kw-border);
    border-right: 1px solid var(--kw-border);
    outline: none;
    font-size: var(--kw-text-lg);
    font-weight: var(--kw-font-weight-bold);
    background: var(--kw-bg);
    color: var(--kw-text);
    padding: var(--kw-space-sm) 0;
    height: 44px;
    font-family: var(--kw-font);
    -moz-appearance: textfield;
    appearance: textfield;
}

.kp-qty-input::-webkit-outer-spin-button,
.kp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.kp-sheet-summary {
    background: var(--kw-bg-secondary);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-md);
    padding: var(--kw-space-md) var(--kw-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--kw-space-sm);
}

.kp-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--kw-text-sm);
    color: var(--kw-text-secondary) !important;
}

.kp-summary-row span { color: inherit !important; }

.kp-summary-row--sep {
    height: 1px;
    background: var(--kw-border);
    margin: var(--kw-space-xs) 0;
}

.kp-summary-row--total {
    font-size: var(--kw-text-base);
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-text) !important;
}

.kp-summary-row--payout {
    color: var(--kw-success) !important;
    font-weight: var(--kw-font-weight-medium);
}

.kp-sheet-bal {
    font-size: var(--kw-text-sm);
    color: var(--kw-text-secondary) !important;
}

.kp-sheet-bal span { color: inherit !important; }

.kp-sheet-bal__val {
    font-weight: var(--kw-font-weight-bold);
    color: var(--kw-text) !important;
}

.kp-sheet-bal__val--low { color: var(--kw-danger) !important; }

.kp-confirm-btn {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: var(--kw-space-md) var(--kw-space-lg);
    background: var(--kw-accent);
    color: var(--kw-bg) !important;
    border-radius: var(--kw-radius-md);
    font-size: var(--kw-text-base);
    font-weight: var(--kw-font-weight-bold);
    cursor: pointer;
    font-family: var(--kw-font);
    transition: opacity var(--kw-transition);
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.kp-confirm-btn[data-action="sell"] {
    background: var(--kw-danger);
}

.kp-confirm-btn:hover    { opacity: 0.92; }
.kp-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.kwata-predict .kp-confirm-btn,
.kwata-predict .kp-confirm-btn:hover,
.kwata-predict .kp-confirm-btn:focus,
.kwata-predict .kp-confirm-btn:focus-visible,
.kwata-predict .kp-confirm-btn:active {
    background: var(--kw-accent) !important;
    color: var(--kw-bg) !important;
    outline: none;
}

.kwata-predict .kp-confirm-btn[data-action="sell"],
.kwata-predict .kp-confirm-btn[data-action="sell"]:hover,
.kwata-predict .kp-confirm-btn[data-action="sell"]:focus,
.kwata-predict .kp-confirm-btn[data-action="sell"]:focus-visible,
.kwata-predict .kp-confirm-btn[data-action="sell"]:active {
    background: var(--kw-danger) !important;
    color: var(--kw-bg) !important;
    outline: none;
}

/* ── HOW IT WORKS MODAL ───────────────────────────────────── */

.kp-hiw-sheet {
    max-width: 480px;
    width: 100%;
}

.kp-hiw-body {
    padding: var(--kw-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--kw-space-lg);
}

.kp-hiw-step {
    display: flex;
    gap: var(--kw-space-md);
    align-items: flex-start;
}

.kp-hiw-step__num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--kw-radius-full);
    background: var(--kw-accent);
    color: var(--kw-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kw-text-sm);
    font-weight: var(--kw-font-weight-bold);
    margin-top: 1px;
}

.kp-hiw-step__text strong {
    display: block;
    font-size: var(--kw-text-base);
    margin-bottom: 2px;
    color: var(--kw-text);
}

.kp-hiw-step__text p {
    margin: 0;
    font-size: var(--kw-text-sm);
    color: var(--kw-text-secondary);
    line-height: 1.5;
}

.kp-hiw-note {
    font-size: var(--kw-text-sm);
    color: var(--kw-text-secondary);
    border-top: 1px solid var(--kw-border);
    padding-top: var(--kw-space-md);
    line-height: 1.5;
    margin: 0;
}

/* ── EMPTY / LOADING ──────────────────────────────────────── */

.kp-empty {
    padding: var(--kw-space-xl);
    text-align: center;
    color: var(--kw-text-secondary);
    font-size: var(--kw-text-base);
}

.kp-empty--compact {
    padding: var(--kw-space-md);
    font-size: var(--kw-text-sm);
}

.kp-empty__sub {
    font-size: var(--kw-text-sm);
    color: var(--kw-text-muted);
    margin-top: var(--kw-space-xs);
}

.kp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--kw-space-sm);
    padding: var(--kw-space-xl);
    color: var(--kw-text-secondary);
    font-size: var(--kw-text-sm);
}

.kp-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--kw-border);
    border-top-color: var(--kw-accent);
    border-radius: 50%;
    animation: kp-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes kp-spin { to { transform: rotate(360deg); } }

/* ── RESPONSIVE ───────────────────────────────────────────── */

@media (min-width: 768px) {
    .kp-screen {
        padding: var(--kw-space-xl);
        padding-bottom: calc(132px + var(--kp-shell-nav-offset) + var(--kp-shell-nav-gap));
    }

    .kp-hero__q {
        font-size: calc(var(--kw-text-xl) * 1.3);
    }
}

@media (max-width: 480px) {
    .kp-topbar {
        padding-left: var(--kw-space-md);
        padding-right: var(--kw-space-md);
    }

    .kp-topbar__brand-title {
        font-size: var(--kw-text-base);
    }

    .kp-screen {
        padding: var(--kw-space-md);
        padding-bottom: calc(124px + var(--kp-shell-nav-offset) + var(--kp-shell-nav-gap));
    }

    .kp-card__outcomes,
    .kp-hero__outcomes,
    .kp-related-card__outcomes {
        grid-template-columns: 1fr;
    }

    .kp-hero__stat-v {
        font-size: var(--kw-text-sm);
    }

    .kp-market-chart__header {
        padding: var(--kw-space-md);
    }

    .kp-market-chart__ranges {
        width: 100%;
        justify-content: space-between;
    }

    .kp-market-chart__canvas-wrap {
        height: 260px;
        padding: var(--kw-space-sm) var(--kw-space-md) var(--kw-space-md);
    }

    .kp-market-chart__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 var(--kw-space-md) var(--kw-space-md);
    }

    .kp-book-grid {
        grid-template-columns: 1fr;
    }

    .kp-order-row {
        flex-direction: column;
        align-items: stretch;
    }

    .kp-trade-bar {
        padding-left: var(--kw-space-md);
        padding-right: var(--kw-space-md);
    }

    .kp-pos-actions {
        grid-template-columns: 1fr;
    }
}