/* =========================================
   SL Pro v4 Frontend CSS
   Premium Luxury Gold UI
   No CSS variables
   No CSS grid
   No fr units
   Flexbox / width-based only
   ========================================= */

/* =========================
   Base / page shell
   ========================= */

.slpro-front-wrap {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 18px 60px;
    color: #231f17;
    background: transparent;
    margin-top: 14px;
    box-sizing: border-box;
}

.slpro-front-wrap *,
.slpro-front-wrap *:before,
.slpro-front-wrap *:after {
    box-sizing: border-box;
}

.slpro-front-shell {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

#slpro-dashboard-root {
    width: 100%;
    margin-top: 28px;
}

#slpro-dashboard-root.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

/* =========================
   Universal section spacing
   ========================= */

.slpro-hero,
.slpro-instruction-panel,
.slpro-controls-panel,
.slpro-predictor-hero,
.slpro-kb-section,
.slpro-about-panel,
.slpro-admin-panel,
.slpro-dashboard-nav-wrap,
.slpro-tab-panel,
.slpro-panel {
    margin-bottom: 38px;
}

.slpro-tab-panel:last-child,
.slpro-panel:last-child {
    margin-bottom: 0;
}

/* =========================
   Standard premium panels
   ========================= */

.slpro-panel {
    width: 100%;
    padding: 0;
    border-radius: 0;
    position: relative;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.slpro-panel-empty {
    text-align: center;
}

.slpro-panel-empty h2 {
    margin: 0 0 12px;
    color: #976b0e;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
}

.slpro-panel-empty p {
    margin: 0;
    color: #5d5240;
    font-size: 15px;
    line-height: 1.8;
}

.slpro-panel-head {
    margin-bottom: 24px;
}

.slpro-panel-head-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.slpro-panel-head h2 {
    margin: 0 0 10px;
    color: #8f650b;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.slpro-panel-head p {
    max-width: 860px;
    margin: 0;
    color: #5d5240;
    font-size: 15px;
    line-height: 1.8;
}

.slpro-panel h3 {
    margin: 0 0 18px;
    color: #966b0d;
    font-size: 25px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.slpro-panel p {
    color: #4f4536;
    font-size: 14px;
    line-height: 1.85;
}

/* =========================
   Hero
   ========================= */

.slpro-hero {
    position: relative;
    overflow: hidden;
    padding: 34px 34px 26px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 28%),
        linear-gradient(135deg, #fffdf5 0%, #f7ebca 48%, #edcb73 100%);
    border: 1px solid rgba(205, 167, 71, 0.28);
    box-shadow:
        0 26px 62px rgba(111, 83, 18, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.72);
    margin-bottom: 30px;
}

.slpro-hero:after {
    content: "";
    position: absolute;
    right: -70px;
    top: -65px;
    width: 250px;
    height: 250px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 72%);
}

.slpro-hero-badge {
    display: inline-block;
    margin-bottom: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,249,230,0.86);
    border: 1px solid rgba(194, 154, 51, 0.26);
    color: #aa7a0f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.slpro-hero h1 {
    position: relative;
    z-index: 2;
    margin: 0 0 14px;
    color: #17130f;
    font-size: 66px;
    line-height: 0.98;
    font-weight: 900;
    letter-spacing: -0.05em;
    text-shadow: 0 2px 0 rgba(255,255,255,0.28);
}

.slpro-hero-subtitle {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 0 24px;
    color: #4b4030;
    font-size: 17px;
    line-height: 1.8;
    font-weight: 500;
}

.slpro-hero-highlights {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.slpro-hero-highlight {
    width: calc(33.33% - 11px);
    min-height: 132px;
    padding: 18px 18px 16px;
    border-radius: 20px;
    background: rgba(255,252,243,0.76);
    border: 1px solid rgba(214, 181, 91, 0.22);
    box-shadow:
        0 12px 22px rgba(121, 92, 27, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.72);
}

.slpro-hero-highlight strong {
    display: block;
    margin-bottom: 9px;
    color: #93680b;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 800;
}

.slpro-hero-highlight span {
    display: block;
    color: #5c503e;
    font-size: 14px;
    line-height: 1.75;
}

/* =========================
   Instruction section
   ========================= */

.slpro-instruction-panel {
    background: linear-gradient(180deg, #fffdf8 0%, #fff8ef 100%);
}

.slpro-instruction-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.slpro-instruction-item {
    width: calc(50% - 9px);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 20px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fffaf1 0%, #fff4e3 100%);
    border: 1px solid #ead7a3;
    box-shadow:
        0 10px 22px rgba(121, 92, 27, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.74);
}

.slpro-instruction-step {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(180deg, #dfbb53 0%, #bf9421 100%);
    color: #ffffff;
    font-size: 18px;
    font-weight: 850;
    box-shadow: 0 10px 18px rgba(177, 133, 18, 0.18);
}

.slpro-instruction-item strong {
    display: block;
    margin-bottom: 8px;
    color: #856006;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 800;
}

.slpro-instruction-item p {
    margin: 0;
    color: #564c3b;
    font-size: 14px;
    line-height: 1.78;
}

/* =========================
   Controls
   ========================= */

.slpro-controls-panel {
    background: linear-gradient(180deg, #fffdf8 0%, #fff6e7 100%);
}

.slpro-front-control-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.slpro-control-group {
    margin-top: 20px;
    padding: 22px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fffaf1 0%, #fff3df 100%);
    border: 1px solid #e8d4a0;
    box-shadow:
        0 10px 20px rgba(121, 92, 27, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.72);
}

.slpro-control-group + .slpro-control-group {
    margin-top: 16px;
}

.slpro-control-group h3 {
    margin: 0 0 16px;
    color: #966b0d;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 800;
}

.slpro-front-controls-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.slpro-front-controls-grid label {
    width: calc(25% - 11px);
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #40382a;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
}

.slpro-front-controls-grid input {
    width: 100%;
    height: 48px;
    padding: 10px 13px;
    border-radius: 14px;
    border: 1px solid #dcc68a;
    background: #ffffff;
    color: #221c13;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.slpro-front-controls-grid input:focus {
    border-color: #c89b16;
    background: #fffdf7;
    box-shadow:
        0 0 0 3px rgba(200, 155, 22, 0.14),
        inset 0 1px 3px rgba(0,0,0,0.03);
}

.slpro-front-status {
    margin-top: 18px;
    min-height: 20px;
    color: #6a5f49;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 600;
}

/* =========================
   Buttons
   ========================= */

.slpro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 18px;
    border-radius: 999px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

.slpro-btn:hover {
    transform: translateY(-1px);
}

.slpro-btn-primary {
    background: linear-gradient(180deg, #deba54 0%, #bf9420 100%);
    color: #ffffff;
    border: 1px solid #bf9420;
    box-shadow: 0 12px 22px rgba(183, 137, 17, 0.16);
}

.slpro-btn-primary:hover {
    opacity: 0.97;
    box-shadow: 0 14px 26px rgba(183, 137, 17, 0.20);
}

.slpro-btn-secondary {
    background: linear-gradient(180deg, #ffffff 0%, #fbf5e6 100%);
    color: #9a7110;
    border: 1px solid #d8c489;
    box-shadow: 0 8px 18px rgba(121, 92, 27, 0.05);
}

.slpro-btn-secondary:hover {
    background: #fffaf0;
}

/* =========================
   Prediction hero
   ========================= */

.slpro-predictor-hero {
    position: relative;
    overflow: hidden;
    padding: 30px 30px 26px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 229, 135, 0.18) 0%, rgba(255, 229, 135, 0) 26%),
        linear-gradient(135deg, #11100d 0%, #211a11 46%, #7f5e17 100%);
    border: 1px solid rgba(240, 203, 100, 0.28);
    box-shadow:
        0 24px 54px rgba(51, 37, 10, 0.24),
        inset 0 1px 0 rgba(255, 232, 156, 0.10);
    margin-bottom: 28px;
}

.slpro-predictor-hero:before {
    content: "";
    position: absolute;
    right: -90px;
    top: -70px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,220,116,0.16) 0%, rgba(255,220,116,0) 74%);
}

.slpro-predictor-hero-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.slpro-mini-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 240, 180, 0.10);
    border: 1px solid rgba(255, 223, 122, 0.16);
    color: #f1d37d;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.slpro-predictor-hero h2 {
    margin: 0 0 10px;
    color: #fff4cd !important;
    font-size: 46px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.04em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

.slpro-predictor-hero p {
    max-width: 760px;
    margin: 0;
    color: #fff3d3 !important;
    font-size: 15px;
    line-height: 1.82;
}

.slpro-predictor-meta {
    min-width: 230px;
    padding: 13px 14px;
    border-radius: 18px;
    background: rgba(255, 240, 180, 0.10);
    border: 1px solid rgba(255, 223, 122, 0.16);
    color: #fff0c4;
    font-size: 12px;
    line-height: 1.7;
    font-weight: 800;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.slpro-predictor-ball-row {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

.slpro-ball {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 25px;
    line-height: 1;
    font-weight: 850;
    box-shadow:
        0 18px 26px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.32);
}

.slpro-ball span {
    position: relative;
    z-index: 2;
}

.slpro-ball:before {
    content: "";
    position: absolute;
    top: 11px;
    left: 15px;
    width: 24px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.32);
    transform: rotate(-18deg);
}

.slpro-ball-regular {
    background: radial-gradient(circle at 28% 28%, #fff6d2 0%, #e3bf5b 54%, #b68618 100%);
    border: 2px solid #f3dc90;
    color: #20180f;
}

.slpro-ball-magic {
    background: radial-gradient(circle at 28% 28%, #504631 0%, #17120b 60%, #000000 100%);
    border: 2px solid #d2a53d;
    color: #f0ce68;
}

.slpro-note-row {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.slpro-note-chip {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255,243,203,0.10);
    border: 1px solid rgba(255,225,133,0.14);
    color: #fff0c6;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.slpro-note-chip-magic {
    background: rgba(255, 215, 105, 0.15);
    border-color: rgba(255, 215, 105, 0.28);
    color: #fff3ca !important;
}

.slpro-predictor-disclaimer {
    position: relative;
    z-index: 2;
    padding: 15px 16px;
    border-radius: 15px;
    background: rgba(0,0,0,0.24);
    border: 1px solid rgba(255,226,140,0.10);
    color: #fff3d0;
    font-size: 13px;
    line-height: 1.8;
    font-weight: 600;
    margin-bottom: 14px;
}

.slpro-predictor-disclaimer:last-child {
    margin-bottom: 0;
}

/* =========================
   V4 specific additions
   ========================= */

.slpro-v4-data-note,
.slpro-model-note {
    position: relative;
    z-index: 2;
    padding: 15px 16px;
    border-radius: 15px;
    background: rgba(255, 242, 190, 0.11);
    border: 1px solid rgba(255, 226, 140, 0.16);
    color: #fff2ca;
    font-size: 13px;
    line-height: 1.8;
    font-weight: 700;
}

.slpro-score-breakdown,
.slpro-v4-score-breakdown {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.slpro-score-chip,
.slpro-v4-score-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 243, 203, 0.10);
    border: 1px solid rgba(255, 225, 133, 0.14);
    color: #fff0c6;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
}

.slpro-v4-meta-card {
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fffaf1 0%, #fff3df 100%);
    border: 1px solid #e9d7a5;
    color: #4d4435;
    font-size: 14px;
    line-height: 1.75;
}

.slpro-front-wrap .slpro-v4-pill {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: #17120b;
    border: 1px solid #d2a53d;
    color: #f0ce68 !important;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* =========================
   Sticky dashboard nav
   ========================= */

.slpro-dashboard-nav-wrap {
    position: sticky;
    top: 88px;
    z-index: 40;
    margin-bottom: 34px;
    padding: 14px 16px;
    border-radius: 22px;
    background: rgba(255, 249, 236, 0.94);
    border: 1px solid rgba(214, 181, 91, 0.24);
    box-shadow:
        0 14px 28px rgba(121, 92, 27, 0.10),
        0 4px 10px rgba(121, 92, 27, 0.04);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.slpro-front-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.slpro-tab-btn {
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid #ddcca0;
    background: linear-gradient(180deg, #fffdf7 0%, #fbf3e1 100%);
    color: #a77b07;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(121, 92, 27, 0.04);
    transition: all 0.2s ease;
}

.slpro-tab-btn:hover {
    background: #fff7e7;
    transform: translateY(-1px);
}

.slpro-tab-btn.is-active {
    background: linear-gradient(180deg, #d9b547 0%, #bf9420 100%);
    color: #ffffff;
    border-color: #bf9420;
    box-shadow: 0 10px 22px rgba(183, 137, 17, 0.18);
}

.slpro-tab-panel {
    display: none;
    margin-bottom: 34px;
}

.slpro-tab-panel.is-active {
    display: block;
}

/* =========================
   Stats cards
   ========================= */

.slpro-stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 34px;
}

.slpro-stat-card {
    width: calc(25% - 14px);
    padding: 24px 20px;
    border-radius: 22px;
    text-align: center;
    background: linear-gradient(180deg, #fffdf8 0%, #fff4df 100%);
    border: 1px solid #ead7a2;
    box-shadow:
        0 16px 26px rgba(121, 92, 27, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.72);
}

.slpro-stat-label {
    display: block;
    margin-bottom: 12px;
    color: #7b6f58;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.slpro-stat-card strong {
    display: block;
    color: #b38709;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 850;
}

/* =========================
   Panel grids
   ========================= */

.slpro-panel-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 36px;
}

.slpro-panel-grid-2 > .slpro-panel {
    width: calc(50% - 11px);
    margin-bottom: 0;
    min-height: 100%;
}

/* =========================
   Data points cards
   ========================= */

.slpro-data-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.slpro-data-points div {
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffaf1 0%, #fff3df 100%);
    border: 1px solid #e9d7a5;
    color: #4d4435;
    font-size: 14px;
    line-height: 1.75;
    box-shadow:
        0 8px 16px rgba(121, 92, 27, 0.04),
        inset 0 1px 0 rgba(255,255,255,0.72);
}

.slpro-data-points strong {
    color: #8c6509;
}

.slpro-data-points span {
    color: #2f281d;
    font-weight: 600;
}

/* =========================
   Chart panels
   ========================= */

.slpro-front-canvas-wrap {
    position: relative;
    width: 100%;
    height: 250px;
    padding: 14px 14px 8px;
    margin-top: 10px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,252,246,0.94) 0%, rgba(255,246,230,0.98) 100%);
    border: 1px solid rgba(234, 215, 162, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.72),
        0 8px 16px rgba(121, 92, 27, 0.04);
}

.slpro-front-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* =========================
   Tables
   ========================= */

.slpro-front-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 10px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,252,246,0.98) 0%, rgba(255,246,230,0.98) 100%);
    border: 1px solid rgba(234, 215, 162, 0.95);
    padding: 0;
}

.slpro-front-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px #ecdcae;
}

.slpro-front-table thead th {
    padding: 14px 13px;
    text-align: left;
    white-space: nowrap;
    background: linear-gradient(180deg, #fbf2dd 0%, #f4e5c0 100%);
    border-bottom: 1px solid #e5d4a5;
    color: #956c0d;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.slpro-front-table tbody td {
    padding: 13px 13px;
    white-space: nowrap;
    vertical-align: middle;
    color: #282219;
    font-size: 14px;
    line-height: 1.6;
    background: rgba(255, 252, 245, 0.92);
    border-bottom: 1px solid #eee1c0;
}

.slpro-front-table tbody tr:nth-child(even) td {
    background: rgba(255, 247, 229, 0.92);
}

.slpro-front-table tbody tr:hover td {
    background: #fff1ce;
}

.slpro-front-table tbody tr:last-child td {
    border-bottom: none;
}

/* =========================
   Badges
   ========================= */

.slpro-front-badge {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.slpro-bucket-hot {
    background: rgba(34, 197, 94, 0.13);
    color: #186b36;
}

.slpro-bucket-cold {
    background: rgba(59, 130, 246, 0.13);
    color: #1d5ea7;
}

.slpro-bucket-neutral {
    background: rgba(92, 92, 92, 0.10);
    color: #575757;
}

.slpro-bucket-overdue {
    background: rgba(212, 175, 55, 0.18);
    color: #8c6700;
}

/* =========================
   Knowledge base
   ========================= */

.slpro-kb-section {
    margin-top: 40px;
}

.slpro-kb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.slpro-kb-card {
    width: calc(25% - 14px);
    min-height: 190px;
    padding: 20px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fff9ec 0%, #fff1d6 100%);
    border: 1px solid #ebd59a;
    box-shadow:
        0 10px 22px rgba(121, 92, 27, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.72);
}

.slpro-kb-card h3 {
    margin: 0 0 10px;
    color: #936a0b;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
}

.slpro-kb-card p {
    margin: 0;
    color: #564b39;
    font-size: 13px;
    line-height: 1.8;
}

/* =========================
   About section
   ========================= */

.slpro-about-panel {
    margin-top: 38px;
    background: linear-gradient(180deg, #fffdf8 0%, #fff5e2 100%);
}

.slpro-about-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: stretch;
}

.slpro-about-main {
    width: calc(66% - 11px);
}

.slpro-about-main p {
    margin-top: 0;
    margin-bottom: 16px;
    color: #4f4637;
    font-size: 15px;
    line-height: 1.95;
}

.slpro-about-main p:last-child {
    margin-bottom: 0;
}

.slpro-about-side {
    width: calc(34% - 11px);
}

.slpro-creator-card {
    height: 100%;
    min-height: 100%;
    padding: 26px 24px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(255,224,122,0.10) 0%, rgba(255,224,122,0) 28%),
        linear-gradient(135deg, #18140e 0%, #2d2215 46%, #7d5b17 100%);
    border: 1px solid rgba(235, 195, 90, 0.24);
    box-shadow: 0 22px 40px rgba(56, 40, 9, 0.20);
}

.slpro-creator-label {
    display: block;
    margin-bottom: 12px;
    color: #efd888;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.slpro-creator-card strong {
    display: block;
    margin-bottom: 12px;
    color: #fffdf7;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.slpro-creator-card p {
    margin: 0;
    color: #f7ecc9;
    font-size: 14px;
    line-height: 1.85;
}

/* =========================
   Admin panel
   ========================= */

.slpro-admin-panel {
    margin-top: 38px;
    background: linear-gradient(180deg, #fff9ea 0%, #fff1d4 100%);
    border-color: #e5cf92;
}

.slpro-front-admin-draw-form {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    margin-bottom: 22px;
    padding: 24px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fffaf1 0%, #fff2dc 100%);
    border: 1px solid #e7d39e;
    box-shadow:
        0 10px 22px rgba(121, 92, 27, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.72);
}

.slpro-front-admin-draw-form label {
    width: calc(14.28% - 12px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #403729;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
}

.slpro-front-admin-draw-form input {
    width: 100%;
    height: 50px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #dcc68b;
    background: #ffffff;
    color: #231d14;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.slpro-front-admin-draw-form input:focus {
    border-color: #c89b16;
    background: #fffdf7;
    box-shadow:
        0 0 0 3px rgba(200, 155, 22, 0.14),
        inset 0 1px 3px rgba(0,0,0,0.03);
}

.slpro-front-admin-draw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

/* =========================
   Export
   ========================= */

.slpro-export-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

/* =========================
   Panel wrappers
   ========================= */

.slpro-panel-grid > .slpro-panel,
.slpro-tab-panel > .slpro-panel {
    padding: 22px 22px 20px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,252,246,0.92) 0%, rgba(255,245,226,0.92) 100%);
    border: 1px solid rgba(234, 215, 162, 0.85);
    box-shadow:
        0 10px 22px rgba(121, 92, 27, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.74);
}

/* =========================
   Filter UI
   ========================= */

.slpro-table-filter-wrap {
    width: 100%;
}

.slpro-filter-bar,
.slpro-table-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fffaf1 0%, #fff2dd 100%);
    border: 1px solid #e7d39e;
    box-shadow:
        0 8px 16px rgba(121, 92, 27, 0.04),
        inset 0 1px 0 rgba(255,255,255,0.72);
}

.slpro-filter-field,
.slpro-table-filters label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 130px;
    width: calc(20% - 10px);
}

.slpro-filter-field label {
    width: 100%;
    min-width: 0;
    color: #7d5e11 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.3;
}

.slpro-filter-field input,
.slpro-filter-field select,
.slpro-table-filters input,
.slpro-table-filters select {
    width: 100%;
    height: 40px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #dcc68a;
    background: #ffffff;
    color: #2a2218 !important;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
}

.slpro-filter-field input:focus,
.slpro-filter-field select:focus,
.slpro-table-filters input:focus,
.slpro-table-filters select:focus {
    border-color: #c89b16;
    box-shadow: 0 0 0 3px rgba(200, 155, 22, 0.14);
}

.slpro-filter-clear,
.slpro-table-filter-action {
    display: flex;
    align-items: flex-end;
    width: calc(20% - 10px);
}

.slpro-filter-results-note {
    margin-top: 12px;
    color: #6a5f49;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

/* =========================
   Sortable table headers
   ========================= */

.slpro-sortable {
    cursor: pointer;
    position: relative;
    padding-right: 26px !important;
    user-select: none;
}

.slpro-sortable:after {
    content: "↕";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #b38709;
    font-size: 12px;
    line-height: 1;
    opacity: 0.7;
}

.slpro-sortable.is-sort-asc:after {
    content: "▲";
    opacity: 1;
}

.slpro-sortable.is-sort-desc:after {
    content: "▼";
    opacity: 1;
}

/* =========================
   Alternate combinations
   ========================= */

.slpro-alt-picks-wrap {
    position: relative;
    z-index: 2;
    margin-top: 24px;
    margin-bottom: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 220, 125, 0.14);
}

.slpro-alt-picks-wrap h3 {
    margin: 0 0 14px !important;
    color: #fff0c8 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.slpro-alt-picks-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.slpro-alt-pick-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.slpro-alt-pick-label {
    width: 90px;
    color: #f4dfae !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4;
}

.slpro-ball.slpro-ball-alt {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
    box-shadow:
        0 10px 16px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.28);
}

.slpro-ball.slpro-ball-alt:before {
    top: 6px !important;
    left: 8px !important;
    width: 12px !important;
    height: 8px !important;
}

/* =========================
   Force-overrides against page/theme CSS
   ========================= */

.slpro-front-wrap .slpro-hero h1,
.slpro-front-wrap .slpro-panel-head h2,
.slpro-front-wrap .slpro-panel h3,
.slpro-front-wrap .slpro-predictor-hero h2,
.slpro-front-wrap .slpro-kb-card h3,
.slpro-front-wrap .slpro-creator-card strong,
.slpro-front-wrap .slpro-mini-badge,
.slpro-front-wrap .slpro-creator-label {
    font-family: inherit !important;
}

.slpro-front-wrap .slpro-predictor-hero h2 {
    color: #fff3c8 !important;
    margin: 0 0 10px !important;
    font-size: 46px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22) !important;
}

.slpro-front-wrap .slpro-predictor-hero p {
    color: #fff1d0 !important;
}

.slpro-front-wrap .slpro-mini-badge {
    color: #f3d47b !important;
}

.slpro-front-wrap .slpro-predictor-meta {
    color: #fff1c8 !important;
}

.slpro-front-wrap .slpro-note-chip {
    color: #fff1ca !important;
}

.slpro-front-wrap .slpro-predictor-disclaimer {
    color: #fff4d8 !important;
}

.slpro-front-wrap .slpro-creator-card strong {
    color: #fffdf5 !important;
}

.slpro-front-wrap .slpro-creator-label {
    color: #efd98b !important;
}

.slpro-front-wrap .slpro-creator-card p {
    color: #f7eccb !important;
}

.slpro-front-wrap .slpro-hero h1 {
    color: #17130f !important;
    margin: 0 0 14px !important;
}

.slpro-front-wrap .slpro-panel-head h2,
.slpro-front-wrap .slpro-panel h3,
.slpro-front-wrap .slpro-kb-card h3 {
    color: #8f650b !important;
    margin-top: 0 !important;
}

.slpro-front-wrap .slpro-hero h1,
.slpro-front-wrap .slpro-hero-subtitle,
.slpro-front-wrap .slpro-hero-highlight strong,
.slpro-front-wrap .slpro-hero-highlight span,
.slpro-front-wrap .slpro-panel-head h2,
.slpro-front-wrap .slpro-panel-head p,
.slpro-front-wrap .slpro-panel h3,
.slpro-front-wrap .slpro-panel p,
.slpro-front-wrap .slpro-kb-card h3,
.slpro-front-wrap .slpro-kb-card p,
.slpro-front-wrap .slpro-stat-card strong,
.slpro-front-wrap .slpro-stat-label,
.slpro-front-wrap .slpro-data-points strong,
.slpro-front-wrap .slpro-data-points span,
.slpro-front-wrap .slpro-front-table th,
.slpro-front-wrap .slpro-front-table td,
.slpro-front-wrap .slpro-front-badge,
.slpro-front-wrap .slpro-tab-btn,
.slpro-front-wrap .slpro-btn,
.slpro-front-wrap .slpro-front-controls-grid label,
.slpro-front-wrap .slpro-front-controls-grid input,
.slpro-front-wrap .slpro-front-admin-draw-form label,
.slpro-front-wrap .slpro-front-admin-draw-form input,
.slpro-front-wrap .slpro-filter-field label,
.slpro-front-wrap .slpro-filter-field input,
.slpro-front-wrap .slpro-filter-field select,
.slpro-front-wrap .slpro-alt-picks-wrap h3,
.slpro-front-wrap .slpro-alt-pick-label {
    font-family: inherit !important;
}

/* =========================
   Theme wrapper full-width fix
   ========================= */

html,
body {
    overflow-x: hidden;
}

.slpro-front-wrap,
.slpro-front-shell,
#slpro-dashboard-root,
.slpro-tab-panel,
.slpro-panel,
.slpro-hero,
.slpro-predictor-hero,
.slpro-about-panel,
.slpro-admin-panel,
.slpro-controls-panel,
.slpro-instruction-panel,
.slpro-kb-section,
.slpro-dashboard-nav-wrap,
.slpro-panel-grid,
.slpro-panel-grid-2,
.slpro-front-table-wrap,
.slpro-front-canvas-wrap {
    max-width: 100%;
    box-sizing: border-box;
}

.page-template-page-policy .contact-section.lv-policy-section,
.page-template-page-policy .lv-policy-section {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    overflow-x: hidden !important;
}

.page-template-page-policy .lv-policy-section .container,
.page-template-page-policy .contact-section.lv-policy-section .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page-template-page-policy .lv-policy-section .row,
.page-template-page-policy .contact-section.lv-policy-section .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
}

.page-template-page-policy .lv-policy-section .col-lg-10,
.page-template-page-policy .contact-section.lv-policy-section .col-lg-10 {
    width: 100% !important;
    max-width: 1320px !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page-template-page-policy .lv-policy-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.slpro-front-wrap {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.slpro-front-shell {
    width: 100% !important;
    max-width: 100% !important;
}

.slpro-front-wrap .slpro-hero h1,
.slpro-front-wrap .slpro-predictor-hero h2,
.slpro-front-wrap .slpro-panel-head h2,
.slpro-front-wrap .slpro-panel h3,
.slpro-front-wrap .slpro-creator-card strong,
.slpro-front-wrap .slpro-kb-card h3,
.slpro-front-wrap .slpro-front-table th,
.slpro-front-wrap .slpro-front-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.slpro-about-panel,
.slpro-admin-panel {
    display: block;
    width: 100%;
    padding: 28px 28px 26px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, #fffdf9 0%, #fff7ea 100%) !important;
    border: 1px solid #ead6a0 !important;
    box-shadow:
        0 18px 38px rgba(121, 92, 27, 0.07),
        0 5px 12px rgba(121, 92, 27, 0.04) !important;
    position: relative;
    overflow: visible;
}

.slpro-about-panel:before,
.slpro-admin-panel:before {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 1px;
    background: rgba(255,255,255,0.85);
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1280px) {
    .slpro-hero h1 {
        font-size: 56px;
    }

    .slpro-kb-card,
    .slpro-stat-card {
        width: calc(50% - 9px);
    }

    .slpro-front-admin-draw-form label:first-child {
        width: calc(22% - 11px);
    }

    .slpro-front-admin-draw-form label:not(:first-child) {
        width: calc(13% - 11px);
    }
}

@media (max-width: 1200px) {
    .slpro-front-wrap {
        padding: 22px 16px 50px !important;
    }

    .slpro-hero-highlight {
        width: calc(50% - 8px) !important;
    }

    .slpro-stat-card {
        width: calc(33.33% - 12px) !important;
    }

    .slpro-kb-card {
        width: calc(33.33% - 12px) !important;
    }

    .slpro-filter-field,
    .slpro-table-filters label,
    .slpro-filter-clear,
    .slpro-table-filter-action {
        width: calc(33.33% - 8px) !important;
    }
}

@media (max-width: 1080px) {
    .slpro-front-shell {
        padding: 24px;
    }

    .slpro-hero-highlight,
    .slpro-front-controls-grid label {
        width: calc(50% - 7px);
    }

    .slpro-about-main,
    .slpro-about-side {
        width: 100%;
    }

    .slpro-panel-grid-2 > .slpro-panel,
    .slpro-instruction-item {
        width: 100%;
    }

    .slpro-front-canvas-wrap {
        height: 240px;
    }

    .slpro-dashboard-nav-wrap {
        top: 82px;
    }
}

@media (max-width: 991px) {
    .slpro-front-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 14px 42px !important;
        margin-top: 10px !important;
    }

    .page-template-page-policy .lv-policy-section .container,
    .page-template-page-policy .contact-section.lv-policy-section .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .slpro-hero,
    .slpro-predictor-hero,
    .slpro-about-panel,
    .slpro-admin-panel,
    .slpro-panel-grid > .slpro-panel,
    .slpro-tab-panel > .slpro-panel,
    .slpro-controls-panel,
    .slpro-instruction-panel,
    .slpro-kb-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 22px 18px 20px !important;
        border-radius: 22px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .slpro-panel-head-flex,
    .slpro-predictor-hero-top,
    .slpro-about-grid {
        display: block;
    }

    .slpro-predictor-meta,
    .slpro-front-control-actions,
    .slpro-about-side {
        margin-top: 14px;
    }

    .slpro-about-main,
    .slpro-about-side,
    .slpro-panel-grid-2 > .slpro-panel,
    .slpro-instruction-item,
    .slpro-stat-card,
    .slpro-kb-card,
    .slpro-hero-highlight,
    .slpro-front-controls-grid label,
    .slpro-filter-field,
    .slpro-table-filters label,
    .slpro-filter-clear,
    .slpro-table-filter-action {
        width: 100% !important;
    }

    .slpro-front-admin-draw-form {
        padding: 18px !important;
    }

    .slpro-front-admin-draw-form label {
        width: calc(50% - 7px) !important;
    }

    .slpro-front-canvas-wrap {
        height: 220px !important;
    }

    .slpro-alt-pick-row {
        gap: 6px;
    }
}

@media (max-width: 860px) {
    .slpro-front-wrap {
        max-width: 100% !important;
        padding: 18px 10px 36px !important;
        margin-top: 8px !important;
    }

    .slpro-front-shell {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .slpro-hero,
    .slpro-predictor-hero,
    .slpro-about-panel,
    .slpro-admin-panel,
    .slpro-tab-panel > .slpro-panel,
    .slpro-panel-grid > .slpro-panel,
    .slpro-controls-panel,
    .slpro-instruction-panel,
    .slpro-kb-section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 20px !important;
    }

    .slpro-hero {
        padding: 22px 16px 18px !important;
    }

    .slpro-hero h1 {
        font-size: 28px !important;
        line-height: 1.08 !important;
    }

    .slpro-hero-subtitle {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .slpro-hero-highlights {
        gap: 12px !important;
    }

    .slpro-hero-highlight {
        width: 100% !important;
        min-height: 0 !important;
        padding: 16px !important;
    }

    .slpro-panel-head h2,
    .slpro-predictor-hero h2 {
        font-size: 24px !important;
        line-height: 1.15 !important;
    }

    .slpro-panel h3 {
        font-size: 18px !important;
    }

    .slpro-front-controls-grid label,
    .slpro-front-admin-draw-form label,
    .slpro-kb-card,
    .slpro-stat-card,
    .slpro-about-main,
    .slpro-about-side {
        width: 100% !important;
    }

    .slpro-front-admin-draw-form {
        padding: 16px !important;
    }

    .slpro-front-canvas-wrap {
        height: 210px !important;
        padding: 10px !important;
    }

    .slpro-dashboard-nav-wrap {
        position: relative !important;
        top: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .slpro-front-tabs {
        gap: 8px !important;
    }
}

@media (max-width: 560px) {
    .slpro-front-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 8px 28px !important;
        margin-top: 6px !important;
    }

    .page-template-page-policy .lv-policy-section .container,
    .page-template-page-policy .contact-section.lv-policy-section .container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .page-template-page-policy .lv-policy-section .col-lg-10,
    .page-template-page-policy .contact-section.lv-policy-section .col-lg-10 {
        max-width: 100% !important;
    }

    .slpro-hero,
    .slpro-predictor-hero,
    .slpro-about-panel,
    .slpro-admin-panel,
    .slpro-tab-panel > .slpro-panel,
    .slpro-panel-grid > .slpro-panel,
    .slpro-controls-panel,
    .slpro-instruction-panel,
    .slpro-kb-section {
        border-radius: 16px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .slpro-hero {
        padding-top: 18px !important;
        padding-bottom: 16px !important;
    }

    .slpro-hero h1 {
        font-size: 24px !important;
    }

    .slpro-predictor-hero {
        padding-top: 18px !important;
        padding-bottom: 16px !important;
    }

    .slpro-predictor-hero h2,
    .slpro-panel-head h2 {
        font-size: 21px !important;
    }

    .slpro-predictor-ball-row {
        gap: 8px !important;
    }

    .slpro-ball {
        width: 52px !important;
        height: 52px !important;
        font-size: 17px !important;
    }

    .slpro-ball:before {
        top: 8px !important;
        left: 11px !important;
        width: 16px !important;
        height: 10px !important;
    }

    .slpro-ball.slpro-ball-alt {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    .slpro-ball.slpro-ball-alt:before {
        width: 10px !important;
        height: 6px !important;
        top: 5px !important;
        left: 7px !important;
    }

    .slpro-alt-pick-label {
        width: 100% !important;
        margin-bottom: 4px;
    }

    .slpro-front-table {
        min-width: 1000px !important;
    }

    .slpro-filter-bar,
    .slpro-table-filters {
        padding: 12px !important;
    }

    .slpro-filter-field,
    .slpro-table-filters label,
    .slpro-filter-clear,
    .slpro-table-filter-action {
        width: 100% !important;
        min-width: 0 !important;
    }

    .slpro-btn {
        width: 100%;
    }

    .slpro-front-control-actions,
    .slpro-front-admin-draw-actions {
        display: block;
    }

    .slpro-front-control-actions .slpro-btn,
    .slpro-front-admin-draw-actions .slpro-btn {
        display: block;
        margin-bottom: 10px;
    }

    .slpro-front-control-actions .slpro-btn:last-child,
    .slpro-front-admin-draw-actions .slpro-btn:last-child {
        margin-bottom: 0;
    }
}

.slpro-front-wrap .slpro-predictor-hero .slpro-alt-picks-wrap h3,
.slpro-front-wrap .slpro-predictor-hero .slpro-alt-picks-wrap h3.slpro-alt-picks-title,
.page-template-page-policy .slpro-front-wrap .slpro-predictor-hero .slpro-alt-picks-wrap h3 {
    color: #fff4d6 !important;
    margin: 0 0 14px !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
    padding-left: 0 !important;
    position: static !important;
}

.slpro-front-wrap .slpro-alt-picks-wrap h3,
.slpro-front-wrap .slpro-alt-picks-wrap h3 * {
    color: #fff4d6 !important;
}
/* =========================================
   SL Pro Final Next Draw Card Override
   Same width as How-to section
   No variables / No grid / No fr units
   ========================================= */

.slpro-front-wrap .slpro-predictor-hero {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 42px auto 42px !important;
    padding: 46px 52px 44px !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(222, 181, 75, 0.14) 0%, rgba(222, 181, 75, 0) 34%),
        linear-gradient(135deg, #070604 0%, #130f08 48%, #231805 100%) !important;
    border: 1px solid rgba(222, 181, 75, 0.34) !important;
    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 235, 160, 0.12) !important;
}

.slpro-front-wrap .slpro-predictor-hero:before {
    opacity: 0.22 !important;
}

.slpro-front-wrap .slpro-predictor-hero-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 46px !important;
    margin-bottom: 34px !important;
}

.slpro-front-wrap .slpro-mini-badge {
    margin-bottom: 18px !important;
    padding: 8px 15px !important;
    border-radius: 999px !important;
    background: rgba(222, 181, 75, 0.11) !important;
    border: 1px solid rgba(222, 181, 75, 0.30) !important;
    color: #e8c66d !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.15em !important;
}

.slpro-front-wrap .slpro-predictor-hero h2 {
    max-width: 820px !important;
    margin: 0 0 20px !important;
    color: #fff1bf !important;
    font-size: 48px !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: -0.035em !important;
}

.slpro-front-wrap .slpro-predictor-hero p {
    max-width: 820px !important;
    margin: 0 !important;
    color: rgba(255, 242, 205, 0.86) !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
    font-weight: 500 !important;
}

.slpro-front-wrap .slpro-predictor-meta {
    width: 292px !important;
    min-width: 292px !important;
    margin-left: auto !important;
    padding: 15px 18px !important;
    border-radius: 18px !important;
    background: rgba(255, 239, 174, 0.075) !important;
    border: 1px solid rgba(222, 181, 75, 0.24) !important;
    color: #ffe9a7 !important;
    font-size: 11px !important;
    line-height: 1.65 !important;
    font-weight: 800 !important;
    text-align: center !important;
}

.slpro-front-wrap .slpro-predictor-ball-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 8px 0 28px !important;
}

.slpro-front-wrap .slpro-ball {
    width: 78px !important;
    height: 78px !important;
    font-size: 24px !important;
    font-weight: 900 !important;
}

.slpro-front-wrap .slpro-ball-regular {
    background: radial-gradient(circle at 30% 24%, #fff8d7 0%, #f1cb5c 44%, #b98917 100%) !important;
    border: 1px solid #f4d983 !important;
    color: #171006 !important;
    box-shadow:
        0 15px 24px rgba(0, 0, 0, 0.34),
        inset 0 3px 6px rgba(255, 255, 255, 0.38),
        inset 0 -7px 12px rgba(113, 70, 0, 0.20) !important;
}

.slpro-front-wrap .slpro-ball-magic {
    background: radial-gradient(circle at 30% 24%, #5a4d2d 0%, #18120a 52%, #030302 100%) !important;
    border: 2px solid #d7ad3c !important;
    color: #f3cf66 !important;
    box-shadow:
        0 0 0 3px rgba(215, 173, 60, 0.10),
        0 15px 28px rgba(0, 0, 0, 0.40),
        0 0 20px rgba(215, 173, 60, 0.28) !important;
}

.slpro-front-wrap .slpro-predictor-hero .slpro-btn-primary,
.slpro-front-wrap .slpro-generate-variant-btn,
.slpro-front-wrap #slpro-generate-variant {
    display: inline-flex !important;
    min-height: 44px !important;
    padding: 12px 25px !important;
    margin: 0 0 30px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #f0cc62 0%, #c89a22 100%) !important;
    border: 1px solid #e0b94d !important;
    color: #160f05 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow:
        0 13px 24px rgba(201, 154, 34, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

.slpro-front-wrap .slpro-predictor-hero .slpro-btn-primary + span,
.slpro-front-wrap .slpro-predictor-hero .slpro-btn-primary + small,
.slpro-front-wrap .slpro-generate-variant-btn + span,
.slpro-front-wrap #slpro-generate-variant + span {
    color: rgba(255, 242, 205, 0.52) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.slpro-front-wrap .slpro-note-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 0 28px !important;
}

.slpro-front-wrap .slpro-note-chip {
    width: calc(50% - 6px) !important;
    padding: 12px 15px !important;
    border-radius: 15px !important;
    background: rgba(255, 239, 188, 0.055) !important;
    border: 1px solid rgba(255, 225, 133, 0.12) !important;
    color: rgba(255, 242, 207, 0.86) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    font-weight: 750 !important;
}

.slpro-front-wrap .slpro-note-chip-magic {
    width: 100% !important;
    max-width: 620px !important;
}

.slpro-front-wrap .slpro-alt-picks-wrap {
    margin-top: 34px !important;
    padding-top: 30px !important;
    border-top: 1px solid rgba(222, 181, 75, 0.22) !important;
}

.slpro-front-wrap .slpro-alt-picks-wrap h3 {
    margin: 0 0 22px !important;
    color: #fff1bf !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

.slpro-front-wrap .slpro-alt-picks-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
}

.slpro-front-wrap .slpro-alt-pick-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    min-height: 60px !important;
    padding: 10px 16px !important;
    border-radius: 16px !important;
    background: rgba(255, 239, 188, 0.040) !important;
    border: 1px solid rgba(255, 225, 133, 0.10) !important;
}

.slpro-front-wrap .slpro-alt-pick-label {
    width: auto !important;
    min-width: 76px !important;
    color: rgba(255, 238, 190, 0.90) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.slpro-front-wrap .slpro-alt-pick-row .slpro-alt-pick-label:last-child {
    margin-left: auto !important;
    min-width: 110px !important;
    text-align: right !important;
    color: rgba(255, 230, 160, 0.82) !important;
}

.slpro-front-wrap .slpro-ball.slpro-ball-alt {
    width: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
    flex: 0 0 40px !important;
}

.slpro-front-wrap .slpro-predictor-disclaimer {
    margin-top: 18px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, 0.24) !important;
    border: 1px solid rgba(255, 226, 140, 0.08) !important;
    color: rgba(255, 244, 216, 0.82) !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    font-weight: 650 !important;
}

@media (max-width: 991px) {
    .slpro-front-wrap .slpro-predictor-hero {
        padding: 30px 24px 28px !important;
    }

    .slpro-front-wrap .slpro-predictor-hero-top {
        display: block !important;
    }

    .slpro-front-wrap .slpro-predictor-meta {
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 20px !important;
    }

    .slpro-front-wrap .slpro-predictor-hero h2 {
        font-size: 34px !important;
    }

    .slpro-front-wrap .slpro-note-chip {
        width: 100% !important;
    }

    .slpro-front-wrap .slpro-alt-pick-row {
        flex-wrap: wrap !important;
    }

    .slpro-front-wrap .slpro-alt-pick-row .slpro-alt-pick-label:last-child {
        margin-left: 0 !important;
        text-align: left !important;
    }
}

@media (max-width: 560px) {
    .slpro-front-wrap .slpro-predictor-hero {
        padding: 22px 15px 20px !important;
        border-radius: 20px !important;
    }

    .slpro-front-wrap .slpro-predictor-hero h2 {
        font-size: 26px !important;
    }

    .slpro-front-wrap .slpro-ball {
        width: 50px !important;
        height: 50px !important;
        font-size: 17px !important;
    }

    .slpro-front-wrap .slpro-predictor-hero .slpro-btn-primary,
    .slpro-front-wrap .slpro-generate-variant-btn,
    .slpro-front-wrap #slpro-generate-variant {
        width: 100% !important;
    }
}


/* =========================================
   FORCE FULL WIDTH (OVERRIDE THEME CARD)
   ========================================= */

@media (max-width: 768px) {

    .page-template-page-policy .lv-policy-card {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important; /* optional cleaner look */
    }

    /* Now control spacing INSIDE your plugin instead */
    .slpro-front-shell {
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    /* Ensure hero stretches properly */
    .slpro-predictor-hero {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================
   SL PRO MOBILE KB CARD HEIGHT HARD FIX
   Add at VERY BOTTOM of frontend.css
   ========================================= */

@media screen and (max-width: 991px) {

    body.page-template-page-policy .lv-policy-card .slpro-front-wrap .slpro-kb-section .slpro-kb-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    body.page-template-page-policy .lv-policy-card .slpro-front-wrap .slpro-kb-section .slpro-kb-grid .slpro-kb-card,
    .slpro-front-wrap .slpro-kb-section .slpro-kb-grid .slpro-kb-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: unset !important;
        max-height: none !important;

        padding: 18px 18px 16px !important;
        margin: 0 !important;

        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
    }

    body.page-template-page-policy .lv-policy-card .slpro-front-wrap .slpro-kb-card h3,
    .slpro-front-wrap .slpro-kb-card h3 {
        margin: 0 0 8px !important;
        padding: 0 !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    body.page-template-page-policy .lv-policy-card .slpro-front-wrap .slpro-kb-card p,
    .slpro-front-wrap .slpro-kb-card p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
}

/* Center alternate combinations and place score right after balls */
.slpro-front-wrap .slpro-alt-pick-row {
    justify-content: center !important;
    text-align: center !important;
}

.slpro-front-wrap .slpro-alt-pick-label:first-child {
    width: auto !important;
    min-width: 76px !important;
    text-align: right !important;
}

.slpro-front-wrap .slpro-alt-pick-row .slpro-alt-pick-label:last-child {
    width: auto !important;
    min-width: 0 !important;
    margin-left: 12px !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.slpro-front-wrap .slpro-alt-pick-row .slpro-ball-alt {
    flex: 0 0 40px !important;
}

@media (max-width: 560px) {
    .slpro-front-wrap .slpro-alt-pick-row {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .slpro-front-wrap .slpro-alt-pick-label:first-child {
        width: 100% !important;
        text-align: left !important;
    }

    .slpro-front-wrap .slpro-alt-pick-row .slpro-alt-pick-label:last-child {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
    }
}

/* Final alternate combinations compact center layout */
.slpro-front-wrap .slpro-alt-picks-wrap h3 {
    text-align: center !important;
}

.slpro-front-wrap .slpro-alt-picks-grid {
    align-items: center !important;
}

.slpro-front-wrap .slpro-alt-pick-row {
    width: auto !important;
    min-width: 560px !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px 18px !important;
    justify-content: center !important;
}

.slpro-front-wrap .slpro-alt-pick-label:first-child {
    min-width: 72px !important;
}

.slpro-front-wrap .slpro-alt-pick-row .slpro-alt-pick-label:last-child {
    min-width: 105px !important;
}

@media (max-width: 760px) {
    .slpro-front-wrap .slpro-alt-pick-row {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* =========================================
   CENTER HERO CONTENT (FINAL – CLEAN & COMPLETE)
   ========================================= */

/* Full hero center */
.slpro-front-wrap .slpro-predictor-hero {
    text-align: center !important;
}

/* Top section (fix left alignment issue) */
.slpro-front-wrap .slpro-predictor-hero-top {
    display: block !important;
    text-align: center !important;
}

/* Inner wrapper full width */
.slpro-front-wrap .slpro-predictor-hero-top > div {
    width: 100% !important;
    text-align: center !important;
}

/* NEXT DRAW badge */
.slpro-front-wrap .slpro-mini-badge {
    display: inline-flex !important;
    margin: 0 auto 10px !important;
}

/* META line (your Pool / Batch / Monte Carlo) */
.slpro-front-wrap .slpro-predictor-meta {
    display: none !important;
}

.slpro-front-wrap .slpro-predictor-meta-inline {
    display: block !important;
    width: 100% !important;
    margin: 6px auto 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #e8c66d !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    text-align: center !important;
    opacity: 0.9 !important;
}

/* Title */
.slpro-front-wrap .slpro-predictor-hero h2 {
    display: block !important;
    margin: 0 auto 10px !important;
    text-align: center !important;
}

/* Description */
.slpro-front-wrap .slpro-predictor-hero p {
    display: block !important;
    margin: 0 auto 20px !important;
    text-align: center !important;
    max-width: 720px !important;
}

/* Balls */
.slpro-front-wrap .slpro-predictor-ball-row {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Button + note */
.slpro-front-wrap .slpro-generate-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    margin-top: 12px !important;
}

/* Button */
.slpro-front-wrap .slpro-generate-row .slpro-btn {
    margin: 0 auto !important;
}

/* Note */
.slpro-front-wrap .slpro-generate-note {
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    opacity: 0.8 !important;
}
.page-id-44 .header{
    display:none !important;
}