*{box-sizing:border-box}body{margin:0;background:#090909;color:#eee;font-family:Arial,"Noto Sans TC",sans-serif}.topbar{height:62px;padding:0 max(4vw,24px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #222;background:#0c0c0c}.topbar a{color:#ddd;text-decoration:none}.brand{font-size:12px;letter-spacing:3px}.topbar nav{display:flex;gap:20px;font-size:13px}.page{width:min(1120px,92vw);margin:auto;padding:54px 0 80px}.narrow{width:min(680px,92vw)}.page-head{margin-bottom:28px}.eyebrow{display:block;font-size:10px;letter-spacing:3px;opacity:.35;margin-bottom:8px}h1{font-size:32px;font-weight:500;margin:0}p{opacity:.5}.hidden{display:none!important}.empty{padding:70px 24px;text-align:center;border:1px solid #242424;background:#0d0d0d;opacity:.45}.empty.compact{padding:28px}.channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}.channel-card{display:flex;align-items:center;gap:15px;padding:18px;border:1px solid #252525;background:#0e0e0e;color:#eee;text-decoration:none}.channel-card:hover{border-color:#555;background:#121212}.channel-card img,.account-row img,.channel-header img{width:58px;height:58px;border-radius:50%;object-fit:cover;background:#161616}.channel-card strong,.channel-card span{display:block}.channel-card span{font-size:12px;opacity:.4;margin-top:5px}.panel{padding:22px;border:1px solid #252525;background:#0d0d0d;display:grid;gap:10px}label{font-size:12px;opacity:.5}input,button{font:inherit}input{width:100%;padding:12px 13px;background:#111;border:1px solid #333;color:#eee;outline:none}input:focus{border-color:#666}button{padding:11px 14px;background:#171717;color:#eee;border:1px solid #333;cursor:pointer}button:hover{background:#222}button:disabled{opacity:.4;cursor:default}.inline{display:flex;gap:8px}.message{min-height:22px;font-size:13px;margin-top:4px}.message.error{color:#ff9d9d}.message.success{color:#b7e2bf}.account-list{display:grid;gap:8px;margin-top:18px}.account-row{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #252525;background:#0d0d0d}.account-info{flex:1}.account-info strong,.account-info span{display:block}.account-info span{opacity:.4;font-size:12px;margin-top:4px}.danger{border-color:#553030}.channel-header{display:flex;align-items:center;gap:18px;margin-bottom:34px}.channel-header h1{margin-top:0}.channel-header p{margin:5px 0 0}.stats-layout{display:grid;grid-template-columns:280px 1fr;border:1px solid #252525;min-height:460px}.reward-sidebar{border-right:1px solid #252525;background:#0c0c0c}.section-title{padding:15px 18px;border-bottom:1px solid #252525;font-size:12px;letter-spacing:1px;opacity:.55}.reward-list{display:grid}.reward-item{border:0;border-bottom:1px solid #1d1d1d;text-align:left;padding:15px 18px;background:transparent}.reward-item strong,.reward-item span{display:block}.reward-item span{font-size:11px;opacity:.35;margin-top:5px}.reward-item.active{background:#eee;color:#111}.stats-content{background:#0e0e0e}.viewer-list{display:grid}.viewer-item{border-bottom:1px solid #202020}.viewer-summary{width:100%;display:flex;justify-content:space-between;border:0;background:transparent;text-align:left;padding:16px 18px}.viewer-summary span{font-size:12px;opacity:.45}.viewer-details{padding:0 18px 14px}.redeem-detail{display:grid;grid-template-columns:1fr auto;gap:6px 18px;padding:10px 0;border-top:1px solid #1d1d1d;font-size:13px}.redeem-detail time{opacity:.4;font-size:12px}.redeem-detail small{grid-column:1/-1;opacity:.45}@media(max-width:760px){.stats-layout{grid-template-columns:1fr}.reward-sidebar{border-right:0;border-bottom:1px solid #252525}.inline{display:grid}.topbar nav{gap:12px}.channel-grid{grid-template-columns:1fr}}
.time-filter {
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid #252525;
    background: #0d0d0d;
}

.time-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.time-filter-head strong {
    font-size: 15px;
    font-weight: 500;
}

.time-filter-head button {
    padding: 7px 12px;
    font-size: 12px;
}

.time-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    font-size: 12px;
    opacity: .55;
}

.range-slider {
    position: relative;
    height: 32px;
    margin-top: 5px;
}

.range-slider input[type="range"] {
    position: absolute;
    left: 0;
    top: 5px;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
    appearance: none;
}

.range-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
    background: #333;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid #0d0d0d;
    background: #eee;
    appearance: none;
    pointer-events: auto;
    cursor: pointer;
}

.range-slider input[type="range"]::-moz-range-track {
    height: 3px;
    background: #333;
}

.range-slider input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #0d0d0d;
    background: #eee;
    pointer-events: auto;
    cursor: pointer;
}

.stats-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #252525;
}

.stats-toolbar .section-title {
    flex: 1;
    border-bottom: 0;
}

.stats-actions {
    display: flex;
    gap: 6px;
    padding-right: 14px;
}

.stats-actions button {
    padding: 7px 11px;
    font-size: 12px;
}

.stats-actions button:disabled {
    opacity: .25;
    cursor: default;
}

.copy-message {
    min-height: 24px;
    padding: 5px 18px 0;
    font-size: 12px;
    opacity: .55;
}

.channel-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.channel-head-row .channel-header {
    flex: 1;
}


/* ============================================================
   Lottery Status
============================================================ */

.lottery-section {
    margin-bottom: 20px;
    border: 1px solid #252525;
    background: #0d0d0d;
}

.lottery-section-title {
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid #252525;
}

.lottery-status-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 240px;
}

.lottery-list {
    border-right: 1px solid #252525;
}

.lottery-list-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid #202020;
    background: transparent;
    text-align: left;
}

.lottery-list-item:hover {
    background: #141414;
}

.lottery-list-item.active {
    background: #191919;
}

.lottery-list-item strong {
    font-size: 13px;
}

.lottery-list-item span {
    font-size: 11px;
    opacity: .5;
}

.lottery-status-content {
    min-width: 0;
}

.lottery-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #202020;
}

.lottery-status-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

#lotteryStatusMeta {
    font-size: 11px;
    opacity: .45;
}

.lottery-prize-summary {
    padding: 12px 18px;
    border-bottom: 1px solid #202020;
}

.lottery-total {
    margin-bottom: 8px;
    font-size: 12px;
    opacity: .55;
}

.lottery-prize-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 5px 0;
    font-size: 12px;
}

.lottery-results {
    padding: 0 18px;
}

.lottery-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #202020;
}

.lottery-result-row > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lottery-result-row span {
    font-size: 11px;
    opacity: .45;
}


/* ============================================================
   Lottery Modal
============================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .78);
}

.modal-box {
    width: min(420px, 100%);
    padding: 22px;
    border: 1px solid #303030;
    background: #101010;
}

.modal-box h2 {
    margin: 5px 0 18px;
    font-size: 18px;
}

.modal-box input {
    width: 100%;
    box-sizing: border-box;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 15px;
}


/* ============================================================
   Lottery Setup
============================================================ */

.lottery-setup-page {
    max-width: 900px;
}

.page-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.lottery-form {
    padding: 20px;
}

.form-group {
    margin-bottom: 28px;
}

.form-group > label,
.form-group-head label {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 600;
}

.form-group select,
.form-group input {
    box-sizing: border-box;
    width: 100%;
}

.form-hint {
    margin-top: 7px;
    font-size: 11px;
    opacity: .5;
}

.form-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.form-group-head label {
    margin: 0;
}

.prize-table {
    margin-top: 10px;
    border: 1px solid #252525;
}

.prize-row {
    display: grid;
    grid-template-columns: 1fr 130px 70px;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #202020;
}

.prize-row:last-child {
    border-bottom: 0;
}

.prize-header {
    font-size: 11px;
    opacity: .45;
}

.remove-prize {
    font-size: 11px;
}

.lottery-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid #252525;
}

.lottery-summary > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px;
}

.lottery-summary > div + div {
    border-left: 1px solid #252525;
}

.lottery-summary span {
    font-size: 11px;
    opacity: .45;
}

.lottery-summary strong {
    font-size: 22px;
}

.primary-button {
    width: 100%;
    padding: 12px;
}

.hidden {
    display: none !important;
}

@media (max-width: 700px) {
    .lottery-status-layout {
        grid-template-columns: 1fr;
    }

    .lottery-list {
        border-right: 0;
        border-bottom: 1px solid #252525;
    }

    .prize-row {
        grid-template-columns: 1fr 90px 60px;
    }

    .channel-head-row {
        flex-direction: column;
    }
}