:root {
    --sidebar-width: 264px; --sidebar-bg: #172235; --sidebar-muted: #9aa8bc;
    --accent: #5b7cfa; --page-bg: #f4f6fb; --text-main: #202b3c;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page-bg); color: var(--text-main); font-family: Inter, "Segoe UI", Arial, sans-serif; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: var(--sidebar-bg); color: #fff; display: flex; flex-direction: column; padding: 24px 16px 18px; z-index: 1050; transition: transform .25s ease, width .25s ease; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 28px; }
.brand-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #5b7cfa; font-size: 18px; }
.brand-text strong { display: block; font-size: 16px; letter-spacing: .2px; }
.brand-text small { color: var(--sidebar-muted); font-size: 11px; }
.sidebar-caption { color: #71819a; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; padding: 8px 12px 10px; }
.sidebar-nav { display: grid; gap: 5px; }
.sidebar-link { display: flex; align-items: center; gap: 13px; padding: 11px 13px; color: #b9c4d5; text-decoration: none; border-radius: 9px; font-size: 13px; transition: .2s; }
.sidebar-link i { width: 18px; text-align: center; font-size: 14px; }
.sidebar-link:hover, .sidebar-link.active { color: #fff; background: #2a3a55; }
.sidebar-link.active { box-shadow: inset 3px 0 #7792ff; }
.category-caption { margin-top: 22px; }
.category-nav { gap: 3px; }
.category-sidebar-link { padding-top: 9px; padding-bottom: 9px; font-size: 12px; }
.sidebar-empty { display: flex; gap: 10px; padding: 9px 12px; color: #8392a8; font-size: 11px; line-height: 1.5; }
.sidebar-empty i { margin-top: 2px; }
.sidebar-bottom { margin-top: auto; border-top: 1px solid #2b394e; padding: 17px 10px 0; color: #91a0b5; font-size: 11px; }
.status-dot { display: inline-block; width: 7px; height: 7px; background: #35c78a; border-radius: 50%; margin-right: 7px; }
.main-panel { min-height: 100vh; margin-left: var(--sidebar-width); display: flex; flex-direction: column; transition: margin-left .25s ease; }
.topbar { min-height: 76px; background: #fff; border-bottom: 1px solid #e9edf4; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; }
.sidebar-toggle { width: 38px; height: 38px; border: 1px solid #edf0f5; color: #536176; }
.topbar-title { font-size: 15px; font-weight: 700; }
.topbar-subtitle { font-size: 11px; color: #98a2b3; margin-top: 2px; }
.topbar-date { color: #718096; font-size: 12px; }
.content-area { padding: 28px 30px; flex: 1; }
.app-footer { display: flex; justify-content: space-between; padding: 16px 30px; color: #9aa4b3; font-size: 11px; }
.welcome-card { background: linear-gradient(115deg, #263c67, #526fe0); border-radius: 16px; padding: 28px 32px; color: white; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.eyebrow { font-size: 10px; letter-spacing: 1.6px; opacity: .75; font-weight: 700; }
.welcome-card h1 { font-size: 25px; font-weight: 750; margin: 9px 0 7px; }
.welcome-card p { color: #dce4ff; font-size: 13px; margin: 0; max-width: 560px; }
.welcome-illustration { font-size: 76px; opacity: .18; padding: 0 28px; }
.stat-card, .panel-card { background: #fff; border: 1px solid #edf0f5; border-radius: 14px; box-shadow: 0 4px 18px rgba(32, 48, 75, .035); }
.stat-card { display: flex; align-items: center; gap: 14px; padding: 19px 17px; min-height: 112px; }
.stat-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; font-size: 17px; flex: 0 0 auto; }
.stat-icon.purple { background: #f0eaff; color: #8762d8; } .stat-icon.blue { background: #e9f1ff; color: #4e7fe2; }
.stat-icon.green { background: #e5f8ef; color: #2caf75; } .stat-icon.orange { background: #fff1e4; color: #e9953e; }
.stat-card span { display: block; color: #8792a3; font-size: 11px; }
.stat-card strong { display: block; font-size: 23px; margin: 2px 0; }
.stat-card small { display: block; color: #a5aebb; font-size: 10px; }
.last-category { font-size: 17px !important; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-card { padding: 22px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.panel-heading h5 { font-size: 15px; font-weight: 700; margin: 0 0 5px; }
.panel-heading p { color: #9aa4b3; font-size: 11px; margin: 0; }
.empty-state { text-align: center; padding: 38px 15px 25px; }
.empty-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: #f0f3ff; color: #8094ed; margin: 0 auto 13px; font-size: 21px; }
.empty-state h6 { font-size: 13px; font-weight: 700; }
.empty-state p { color: #9aa4b3; font-size: 11px; margin-bottom: 0; }
.page-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 20px; }
.page-heading { font-size: 20px; font-weight: 750; margin: 0 0 5px; }
.page-description { color: #929eae; font-size: 12px; margin: 0; }
.table-panel { padding: 5px 20px 0; }
.app-table { font-size: 12px; }
.app-table thead th { color: #8995a6; font-size: 10px; font-weight: 700; letter-spacing: .45px; text-transform: uppercase; border-bottom: 1px solid #edf0f5; padding: 10px 5px; white-space: nowrap; }
.app-table tbody td { padding: 5px 5px; border-color: #f0f2f6; color: #526074; }
.category-name { display: flex; align-items: center; gap: 10px; color: #29364a; }
.category-name strong { font-size: 12px; }
.category-row-icon { width: 31px; height: 31px; display: grid; place-items: center; background: #eef2ff; color: #6680e8; border-radius: 9px; }
.order-badge, .count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; height: 25px; border-radius: 7px; background: #f2f4f8; color: #68758a; font-size: 11px; }
.count-badge { background: #edf2ff; color: #5978e2; min-width: 32px; }
.status-badge { display: inline-block; padding: 5px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.status-active { color: #209768; background: #e8f8f0; } .status-inactive { color: #8792a3; background: #f0f2f5; }
.btn-action-edit, .btn-action-delete { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; }
.btn-action-edit { background: #edf2ff; color: #5b7cfa; } .btn-action-delete { background: #fff0f0; color: #df6262; }
.btn-action-edit:hover { background: #dfe8ff; color: #4568ed; } .btn-action-delete:hover { background: #ffe1e1; color: #c94343; }
.table-footer { border-top: 1px solid #edf0f5; padding: 13px 10px; color: #98a2b3; font-size: 11px; }
.form-panel { max-width: 800px; padding: 28px; }
.form-label { color: #465368; font-size: 12px; font-weight: 650; }
.form-control, .form-select { border-color: #e3e8f0; border-radius: 8px; font-size: 13px; padding: 10px 12px; }
.form-control:focus, .form-select:focus { border-color: #8ca1ff; box-shadow: 0 0 0 .2rem rgba(91,124,250,.12); }
.form-text { color: #9aa4b3; font-size: 10px; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid #edf0f5; margin-top: 25px; padding-top: 20px; }
.placeholder-page { max-width: 600px; margin: 35px auto; padding: 45px 20px; text-align: center; }
.placeholder-page h5 { font-size: 13px; font-weight: 700; }
.placeholder-page p { color: #9aa4b3; font-size: 11px; }
.number-chip { display: inline-block; padding: 5px 10px; border-radius: 7px; background: #f0f3ff; color: #4d6de0; font-weight: 700; letter-spacing: 1px; }
.btn-primary { background: #5b7cfa; border-color: #5b7cfa; }
.sidebar-overlay { display: none; }
@media (min-width: 992px) { body.sidebar-collapsed .sidebar { transform: translateX(calc(-1 * var(--sidebar-width))); } body.sidebar-collapsed .main-panel { margin-left: 0; } }
@media (max-width: 991.98px) {
   .sidebar { transform: translateX(-100%); } body.sidebar-open .sidebar { transform: translateX(0); }
   body.sidebar-open .sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(13,23,39,.45); z-index: 1040; }
   .main-panel { margin-left: 0; } .topbar { padding: 0 18px; } .content-area { padding: 20px 18px; } .app-footer { padding: 15px 18px; }
}
@media (max-width: 575.98px) {
   .topbar { min-height: 66px; } .topbar-subtitle { display: none; } .topbar-date { font-size: 10px; }
   .welcome-card { padding: 23px 20px; } .welcome-card h1 { font-size: 20px; } .welcome-card p { font-size: 11px; }
   .welcome-illustration { display: none; } .panel-card { padding: 17px; } .page-toolbar { align-items: flex-start; flex-direction: column; }
   .page-toolbar .btn { width: 100%; } .form-panel { padding: 19px; } .app-table { min-width: 700px; }
}


/* =========================================
   TAHAP 3.4 - DETAIL PASARAN
========================================= */

.result-save-form {
    position: relative;
}

.result-save-form .form-control {
    min-height: 43px;
}

.result-save-form .btn {
    min-height: 43px;
    font-weight: 600;
}

.number-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 75px;
    padding: 7px 14px;
    border-radius: 8px;
    background: #eef2ff;
    color: #4056a1;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
}

.btn-action-edit,
.btn-action-delete {
    width: 34px;
    height: 34px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
}

.btn-action-edit {
    background: #eef2ff;
    color: #4056a1;
}

.btn-action-delete {
    background: #fff0f0;
    color: #dc3545;
}

.btn-action-edit:hover {
    background: #4056a1;
    color: white;
}

.btn-action-delete:hover {
    background: #dc3545;
    color: white;
}

@media (max-width: 767px) {

    .result-save-form .btn {
        width: 100%;
    }

    .panel-card {
        overflow: hidden;
    }

    .table-footer {
        align-items: flex-start !important;
    }

    .pagination {
        flex-wrap: wrap;
    }

    .number-chip {
        min-width: 65px;
        font-size: 14px;
    }

}
/* =====================================
   BILLIARD NUMBER STYLE
===================================== */

.billiard-number {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.billiard-ball {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;
    border: 0px solid rgba(0,0,0,0.25);

    font-size: 16px;
    font-weight: 800;
    color: white;

    text-shadow: 0 1px 2px rgba(0,0,0,0.6);

    box-shadow1:
    inset -3px -4px 6px rgba(0,0,0,0.35),
    inset 2px 2px 5px rgba(255,255,255,0.6),
    0 2px 4px rgba(0,0,0,0.25);
}

/* Efek pantulan cahaya */
.billiard-ball::before {
    content: "";

    position: absolute;
    top: 5px;
    left: 7px;

    width: 8px;
    height: 4px;

    border-radius: 50%;

    background: rgba(255,255,255,0.65);

    filter: blur(1px);
}

/* Bola 0 - Putih */
.ball-0 {
    background: radial-gradient(circle at 30% 25%,
        #ffffff,
        #e5e5e5 55%,
        #a5a5a5
    );

    color: #222;
    text-shadow: none;
}

/* Bola 1 - Kuning */
.ball-1 {
    background: radial-gradient(circle at 30% 25%,
        #fff6a5,
        #f4d21d 55%,
        #a77b00
    );

    color: #222;
    text-shadow: none;
}

/* Bola 2 - Biru */
.ball-2 {
    background: radial-gradient(circle at 30% 25%,
        #8ed4ff,
        #1769d2 55%,
        #092e78
    );
}

/* Bola 3 - Merah */
.ball-3 {
    background: radial-gradient(circle at 30% 25%,
        #ffaaaa,
        #e32636 55%,
        #8b0714
    );
}

/* Bola 4 - Ungu */
.ball-4 {
    background: radial-gradient(circle at 30% 25%,
        #d7a8ff,
        #7435b8 55%,
        #35105f
    );
}

/* Bola 5 - Oranye */
.ball-5 {
    background: radial-gradient(circle at 30% 25%,
        #ffd09a,
        #f28c18 55%,
        #994300
    );
}

/* Bola 6 - Hijau */
.ball-6 {
    background: radial-gradient(circle at 30% 25%,
        #a8f0a8,
        #168b45 55%,
        #064b25
    );
}

/* Bola 7 - Maroon */
.ball-7 {
    background: radial-gradient(circle at 30% 25%,
        #ffb0b0,
        #a51e36 55%,
        #530817
    );
}

/* Bola 8 - Hitam */
.ball-8 {
    background: radial-gradient(circle at 30% 25%,
        #777777,
        #252525 55%,
        #050505
    );
}

/* Bola 9 - Kuning Emas */
.ball-9 {
    background: radial-gradient(circle at 30% 25%,
        #fff3a8,
        #e5bd16 55%,
        #987000
    );
}

/* =====================================
   RESPONSIVE MOBILE
===================================== */

@media (max-width: 576px) {

    .billiard-number {
        gap: 3px;
    }

    .billiard-ball {
        width: 29px;
        height: 29px;
        font-size: 12px;
    }

}
/* ==========================================================
   ANALISIS DIGIT
========================================================== */

.analysis-container {
    width: 100%;
}

/* FILTER */

.analysis-filter {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.analysis-filter form {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

.analysis-filter .form-group {
    flex: 1;
    min-width: 220px;
}

.analysis-filter label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 7px;
    color: #374151;
}

.analysis-filter select {
    width: 100%;
    height: 42px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    background: #ffffff;
}

.analysis-filter button {
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.analysis-filter button:hover {
    background: #1d4ed8;
}

/* SUMMARY */

.analysis-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.analysis-summary-card {
    background: #ffffff;
    padding: 18px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.analysis-summary-card .summary-label {
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 7px;
}

.analysis-summary-card .summary-value {
    font-size: 24px;
    font-weight: 800;
    color: #111827;
}

/* ANALYSIS CARD */

.analysis-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.analysis-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.analysis-card-header h3 {
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    margin: 0;
}

.analysis-card-header p {
    font-size: 12px;
    color: #6b7280;
    margin: 5px 0 0;
}

/* TABLE */

.analysis-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.analysis-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}

.analysis-table th {
    background: #f3f4f6;
    color: #374151;
    padding: 12px 5px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.analysis-table th.position-column {
    min-width: 100px;
    text-align: left;
    padding-left: 12px;
}

.analysis-table td {
    text-align: center;
    padding: 10px 5px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.analysis-table td.position-name {
    background: #f3f4f6;
    text-align: left;
    padding-left: 12px;
    font-weight: 800;
    color: #374151;
    font-size: 13px;
}

/* =========================================
   WARNA ANALISIS DIGIT
========================================= */

/* Badge angka */
.miss-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid transparent;
}

/* TERBARU - MERAH MUDA */
.miss-new {
    background: #fce7f3;
    color: #db2777;
    border-color: #fbcfe8;
}

/* NORMAL - HIJAU TERANG */
.miss-normal {
    background: #dcfce7;
    color: #16a34a;
    border-color: #bbf7d0;
}

/* BELUM MUNCUL / 2 DIGIT TERLAMA - REDUP */
.miss-empty {
    background: #f1f3f5;
    color: #adb5bd;
    border-color: #e5e7eb;
}

/* =========================================
   LEGENDA
========================================= */
.analysis-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid #e5e7eb;
}

.analysis-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
}

.legend-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.legend-new {
    background: #f472b6;
}

.legend-normal {
    background: #4ade80;
}

.legend-empty {
    background: #d1d5db;
}

/* INFO */

.analysis-info {
    margin-top: 15px;
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.7;
}

.analysis-info i {
    margin-right: 4px;
}

/* EMPTY STATE */

.analysis-empty {
    text-align: center;
    padding: 45px 20px;
    color: #6b7280;
}

.analysis-empty i {
    font-size: 38px;
    color: #d1d5db;
    margin-bottom: 12px;
}

.analysis-empty h4 {
    color: #374151;
    font-size: 16px;
    margin-bottom: 6px;
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .analysis-summary {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .analysis-summary-card {
        padding: 14px;
    }

    .analysis-summary-card .summary-value {
        font-size: 20px;
    }

    .analysis-card {
        padding: 14px;
    }

    .analysis-card-header h3 {
        font-size: 15px;
    }

    .analysis-filter {
        padding: 15px;
    }

    .analysis-filter form {
        display: block;
    }

    .analysis-filter .form-group {
        margin-bottom: 12px;
    }

    .analysis-filter button {
        width: 100%;
    }

    .analysis-legend {
        gap: 12px;
    }
}

@media (max-width: 400px) {

    .analysis-summary {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   TABEL PREDIKSI DIGIT NORMAL
========================================= */

.prediction-card {
    margin-top: 24px;
}

.prediction-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.prediction-table {
    width: 100%;
    border-collapse: collapse;
}

.prediction-table th {
    background: #f3f4f6;
    color: #374151;
    padding: 12px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.prediction-table td {
    padding: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-weight: 600;
}

/* Paksa seluruh isi tabel prediksi berada di tengah */
.prediction-table th,
.prediction-table td {
    text-align: center !important;
    vertical-align: middle !important;
}


.prediction-empty {
    color: #9ca3af;
    font-size: 13px;
    font-style: italic;
}

@media (max-width: 768px) {
    .prediction-card {
        margin-top: 18px;
    }

    .prediction-table th,
    .prediction-table td {
        padding: 9px 6px;
    }

    .prediction-digit {
        width: 32px;
        height: 32px;
    }
}

/* =========================================
   GANJIL / GENAP RESULT
========================================= */

.parity-number {
    display: flex;
    align-items: center;
    gap: 6px;
}

.parity-ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;

    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.5),
    0 2px 3px rgba(0,0,0,0.12);
}

/* GENAP - BOLA HIJAU */
.parity-even {
    background: linear-gradient(145deg, #86efac, #16a34a);
    color: #ffffff;
}

/* GANJIL - BOLA MERAH */
.parity-odd {
    background: linear-gradient(145deg, #fca5a5, #dc2626);
    color: #ffffff;
}

@media (max-width: 768px) {

    .parity-ball {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .parity-number {
        gap: 4px;
    }

}