/* ==========================================================
   04889dh · AI 预测页（ai.html）
   仅补充 style.css 中未覆盖的 AI 页专属样式
   ========================================================== */

/* hidden 属性优先于本页的 display:flex 布局 */
[hidden] {
    display: none !important;
}

/* ---------------- 顶部会员状态 ---------------- */

.ai-user {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-2);
}

.ai-user b {
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.ai-user button {
    font-size: 13px;
    color: var(--text-3);
}

.ai-user button:hover {
    color: var(--red);
}

/* ---------------- 期号选择 ---------------- */

.ai-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    margin-top: 10px;
}

.ai-bar label {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--text-2);
}

.ai-select {
    flex: 1;
    min-width: 0;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0 10px;
    font-size: 13px;
    color: var(--text);
    background: #fafafa;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 26px;
}

.ai-select:focus {
    border-color: var(--red);
    background-color: #fff;
}

.ai-bar-note {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-3);
}

/* ---------------- 分类说明 ---------------- */

.ai-cat-desc {
    padding: 9px 11px;
    margin-top: 8px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.7;
}

.ai-cat-desc b {
    color: var(--red);
    font-weight: 700;
}

.ai-cat-desc .ai-cat-meta {
    display: block;
    margin-top: 2px;
    color: var(--text-3);
}

/* ---------------- 价格与操作栏 ---------------- */

.ai-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    margin-top: 10px;
}

.ai-action-left {
    min-width: 0;
}

.ai-action-price {
    font-size: 19px;
    font-weight: 800;
    color: var(--red);
    line-height: 1.2;
}

.ai-action-price.free {
    color: var(--green);
}

.ai-action-note {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-3);
}

.ai-btn {
    height: 38px;
    padding: 0 20px;
    border-radius: 19px;
    background: var(--red);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.ai-btn:disabled {
    opacity: .55;
    cursor: default;
}

.ai-btn.ghost {
    background: #f4f4f6;
    color: var(--text-2);
}

.ai-btn.outline {
    background: #fff;
    color: var(--red);
    border: 1px solid var(--red);
}

.ai-btn.block {
    display: block;
    width: 100%;
    margin-top: 12px;
}

.ai-btn.right {
    margin-left: auto;
}

/* ---------------- 弹窗表单 ---------------- */

.ai-field {
    margin-bottom: 10px;
    text-align: left;
}

.ai-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-2);
}

.ai-field input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 11px;
    font-size: 14px;
    outline: none;
    background: #fafafa;
}

.ai-field input:focus {
    border-color: var(--red);
    background: #fff;
}

.ai-modal-ops {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.ai-modal-ops .ai-btn {
    flex: 1;
}

.ai-msg {
    min-height: 18px;
    font-size: 12px;
    color: var(--red);
    text-align: left;
}

.ai-msg.ok {
    color: var(--green);
}

.ai-modal-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.ai-modal-tabs button {
    flex: 1;
    height: 30px;
    border-radius: 15px;
    background: #f4f4f6;
    color: var(--text-2);
    font-size: 13px;
}

.ai-modal-tabs button.active {
    background: var(--red-soft);
    color: var(--red);
    font-weight: 600;
}

/* ---------------- 记录与空态 ---------------- */

.ai-empty {
    padding: 26px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
}

.ai-load {
    padding: 26px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
}

.ai-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-3);
}

.ai-pager button {
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    background: #fff;
    color: var(--text-2);
    font-size: 12px;
    box-shadow: var(--shadow);
}

.ai-pager button:disabled {
    opacity: .5;
}

/* ---------------- 预测个数选择 ---------------- */

.ai-pick {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    margin-top: 10px;
}

.ai-pick-label {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--text-2);
    line-height: 28px;
}

.ai-pick-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.ai-pick-opts button {
    min-width: 30px;
    height: 28px;
    padding: 0 6px;
    border-radius: 14px;
    background: #f4f4f6;
    color: var(--text-2);
    font-size: 13px;
    line-height: 28px;
    text-align: center;
}

.ai-pick-opts button.active {
    background: var(--red);
    color: #fff;
    font-weight: 700;
}

/* ---------------- 结果来源标记 ---------------- */

.ai-result-source {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(28, 175, 106, .12);
    color: var(--green);
    white-space: nowrap;
}

/* ---------------- 预测依据 ---------------- */

.ai-basis {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: var(--radius);
    background: #fff8f6;
    border: 1px solid var(--red-soft);
}

.ai-basis-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
    margin-bottom: 4px;
}

.ai-basis-line {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.8;
}

/* ---------------- 支付提示 ---------------- */

.ai-paybar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    margin-top: 10px;
    border-radius: var(--radius);
    background: rgba(255, 205, 133, .22);
    color: #8a5a00;
    font-size: 12px;
    line-height: 1.6;
}

.ai-paybar b {
    font-weight: 700;
}

/* ---------------- 扫码支付 ---------------- */

.qrcode-box {
    text-align: center;
    padding: 4px 0 12px;
}

.qrcode-img {
    display: block;
    width: 190px;
    max-width: 70%;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 6px;
}

.qrcode-tip {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.7;
}

.qrcode-form {
    margin-top: 10px;
}

.qrcode-form .ai-field {
    margin-bottom: 10px;
}

.qrcode-form input[type="file"] {
    font-size: 13px;
    color: var(--text-2);
}

.qrcode-form input[type="file"]::file-selector-button {
    margin-right: 8px;
    padding: 5px 12px;
    border: 0;
    border-radius: 14px;
    background: var(--red);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}