/* =========================================
   DASHBOARD WRAPPER & TYPOGRAPHY
========================================= */
.dashboard-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(7.5rem, 12vw, 10rem) 1.5rem 4rem 1.5rem;
    align-items: start;
}
.dashboard-wrapper .cs-text {
    padding: 0 1rem 2rem 1rem;
    max-width: 100%;
}
.cs-topper {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    display: block;
    margin-bottom: 0.5rem;
}
.cs-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 900;
    color: var(--headerColor);
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

/* =========================================
   WIDGETS
========================================= */
.sidebar-widget {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}
.tutorial-widget {
    background: linear-gradient(145deg, #ffffff, #fffdfa);
    border: 1px solid #ffe3d1;
    margin-bottom: 1.5rem;
}
.tut-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.tut-header h3 { margin: 0; font-size: 1.1rem; }
.tut-toggle {
    border: none;
    background: #1f2937;
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: 0.2s ease;
}
.tut-toggle:hover { background: #374151; transform: translateY(-1px); }
.tutorial-steps { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.tutorial-steps.hidden { display: none; }
.t-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.step-num {
    background-color: var(--primary);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.2rem;
}
.t-step p { font-size: 0.85rem; line-height: 1.4; color: var(--text-muted); margin: 0; }
.link-group { display: flex; flex-direction: column; gap: .2rem; margin-top: 10px; padding-bottom: .25rem; }
.youtube-link { display: inline-block; margin-top: 10px; color: #cc0000; text-decoration: none; font-weight: bold; font-size: 14px; }
.youtube-link:hover { text-decoration: underline; }

/* =========================================
   NAVIGATION TABS
========================================= */
.dashboard-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
    position: sticky;
    top: var(--actual-nav-height);
    z-index: 100;
    background-color: rgba(255,255,255,1);
    padding-top: 1rem;
    box-shadow: 0 -2px 0 0 var(--bg-color);
}
.tab-btn {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}
.tab-btn:hover { color: var(--text-main); }
.tab-btn.active { color: var(--primary); }
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -0.6rem;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary);
    border-radius: 2px;
}
.tab-pane { display: none; animation: fadeIn 0.3s ease; }
.tab-pane.active { display: block; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   FILTERS & SEARCH
========================================= */
.filter-bar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    background-color: var(--surface-color);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.search-box { position: relative; width: 100%; flex: 1 1 100%; min-width: 250px; }
.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background-color: var(--bg-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234e4b66'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.85rem center;
    background-size: 1.1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15); }
.elite-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    background-color: var(--surface-color);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 2rem;
    box-sizing: border-box;
}
.select-wrapper { position: relative; flex: 1 1 calc(50% - 0.5rem); min-width: 140px; }
.select-wrapper select {
    width: 100%;
    padding: 0.75rem 2.25rem 0.75rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    background-color: var(--bg-color);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234e4b66'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 0.85rem) center;
    background-size: 0.9rem;
    transition: border-color 0.2s, color 0.2s;
    box-sizing: border-box;
}
.select-wrapper select:focus { outline: none; border-color: var(--primary); color: var(--text-main); }
.filter-icon::before { content: "⚙️"; position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.sort-icon::before { content: "⇅"; position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.location-icon::before, .age-icon::before, .register-icon::before, .platform-icon::before {
    content: ""; position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
    pointer-events: none; width: 1rem; height: 1rem; background-color: currentColor;
    -webkit-mask-size: contain; mask-size: contain;
}
.location-icon::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M541.9 139.5C546.4 127.7 543.6 114.3 534.7 105.4C525.8 96.5 512.4 93.6 500.6 98.2L84.6 258.2C71.9 263 63.7 275.2 64 288.7C64.3 302.2 73.1 314.1 85.9 318.3L262.7 377.2L321.6 554C325.9 566.8 337.7 575.6 351.2 575.9C364.7 576.2 376.9 568 381.8 555.4L541.8 139.4z'/%3E%3C/svg%3E") no-repeat center; }
.age-icon::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M216 64C229.3 64 240 74.7 240 88L240 128L400 128L400 88C400 74.7 410.7 64 424 64C437.3 64 448 74.7 448 88L448 128L480 128C515.3 128 544 156.7 544 192L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 192C96 156.7 124.7 128 160 128L192 128L192 88C192 74.7 202.7 64 216 64zM216 176L160 176C151.2 176 144 183.2 144 192L144 240L496 240L496 192C496 183.2 488.8 176 480 176L216 176zM144 288L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 288L144 288z'/%3E%3C/svg%3E") no-repeat center; }
.register-icon::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 112C434.9 112 528 205.1 528 320C528 434.9 434.9 528 320 528C205.1 528 112 434.9 112 320C112 205.1 205.1 112 320 112zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM264 208C250.7 208 240 218.7 240 232L240 408C240 421.3 250.7 432 264 432C277.3 432 288 421.3 288 408L288 352L322.4 352L363.4 420.3C370.2 431.7 385 435.3 396.3 428.5C407.6 421.7 411.3 406.9 404.5 395.6L374.3 345.3C398.9 333.8 415.9 308.9 415.9 280C415.9 240.2 383.7 208 343.9 208L263.9 208zM336 304L288 304L288 256L344 256C357.3 256 368 266.7 368 280C368 293.3 357.3 304 344 304L336 304z'/%3E%3C/svg%3E") no-repeat center; }
/* NEW: phone/monitor icon for the Website vs App platform filter */
.platform-icon::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-5v2h2a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2h2v-2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2v9h16V6H4z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-5v2h2a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2h2v-2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2v9h16V6H4z'/%3E%3C/svg%3E") no-repeat center; }
.select-wrapper optgroup { font-weight: 700; color: var(--primary); background-color: var(--surface-color); font-style: normal; }
.select-wrapper option { color: var(--text-main); font-weight: normal; background-color: var(--surface-color); }
@media (min-width: 768px) {
    .filter-bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; }
    .search-box { max-width: 300px; }
    .elite-filters { flex-direction: row; justify-content: flex-end; width: auto; flex-grow: 1; align-items: center; }
    .select-wrapper { width: auto; min-width: 160px; flex: 1 1 auto; }
    .select-wrapper.sort-icon { min-width: 220px; }
}
@media (min-width: 992px) { .search-box { flex: 2 1 auto; } }

/* =========================================
   BONUS CARDS
========================================= */
.bonus-list { display: flex; flex-direction: column; gap: 1.25rem; }
/* Update the base bonus card to always be a column so the dropdown stays at the bottom */
.bonus-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.2s ease;
}
/* NEW: The header wrapper controls the row/column layout previously handled by the main card */
.bonus-card__header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

@media (min-width: 600px) { 
    .bonus-card__header { 
        flex-direction: row; 
        align-items: center; 
        justify-content: space-between; 
    } 
}

/* -------------------------------------
   Lightweight Instructions Accordion 
-------------------------------------- */
.bonus-card__instructions {
    border-top: 1px dashed var(--border-color);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}

.bonus-card__instructions summary {
    list-style: none; /* Removes default triangle */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    user-select: none;
    transition: color 0.2s ease;
}

.bonus-card__instructions summary::-webkit-details-marker {
    display: none; /* Safari fix */
}

.bonus-card__instructions summary:hover {
    color: var(--primary);
}

.bonus-card__instructions summary .chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

/* Rotate Chevron on Open */
.bonus-card__instructions[open] summary .chevron {
    transform: rotate(180deg);
}

.bonus-card__instructions .instructions-body {
    padding-top: 0.75rem;
}

.bonus-card__instructions .instructions-body p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--bodyTextColor);
}

/* --- Dark Mode Additions --- */
body.dark-mode .bonus-card__instructions {
    border-top-color: var(--accent);
}
body.dark-mode .bonus-card__instructions .instructions-body p {
    color: #d1d5db;
}
body.dark-mode .bonus-card__instructions summary:hover {
    color: var(--primaryLight);
}

.bonus-card:hover { transform: translateY(-3px); border-color: var(--primaryLight); }
.bonus-card.claimed {
    opacity: 0; transform: translateY(-10px) scale(.95);
    max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border: none;
}
@media (min-width: 600px) { .bonus-card { flex-direction: row; align-items: center; justify-content: space-between; } }
.card-brand { display: flex; align-items: center; gap: 1rem; flex: 1; }
.brand-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); }
.brand-details h2 { font-size: 1.25rem; margin: 0 0 0.25rem 0; }
.card-actions { display: flex; gap: 0.5rem; }
.btn {
    padding: 0.6rem 1.25rem; border-radius: 6px; font-weight: 600; text-decoration: none;
    cursor: pointer; border: none; transition: background-color 0.2s ease; text-align: center;
}
.btn-primary { background-color: var(--primary); color: white; }
.btn-primary:hover { background-color: var(--primaryLight); }
.btn-secondary { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-main); }
.btn-secondary:hover { background-color: #f3f4f6; }
.badge-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.mini-bonus-card__pill {
    display: inline-flex; align-items: center; width: fit-content; padding: 0.2rem 0.5rem;
    border-radius: 1rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; line-height: 1;
}
.pill--daily { background: #eef2ff; color: #4f46e5; }
/* NEW: platform availability pills */
.pill--platform { background: #ecfdf5; color: #047857; margin-left: 0.35rem; }
body.dark-mode .pill--platform { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
.hint-icon-link {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    background-color: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-muted);
    border-radius: 6px; text-decoration: none; transition: all 0.2s ease;
}
.hint-icon-link:hover, .hint-icon-link:focus {
    background-color: var(--surface-color); border-color: var(--primary); color: var(--primary);
    transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); outline: none;
}
.hint-icon-link.hint--ev:hover, .hint-icon-link.hint--ev:focus { border-color: #00AC26; color: #00AC26; }
.hint-icon-link.hint--req:hover, .hint-icon-link.hint--req:focus { border-color: #d946ef; color: #d946ef; }
.alert-card {
    border: 2px dashed rgba(255, 106, 62, 0.4);
    background-color: rgba(255, 106, 62, 0.02);
    display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
@media (min-width: 600px) { .alert-card { flex-direction: row; align-items: center; justify-content: space-between; } }
.alert-content h2 { font-size: 1.25rem; color: #d946ef; margin: 0 0 0.25rem 0; }
.alert-text { font-size: 0.95rem; color: var(--text-muted); margin: 0; }
.alert-actions { flex-shrink: 0; }

/* =========================================
   CASINO CARDS
========================================= */
.casino-container {
    width: 100%; padding: 2rem 0; display: flex; flex-direction: column; gap: 2rem;
    align-items: center; transition: opacity 0.3s ease, transform 0.3s ease; box-sizing: border-box;
}
.casino-container.hidden { display: none; }
.casino-card {
    width: 100%; background: #fff; border: 1px solid rgba(26, 26, 26, 0.08); border-radius: 1.25rem;
    box-shadow: 0 18px 50px rgba(26, 26, 26, 0.08); padding: 1.25rem; display: flex; flex-direction: column;
    gap: 1.25rem; position: relative; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    box-sizing: border-box;
}
.casino-card:hover {
    transform: translateY(-4px); box-shadow: 0 24px 60px rgba(26, 26, 26, 0.12);
    border-color: rgba(255, 186, 67, 0.32);
}
.casino-card .cs-text {
    max-width: 100%; font-size: var(--bodyFontSize, 1rem); line-height: 1.6em;
    color: var(--bodyTextColor, #4a4a4a); margin: 0;
}
.casino-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; }
.casino-card__brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.casino-card__logo {
    width: 4.5rem; height: 4.5rem; object-fit: contain; border-radius: 1rem; background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.06); box-shadow: 0 8px 20px rgba(26, 26, 26, 0.05); flex-shrink: 0;
}
.casino-card__brand-text { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.casino-card__name { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.15em; font-weight: 900; color: var(--headerColor, #1a1a1a); margin: 0; }
.casino-card__trustpilot a { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; transition: opacity 0.2s ease; }
.casino-card__trustpilot a:hover { opacity: 0.8; }
.casino-card__trustpilot-stars { color: #00b67a; font-size: 1.1rem; letter-spacing: 1px; line-height: 1; }
.casino-card__trustpilot-stars .half-star { opacity: 0.5; }
.casino-card__trustpilot-score { font-size: 0.8rem; font-weight: 700; color: var(--bodyTextColor, #4a4a4a); }
.casino-card__bonus { text-align: right; flex-shrink: 0; border: 3px solid var(--secondary, #ffba43); padding: 4px 11px; border-radius: 1rem; }
.casino-card__bonus-value { display: block; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; font-weight: 900; letter-spacing: -0.03em; text-align: center; }
.casino-card__bonus-label { display: block; margin-top: 0.35rem; font-size: 0.75rem; line-height: 1.2em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bodyTextColor, #4a4a4a); text-align: center; }
.casino-card__middle { display: flex; gap: 1.5rem; align-items: flex-start; }
.casino-card__content-left { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.casino-card__meta-box { background: #fafbfc; border: 1px solid rgba(26, 26, 26, 0.06); border-radius: 1rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; min-width: 240px; flex-shrink: 0; }
.casino-card__meta-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(26, 26, 26, 0.06); padding-bottom: 0.85rem; }
.casino-card__meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.casino-card__meta-label { display: block; font-size: 0.72rem; line-height: 1.3em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bodyTextColor, #4a4a4a); margin: 0; }
.casino-card__meta-value { display: block; font-size: 1.05rem; line-height: 1.2em; font-weight: 900; color: var(--headerColor, #1a1a1a); text-align: right; }
.casino-card__guide-link { font-size: 0.875rem; line-height: 1.5; color: var(--bodyTextColor, #4a4a4a); margin: 0; padding: 0.75rem 0; border-top: 1px dashed rgba(26, 26, 26, 0.15); border-bottom: 1px dashed rgba(26, 26, 26, 0.15); }
.casino-card__guide-link a { color: var(--primary, #0056b3); font-weight: 700; text-decoration: none; transition: color 0.2s ease; }
.casino-card__guide-link a:hover { text-decoration: underline; color: var(--primaryLight, #007bff); }
.casino-card__accordion-group { display: flex; flex-direction: column; gap: 0.75rem; }
.casino-card__details { border: 1px solid rgba(26, 26, 26, 0.08); border-radius: 1rem; background: #fff; overflow: hidden; transition: background-color 0.3s ease; }
.casino-card__details[open] { background: #fafbfc; }
.casino-card__summary { list-style: none; cursor: pointer; padding: 1rem 1.1rem; font-size: 0.95rem; line-height: 1.2em; font-weight: 800; color: var(--headerColor, #1a1a1a); position: relative; }
.casino-card__summary::-webkit-details-marker { display: none; }
.casino-card__summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; font-weight: 700; color: var(--primary, #0056b3); }
.casino-card__details[open] .casino-card__summary::after { content: "−"; }
.casino-card__details-content { padding: 0 1.1rem 1rem; }
.casino-card__list { margin: 0; padding-left: 1.25rem; font-size: 0.9rem; line-height: 1.6em; color: var(--bodyTextColor, #4a4a4a); }
.casino-card__list li { margin-bottom: 0.5rem; }
.casino-card__list li:last-child { margin-bottom: 0; }
.casino-card__actions { 
    display: flex; 
    gap: 0.75rem; 
    flex-wrap: wrap; 
    margin-top: 0.5rem;
}
.casino-card__cta { 
    min-height: 3rem; 
    padding: 0.875rem 1.25rem; 
    border-radius: 0.875rem; 
    font-size: 0.95rem; 
    line-height: 1.2em; 
    font-weight: 800; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; 
}
.casino-card__cta--primary { cursor: pointer;  background: var(--primary, #0056b3); color: var(--bodyTextColorWhite, #fff); border: 1px solid var(--primary, #0056b3); }
.casino-card__cta--primary:hover { transform: translateY(-2px); }
.casino-card__cta--secondary { cursor: pointer; background: #fff; color: var(--headerColor, #1a1a1a); border: 1px solid rgba(26, 26, 26, 0.12); }
.casino-card__cta--secondary:hover { transform: translateY(-2px); border-color: rgba(255, 186, 67, 0.45); }
@media only screen and (max-width: 56rem) { .casino-card__middle { flex-direction: column; align-items: stretch; } }
@media only screen and (max-width: 48rem) {
    .casino-card__top { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; align-items: center; }
    .casino-card__brand { display: contents; }
    .casino-card__logo { grid-column: 1; grid-row: 1 / 3; width: 5.5rem; height: 5.5rem; }
    .casino-card__brand-text { grid-column: 2; grid-row: 1; align-self: flex-end; }
    .casino-card__bonus { grid-column: 2; grid-row: 2; align-self: flex-start; text-align: left; width: fit-content; padding: 4px 12px; }
    .casino-card__bonus-value { font-size: 1.5rem; text-align: left; }
    .casino-card__bonus-label { text-align: left; }
    .casino-card__actions { flex-direction: column; }
    .casino-card__cta { width: 100%; }
}

/* =========================================
   DARK MODE OVERRIDES (Icons & Secondary Text)
========================================= */
body.dark-mode .casino-card__cta--secondary {
    color: var(--bodyTextColorWhite, #ffffff) !important;
    border-color: var(--accent, #334155) !important;
}
body.dark-mode .casino-card__cta--secondary:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Forces the SVG Mask icons inside settings card to go white in dark mode */
body.dark-mode .profile-potential-card__settings .location-icon::before,
body.dark-mode .profile-potential-card__settings .age-icon::before,
body.dark-mode .elite-filters .register-icon::before,
body.dark-mode .elite-filters .age-icon::before,
body.dark-mode .elite-filters .platform-icon::before,
body.dark-mode .elite-filters .location-icon::before {
    background-color: var(--bodyTextColorWhite, #ffffff) !important;
    color: var(--bodyTextColorWhite, #ffffff) !important;
}

/* =========================================
   TOAST NOTIFICATIONS (v2)
   The old rules used ::deep (a Blazor CSS-isolation token) which is invalid
   in a plain stylesheet, so browsers dropped those rules entirely — that's
   why toasts rendered as unstyled text. This block replaces them.
========================================= */
#toast-container {
    position: fixed;
    z-index: 10001; /* above the modal overlay (10000) */
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    pointer-events: none;
    max-width: calc(100vw - 3rem);
}

.notification-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 360px;
    max-width: 100%;
    padding: 0.9rem 1rem;
    background-color: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-left: 4px solid var(--blackjackGreen, #0f6b4f);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(26, 26, 26, 0.16);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.notification-toast.show { opacity: 1; transform: translateY(0); }

.notification-toast__icon {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    color: var(--blackjackGreen, #0f6b4f);
}
.notification-toast__icon svg { width: 100%; height: 100%; display: block; }

.notification-toast__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}
.notification-toast__title {
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--headerColor, #1a1a1a);
}
.notification-toast__message {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--bodyTextColor, #4e4b66);
    overflow-wrap: break-word;
}

.notification-toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    color: var(--bodyTextColor, #4e4b66);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.notification-toast__close:hover { opacity: 1; }

/* Variants */
.notification-toast--error { border-left-color: #dc2626; }
.notification-toast--error .notification-toast__icon { color: #dc2626; }
.notification-toast--info { border-left-color: #2563eb; }
.notification-toast--info .notification-toast__icon { color: #2563eb; }

/* Dark mode */
body.dark-mode .notification-toast {
    background-color: var(--medium, #282828);
    border-color: var(--accent, #404040);
    border-left-color: #4ade80;
}
body.dark-mode .notification-toast__icon { color: #4ade80; }
body.dark-mode .notification-toast__title { color: var(--bodyTextColorWhite, #fafbfc); }
body.dark-mode .notification-toast__message { color: #d1d5db; }
body.dark-mode .notification-toast__close { color: #d1d5db; }
body.dark-mode .notification-toast--error { border-left-color: #f87171; }
body.dark-mode .notification-toast--error .notification-toast__icon { color: #f87171; }
body.dark-mode .notification-toast--info { border-left-color: #60a5fa; }
body.dark-mode .notification-toast--info .notification-toast__icon { color: #60a5fa; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .notification-toast { transition: opacity 0.2s ease; transform: none; }
    .notification-toast.show { transform: none; }
}

/* Mobile: full-width toasts pinned above the bottom padding */
@media (max-width: 480px) {
    #toast-container { left: 1rem; right: 1rem; align-items: stretch; }
    .notification-toast { width: 100%; }
}

/* =========================================
   DARK MODE OVERRIDES & WARNINGS
========================================= */
body.dark-mode .dashboard-wrapper { background-color: var(--dark); }
body.dark-mode .dashboard-tabs { background-color: var(--dark); border-bottom-color: var(--accent); box-shadow: 0 -2px 0 0 var(--dark); }
body.dark-mode .tab-btn { color: #cbd5e1; }
body.dark-mode .tab-btn:hover, body.dark-mode .tab-btn.active { color: var(--primary); }
body.dark-mode .sidebar-widget, body.dark-mode .tutorial-widget, body.dark-mode .filter-bar, body.dark-mode .elite-filters, body.dark-mode .bonus-card, body.dark-mode .casino-card, body.dark-mode .casino-card__meta-box, body.dark-mode .casino-card__details, body.dark-mode .casino-card__details[open] { background: var(--medium); border-color: var(--accent); color: var(--bodyTextColorWhite); }
body.dark-mode .tutorial-widget { background: linear-gradient(145deg, #1f1f1f, #282828); }
body.dark-mode .t-step p, body.dark-mode .alert-text, body.dark-mode .casino-card .cs-text, body.dark-mode .casino-card__trustpilot-score, body.dark-mode .casino-card__bonus-label, body.dark-mode .casino-card__meta-label, body.dark-mode .casino-card__guide-link, body.dark-mode .casino-card__list { color: #d1d5db; }
body.dark-mode .casino-card__name, body.dark-mode .casino-card__meta-value, body.dark-mode .casino-card__summary, body.dark-mode .brand-details h2, body.dark-mode .tut-header h3 { color: var(--bodyTextColorWhite); }
body.dark-mode .search-input, body.dark-mode .select-wrapper select { background-color: #1f1f1f; border-color: var(--accent); color: var(--bodyTextColorWhite); }
body.dark-mode .search-input::placeholder { color: #9ca3af; }
body.dark-mode .select-wrapper option, body.dark-mode .select-wrapper optgroup { background-color: #1f1f1f; color: var(--bodyTextColorWhite); }
body.dark-mode .btn-secondary, body.dark-mode .casino-card__cta--secondary { background-color: transparent; border-color: var(--accent); color: var(--bodyTextColorWhite); }
body.dark-mode .btn-secondary:hover, body.dark-mode .casino-card__cta--secondary:hover { background-color: #333; }
body.dark-mode .hint-icon-link { background-color: #1f1f1f; border-color: var(--accent); color: #d1d5db; }
body.dark-mode .brand-logo, body.dark-mode .casino-card__logo { background-color: #fff; border-color: var(--accent); }
body.dark-mode .casino-card__guide-link { border-top-color: var(--accent); border-bottom-color: var(--accent); }
body.dark-mode .casino-card__meta-row { border-bottom-color: var(--accent); }
body.dark-mode .alert-card { background-color: rgba(255, 106, 62, 0.08); border-color: rgba(255, 106, 62, 0.35); }
body.dark-mode .pill--daily { background: rgba(79, 70, 229, 0.22); color: #c7d2fe; }

.casino-card__warnings:not(:empty) { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.25rem; }
.casino-card__warning-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; line-height: 1.4; border: 1px solid; }
.casino-card__warning-item svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.05rem; }
.casino-card__warning-item--warning { background-color: #fff4f4; border-color: #ffdbdb; color: #c92a2a; }
.casino-card__warning-item--warning strong { color: #a61b1b; }
.casino-card__warning-item--note { background-color: #fffdf2; border-color: #fce588; color: #856404; }
.casino-card__warning-item--note strong { color: #664d03; }
body.dark-mode .casino-card__warning-item--warning { background-color: rgba(201, 42, 42, 0.14); border-color: rgba(255, 219, 219, 0.22); color: #fecaca; }
body.dark-mode .casino-card__warning-item--warning strong { color: #fca5a5; }
body.dark-mode .casino-card__warning-item--note { background-color: rgba(253, 224, 71, 0.1); border-color: rgba(253, 224, 71, 0.2); color: #fde68a; }
body.dark-mode .casino-card__warning-item--note strong { color: #fef08a; }
/* =========================================
   CONFIRMATION MODAL
========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10000;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background-color: var(--surface-color, #ffffff);
    padding: 2rem;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-content h3 {
    margin-top: 0;
    font-size: 1.5rem;
    color: var(--headerColor, #1a1a1a);
}

.modal-content p {
    color: var(--text-muted, #4a4a4a);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn.alert-btn {
    background-color: #dc2626;
    border-color: #dc2626;
    color: white;
}

.btn.alert-btn:hover {
    background-color: #b91c1c;
}

/* Dark mode for the modal (was previously unstyled — white flash in dark UI) */
body.dark-mode .modal-content {
    background-color: var(--medium, #282828);
}
body.dark-mode .modal-content h3 { color: var(--bodyTextColorWhite, #fafbfc); }
body.dark-mode .modal-content p { color: #d1d5db; }

/* =========================================
   PROFILE POTENTIAL CARD
========================================= */
.profile-potential-card {
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.profile-potential-card__settings {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 280px;
}

.profile-potential-card__summary {
    flex: 2;
    min-width: 300px;
}

.profile-potential-card__summary p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--bodyTextColor);
}

.profile-potential-card__summary strong {
    font-size: 1.15rem;
    font-weight: 900;
}

.text-primary {
    color: var(--primary);
}

/* =========================================
   OPPORTUNITIES TAB CARDS
========================================= */
.opportunities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.opportunity-card {
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.opportunity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
    border-color: var(--primaryLight);
}

.opportunity-card__content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--headerColor);
}

.opportunity-card__content p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.opportunity-card__actions {
    display: flex;
    gap: 0.75rem;
}

/* =========================================
   DARK MODE OVERRIDES (Profile & Opps)
========================================= */
body.dark-mode .profile-potential-card,
body.dark-mode .opportunity-card {
    background: var(--medium);
    border-color: var(--accent);
}

body.dark-mode .profile-potential-card__summary p,
body.dark-mode .opportunity-card__content p {
    color: #d1d5db;
}

body.dark-mode .profile-potential-card__summary strong,
body.dark-mode .opportunity-card__content h3 {
    color: var(--bodyTextColorWhite);
}

body.dark-mode .text-primary {
    color: #60a5fa; 
}
/* ============================================================
   Section previously appended from the inline <style> block
   ============================================================ */

/* --- Earnings hype banner (was inline in Dashboard.cshtml) --- */
.earnings-hype-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    width: 100%;
}

.hype-box {
    flex: 1;
    min-width: 240px; /* Stacks nicely on mobile */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background-color: var(--blackjackSoft, #fff8ec);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}

.hype-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}

.hype-box.total { border-bottom: 4px solid var(--primary); }
.hype-box.claimed { border-bottom: 4px solid var(--blackjackGreen); }
.hype-box.unclaimed { border-bottom: 4px solid var(--primaryLight); }

.hype-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bodyTextColor);
    font-weight: 700;
}

.hype-value {
    margin: 0.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.hype-box.total .hype-value > span:first-child { color: var(--primary); font-size: 2.5rem; font-weight: 900; }
.hype-box.claimed .hype-value > span:first-child { color: var(--blackjackGreen); font-size: 2.5rem; font-weight: 900; }
.hype-box.unclaimed .hype-value > span:first-child { color: var(--primaryLight); font-size: 2.5rem; font-weight: 900; }

.hype-spins {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bodyTextColor);
    margin-top: 0.25rem;
}

/* --- Dark Mode Overrides --- */
body.dark-mode .hype-box {
    background-color: var(--medium);
    border-color: var(--accent);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

body.dark-mode .hype-box:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .hype-label {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
}

body.dark-mode .hype-spins {
    color: var(--bodyTextColorWhite);
    opacity: 0.7;
}

body.dark-mode .hype-box.claimed .hype-value > span:first-child {
    color: #4ade80;
}

/* --- Utility classes replacing inline style="" attributes --- */
.potential-disclaimer { color: var(--text-muted); }

.filter-description {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
}

.cs-title--sub { font-size: 1.8rem; }

.cs-text--flush {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.bonus-card__est-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

/* --- Rendering-cost optimization ---
   content-visibility lets the browser skip layout/paint for cards that are
   off-screen; contain-intrinsic-size reserves approximate space so the
   scrollbar doesn't jump. Tune the pixel values to your average card height. */
.casino-card,
.bonus-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}
.casino-card__appstore a,
.casino-card__appstore {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.casino-card__appstore:hover { opacity: 0.8; }

.casino-card__appstore-stars {
    color: #0a84ff;            /* Apple's system blue */
    font-size: 1.1rem;
    letter-spacing: 1px;
    line-height: 1;
}

.casino-card__appstore-score {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bodyTextColor, #4a4a4a);
}
.casino-card__appstore-score svg { flex-shrink: 0; opacity: 0.85; }

body.dark-mode .casino-card__appstore-stars { color: #4da3ff; }
body.dark-mode .casino-card__appstore-score { color: #d1d5db; }

/* Capped-at-1SC pill */
.pill--capped {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #fef3c7;
    color: #92400e;
    cursor: help;
}
.pill--capped svg { flex-shrink: 0; opacity: 0.8; }
body.dark-mode .pill--capped { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }

/* Streak pill (Daily Bonuses tab) */
.pill--streak { background: #ffe4e6; color: #be123c; }
body.dark-mode .pill--streak { background: rgba(244, 63, 94, 0.18); color: #fda4af; }

/* On the casino card, nudge the capped chip under the bonus box */
.casino-card__capped { margin-top: 0.5rem; align-self: flex-start; }
@media only screen and (max-width: 48rem) {
    /* keep it in the bonus grid cell on mobile */
    .casino-card__capped { grid-column: 2; }
}

/* ---- Hover tooltip (hover + keyboard focus, no mobile tap) ---- */
.info-tip { position: relative; }
.info-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: 240px;
    padding: 0.5rem 0.65rem;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 50;
    pointer-events: none;
}
.info-tip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 12px;
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
    z-index: 50;
}
.info-tip:hover::after, .info-tip:focus-visible::after,
.info-tip:hover::before, .info-tip:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.bonus-card:has(.info-tip:hover),
.bonus-card:has(.info-tip:focus-visible),
.casino-card:has(.info-tip:hover),
.casino-card:has(.info-tip:focus-visible) {
    position: relative;
    z-index: 200;
}
.bonus-card:has(.info-tip:hover),
.casino-card:has(.info-tip:hover) {
    content-visibility: visible;
}
/* =========================================
   COMPLIANCE / INFORMATIONAL NOTICE
========================================= */
.compliance-note {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    color: var(--bodyTextColor, #4e4b66);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
}
.compliance-note strong {
    color: var(--headerColor, #1a1a1a);
}
body.dark-mode .compliance-note {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent, #334155);
}
body.dark-mode .compliance-note strong {
    color: var(--bodyTextColorWhite, #ffffff);
}
/* ============================================================
   APPEND TO THE BOTTOM OF dashboard.css
   Custom sites + per-card customization + SC-cap note fix
   ============================================================ */

/* --- Daily tab toolbar (intro text + Add Custom Site button) --- */
.daily-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.daily-toolbar .cs-text { flex: 1 1 300px; }
.daily-toolbar__add { flex-shrink: 0; white-space: nowrap; margin: 0 1rem 1.5rem 0; }
@media (max-width: 600px) {
    .daily-toolbar { flex-direction: column; }
    .daily-toolbar__add { width: calc(100% - 2rem); margin: 0 1rem 1.5rem 1rem; }
}

/* --- 3-dot "customize" button on each daily card --- */
.card-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    min-height: 2.6rem;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.card-menu-btn:hover,
.card-menu-btn:focus-visible {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
    outline: none;
}
body.dark-mode .card-menu-btn { border-color: var(--accent); color: #d1d5db; }
body.dark-mode .card-menu-btn:hover { color: var(--primaryLight); border-color: var(--primaryLight); }

/* --- Letter avatar for custom sites (no logo file exists) --- */
.custom-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary, #0056b3), var(--primaryLight, #007bff));
    flex-shrink: 0;
}

/* --- "My Site" / "Custom Value" pill --- */
.pill--custom { background: #ede9fe; color: #6d28d9; }
body.dark-mode .pill--custom { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }

/* --- SC cap: quiet one-liner under the value instead of a layout-shifting pill --- */
.sc-cap-note {
    display: block;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
body.dark-mode .sc-cap-note { color: #9ca3af; }

/* --- Form-style modals (override + custom site) --- */
.modal-content--form { text-align: left; max-width: 440px; }
.modal-content--form h3 { text-align: center; }

.form-row { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.form-row label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="time"],
.form-row select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background-color: var(--bg-color);
    box-sizing: border-box;
}
.form-row input:focus, .form-row select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}
.form-row small { font-size: 0.75rem; color: var(--text-muted); }

.form-row--inline { flex-direction: row; align-items: center; gap: 0.6rem; }
.form-row--inline label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
}
.form-row--inline input[type="checkbox"] { width: 1.1rem; height: 1.1rem; cursor: pointer; }

.time-tz-row { display: flex; gap: 0.6rem; }
.time-tz-row input, .time-tz-row select { flex: 1; }

.modal-actions--split { justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.modal-actions--split > div { display: flex; gap: 0.75rem; }

.btn.danger-btn {
    background: transparent;
    border: 1px solid #dc2626;
    color: #dc2626;
}
.btn.danger-btn:hover { background: #dc2626; color: #fff; }

/* Dark mode for the new form modals */
body.dark-mode .modal-content--form input,
body.dark-mode .modal-content--form select {
    background-color: #1f1f1f;
    border-color: var(--accent);
    color: var(--bodyTextColorWhite);
}
body.dark-mode .form-row label { color: #9ca3af; }
body.dark-mode .form-row--inline label { color: var(--bodyTextColorWhite); }
body.dark-mode .form-row small { color: #9ca3af; }
/* ============================================================
   APPEND TO THE BOTTOM OF dashboard.css
   Custom sites + per-card customization + SC-cap note fix
   ============================================================ */

/* --- Daily tab toolbar (intro text + Add Custom Site button) --- */
.daily-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.daily-toolbar .cs-text { flex: 1 1 300px; }
.daily-toolbar__add { flex-shrink: 0; white-space: nowrap; margin: 0 1rem 1.5rem 0; }
@media (max-width: 600px) {
    .daily-toolbar { flex-direction: column; }
    .daily-toolbar__add { width: calc(100% - 2rem); margin: 0 1rem 1.5rem 1rem; }
}

/* --- 3-dot "customize" button on each daily card --- */
.card-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    min-height: 2.6rem;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.card-menu-btn:hover,
.card-menu-btn:focus-visible {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
    outline: none;
}
body.dark-mode .card-menu-btn { border-color: var(--accent); color: #d1d5db; }
body.dark-mode .card-menu-btn:hover { color: var(--primaryLight); border-color: var(--primaryLight); }

/* --- Letter avatar for custom sites (no logo file exists) --- */
.custom-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary, #0056b3), var(--primaryLight, #007bff));
    flex-shrink: 0;
}

/* --- "My Site" / "Custom Value" pill --- */
.pill--custom { background: #ede9fe; color: #6d28d9; }
body.dark-mode .pill--custom { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }

/* --- SC cap: quiet one-liner under the value instead of a layout-shifting pill --- */
.sc-cap-note {
    display: block;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
body.dark-mode .sc-cap-note { color: #9ca3af; }

/* --- Form-style modals (override + custom site) --- */
.modal-content--form { text-align: left; max-width: 440px; }
.modal-content--form h3 { text-align: center; }

.form-row { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.form-row label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="time"],
.form-row select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background-color: var(--bg-color);
    box-sizing: border-box;
}
.form-row input:focus, .form-row select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}
.form-row small { font-size: 0.75rem; color: var(--text-muted); }

.form-row--inline { flex-direction: row; align-items: center; gap: 0.6rem; }
.form-row--inline label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
}
.form-row--inline input[type="checkbox"] { width: 1.1rem; height: 1.1rem; cursor: pointer; }

.time-tz-row { display: flex; gap: 0.6rem; }
.time-tz-row input, .time-tz-row select { flex: 1; }

.modal-actions--split { justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.modal-actions--split > div { display: flex; gap: 0.75rem; }

.btn.danger-btn {
    background: transparent;
    border: 1px solid #dc2626;
    color: #dc2626;
}
.btn.danger-btn:hover { background: #dc2626; color: #fff; }

/* Dark mode for the new form modals */
body.dark-mode .modal-content--form input,
body.dark-mode .modal-content--form select {
    background-color: #1f1f1f;
    border-color: var(--accent);
    color: var(--bodyTextColorWhite);
}
body.dark-mode .form-row label { color: #9ca3af; }
body.dark-mode .form-row--inline label { color: var(--bodyTextColorWhite); }
body.dark-mode .form-row small { color: #9ca3af; }

/* ============================================================
   ROUND 2 ADDITIONS
   ============================================================ */

/* --- Fix: "This dashboard is an informational tracker..." was unreadable
       in dark mode. Force a light text color + subtle panel. --- */
body.dark-mode .compliance-note {
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}
body.dark-mode .compliance-note strong { color: #f3f4f6; }

/* --- Newbie walkthrough intro (what IS a sweepstakes casino?) --- */
.tut-intro {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--primary, #0056b3);
    background: rgba(0, 86, 179, 0.05);
    border-radius: 0 8px 8px 0;
}
body.dark-mode .tut-intro {
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--primaryLight, #007bff);
}
body.dark-mode .tut-intro strong { color: #f3f4f6; }

/* --- SC Limit Note relocated to the redemption meta box (Sites tab).
       Small, quiet, and no longer shoving the Daily Reward out of the
       top-right corner. Keeps the info-tip tooltip behavior. --- */
.sc-cap-note--meta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: help;
}
.sc-cap-note--meta svg { flex-shrink: 0; }
body.dark-mode .sc-cap-note--meta { color: #9ca3af; }