/* =====================================================================
 * 工具1 · 彩票选号计算器 lottery-number-picker.css
 * 独立设计：摇奖机 + 号码球母题；主色彩票红 #c8102e + 摇奖金。
 * 深色适配走 [data-theme="dark"] 变量覆盖，主题切换沿用导航栏 #themeToggle。
 * ===================================================================== */

.hc-lot {
    --hc-a: #c8102e;
    --hc-a-soft: #fbe4e7;
    --lot-gold: #b8860b;
    --lot-gold-soft: #f7ecd4;
    --lot-ball-r: #c8102e;
    --lot-ball-b: #1d5cc4;
}

/* 首屏构图：左文右「摇奖机」 */
.hc-lot .lot-hero {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 34px;
    align-items: center;
    padding-top: 44px;
}
.hc-lot .hc-hero h1::after {
    content: "";
    display: block;
    width: 64px; height: 5px;
    margin-top: 16px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--hc-a), var(--lot-gold));
}

/* 摇奖机 */
.hc-lot .lot-machine { position: relative; padding: 10px 0 46px; }
.hc-lot .lot-drum {
    position: relative;
    width: min(100%, 300px);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    border: 10px solid #2a2f38;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 46%),
        linear-gradient(160deg, #eef1f6, #cfd6e2);
    box-shadow: inset 0 -18px 30px rgba(24,32,48,.16), 0 18px 44px rgba(24,32,48,.16);
    overflow: hidden;
}
.hc-lot .lot-drum::before {
    content: "";
    position: absolute; inset: 8px;
    border-radius: 50%;
    border: 2px dashed rgba(42,47,56,.22);
}
.hc-lot .lot-orb {
    position: absolute;
    left: calc(12% + var(--i) * 13%);
    top: calc(16% + (var(--i) % 3) * 26%);
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff;
    font-family: var(--hc-serif);
    font-size: 15px; font-weight: 700;
    box-shadow: inset -4px -6px 10px rgba(0,0,0,.28), inset 3px 4px 8px rgba(255,255,255,.4), 0 4px 10px rgba(24,32,48,.22);
    animation: lot-bounce 2.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -.42s);
}
.hc-lot .lot-orb--r { background: radial-gradient(circle at 32% 28%, #e86a7c, var(--lot-ball-r) 62%); }
.hc-lot .lot-orb--b { background: radial-gradient(circle at 32% 28%, #6da4ec, var(--lot-ball-b) 62%); }
@keyframes lot-bounce {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    30% { transform: translate(9px, -15px) rotate(38deg); }
    62% { transform: translate(-7px, 11px) rotate(-26deg); }
}
.hc-lot .lot-chute {
    width: 26px; height: 34px;
    margin: 0 auto;
    background: linear-gradient(90deg, #2a2f38 0 8px, transparent 8px calc(100% - 8px), #2a2f38 calc(100% - 8px));
}
.hc-lot .lot-capsule {
    width: 54px; height: 26px;
    margin: 0 auto;
    border-radius: 13px;
    background: linear-gradient(90deg, var(--lot-ball-r) 50%, var(--lot-ball-b) 50%);
    box-shadow: 0 4px 12px rgba(24,32,48,.3);
    animation: lot-drop 2.6s ease-in infinite;
}
@keyframes lot-drop {
    0%, 88% { transform: translateY(-46px); opacity: 0; }
    92% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hc-lot .lot-orb, .hc-lot .lot-capsule { animation: none; }
}

/* 玩法页签 */
.hc-lot .lot-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hc-lot .lot-tab {
    padding: 8px 18px;
    border: 1px solid var(--hc-line);
    border-radius: 999px;
    background: var(--hc-card-2);
    color: var(--hc-ink-2);
    font-family: inherit; font-size: 13.5px; font-weight: 650;
    cursor: pointer;
    transition: all .18s;
}
.hc-lot .lot-tab:hover { border-color: var(--hc-a); color: var(--hc-a); }
.hc-lot .lot-tab.is-on {
    background: var(--hc-a);
    border-color: var(--hc-a);
    color: #fff;
    box-shadow: 0 5px 14px rgba(200,16,46,.26);
}

/* 投注方式行 */
.hc-lot .lot-mode-row {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--hc-line-2);
    border-radius: var(--hc-r-sm);
    background: var(--hc-card-2);
    margin-bottom: 18px;
}
.hc-lot .lot-mode-row .hc-field { min-width: 170px; }
.hc-lot .lot-zone-price {
    margin-left: auto;
    font-size: 13px; color: var(--hc-muted);
    padding: 7px 13px;
    border: 1px dashed var(--hc-line);
    border-radius: 999px;
}
.hc-lot .lot-zone-price b { font-family: var(--hc-serif); font-size: 19px; color: var(--hc-a); margin: 0 2px; }

/* 号码球 */
.hc-lot .lot-zone { margin-bottom: 18px; }
.hc-lot .lot-zone-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    font-size: 13px; font-weight: 650; color: var(--hc-ink-2);
    margin-bottom: 10px;
}
.hc-lot .lot-zone-sel { font-size: 12px; font-weight: 500; color: var(--hc-muted); font-variant-numeric: tabular-nums; }
.hc-lot .lot-balls { display: flex; flex-wrap: wrap; gap: 7px; }
.hc-lot .lot-ball {
    width: 37px; height: 37px;
    display: grid; place-items: center;
    border: 2px solid var(--hc-line);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--hc-card), var(--hc-card-2) 70%);
    color: var(--hc-ink-2);
    font-family: var(--hc-serif); font-size: 13.5px; font-weight: 700;
    cursor: pointer;
    transition: transform .14s, box-shadow .14s, background .14s, border-color .14s, color .14s;
    user-select: none;
}
.hc-lot .lot-balls--sm .lot-ball { width: 33px; height: 33px; font-size: 12.5px; }
.hc-lot .lot-ball:hover { transform: translateY(-2px); border-color: var(--hc-a); color: var(--hc-a); }
.hc-lot .lot-ball.is-on {
    border-color: var(--lot-ball-r);
    background: radial-gradient(circle at 32% 28%, #e86a7c, var(--lot-ball-r) 64%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(200,16,46,.3);
}
.hc-lot .lot-balls--blue .lot-ball.is-on {
    border-color: var(--lot-ball-b);
    background: radial-gradient(circle at 32% 28%, #6da4ec, var(--lot-ball-b) 64%);
    box-shadow: 0 4px 10px rgba(29,92,196,.3);
}
.hc-lot .lot-ball.is-dan {
    border-color: var(--lot-gold);
    background: radial-gradient(circle at 32% 28%, #e9c368, var(--lot-gold) 64%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(184,134,11,.32);
}
.hc-lot .lot-tip { margin: 8px 0 0; font-size: 12px; color: var(--lot-gold); }
.hc-lot .lot-positions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hc-lot .lot-pos > em { display: block; font-style: normal; font-size: 12px; color: var(--hc-muted); margin-bottom: 8px; }

/* 按钮 / 机选 */
.hc-lot .lot-pickn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--hc-ink-2); }
.hc-lot .lot-pickn input { width: 72px !important; }
.hc-lot .lot-filter { margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--hc-line); border-radius: var(--hc-r-sm); }
.hc-lot .lot-filter-body { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; align-items: flex-end; }
.hc-lot .lot-filter-body .hc-field { min-width: 130px; }
.hc-lot .lot-pickout { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--hc-line-2); border-radius: var(--hc-r-sm); background: var(--hc-card-2); }
.hc-lot .lot-pickout-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 13.5px; }
.hc-lot .lot-pickout-head span { color: var(--hc-muted); font-size: 12px; }
.hc-lot .lot-pick-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; font-size: 12.5px; color: var(--hc-muted); }
.hc-lot .lot-pick-line .lot-ball { cursor: default; width: 31px; height: 31px; font-size: 12px; }
.hc-lot .lot-pick-line .lot-ball:hover { transform: none; color: var(--hc-ink-2); border-color: var(--hc-line); }
.hc-lot .lot-pick-line .lot-plus { color: var(--hc-a); font-weight: 700; margin: 0 2px; }

/* 批量区 */
.hc-lot .lot-batch-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; padding: 18px 24px 24px; }
.hc-lot .lot-batch-grid textarea { font-family: Consolas, Monaco, monospace; font-size: 13px; line-height: 1.9; }

/* 概率表强调 */
.hc-lot #lotProbBody td:nth-child(2) { font-family: var(--hc-serif); font-weight: 700; color: var(--hc-a); font-variant-numeric: tabular-nums; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .hc-lot .lot-hero { grid-template-columns: 1fr; gap: 18px; padding-top: 30px; }
    .hc-lot .lot-machine { max-width: 250px; margin: 0 auto; padding-bottom: 34px; }
    .hc-lot .lot-batch-grid { grid-template-columns: 1fr; padding: 14px 16px 18px; }
    .hc-lot .lot-positions { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .hc-lot .lot-ball { width: 33px; height: 33px; font-size: 12.5px; }
    .hc-lot .lot-zone-price { margin-left: 0; }
}

/* ---------- 深色主题 ---------- */
:root[data-theme="dark"] .hc-lot {
    --hc-a: #ef5a72;
    --hc-a-soft: #3a1a20;
    --lot-gold: #d9a94a;
    --lot-gold-soft: #332917;
    --lot-ball-r: #d83550;
    --lot-ball-b: #3f7bd9;
}
:root[data-theme="dark"] .hc-lot .lot-drum {
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.16), rgba(255,255,255,0) 46%), linear-gradient(160deg, #2b303c, #191d26);
    border-color: #0e1118;
    box-shadow: inset 0 -18px 30px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .hc-lot .lot-chute { background: linear-gradient(90deg, #4a5162 0 8px, transparent 8px calc(100% - 8px), #4a5162 calc(100% - 8px)); }
:root[data-theme="dark"] .hc-lot .lot-tab { background: var(--hc-card-2); }
:root[data-theme="dark"] .hc-lot .lot-tab.is-on { color: #1a0a0d; box-shadow: 0 5px 14px rgba(0,0,0,.35); }
:root[data-theme="dark"] .hc-lot .lot-ball { background: radial-gradient(circle at 32% 28%, #242c3a, #1a202b 70%); color: #b9c2d2; }
:root[data-theme="dark"] .hc-lot .lot-ball:hover { color: var(--hc-a); }
:root[data-theme="dark"] .hc-lot .lot-ball.is-on { background: radial-gradient(circle at 32% 28%, #e86a7c, var(--lot-ball-r) 64%); color: #fff; }
:root[data-theme="dark"] .hc-lot .lot-balls--blue .lot-ball.is-on { background: radial-gradient(circle at 32% 28%, #6da4ec, var(--lot-ball-b) 64%); }
:root[data-theme="dark"] .hc-lot .lot-ball.is-dan { background: radial-gradient(circle at 32% 28%, #e9c368, var(--lot-gold) 64%); color: #241a06; }
:root[data-theme="dark"] .hc-lot .lot-zone-price b { color: var(--hc-a); }