/* Hallmark · VASANA workbench · user-requested original positions + market-family colours.
 * Pre-emit critique: P4 H4 E4 S5 R4 V4; existing product tokens and Thai type retained.
 * Only the full betting page; no changes to market, reports or modal flows. */
html body #betting-workspace {
    --bet-page: #f5f7fa;
    --bet-paper: #fff;
    --bet-soft: #f3f6fa;
    --bet-line: #dce5ef;
    --bet-ink: #18324c;
    --bet-muted: #63758a;
    --bet-blue: #075bc8;
    --bet-blue-soft: #edf5ff;
    --bet-blue-line: #c4daf5;
    --bet-white: #fff;
    --bet-green: #087443;
    --bet-green-soft: #edf9f2;
    --bet-red: #b42332;
    --bet-red-soft: #fff2f3;
    --bet-pad: 20px;
    --bet-gap: 16px;
    background: var(--bet-page) !important;
    color: var(--bet-ink) !important;
    padding: var(--bet-gap) !important;
    font-family: var(--font-body);
}
html body #betting-workspace .quick-bet-shell { max-width: 1280px !important; width: 100% !important; }
html body #betting-workspace .quick-bet-stack { gap: var(--bet-gap) !important; }
html body #betting-workspace :is(.quick-bet-left,.quick-bet-right) { gap: var(--bet-gap) !important; min-width: 0; }
html body #betting-workspace :is(.quick-bet-header,#tabs-area.quick-bet-entry,.restricted-panel,.history-panel) {
    background: var(--bet-paper) !important;
    border: 1px solid var(--bet-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
}
html body #betting-workspace .quick-bet-header { padding: 16px var(--bet-pad) !important; min-height: 112px !important; border-top: 3px solid var(--lottery-family-action,var(--bet-blue)) !important; }
html body #betting-workspace .quick-bet-title-row h1 { font-size: 19px !important; font-weight: 600 !important; color: var(--bet-ink) !important; }
html body #betting-workspace .game-shell__back { background: var(--bet-paper) !important; border: 1px solid var(--bet-line) !important; border-radius: 8px !important; width: 36px; height: 36px; color: var(--bet-blue) !important; }
html body #betting-workspace .quick-bet-market { color: var(--bet-ink) !important; font-size: 15px !important; font-weight: 600; }
html body #betting-workspace .quick-bet-market small { font-size: 11px; color: var(--bet-muted); font-weight: 400; }
html body #betting-workspace .quick-bet-market__star { width: 18px !important; color: var(--lottery-family-action,var(--bet-blue)) !important; }
html body #betting-workspace .quick-bet-date { color: var(--bet-muted) !important; font-size: 12px !important; }
html body #betting-workspace .quick-bet-flag { width: 44px !important; height: 28px !important; object-fit: cover; border-radius: 4px !important; box-shadow: none !important; }
html body #betting-workspace .game-shell__market-status.is-open { color: var(--bet-green) !important; background: var(--bet-green-soft) !important; border: 0 !important; border-radius: 5px !important; }
html body #betting-workspace #tabs-area.quick-bet-entry { padding: var(--bet-pad) !important; }
html body #betting-workspace #tabs-area .game-tabs { gap: 6px !important; padding-bottom: 16px !important; border-bottom: 1px solid var(--bet-line); }
html body #betting-workspace #tabs-area .game-tabs button {
    border: 1px solid var(--bet-line) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    min-height: 38px !important;
    background: var(--bet-paper) !important;
    color: var(--bet-muted) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transform: none !important;
    white-space: nowrap;
}
html body #betting-workspace #tabs-area .game-tabs button.bg-blue-600 { background: var(--bet-blue) !important; border-color: var(--bet-blue) !important; color: var(--bet-white) !important; }
html body #betting-workspace #tabs-area .bet-options button { background: var(--bet-soft) !important; color: var(--bet-ink) !important; border: 1px solid var(--bet-line) !important; box-shadow: none !important; border-radius: 5px !important; }
html body #betting-workspace #tabs-area .bet-options button.bg-purple-600 { background: var(--bet-blue-soft) !important; border-color: var(--bet-blue) !important; color: var(--bet-blue) !important; }
html body #betting-workspace .number-entry-card.quick-bet-form { border: 0 !important; background: transparent !important; padding: 0 !important; }
html body #betting-workspace .number-entry-card.quick-bet-form .pending-panel.quick-number-presets { background: var(--bet-soft) !important; border: 1px solid var(--bet-line) !important; border-radius: 8px !important; padding: 12px !important; margin-bottom: 16px !important; }
html body #betting-workspace .pending-panel__heading { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
html body #betting-workspace .pending-panel__heading > div { display: flex; gap: 8px; font-size: 11px; color: var(--bet-muted); }
html body #betting-workspace .pending-panel__heading strong { color: var(--bet-ink); font-weight: 500; }
html body #betting-workspace .pending-panel__numbers { padding: 0 !important; gap: 6px !important; }
html body #betting-workspace .pending-number { min-width: 36px !important; min-height: 32px !important; background: var(--bet-paper) !important; border: 1px solid var(--bet-blue-line) !important; color: var(--bet-blue) !important; border-radius: 5px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; }
html body #betting-workspace .pending-panel__clear { background: transparent !important; color: var(--bet-red) !important; border: 0 !important; font-size: 11px !important; padding: 4px !important; }
html body #betting-workspace :is(.number-input-field label,.price-field label) { color: var(--bet-muted) !important; font-size: 12px !important; font-weight: 500 !important; text-align: left !important; }
html body #betting-workspace #tabs-area :is(#num-input,#price-top,#price-bottom,#price-tod) { height: 42px !important; background: var(--bet-paper) !important; border: 1px solid var(--bet-blue-line) !important; border-radius: 6px !important; color: var(--bet-ink) !important; font-size: 16px !important; box-shadow: none !important; }
html body #betting-workspace #num-input::placeholder { color: var(--bet-muted) !important; font-size: 14px; font-weight: 400; letter-spacing: normal; }
html body #betting-workspace #tabs-area #btn-ok,
html body #betting-workspace #tabs-area .quick-bet-add { height: 42px !important; min-height: 42px !important; background: var(--bet-blue) !important; color: var(--bet-white) !important; border: 0 !important; border-radius: 6px !important; font-size: 13px !important; box-shadow: none !important; }
html body #betting-workspace .price-entry-row { margin-top: 16px !important; padding-top: 16px !important; border-top: 1px solid var(--bet-line) !important; }
html body #betting-workspace .restricted-panel__header { background: var(--bet-paper) !important; color: var(--bet-ink) !important; padding: 14px 16px !important; border-bottom: 1px solid var(--bet-line) !important; font-size: 15px !important; font-weight: 600 !important; }
html body #betting-workspace .restricted-toggle.is-on { background: var(--bet-green) !important; }
html body #betting-workspace .restricted-toggle.is-off { background: var(--bet-muted) !important; }
html body #betting-workspace .restricted-panel__body { background: var(--bet-paper) !important; padding: 12px !important; }
html body #betting-workspace .hhlott-section { border: 0 !important; background: var(--bet-paper) !important; padding: 0 !important; }
html body #betting-workspace .hhlott-section__header { padding: 10px !important; background: var(--bet-blue-soft) !important; color: var(--bet-blue) !important; border-radius: 6px !important; gap: 8px !important; }
html body #betting-workspace .hhlott-section__title { color: var(--bet-blue) !important; font-size: 12px !important; }
html body #betting-workspace .hhlott-market-badge { background: var(--bet-paper) !important; color: var(--bet-blue) !important; font-size: 10px !important; }
html body #betting-workspace #hhlott-sync-status > span { color: var(--bet-muted) !important; }
html body #betting-workspace .btn-refresh-hhlott { background: var(--bet-paper) !important; color: var(--bet-blue) !important; border: 1px solid var(--bet-blue-line) !important; border-radius: 5px !important; }
html body #betting-workspace .hhlott-number-board { max-height: 340px !important; background: var(--bet-paper) !important; }
html body #betting-workspace .hhlott-category-row { padding: 12px 0 !important; border-color: var(--bet-line) !important; }
html body #betting-workspace .hhlott-category-label { background: var(--bet-soft) !important; color: var(--bet-muted) !important; font-size: 11px !important; padding: 8px !important; border-radius: 5px; }
html body #betting-workspace .hhlott-number-chip { color: var(--bet-ink) !important; font-size: 12px !important; line-height: 1.8; }
html body #betting-workspace :is(.restricted-status,.hhlott-section__summary) { color: var(--bet-muted) !important; font-size: 10px !important; line-height: 1.6 !important; }
html body #betting-workspace .history-panel__heading { padding: 14px 16px !important; background: var(--bet-paper) !important; border-bottom: 1px solid var(--bet-line) !important; }
html body #betting-workspace .history-panel__title { color: var(--bet-ink) !important; font-size: 13px !important; }
html body #betting-workspace #submitted-history { overflow-x: auto !important; }
html body #betting-workspace .latest-bills-table { min-width: 440px; font-size: 11px !important; }
html body #betting-workspace .latest-bills-table th { background: var(--bet-soft) !important; color: var(--bet-muted) !important; padding: 10px 6px !important; border: 0 !important; font-weight: 500 !important; }
html body #betting-workspace .latest-bills-table td { color: var(--bet-ink) !important; padding: 12px 6px !important; border: 0 !important; border-bottom: 1px solid var(--bet-line) !important; }
html body #betting-workspace .latest-bills-empty td { padding: 28px 12px !important; color: var(--bet-muted) !important; }
html body #betting-workspace :is(button,input):focus-visible { outline: 2px solid var(--bet-blue) !important; outline-offset: 2px; }
html body #betting-workspace button:disabled { opacity: .55 !important; cursor: not-allowed !important; }
html body #betting-workspace button:hover:not(:disabled) { filter: brightness(.96); }
html body #betting-workspace button:active:not(:disabled) { transform: translateY(1px) !important; }
/* Override the older receipt-oriented geometry only inside this workbench. */
html body #betting-workspace .quick-bet-header.quick-bet-header { border-top: 3px solid var(--bet-blue) !important; }
html body #betting-workspace #tabs-area .bet-options:empty { display: none !important; }
html body #betting-workspace #tabs-area .number-entry-card.quick-bet-form { padding: 0 !important; border: 0 !important; gap: 16px !important; margin-top: 16px !important; }
html body #betting-workspace #tabs-area .number-entry-card.quick-bet-form > * { margin-top: 0 !important; margin-bottom: 0 !important; }
html body #betting-workspace #tabs-area .number-entry-card.quick-bet-form .pending-panel.quick-number-presets { display: block !important; border-color: var(--bet-line) !important; background: var(--bet-soft) !important; }
html body #betting-workspace #tabs-area .pending-panel__heading { display: flex !important; width: 100% !important; }
html body #betting-workspace #tabs-area .pending-panel__heading > div { display: flex !important; }
html body #betting-workspace #tabs-area .pending-panel__clear { color: var(--bet-red) !important; min-width: 0 !important; width: auto !important; }
/* Grow with every selected number. Normal document flow moves the number /
 * price inputs down; no inner scrolling, clipping or selection truncation. */
html body #betting-workspace #tabs-area .pending-panel__numbers {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}
html body #betting-workspace #quick-bet-options { border: 0 !important; padding: 0 !important; background: transparent !important; }
html body #betting-workspace .hhlott-section__header { flex-wrap: wrap !important; }
html body #betting-workspace .hhlott-section__title { flex-wrap: wrap; }
html body #betting-workspace :is(.hhlott-market-badge,.btn-refresh-hhlott) { flex-shrink: 0; white-space: nowrap; }
html body #betting-workspace #hhlott-sync-status { font-size: 10px !important; }
/* Family accents are inherited ONLY by the left column. The approved right
 * column continues to use the unchanged blue / white workbench palette. */
html body #betting-workspace .quick-bet-left {
    --bet-blue: var(--lottery-family-action, var(--color-lottery-other-action));
    --bet-blue-line: var(--lottery-family-rule, var(--color-lottery-other-rule));
    --bet-blue-soft: var(--lottery-family-surface, var(--color-lottery-other-surface));
    --bet-soft: var(--bet-blue-soft);
    --bet-family-emphasis: color-mix(in oklch, var(--bet-blue-soft) 84%, var(--bet-blue-line));
}
html body #betting-workspace .quick-bet-left :is(.quick-bet-header, #tabs-area.quick-bet-entry) {
    background: var(--bet-blue-soft) !important;
    border-color: var(--bet-blue-line) !important;
}
html body #betting-workspace .quick-bet-left .quick-bet-market { color: var(--bet-blue) !important; }
@media(min-width: 701px) and (max-width: 1024px) {
    html body #betting-workspace { --bet-pad: 12px; --bet-gap: 12px; }
    html body #betting-workspace #tabs-area .game-tabs button { font-size: 12px !important; min-height: 34px !important; padding: 6px 8px !important; }
    html body #betting-workspace .quick-bet-market { font-size: 13px !important; }
    html body #betting-workspace .quick-bet-header__right { gap: 8px !important; }
}
@media(max-width: 700px) {
    html body #betting-workspace { --bet-pad: 12px; --bet-gap: 12px; }
    html body #betting-workspace #tabs-area .game-tabs button { padding: 8px !important; min-height: 40px !important; }
    html body #betting-workspace .quick-bet-header { min-height: 104px !important; }
    html body #betting-workspace .quick-bet-header__left { min-width: 0 !important; flex: 1 1 auto !important; }
    html body #betting-workspace .quick-bet-title-row { gap: 8px !important; }
    html body #betting-workspace .quick-bet-title-row h1 { white-space: nowrap; font-size: 16px !important; }
    html body #betting-workspace .quick-bet-market { font-size: 12px !important; }
    html body #betting-workspace .quick-bet-market__star { flex-shrink: 0; }
}
/* The receipt / thank-you block intentionally uses the original style.css.
 * Hide only its empty placeholder container; populated bills remain visible. */
html body #betting-workspace #bill-capture-content > .quick-bet-list:has(.cart-list__empty) { display: none !important; }
/* Keep the original compact receipt typography at desktop CSS pixel sizes. */
html body #betting-workspace #game-footer .summary-panel__card { padding: 20px 4px 4px !important; }
html body #betting-workspace #game-footer .summary-panel__market p { font-size: 14px !important; line-height: 1.35 !important; }
html body #betting-workspace #game-footer .summary-panel__market h2 { font-size: 18px !important; font-weight: 400 !important; }
@media(prefers-reduced-motion:reduce) { html body #betting-workspace * { transition: none !important; animation: none !important; } }