/* ==========================================================
       🚀 QClaw 暗黑科技风 (Dark Mode + Orange Accents)
       ========================================================== */
    :root { 
        --bg-body: #0A0A0C; --card-bg: #141417; --text-main: #EDEDED; --text-sub: #A1A1AA; 
        --primary: #FF6A00; --primary-hover: #FF8533; --success: #22C55E; --danger: #EF4444; 
        --warning: #F59E0B; --purple: #A855F7; --border-color: #27272A; 
        --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; 
        --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-btn: 0 4px 16px rgba(255, 106, 0, 0.25);
    }
    
    body { margin: 0; padding: 40px 20px; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; background-color: var(--bg-body); background-image: radial-gradient(circle at 50% 0%, rgba(255, 106, 0, 0.05) 0%, transparent 70%); color: var(--text-main); min-height: 100vh; }
    .container { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
    .card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 28px 32px; box-shadow: var(--shadow-card); transition: border-color 0.3s; }
    .card:hover { border-color: #3F3F46; }
    .header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 24px 32px; gap: 16px; }
    .brand { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: #FFF; white-space: nowrap; flex-shrink: 0; }
    .brand span:last-child { font-size: 12px; color: var(--primary); border: 1px solid rgba(255, 106, 0, 0.3); background: rgba(255, 106, 0, 0.1); padding: 2px 8px; border-radius: 20px; font-weight: 800; }
    .header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .input-box { border: none; background: transparent; font-size: 14px; font-family: monospace; outline: none; width: 130px; font-weight: 600; color: var(--primary); }
    .input-box::placeholder { color: #52525B; font-weight: 400; }
    .badge-pill { background: #18181B; padding: 6px 16px; border-radius: 100px; font-size: 13px; color: var(--text-sub); display: flex; align-items: center; border: 1px solid var(--border-color); transition: all 0.3s; }
    .badge-pill:focus-within { background: #27272A; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.15); }
    /* 原本点击整块区域拉取数据的 CSS 类名保留，但去掉了 onclick 以免冲突 */
    .badge-blue { background: rgba(255, 106, 0, 0.1); color: var(--primary); font-weight: 600; cursor: default; border: 1px solid rgba(255, 106, 0, 0.2); }
    
    .btn { padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; border: 1px solid var(--border-color); cursor: pointer; background: #18181B; color: var(--text-main); transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; }
    .btn:hover { background: #27272A; border-color: #3F3F46; }
    .btn.primary { background: var(--primary); color: #141417; border: none; box-shadow: var(--shadow-btn); }
    .btn.primary:hover { background: var(--primary-hover); box-shadow: 0 6px 20px rgba(255, 106, 0, 0.4); }
    
    .btn-outline-green { color: var(--success); border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.05); }
    .btn-outline-green:hover { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.5); }
    .btn-outline-red { color: var(--danger); border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); }
    .btn-outline-red:hover { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.5); }
    
    .lang-select { padding: 7px 10px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; border: 1px solid var(--border-color); background: transparent; color: var(--text-sub); outline: none; cursor: pointer; }
    .lang-select option { background: var(--card-bg); color: var(--text-main); }

    .alert-box { background: linear-gradient(90deg, rgba(255, 106, 0, 0.08) 0%, rgba(255, 106, 0, 0.02) 100%); border: 1px solid rgba(255, 106, 0, 0.15); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); padding: 20px 28px; }
    .alert-box h3 { margin: 0 0 10px 0; font-size: 16px; color: var(--primary); font-weight: 700; }
    .alert-content { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-sub); }
    .alert-content p { margin: 0 0 10px; }
    .alert-content p:last-child { margin-bottom: 0; }
    .alert-content h1, .alert-content h2, .alert-content h3 { margin: 0 0 10px; color: var(--text-main); line-height: 1.35; }
    .alert-content ul, .alert-content ol { margin: 8px 0 8px 22px; padding: 0; }
    .alert-content a { color: var(--primary); text-decoration: none; border-bottom: 1px solid rgba(255,106,0,.35); }
    .alert-content strong, .alert-content b { color: var(--text-main); }
    
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .stat-card { padding: 28px; border-radius: var(--radius-lg); background: var(--card-bg); border: 1px solid var(--border-color); position: relative; overflow: hidden; }
    .stat-card::after { content: ''; position: absolute; right: -20px; bottom: -20px; width: 100px; height: 100px; border-radius: 50%; opacity: 0.1; filter: blur(20px); }
    .stat-card:nth-child(1)::after { background: var(--primary); } .stat-card:nth-child(2)::after { background: var(--purple); } .stat-card:nth-child(3)::after { background: var(--success); } .stat-card:nth-child(4)::after { background: var(--danger); }
    .stat-title { font-size: 14px; color: var(--text-sub); margin-bottom: 12px; font-weight: 600; }
    .stat-value { font-size: 40px; font-weight: 800; font-family: -apple-system, "DIN Alternate", sans-serif; line-height: 1; }
    .val-blue { color: var(--primary); } .val-purple { color: var(--purple); } .val-green { color: var(--success); } .val-red { color: var(--danger); }
    
    .queue-bar { display: flex; align-items: center; gap: 16px; padding: 20px 32px; border-radius: var(--radius-md); font-size: 15px; border: 1px solid rgba(255, 106, 0, 0.2); background: rgba(255, 106, 0, 0.05); color: var(--text-main); }
    .pulse-dot { width: 10px; height: 10px; background-color: var(--primary); border-radius: 50%; animation: pulse 1.5s infinite; box-shadow: 0 0 10px var(--primary); }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(255, 106, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); } }
    
    .tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; width: 100%; gap: 32px; }
    .tab { padding: 12px 0; font-size: 15px; font-weight: 500; color: var(--text-sub); cursor: pointer; border-bottom: 2px solid transparent; transition: 0.2s; }
    .tab:hover { color: var(--text-main); }
    .tab.active { color: var(--primary); border-bottom: 2px solid var(--primary); font-weight: 600; text-shadow: 0 0 10px rgba(255, 106, 0, 0.3); }
    
    .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; min-width: 800px; }
    th { color: var(--text-sub); font-weight: 600; padding: 16px 20px; border-bottom: 1px solid var(--border-color); background: #18181C; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
    th:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
    th:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
    td { padding: 20px; border-bottom: 1px solid var(--border-color); color: var(--text-main); }
    tr:hover td { background: rgba(255, 255, 255, 0.02); }
    
    .status-badge { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; border: 1px solid transparent; letter-spacing: 0.5px; }
    .status-badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 6px currentColor; }
    .badge-Pending { background: rgba(168, 85, 247, 0.1); color: var(--purple); border-color: rgba(168, 85, 247, 0.2); } .badge-Pending::before { background: var(--purple); }
    .badge-Running { background: rgba(255, 106, 0, 0.1); color: var(--primary); border-color: rgba(255, 106, 0, 0.2); } .badge-Running::before { background: var(--primary); }
    .badge-Success { background: rgba(34, 197, 94, 0.1); color: var(--success); border-color: rgba(34, 197, 94, 0.2); } .badge-Success::before { background: var(--success); }
    .badge-Failed { background: rgba(239, 68, 68, 0.1); color: var(--danger); border-color: rgba(239, 68, 68, 0.2); } .badge-Failed::before { background: var(--danger); }
    
    .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 100; padding: 15px; }
    .modal-card { background: var(--card-bg); width: 100%; max-width: 520px; padding: 40px; border-radius: var(--radius-lg); box-shadow: 0 24px 48px rgba(0,0,0,0.5); border: 1px solid var(--border-color); animation: modalFadeIn(0.3s) cubic-bezier(0.2, 0.8, 0.2, 1); }
    @keyframes modalFadeIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
    
    .form-input, .import-area { 
        width: 100%; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); 
        outline: none; font-size: 15px; box-sizing: border-box; background: #0E0E11; color: var(--text-main); transition: all 0.2s; 
    }
    .form-input::placeholder, .import-area::placeholder { color: #52525B; }
    .form-input:focus, .import-area:focus { border-color: var(--primary); background: #18181C; box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15); }
    
    .progress-bar-bg { width: 100%; height: 8px; background: #27272A; border-radius: 4px; margin-top: 20px; overflow: hidden; display: none; }
    .progress-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #FF6A00, #FFB020); transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 4px; box-shadow: 0 0 10px rgba(255, 106, 0, 0.5); }

    @media (max-width: 768px) {
        body { padding: 16px; }
        .card { padding: 20px; }
        .header { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; } 
        .header-actions { width: 100%; justify-content: flex-start; gap: 10px; }
        .badge-pill { flex-grow: 1; justify-content: center; }
        .input-box { width: 100%; text-align: center; }
        .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
        .stat-card { padding: 20px; }
        .stat-value { font-size: 32px; }
        .tabs { overflow-x: auto; white-space: nowrap; width: 100%; padding-bottom: 4px; }
        .modal-card { padding: 24px; }
    }


            #apiModal .api-section {margin-bottom:24px;line-height:1.7;color:var(--text-sub);font-size:13px;}
            #apiModal h4 {color:#FFF;font-size:16px;margin:0 0 12px;}
            #apiModal .api-example {background:#18181C;border:1px solid var(--border-color);padding:12px;border-radius:6px;color:#E4E4E7;overflow-x:auto;white-space:pre;font-size:12px;}
            #apiModal th, #apiModal td {padding:8px 12px;text-align:left;}
            #apiModal code {overflow-wrap:anywhere;}
        

    .submission-notice {
        box-sizing: border-box;
        width: calc(100% - 32px);
        max-width: 460px;
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        padding: 32px;
        border: 1px solid rgba(255, 106, 0, .28);
        border-radius: 18px;
        background: radial-gradient(ellipse at top right, rgba(255, 106, 0, .10), transparent 65%), #141417;
        color: #ededed;
        box-shadow: 0 28px 90px rgba(0, 0, 0, .6);
        font-family: inherit;
    }
    .submission-notice::backdrop {
        background: rgba(0, 0, 0, .78);
        backdrop-filter: blur(8px);
    }
    .submission-notice-icon {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        margin-bottom: 20px;
        border: 1px solid rgba(255, 106, 0, .24);
        border-radius: 14px;
        background: rgba(255, 106, 0, .10);
        color: #ff7a1a;
    }
    .submission-notice h2 { margin: 0 0 16px; font-size: 22px; line-height: 1.4; font-weight: 750; }
    .submission-notice-message { margin: 0; color: #b7b7c1; font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
    .submission-notice-message strong { color: #ff8a3d; font-weight: 700; }
    .submission-notice-action {
        width: 100%;
        min-height: 46px;
        margin-top: 28px;
        padding: 12px 16px;
        border: 0;
        border-radius: 9px;
        background: #ff7a1a;
        color: #160d05;
        font: inherit;
        font-size: 14px;
        font-weight: 750;
        cursor: pointer;
        transition: background .2s;
    }
    .submission-notice-action:hover { background: #ff9347; }
    .submission-notice-action:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
    @media (max-width: 480px) {
        .submission-notice { padding: 26px 24px; border-radius: 16px; }
        .submission-notice h2 { font-size: 20px; }
        .submission-notice-message { font-size: 15px; }
    }

html body [class].rd-static-0{padding: 4px 10px; font-size: 12px; border-radius: 50px;}
html body [class].rd-static-1{font-size: 15px; font-weight: bold; color: var(--primary);}
html body [class].rd-static-2{background: var(--purple); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);}
html body [class].rd-static-3{width: 1px; height: 20px; background: var(--border-color); margin: 0 4px;}
html body [class].rd-static-4{display:none;}
html body [class].rd-static-5{color:var(--primary); font-size:20px; margin:0 6px; font-family: monospace;}
html body [class].rd-static-6{padding-top: 16px;}
html body [class].rd-static-7{text-align: center; color: var(--text-sub); padding: 60px 0; font-size: 15px;}
html body [class].rd-static-8{max-width: 440px;}
html body [class].rd-static-9{margin-top:0; font-size: 20px; font-weight: 700; color: var(--text-main);}
html body [class].rd-static-10{font-size: 14px; color: var(--text-sub); margin-bottom: 24px;}
html body [class].rd-static-11{display: flex; flex-direction: column; gap: 16px;}
html body [class].rd-static-12{font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 8px; display: block;}
html body [class].rd-static-13{font-size: 14px; font-weight: 600; color: var(--primary); margin-top: 20px; text-align: center; display: none;}
html body [class].rd-static-14{display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px;}
html body [class].rd-static-15{flex:0.6; justify-content: center; padding: 12px;}
html body [class].rd-static-16{flex:1; justify-content:center; padding:12px 8px;}
html body [class].rd-static-17{font-size: 14px; color: var(--text-sub); margin-bottom: 20px;}
html body [class].rd-static-18{font-size: 13px; font-weight: 600; color: var(--text-sub); margin-top: 12px; text-align: center;}
html body [class].rd-static-19{max-width: 800px; padding: 32px;}
html body [class].rd-static-20{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
html body [class].rd-static-21{margin:0;color:#FFF;}
html body [class].rd-static-22{background:var(--border-color);color:#FFF;padding:4px 12px;}
html body [class].rd-static-23{max-height:65vh;overflow-y:auto;padding-right:12px;}
/* Local accessibility and connection states. */

*{box-sizing:border-box}a{color:inherit}button,input,textarea,select{font-family:inherit}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}.modal-overlay.is-open{display:flex}.modal-overlay{overflow-y:auto}.modal-card{max-height:calc(100dvh - 30px);overflow-y:auto}.form-input:focus-visible,.btn:focus-visible,.tab:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.input-box{min-width:90px}.input-box:focus{color:#fff}.status-banner{padding:15px 20px;background:#1e1912;color:#efb46d;border:1px solid #5d3d16;border-radius:10px;font-size:13px;line-height:1.8}.status-banner.error{background:#241317;color:#f9949c;border-color:#63313b}.status-banner.success{background:#10251b;color:#79d39a;border-color:#27563d}.credential-note{color:var(--text-sub);font-size:11px;line-height:1.8;margin:18px 0 0}.modal-progress.is-visible{display:block!important}.badge-Submitting{color:var(--warning);background:#f59e0b12;border-color:#f59e0b35}.badge-Submitting:before{background:var(--warning)}.message-cell{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-text{color:var(--primary);font-size:12px;margin-top:6px}.package-badge{font-size:11px;color:var(--text-sub);border:1px solid var(--border-color);padding:2px 4px;border-radius:4px;margin-right:6px;background:#ffffff0d}.row-actions{display:flex;gap:8px;flex-wrap:wrap}.row-actions .btn{padding:6px 14px;font-size:12px}.empty-cell{text-align:center;color:var(--text-sub);padding:50px 10px}.redeem-footer{max-width:1400px;margin:24px auto 0;display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:#77777f}.redeem-footer a{text-decoration:none}.redeem-footer button{border:0;background:none;color:inherit;font-size:inherit;padding:0;cursor:pointer}.redeem-footer span{margin-left:auto}.modal-progress{color:var(--primary);font-size:13px;line-height:1.8;overflow-wrap:anywhere}.modal-progress.error{color:var(--danger)}.modal-progress.success{color:var(--success)}.pagination{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:20px;font-size:12px;color:var(--text-sub)}#redeemToast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 20px;border:1px solid #45454b;border-radius:10px;background:#242428;color:#f3f3f3;font-size:13px;z-index:500;max-width:90vw;opacity:0;pointer-events:none}#redeemToast.visible{opacity:1}body.modal-open{overflow:hidden}.task-dialog{background:var(--card-bg);color:var(--text-main);border:1px solid var(--border-color);border-radius:16px;padding:28px;max-width:560px;width:calc(100% - 32px)}.task-dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}.task-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.8 inherit}.task-dialog .dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.task-dialog h2{font-size:18px;margin:0}.submission-result{white-space:pre-wrap;font-size:12px;line-height:1.8}.stats-grid{min-width:0}.table-responsive{min-width:0}.tabs .tab{background:none;border-top:0;border-left:0;border-right:0}.form-input:read-only{opacity:.75}@media(max-width:768px){.header-actions{min-width:0}.badge-pill:first-child{width:100%}.input-box{max-width:180px}.header-actions>.btn{flex:1;justify-content:center}.redeem-footer span{margin-left:0;width:100%}.tabs{gap:22px}.stat-value{font-size:32px}.card{min-width:0}.modal-overlay{align-items:flex-start;padding-top:30px}.modal-card{margin:auto}.api-example{max-width:100%}.queue-bar{padding:20px;gap:12px;font-size:13px}.input-box{min-width:0}}

#queueDot.is-visible{display:block}.alert-content{overflow-wrap:anywhere;word-break:break-word}.help-entry{font-size:13px;margin:0 0 12px;color:var(--primary)}.help-entry a{text-decoration:none}.help-entry a:hover{text-decoration:underline}
@media(max-width:768px){.header-actions>.btn{flex:0 0 auto;white-space:nowrap;min-height:36px}.header-actions{gap:10px}}