/* ── Accent utility overrides ─────────────────────────────────────────────── */
.text-warning { color: var(--accent) !important; }
.bg-warning { background-color: var(--accent) !important; }
.border-warning { border-color: var(--accent) !important; }
.shadow-warning { --tw-shadow-color: var(--accent); --tw-shadow: var(--tw-shadow-colored); }
.hover\:bg-warning:hover { background-color: var(--accent) !important; }
.hover\:text-warning:hover { color: var(--accent) !important; }
.hover\:shadow-warning:hover { --tw-shadow-color: var(--accent); }
.shadow.shadow-warning { --tw-shadow-color: var(--accent); }
.btn-warning {
    border-color: var(--accent) !important;
    background-color: var(--accent) !important;
    --tw-shadow-color: rgba(var(--accent-rgb), 0.6);
}
.before\:bg-warning:before { background-color: var(--accent) !important; }
.bg-warning-light { background-color: rgba(var(--accent-rgb), 0.08) !important; }
.border-l-warning { border-left-color: var(--accent) !important; }
.dark\:hover\:bg-warning:hover:is(.dark *) { background-color: var(--accent) !important; }

/* ── Dark mode global background — warm neutral dark, bukan biru ──────────── */
.dark body { background-color: #100f0f !important; }
.dark .main-container,
.dark .main-section { background-color: #141414 !important; }

/* sidebar & header */
.dark .sidebar { background-color: #161616 !important; }
.dark .header,
.dark nav { background-color: #161616 !important; }

/* Override Tailwind arbitrary bg classes that still render blue */
.dark .dark\:bg-\[\#0e1726\],
.dark .dark\:bg-\[\#0E1726\] {
    background-color: #1a1a1a !important;
}
.dark .dark\:bg-\[\#191e3a\] { background-color: #1e1e1e !important; }
.dark .dark\:bg-\[\#1b2e4b\] { background-color: #252525 !important; }
.dark .dark\:bg-\[\#060818\] { background-color: #100f0f !important; }

/* Override blue #d2a046 wherever it appears as text color (old accent) */
.dark .horizontal-menu ul.sub-menu a:hover,
.dark .horizontal-menu ul.sub-menu a.active,
.horizontal-menu ul.sub-menu a:hover,
.horizontal-menu ul.sub-menu a.active {
    color: var(--accent) !important;
    background-color: rgba(255,255,255,0.04) !important;
}
/* Nav active/hover in dark mode — use accent instead of blue */
.dark .horizontal-menu .nav-link.active,
.dark .horizontal-menu .nav-link:hover {
    color: var(--accent) !important;
    background-color: rgba(255,255,255,0.06) !important;
}
/* Elements that use the old blue primary accent text */
.dark .text-primary { color: var(--accent) !important; }
.dark a.text-primary { color: var(--accent) !important; }
.dark .bg-primary { background-color: var(--accent) !important; }
.dark .border-primary { border-color: var(--accent) !important; }

/* Sidebar icon/text colors — fix beige override dari rgb replacement */
/* Light mode */
.sidebar .nav-item > a,
.sidebar .nav-item > button {
    color: #555555 !important;
}
.sidebar .nav-item > a:hover,
.sidebar .nav-item > button:hover {
    color: #111111 !important;
}
.sidebar .nav-item > a.active,
.sidebar .nav-item > button.active {
    color: var(--accent) !important;
    background-color: rgba(var(--accent-rgb), 0.08) !important;
}
.sidebar .nav-item > a.active > div > span,
.sidebar .nav-item > button.active > div > span {
    color: var(--accent) !important;
}
.sidebar ul.sub-menu li a,
.sidebar ul.sub-menu li button {
    color: #666666 !important;
}
.sidebar ul.sub-menu li a:hover,
.sidebar ul.sub-menu li button:hover {
    color: #111111 !important;
}
.sidebar ul.sub-menu li a.active,
.sidebar ul.sub-menu li button.active {
    color: var(--accent) !important;
}
/* Dark mode */
.dark .sidebar .nav-item > a,
.dark .sidebar .nav-item > button {
    color: rgba(210, 210, 210, 0.75) !important;
}
.dark .sidebar .nav-item > a:hover,
.dark .sidebar .nav-item > button:hover {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.06) !important;
}
.dark .sidebar .nav-item > a.active,
.dark .sidebar .nav-item > button.active {
    color: var(--accent) !important;
    background-color: rgba(var(--accent-rgb), 0.1) !important;
}
.dark .sidebar .nav-item > a.active > div > span,
.dark .sidebar .nav-item > button.active > div > span {
    color: var(--accent) !important;
}
.dark .sidebar ul.sub-menu li a,
.dark .sidebar ul.sub-menu li button {
    color: rgba(200, 200, 200, 0.65) !important;
}
.dark .sidebar ul.sub-menu li a:hover,
.dark .sidebar ul.sub-menu li button:hover {
    color: #ffffff !important;
}
.dark .sidebar ul.sub-menu li a.active,
.dark .sidebar ul.sub-menu li button.active {
    color: var(--accent) !important;
}

/* Responsive nav text — shrinks to fit, no wrapping */
.horizontal-menu .nav-link span {
    white-space: nowrap;
    font-size: clamp(0.6rem, 1vw, 0.8rem);
}
.horizontal-menu .nav-link {
    padding-left: clamp(4px, 0.5vw, 10px);
    padding-right: clamp(4px, 0.5vw, 10px);
}

/* ── Card / panel backgrounds ─────────────────────────────────────────────── */
.card-game { background: #fff; border-radius: 0.5rem; padding: 1rem; border: 1px solid #d4cfc7; }
.dark .card-game { background: #1e1e1e; border-color: rgba(255,255,255,0.08); }
.card-game:hover { border-color: var(--accent); }

.res-pasaran { text-align: center; }
.text-pasar { font-weight: 700; text-transform: uppercase; margin: 0.5rem 0; }

/* number display box — dark warm gradient, bukan biru */
.bg-angka { background: linear-gradient(135deg, #1a1a1a, #111010); padding: 0.5rem; border-radius: 0.375rem; }
.bg-angka h3 { color: var(--accent); font-weight: 800; letter-spacing: 4px; margin: 0; font-size: 1.5rem; }

.info-market { position: absolute; top: 0.5rem; right: 0.5rem; cursor: pointer; color: var(--accent); }

/* ── Entry / SEO content ───────────────────────────────────────────────────── */
.entry-content { padding: 1rem; font-size: 0.85rem; line-height: 1.6; color: #888; }
.entry-content h1, .entry-content h2, .entry-content h3 { color: #333; font-size: 1rem; }
.dark .entry-content h1, .dark .entry-content h2, .dark .entry-content h3 { color: #ccc; }

/* ── Marquee ───────────────────────────────────────────────────────────────── */
.winner-slide { font-size: 0.75rem; padding: 4px 8px; }
.marquee-wrap { overflow: hidden; white-space: nowrap; }
.marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll 20s linear infinite;
    font-weight: 600; font-size: 0.85rem;
    color: var(--accent);
}
.marquee-content:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 999; display: flex; align-items: center; justify-content: center; }
.modal-box { background: #fff; border-radius: 0.5rem; width: 90%; max-width: 500px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.dark .modal-box { background: #1e1e1e; color: #d0d2d6; border: 1px solid rgba(255,255,255,0.1); }

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.mySwiper .swiper-slide img { border-radius: 0.5rem; width: 100%; }
.result-number { display: none; }
.hlsText { position: relative; }

@media (max-width: 1023px) {
    .sidebar { transform: translateX(-260px); }
    .toggle-sidebar .sidebar { transform: translateX(0); }
}

/* ── Page title ─────────────────────────────────────────────────────────────── */
.title-main { text-align: center; margin-bottom: 1.5rem; }
.title-main h1 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; }
.dark .title-main h1 { color: #d4cfc7; }
.subtitle-main { font-size: 0.9rem; color: #b4aa96; }

.wrap-pred h5 { word-wrap: break-word; white-space: normal; }
.dark .wrap-pred h5 { color: rgba(255,255,255,0.85); }

/* ── Table overrides ────────────────────────────────────────────────────────── */
.dark .table { color: #d0d2d6; }
.tbl-biru { width: 100%; border-collapse: collapse; }
.tbl-biru th, .tbl-biru td { padding: 8px; border: 1px solid #d4cfc7; text-align: center; }
.tbl-biru thead { background: var(--accent); }
.dark .tbl-biru th, .dark .tbl-biru td { border-color: #2a2a2a; }

/* ── Jadwal / Kalkulasi card ─────────────────────────────────────────────── */
.kal-top-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.kal-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 420px; }
.kal-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #b4aa96; pointer-events: none; }
.kal-search-input { width: 100%; padding: 13px 18px 13px 46px; border-radius: 50px; border: 2px solid #d4cfc7; background: #fff; color: #333; font-size: 1rem; font-family: inherit; outline: none; transition: all 0.25s ease; }
.dark .kal-search-input { background: #1e1e1e; border-color: #2a2a2a; color: #d4cfc7; }
.kal-search-input::placeholder { color: #b4aa96; }
.kal-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15); }

.kal-btns-wrap { display: flex; gap: 10px; }
.kal-btn { text-decoration: none; padding: 11px 22px; border-radius: 10px; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 7px; border: 2px solid transparent; }
.kal-btn-login, .kal-btn-daftar { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.25); }
.kal-btn-login:hover, .kal-btn-daftar:hover { transform: translateY(-2px); filter: brightness(1.1); color: #fff; box-shadow: 0 6px 18px rgba(var(--accent-rgb),0.35); }

.kal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin-top: 10px; }
.kal-kartu { background: #fff; border: 1px solid #d4cfc7; border-radius: 12px; padding: 22px; position: relative; overflow: hidden; transition: all 0.25s ease; animation: fadeInKal 0.4s ease forwards; opacity: 0; }
.dark .kal-kartu { background: #1e1e1e; border-color: #2a2a2a; }
.kal-kartu:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.12); }
@keyframes fadeInKal { to { opacity: 1; } }

.kal-kartu-title { font-size: 1.1rem; font-weight: 700; text-align: center; color: var(--accent); margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid #d4cfc7; text-transform: uppercase; letter-spacing: 1px; }
.dark .kal-kartu-title { border-bottom-color: #2a2a2a; }
.kal-kartu-info { text-align: center; font-size: 0.85rem; color: #b4aa96; margin-bottom: 14px; }
.kal-kartu-body { display: flex; flex-direction: column; gap: 10px; }

.kal-input { width: 100%; padding: 12px 16px; border-radius: 8px; border: 1px solid #d4cfc7; background: #f7f7f7; color: #333; font-size: 1rem; font-family: inherit; font-weight: 600; outline: none; transition: all 0.25s ease; -moz-appearance: textfield; }
.dark .kal-input { background: #252525; border-color: #303030; color: #d4cfc7; }
.kal-input::-webkit-inner-spin-button, .kal-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kal-input::placeholder { color: #b4aa96; }
.kal-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.15); }

.kal-btn-hitung, .kal-btn-reset { width: 100%; padding: 12px 16px; border-radius: 8px; border: none; font-size: 0.95rem; font-family: inherit; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: all 0.25s ease; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.kal-btn-hitung { background: var(--accent); color: #fff; box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.25); }
.kal-btn-hitung:hover { transform: translateY(-2px); filter: brightness(1.1); }
.kal-btn-reset { background: #f1f2f3; color: var(--accent); border: 1px solid #d4cfc7; }
.dark .kal-btn-reset { background: #252525; border-color: #303030; }
.kal-btn-reset:hover { border-color: var(--accent); }

.kal-hasil { display: none; padding: 10px 14px; border-radius: 6px; font-weight: 700; font-size: 0.95rem; text-align: center; }
.kal-hasil.show { display: block; }
.kal-hasil-bayar { color: #00ab55; background: rgba(0,171,85,0.08); border: 1px solid rgba(0,171,85,0.2); }
.kal-hasil-menang { color: var(--accent); background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.25); }
.kal-hasil-error { color: #e7515a !important; background: rgba(231,81,90,0.08) !important; border: 1px solid rgba(231,81,90,0.25) !important; }

@media (max-width: 768px) {
    .kal-top-bar { flex-direction: column; align-items: stretch; }
    .kal-search-wrap { max-width: 100%; }
    .kal-btns-wrap { justify-content: center; }
    .kal-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Bantuan / Contact card ──────────────────────────────────────────────── */
.ban-wrap { max-width: 720px; margin: 0 auto; }
.ban-tab-bar { display: flex; border-radius: 12px 12px 0 0; overflow: hidden; border: 1px solid #d4cfc7; border-bottom: none; }
.dark .ban-tab-bar { border-color: #2a2a2a; }
.ban-tab { flex: 1; padding: 16px; text-align: center; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.25s ease; background: #f1f2f3; color: #b4aa96; display: flex; align-items: center; justify-content: center; gap: 8px; }
.dark .ban-tab { background: #1a1a1a; color: #b4aa96; }
.ban-tab.active.ban-tab-wa { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; }
.ban-tab.active.ban-tab-tg { background: linear-gradient(135deg, #2CA5E0, #0088cc); color: #fff; }
.ban-tab:not(.active):hover { background: #e8e8e8; }
.dark .ban-tab:not(.active):hover { background: #252525; }

.ban-form-card { background: #fff; border: 1px solid #d4cfc7; border-radius: 0 0 12px 12px; padding: 30px; }
.dark .ban-form-card { background: #1a1a1a; border-color: #2a2a2a; }

.ban-alert { display: none; padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-weight: 600; font-size: 0.95rem; align-items: center; gap: 10px; }
.ban-alert.show { display: flex; }
.ban-alert-error { background: rgba(231,81,90,0.1); border: 1px solid rgba(231,81,90,0.3); color: #e7515a; }
.ban-alert-success { background: rgba(0,171,85,0.1); border: 1px solid rgba(0,171,85,0.3); color: #00ab55; }
.ban-alert-warning { background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); }
.ban-tab-content { display: none; }
.ban-tab-content.active { display: block; }
.ban-info-box { background: rgba(var(--accent-rgb),0.06); border: 1px solid rgba(var(--accent-rgb),0.22); border-radius: 8px; padding: 14px 18px; margin-bottom: 22px; color: #b4aa96; font-size: 0.92rem; line-height: 1.6; }

.ban-form-group { margin-bottom: 18px; }
.ban-form-group label { display: block; font-weight: 600; font-size: 0.9rem; color: #333; margin-bottom: 8px; }
.dark .ban-form-group label { color: #c8c2b8; }
.ban-required { color: #e7515a; margin-left: 3px; }
.ban-form-group input, .ban-form-group select, .ban-form-group textarea { width: 100%; padding: 12px 16px; border-radius: 8px; border: 1px solid #d4cfc7; background: #fff; color: #333; font-size: 0.95rem; font-family: inherit; outline: none; transition: all 0.25s ease; }
.dark .ban-form-group input, .dark .ban-form-group select, .dark .ban-form-group textarea { background: #252525; border-color: #303030; color: #d4cfc7; }
.ban-form-group textarea { min-height: 110px; resize: vertical; }
.ban-form-group select option { background: #fff; color: #333; }
.dark .ban-form-group select option { background: #1a1a1a; color: #d4cfc7; }
.ban-form-group input::placeholder, .ban-form-group textarea::placeholder { color: #b4aa96; }
.ban-form-group input:focus, .ban-form-group select:focus, .ban-form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); }
.ban-form-group input.ban-success, .ban-form-group select.ban-success, .ban-form-group textarea.ban-success { border-color: #00ab55; }
.ban-form-group input.ban-error, .ban-form-group select.ban-error, .ban-form-group textarea.ban-error { border-color: #e7515a; }
.ban-field-error { display: none; color: #e7515a; font-size: 0.82rem; margin-top: 5px; }
.ban-field-error.show { display: block; }
.ban-char-counter { text-align: right; font-size: 0.8rem; color: #b4aa96; margin-top: 4px; }
.ban-char-counter.warning { color: var(--accent); }
.ban-char-counter.error { color: #e7515a; }

.ban-btn-row { display: flex; gap: 12px; margin-top: 6px; }
.ban-btn { flex: 1; padding: 13px 18px; border-radius: 8px; border: none; font-size: 0.95rem; font-family: inherit; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: all 0.25s ease; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ban-btn-wa { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; }
.ban-btn-tg { background: linear-gradient(135deg, #2CA5E0, #0088cc); color: #fff; }
.ban-btn-reset { background: #f1f2f3; color: var(--accent); border: 1px solid #d4cfc7; }
.dark .ban-btn-reset { background: #252525; border-color: #303030; }
.ban-btn-wa:hover, .ban-btn-tg:hover { transform: translateY(-2px); filter: brightness(1.1); }
.ban-btn-reset:hover { border-color: var(--accent); }
.ban-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none !important; }
.ban-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.shake { animation: shake 0.45s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (max-width: 600px) {
    .ban-form-card { padding: 20px 16px; }
    .ban-btn-row { flex-direction: column; }
    .ban-tab { font-size: 0.9rem; padding: 13px; }
}

/* ── Nice-select dark overrides ─────────────────────────────────────────── */
.nice-select {
    border: 1px solid #d4cfc7 !important;
    background-color: #fff !important;
    background-image: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 8px !important;
    height: 40px !important;
    line-height: 38px !important;
    padding: 0 30px 0 14px !important;
    font-size: 0.875rem !important;
    color: #333 !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.nice-select:hover { border-color: var(--accent) !important; }
.nice-select.open, .nice-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15) !important;
}
.nice-select:after { border-color: #b4aa96 !important; right: 14px !important; }
.nice-select .current { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nice-select .nice-select-dropdown { background: #fff; border: 1px solid #d4cfc7; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); z-index: 999; margin-top: 2px !important; top: 100% !important; width: 100% !important; left: 0 !important; right: 0 !important; }
.nice-select .nice-select-search-box { padding: 8px; pointer-events: auto; }
.nice-select .nice-select-search { border: 1px solid #d4cfc7; border-radius: 6px; padding: 8px 12px; font-size: 0.85rem; width: 100%; outline: none; background: #f9f9f9; color: #333; }
.nice-select .nice-select-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.1); }
.nice-select .list { max-height: 250px; overflow-y: auto; padding: 4px 0; }
.nice-select .list::-webkit-scrollbar { width: 5px; }
.nice-select .list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.nice-select .option { padding: 8px 14px !important; line-height: 1.4 !important; min-height: auto !important; font-size: 0.85rem; color: #555; transition: background 0.15s, color 0.15s; cursor: pointer; }
.nice-select .option:hover, .nice-select .option.focus { background: rgba(var(--accent-rgb),0.08) !important; color: var(--accent) !important; }
.nice-select .option.selected { color: var(--accent) !important; font-weight: 600; background: rgba(var(--accent-rgb),0.06) !important; }

.dark .nice-select { background-color: #1e1e1e !important; border-color: #2a2a2a !important; color: #d4cfc7 !important; }
.dark .nice-select:hover { border-color: var(--accent) !important; }
.dark .nice-select .current { color: #d4cfc7; }
.dark .nice-select:after { border-color: #555 !important; }
.dark .nice-select .nice-select-dropdown { background: #1e1e1e; border-color: #2a2a2a; box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
.dark .nice-select .nice-select-search { background: #252525; border-color: #303030; color: #d4cfc7; }
.dark .nice-select .nice-select-search:focus { border-color: var(--accent); }
.dark .nice-select .list::-webkit-scrollbar-thumb { background: #333; }
.dark .nice-select .option { color: #c8c2b8; }
.dark .nice-select .option:hover, .dark .nice-select .option.focus { background: rgba(var(--accent-rgb),0.12) !important; color: var(--accent) !important; }
.dark .nice-select .option.selected { color: var(--accent) !important; background: rgba(var(--accent-rgb),0.08) !important; }

/* ── Table base ──────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.table th, .table td { padding: 8px 12px; border: 1px solid #d4cfc7; text-align: center; }
.table thead th { background: #f1f2f3; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; }
.dark .table { color: #d0d2d6; }
.dark .table th, .dark .table td { border-color: #2a2a2a; }
.dark .table thead th { background: #252525; color: #d4cfc7; }
.dark .table tbody tr:hover { background: rgba(var(--accent-rgb),0.04); }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Paito ───────────────────────────────────────────────────────────────── */
.title-paito { font-size: 1rem; margin-bottom: 0.5rem; }
.paito-picker { background: #252525; color: #c8c2b8; z-index: 50; position: relative; }
.bg-dark { background: #1a1a1a; }
.dark .bg-dark { background: #100f0f; }

.box-color { width: 28px; height: 28px; border-radius: 6px; cursor: pointer; margin: 3px; border: 2px solid transparent; transition: transform 0.15s, border-color 0.15s; display: inline-block; }
.box-color:hover { transform: scale(1.15); }
.box-color.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.box-color.aqua { background-color: aqua; }
.box-color.gold { background-color: gold; }
.box-color.lgreen { background-color: lightgreen; }
.box-color.dpink { background-color: deeppink; }
.box-color.violet { background-color: violet; }
.box-color.turto { background-color: turquoise; }
.box-color.orange { background-color: orange; }

.btn-hapuspaito { background: #e7515a; color: #fff; border: none; border-radius: 6px; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; cursor: pointer; margin: 3px; height: 28px; transition: background 0.2s; }
.btn-hapuspaito:hover { background: #c0392b; }

.table-paito { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.75rem; margin-top: 0.5rem; }
.table-paito th, .table-paito td { padding: 4px 2px; text-align: center; border: 1px solid #d4cfc7; }
.table-paito .head th { background: var(--accent); color: #fff; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; padding: 6px 2px; }
.dark .table-paito th, .dark .table-paito td { border-color: #2a2a2a; }
.dark .table-paito .head th { background: var(--accent); color: #fff; }
.dark .table-paito { color: #d0d2d6; }

.paito-num { font-weight: 700; font-size: 0.8rem; cursor: pointer; user-select: none; transition: background 0.1s; min-width: 22px; }
.paito-num:hover { opacity: 0.8; }
.addi-paito { font-weight: 800; color: var(--accent); }

/* Paito color classes — intentional, jangan diubah */
.a0,.a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9 { background: #00ab55 !important; color: #fff !important; border-radius: 3px; }
.c0,.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9 { background: #2196f3 !important; color: #fff !important; border-radius: 3px; }
.k0,.k1,.k2,.k3,.k4,.k5,.k6,.k7,.k8,.k9 { background: #ff9800 !important; color: #fff !important; border-radius: 3px; }
.e0,.e1,.e2,.e3,.e4,.e5,.e6,.e7,.e8,.e9 { background: #e7515a !important; color: #fff !important; border-radius: 3px; }
.j0,.j1,.j2,.j3,.j4,.j5,.j6,.j7,.j8,.j9 { background: #805dca !important; color: #fff !important; border-radius: 3px; }

/* ── Tailwind utility additions ─────────────────────────────────────────── */
.border-\[\#eee\] { border-color: #eee; }
.dark .dark\:border-\[\#1b2e4b\] { border-color: #2a2a2a; }
.text-\[\#b4aa96\] { color: #b4aa96; }
.dark .dark\:text-\[\#d0d2d6\] { color: #d0d2d6; }
.dark .dark\:text-\[\#505050\] { color: #505050; }
.dark .dark\:text-white { color: #fff; }
.bg-warning\/10 { background-color: rgba(var(--accent-rgb),0.1); }
.bg-danger\/10 { background-color: rgba(231,81,90,0.1); }
.bg-black\/5 { background-color: rgba(0,0,0,0.05); }
.dark .dark\:bg-white\/5 { background-color: rgba(255,255,255,0.05); }
.dark .dark\:bg-\[\#060818\] { background-color: #100f0f !important; }
.bg-\[\#fafafa\] { background-color: #fafafa; }
.bg-\[\#e6a900\] { background-color: var(--accent); }
.w-\[70px\] { width: 70px; }
.w-3\/4 { width: 75%; }
.w-4\.5 { width: 1.125rem; }
.h-4\.5 { height: 1.125rem; }
.max-h-8 { max-height: 2rem; }
.max-h-\[80px\] { max-height: 80px; }
.max-h-\[105px\] { max-height: 105px; }
.max-h-\[120px\] { max-height: 120px; }
.text-\[10px\] { font-size: 10px; }
.text-start { text-align: start; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.self-center { align-self: center; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.cursor-not-allowed { cursor: not-allowed; }
.\!m-0 { margin: 0 !important; }
.inline-flex { display: inline-flex; }

@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-center { align-items: center; }
    .sm\:w-auto { width: auto; }
    .sm\:w-64 { width: 16rem; }
    .sm\:w-72 { width: 18rem; }
    .sm\:w-\[163px\] { width: 163px; }
    .sm\:gap-3 { gap: 0.75rem; }
    .sm\:gap-6 { gap: 1.5rem; }
    .sm\:text-right { text-align: right; }
    .sm\:text-left { text-align: left; }
    .sm\:text-xs { font-size: 0.75rem; line-height: 1rem; }
    .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
    .sm\:max-w-6xl { max-width: 72rem; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:w-1\/4 { width: 25%; }
    .lg\:w-3\/4 { width: 75%; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .xl\:w-1\/2 { width: 50%; }
}