/* ================================================================
   菜刀客在线工具页 · lucky-draw.html 私有样式
   需在 /css/common.css 之后加载。
   ================================================================ */

/* ---- 说明横幅 ---- */
.draw-note {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.draw-note code {
    background: #e0e7ff;
    border-radius: 4px;
    padding: 0 4px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* ---- 参与人员 ---- */
textarea.form-control {
    resize: vertical;
    min-height: 120px;
    line-height: 1.7;
}

.field-tip {
    font-size: 12px;
    color: #9ca3af;
}

/* ---- 奖项设置 ---- */
.prize-head {
    display: grid;
    grid-template-columns: 1fr 82px 92px 34px;
    gap: 8px;
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 6px;
}

.prize-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prize-row {
    display: grid;
    grid-template-columns: 1fr 82px 92px 34px;
    gap: 8px;
    align-items: center;
}

.prize-row .input-wrap {
    flex: 1;
}

.prize-row .form-control {
    padding: 7px 10px;
    font-size: 13px;
}

.prize-row .input-wrap .suffix {
    right: 9px;
    font-size: 11px;
}

.prize-row .p-del {
    padding: 6px 0;
    justify-content: center;
    color: #9ca3af;
    line-height: 1;
}

.prize-row .p-del:hover {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.add-prize {
    margin-top: 8px;
    width: 100%;
    justify-content: center;
    border-style: dashed;
}

.prob-tip {
    font-size: 12px;
    line-height: 1.7;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 10px;
}

.prob-tip b {
    color: #4338ca;
}

.prob-tip.warn {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.prob-tip.warn b {
    color: #b45309;
}

.opt-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    user-select: none;
    line-height: 1.6;
}

.opt-check input {
    accent-color: #667eea;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ---- 抽奖舞台 ---- */
.draw-stage {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    color: #ffffff;
    padding: 26px 20px;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    overflow: hidden;
}

.draw-stage .ds-prize {
    font-size: 14px;
    opacity: 0.9;
    min-height: 20px;
    transition: color 0.2s;
}

.draw-stage .ds-prize.win {
    color: #fde68a;
    font-weight: 700;
}

.draw-stage .ds-name {
    font-size: clamp(26px, 5vw, 44px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 2px;
    word-break: break-word;
}

.draw-stage .ds-name.win {
    animation: ds-pop 0.5s ease;
    text-shadow: 0 2px 12px rgba(253, 230, 138, 0.7);
}

.draw-stage .ds-sub {
    font-size: 12px;
    opacity: 0.82;
}

@keyframes ds-pop {
    0% { transform: scale(0.7); opacity: 0.3; }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}

.draw-stage.rolling .ds-name {
    opacity: 0.85;
}

/* ---- 抽奖按钮 ---- */
.draw-btn-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- 结果表 ---- */
.winner-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.winner-table th,
.winner-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
}

.winner-table th {
    background: #f9fafb;
    color: #374151;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.winner-table tr:hover td {
    background: #fafbff;
}

.winner-table td.idx {
    color: #9ca3af;
    width: 52px;
}

.winner-table td.prize {
    color: #4338ca;
    font-weight: 600;
    white-space: nowrap;
}

.winner-table td.name {
    color: #374151;
}

.winner-table td.time {
    color: #9ca3af;
    font-size: 12px;
}

/* ---- 小屏适配 ---- */
@media (max-width: 600px) {
    .prize-head {
        grid-template-columns: 1fr 66px 76px 30px;
        gap: 6px;
    }

    .prize-row {
        grid-template-columns: 1fr 66px 76px 30px;
        gap: 6px;
    }

    .draw-stage {
        padding: 20px 14px;
        min-height: 150px;
    }

    .winner-table th,
    .winner-table td {
        padding: 7px 8px;
    }
}