/* Event cards */
.he-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #1b2838 60%, color-mix(in srgb, var(--he-color) 15%, #1b2838));
    border: 1px solid #2a475e;
    border-left: 3px solid var(--he-color);
    border-radius: 6px;
    padding: 8px 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap
}

.he-card:hover {
    border-color: var(--he-color);
    text-decoration: none;
    background: linear-gradient(135deg, #1b2838 40%, color-mix(in srgb, var(--he-color) 25%, #1b2838))
}

.he-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--he-color) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--he-color)
}

.he-body {
    display: flex;
    flex-direction: column;
    gap: 1px
}

.he-name {
    color: #c7d5e0;
    font-size: 0.8125rem;
    font-weight: 600
}

.he-meta {
    color: #8f98a0;
    font-size: 0.6875rem
}

.he-live {
    color: #e05555;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.5px
}

/* Sidebar events */
.sb-events {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.sb-events .sb-title {
    margin-bottom: 4px
}

/* Sidebar widgets */
.sb-widget {
    background: #1b2838;
    border: 1px solid #2a475e;
    border-radius: 8px;
    padding: 16px
}

.sb-title {
    color: #c7d5e0;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Rajdhani', sans-serif
}

.sb-title i {
    color: #c5a336
}

/* Search */
.sb-search-wrap {
    position: relative
}

.sb-search {
    width: 100%;
    background: #0e1c2a;
    border: 1px solid #1a9fff;
    border-radius: 4px;
    color: #c7d5e0;
    padding: 9px 12px;
    font-size: 0.8125rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box
}

.sb-search::placeholder {
    color: #8f98a0;
    opacity: 1
}

.sb-search:focus {
    border-color: #66c0f4
}

.sb-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0e1c2a;
    border: 1px solid #2a475e;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 50
}

.sb-dropdown.open {
    display: block
}

.sb-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid #1b2838
}

.sb-dropdown-item:hover {
    background: #1b2838
}

.sb-dropdown-item:last-child {
    border-bottom: none
}

.sb-dropdown-img {
    width: 40px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0
}

.sb-dropdown-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: #c7d5e0
}

.sb-dropdown-price {
    color: #a4d007;
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0
}

.sb-dropdown-empty {
    padding: 12px;
    color: #556a7e;
    font-size: 0.8rem;
    text-align: center
}

/* Selected game */
.sb-selected {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #2a475e
}

.sb-game-name {
    color: #fff;
    font-weight: bold;
    font-size: 0.875rem;
    margin-bottom: 6px;
    font-family: 'Rajdhani', sans-serif
}

.sb-chart-status {
    font-size: 0.8rem;
    margin-bottom: 6px
}

.sb-chart-status.in-chart {
    color: #a4d007
}

.sb-chart-status.not-in-chart {
    color: #8f98a0
}

.sb-chart-price {
    color: #a4d007;
    font-weight: bold
}

.sb-steam-link {
    display: inline-block;
    font-size: 0.75rem;
    color: #66c0f4;
    margin-bottom: 12px
}

/* Sidebar form */
.sb-form {
    margin-top: 8px
}

.sb-input {
    width: 100%;
    background: #0e1c2a;
    border: 1px solid #2a475e;
    border-radius: 4px;
    color: #c7d5e0;
    padding: 8px 12px;
    font-size: 0.8125rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box
}

.sb-input:focus {
    border-color: #66c0f4
}

.sb-price-row {
    margin-top: 10px
}

.sb-price-row label {
    display: block;
    color: #8f98a0;
    font-size: 0.75rem;
    margin-bottom: 4px
}

.sb-price-input {
    display: flex;
    align-items: center
}

.sb-currency {
    background: #0e1c2a;
    border: 1px solid #2a475e;
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 8px 10px;
    color: #8f98a0;
    font-size: 0.8125rem
}

.sb-price-input .sb-input {
    border-radius: 0 4px 4px 0
}

.sb-submit {
    width: 100%;
    margin-top: 12px;
    padding: 9px 16px;
    background: #1a9fff;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s
}

.sb-submit:hover {
    background: #47b4ff
}

.sb-submit:disabled {
    background: #2a475e;
    color: #556a7e;
    cursor: not-allowed
}

.sb-status {
    margin-top: 8px;
    font-size: 0.75rem;
    text-align: center;
    min-height: 1em
}

.sb-status.success {
    color: #a4d007
}

.sb-status.error {
    color: #e05555
}

/* Alerts list */
.sb-alerts-list {
    margin-top: 14px
}

.sb-alerts-list:empty {
    display: none
}

.sb-alerts-heading {
    color: #8f98a0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-top: 10px;
    border-top: 1px solid #2a475e
}

.sb-alert-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.8rem
}

.sb-alert-item i {
    color: #c5a336;
    font-size: 0.7rem
}

.sb-alert-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c7d5e0
}

.sb-alert-price {
    color: #a4d007;
    white-space: nowrap;
    font-size: 0.75rem
}

.sb-alert-remove {
    color: #556a7e;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 4px;
    flex-shrink: 0
}

.sb-alert-remove:hover {
    color: #e05555
}

/* Boosteroid promo */
.sb-boosteroid {
    display: block;
    text-decoration: none;
    color: #c7d5e0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid #2a475e;
    border-radius: 8px;
    padding: 16px;
    transition: border-color 0.2s, transform 0.2s
}

.sb-boosteroid:hover {
    border-color: #7b68ee;
    transform: translateY(-1px)
}

.bst-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px
}

.bst-logo {
    width: 24px;
    height: 24px
}

.bst-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px
}

.bst-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px
}

.bst-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #a8b8c8
}

.bst-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7b68ee, #4a9aca);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0
}

.bst-tagline {
    font-size: 0.7rem;
    color: #8f98a0;
    font-style: italic
}

/* Sidebar Humble Bundle (mobile only) */
.sb-humble {
    display: none;
    text-decoration: none;
    color: #c7d5e0;
    background: linear-gradient(135deg, #1b2838 0%, #2a1525 60%, #3d1a2a 100%);
    border-color: #4a2535;
    font-family: 'Rajdhani', sans-serif
}

.sb-humble:hover {
    border-color: #c9424d;
    text-decoration: none
}

.sb-humble-capsule {
    width: 100%;
    border-radius: 4px;
    display: block;
    margin-bottom: 10px
}

.sb-humble-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px
}

.sb-humble-meta span {
    font-size: 0.875rem;
    font-weight: 700;
    color: #c7d5e0
}

.sb-humble-meta .sb-humble-price {
    color: #c9424d
}

.sb-humble-meta .hb-timer {
    color: #c9424d
}

@media (max-width: 768px) {
    .sb-boosteroid { display: none }
    .sb-events { display: none }
    .sb-humble { display: block }
    .sb-humble .bst-header { align-items: flex-start; flex-direction: row-reverse }
}