/* ===== HotDog SwiftEar - Dashboard Common Styles (v15.1) ===== */
/* ===== [IT COMMENT] 2025-03-29 新增 .match-tag / .match-badge =====
   - 用於顯示每則貼文匹配的關鍵字標籤。
   - 樣式為淺藍底深藍字，圓角標籤。
   ============================================================== */

*{box-sizing:border-box}
body{background:#f0f2f5;font-family:'Inter',-apple-system,system-ui,sans-serif}
.app-container{max-width:1440px;margin:0 auto;padding:20px}

/* ===== Top Bar ===== */
.top-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;background:white;border-radius:28px;padding:20px 32px;margin-bottom:28px;box-shadow:0 4px 20px rgba(0,0,0,0.04);border:1px solid #f1f5f9}
.top-bar .brand{display:flex;align-items:center;gap:20px;font-weight:800;color:#0f172a}
.top-bar .brand img{height:64px;width:auto;display:block}
.top-bar .brand .brand-text{display:flex;flex-direction:column;line-height:1.2}
.top-bar .brand .brand-text .main{font-size:1.8rem;font-weight:800;color:#0f172a}
.top-bar .brand .brand-text .sub{font-size:.75rem;font-weight:400;color:#64748b;letter-spacing:.4px}
.top-bar .status-badge{display:flex;align-items:center;gap:10px;font-size:.85rem;color:#475569;background:#f8fafc;padding:8px 20px;border-radius:40px;border:1px solid #e2e8f0}
.status-badge .dot{width:10px;height:10px;border-radius:50%;background:#22c55e;display:inline-block}
.user-info{display:flex;align-items:center;gap:12px}
.user-info .user-name{font-weight:600;color:#0f172a;font-size:.9rem}
.user-info .user-role{font-size:.7rem;padding:2px 10px;border-radius:20px;font-weight:600}
.user-info .user-role.admin{background:#dbeafe;color:#1d4ed8}
.user-info .user-role.user{background:#f3e8ff;color:#7c3aed}
.user-info .btn-logout{background:#f1f5f9;border:1px solid #e2e8f0;color:#64748b;padding:6px 14px;border-radius:10px;font-size:.8rem;cursor:pointer;transition:.2s}
.user-info .btn-logout:hover{background:#fee2e2;color:#ef4444;border-color:#fecaca}
.user-info .btn-switch{background:#e0f2fe;border:1px solid #bae6fd;color:#0284c7;padding:6px 14px;border-radius:10px;font-size:.8rem;cursor:pointer;transition:.2s;text-decoration:none}
.user-info .btn-switch:hover{background:#bae6fd}

/* ===== Login Overlay ===== */
.login-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,.88);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.login-box{background:white;border-radius:28px;padding:44px;width:100%;max-width:440px;box-shadow:0 24px 80px rgba(0,0,0,.35);animation:loginSlideIn .4s ease}
@keyframes loginSlideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.login-box .login-logo{text-align:center;margin-bottom:32px}
.login-box .login-logo img{height:72px;margin-bottom:16px}
.login-box .login-logo h2{font-size:1.6rem;font-weight:800;color:#0f172a;margin:0}
.login-box .login-logo p{color:#64748b;font-size:.9rem;margin-top:6px}
.login-input-group{margin-bottom:18px}
.login-input-group label{font-size:.8rem;font-weight:600;color:#475569;display:block;margin-bottom:6px}
.login-input-group input{width:100%;padding:12px 16px;border:1.5px solid #e5e7eb;border-radius:14px;font-size:.95rem;outline:none;transition:.2s}
.login-input-group input:focus{border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.1)}
.login-btn{width:100%;padding:14px;background:#3b82f6;color:white;border:none;border-radius:14px;font-weight:700;font-size:1rem;cursor:pointer;transition:.2s}
.login-btn:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 8px 20px rgba(59,130,246,.3)}
.login-error{color:#ef4444;font-size:.85rem;text-align:center;margin-top:10px;display:none}

/* ===== Stats Grid ===== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-bottom:28px}
.stat-card{background:white;border-radius:20px;padding:18px 20px;box-shadow:0 4px 12px rgba(0,0,0,.02);border:1px solid #f1f5f9;transition:.15s}
.stat-card .stat-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.4px;color:#94a3b8;font-weight:600}
.stat-card .stat-value{font-size:2rem;font-weight:700;color:#0f172a;margin-top:4px;line-height:1.2}
.stat-card .stat-icon{float:right;font-size:1.6rem;opacity:.2;color:#3b82f6}

/* ===== Layout ===== */
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px}
@media(max-width:1024px){.two-cols{grid-template-columns:1fr}}
.card-panel{background:white;border-radius:24px;padding:24px;box-shadow:0 4px 16px rgba(0,0,0,.02);border:1px solid #f1f5f9;height:100%}
.card-panel .panel-title{font-weight:600;font-size:1.1rem;color:#0f172a;display:flex;align-items:center;gap:8px;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid #f1f5f9}

/* ===== Inputs & Tags ===== */
.input-row{display:flex;gap:0;border-radius:12px;overflow:hidden;border:1.5px solid #e5e7eb;background:#fafbfc;margin-bottom:12px}
.input-row:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.input-row input{flex:1;border:none;padding:10px 14px;font-size:.9rem;background:transparent;outline:none;min-width:0}
.input-row input:disabled{background:#f3f4f6 !important;color:#9ca3af !important;cursor:not-allowed !important}
.input-row .btn-add{background:#3b82f6;color:#fff;border:none;padding:0 18px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center;min-width:48px}
.input-row .btn-add:hover{background:#2563eb}
.input-row .btn-add:disabled{background:#cbd5e1;cursor:not-allowed}
.input-row .btn-add.green{background:#10b981}
.input-row .btn-add.green:hover{background:#059669}
.input-row .btn-add.green:disabled{background:#a7f3d0}
.input-row .btn-add.purple{background:#8b5cf6}
.input-row .btn-add.purple:hover{background:#7c3aed}
.input-row .btn-add.purple:disabled{background:#ddd6fe}
.tag-list{list-style:none;padding:0;margin:0 0 16px 0;max-height:180px;overflow-y:auto}
.tag-list li{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#f8fafc;border-radius:8px;margin-bottom:4px;font-size:.85rem}
.tag-list li .tag-name{flex:1;font-weight:500;color:#1e293b}
.tag-list li .btn-del{background:none;border:none;color:#94a3b8;cursor:pointer;padding:2px 6px;border-radius:4px;transition:.15s}
.tag-list li .btn-del:hover{color:#ef4444;background:#fee2e2}
.empty-hint{color:#94a3b8;font-size:.85rem;text-align:center;padding:12px 0}

/* ===== Buttons ===== */
.btn-run{width:100%;padding:12px;border:none;border-radius:12px;font-weight:600;font-size:.95rem;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-run.blue{background:#3b82f6;color:#fff}
.btn-run.blue:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px rgba(59,130,246,.3)}
.btn-run.purple{background:#8b5cf6;color:#fff}
.btn-run.purple:hover{background:#7c3aed}
.btn-run.orange{background:#f59e0b;color:#fff}
.btn-run.orange:hover{background:#d97706}
.btn-run.green{background:#10b981;color:#fff}
.btn-run.green:hover{background:#059669}
.btn-run:disabled{opacity:.6;cursor:not-allowed;transform:none!important}
.schedule-hint{font-size:.7rem;color:#94a3b8;text-align:center;margin-top:12px}

/* ===== Admin Specific Buttons ===== */
.btn-save-gradient{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);box-shadow:0 4px 14px rgba(59,130,246,.35);transition:all .2s ease;border:none;color:white;padding:8px 24px;border-radius:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;}
.btn-save-gradient:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,.45);filter:brightness(1.05);}
.btn-save-gradient:active{transform:translateY(0);}
.btn-save-teal{background:linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%);box-shadow:0 4px 14px rgba(2,132,199,.35);transition:all .2s ease;border:none;color:white;padding:8px 24px;border-radius:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;}
.btn-save-teal:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(2,132,199,.45);filter:brightness(1.05);}
.btn-save-teal:active{transform:translateY(0);}
.btn-save-purple{background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);box-shadow:0 4px 14px rgba(124,58,237,.35);transition:all .2s ease;border:none;color:white;padding:8px 20px;border-radius:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;}
.btn-save-purple:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,58,237,.45);filter:brightness(1.05);}
.btn-save-purple:active{transform:translateY(0);}
.btn-stop-red{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 4px 14px rgba(239,68,68,.35);transition:all .2s ease;border:none;color:white;padding:8px 20px;border-radius:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;}
.btn-stop-red:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(239,68,68,.45);filter:brightness(1.05);}
.btn-stop-red:active{transform:translateY(0);}

/* ===== Posts & Comments ===== */
.post-item{position:relative;border-left:4px solid #3b82f6;background:#fafbfc;padding:14px 16px;border-radius:14px;margin-bottom:10px;border:1px solid #f1f5f9;transition:all .3s ease}
.post-item .post-meta{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:#64748b;margin-bottom:4px}
.post-item .post-meta .username{font-weight:600;color:#1e293b}
.post-item .post-meta .meta-right{display:flex;align-items:center;gap:12px}
.post-item .post-meta .delete-btn{background:none;border:none;color:#94a3b8;cursor:pointer;padding:2px 6px;border-radius:4px;transition:.15s;font-size:.85rem}
.post-item .post-meta .delete-btn:hover{color:#ef4444;background:#fee2e2}
.post-item .post-text{color:#1e293b;font-size:.9rem;line-height:1.5;margin-bottom:6px;word-break:break-word}
.post-item .post-link{color:#3b82f6;font-size:.75rem;text-decoration:none;font-weight:500}
.post-item .post-link:hover{text-decoration:underline}
.comment-section{margin-top:10px;padding:10px;background:#f3f4f6;border-radius:10px;max-height:200px;overflow-y:auto;display:none}
.comment-section.show{display:block}
.comment-item{font-size:.8rem;padding:6px 0;border-bottom:1px solid #e5e7eb}
.comment-item:last-child{border-bottom:none}
.comment-item .comment-author{font-weight:600;color:#1f2937}
.comment-item .comment-time{font-size:.65rem;color:#9ca3af;margin-left:8px}
.comment-toggle-btn{background:none;border:none;color:#6366f1;cursor:pointer;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;transition:background .2s}
.comment-toggle-btn:hover{background:#e0e7ff}

/* ===== 標籤容器 (NEW + 來源標籤) ===== */
.post-badges {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.post-badges .new-badge,
.post-badges .source-badge {
    position: static;
    display: inline-block;
    font-size: .65rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .5px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.post-badges .new-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}
.post-badges .source-badge.auto {
    background: #f59e0b;
    color: white;
}
.post-badges .source-badge.manual {
    background: #3b82f6;
    color: white;
}

/* ===== [IT COMMENT] 匹配關鍵字標籤樣式 ===== */
.match-tag {
    display: inline-block;
    background: #dbeafe;
    color: #1e40af;
    font-size: 0.7rem;
    padding: 1px 8px;
    border-radius: 12px;
    margin: 0 2px;
    border: 1px solid #93c5fd;
}
.match-badge {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}
/* ======================================== */

/* ===== New Post Highlight ===== */
.post-item.new-post {
    animation: newPostSlide 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    border-left-color: #10b981 !important;
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, .12);
}
@keyframes newPostSlide {
    from { opacity: 0; transform: translateY(-30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ===== Progress ===== */
.progress-container{background:#e5e7eb;border-radius:40px;height:8px;overflow:hidden;margin-top:12px}
.progress-bar{height:100%;background:linear-gradient(to right,#3b82f6,#60a5fa);border-radius:40px;transition:width .5s ease;width:0%}
.status-text{font-size:.9rem;color:#0f172a;margin-top:8px;display:flex;justify-content:space-between;align-items:center}
.status-text .spinner{display:inline-block;width:16px;height:16px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}
.job-meta{margin-top:5px;color:#64748b;font-size:.75rem;text-transform:capitalize}
.job-error{margin-top:10px;padding:9px 12px;border:1px solid #fecaca;border-radius:10px;background:#fef2f2;color:#b91c1c;font-size:.82rem;white-space:pre-wrap}
.novnc-panel{margin-top:14px;padding:12px;border:1px solid #fde68a;border-radius:16px;background:#fffbeb}
.novnc-panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.novnc-panel-header p{margin:4px 0 0;color:#92400e;font-size:.8rem;line-height:1.45}
.novnc-open-tab{flex-shrink:0;background:#d97706;color:#fff;text-decoration:none;font-size:.78rem;font-weight:600;padding:8px 12px;border-radius:10px}
.novnc-frame{width:100%;height:min(70vh,640px);border:1px solid #fcd34d;border-radius:12px;background:#0f172a}
#progressPanel[data-state="queued"] .progress-bar{background:linear-gradient(to right,#f59e0b,#fbbf24)}
#progressPanel[data-state="failed"] .progress-bar,#progressPanel[data-state="cancelled"] .progress-bar{background:#ef4444}
#progressPanel[data-state="completed"] .progress-bar{background:#10b981}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Scroll Input ===== */
.scroll-input{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:12px;font-size:.9rem}
.sop-hint{font-size:.7rem;color:#f59e0b;font-weight:600;margin-left:6px;background:#fffbeb;padding:1px 8px;border-radius:20px;border:1px solid #fde68a;white-space:nowrap}
.sop-hint.limit{color:#ef4444;background:#fef2f2;border-color:#fecaca}

/* ===== 自訂區域提示 ===== */
.custom-hint{font-size:.7rem;color:#f59e0b;font-weight:600;margin-left:6px;background:#fffbeb;padding:1px 8px;border-radius:20px;border:1px solid #fde68a;white-space:nowrap}
.custom-hint.limit{color:#ef4444;background:#fef2f2;border-color:#fecaca}

/* ===== Admin Cards ===== */
.credential-card{background:#fef9e7;border:1px solid #f7dc6f;border-radius:24px;padding:20px;margin-bottom:28px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.credential-card .creds-input{display:flex;flex-wrap:wrap;gap:12px;align-items:center;flex:1}
.credential-card .creds-input input{padding:8px 14px;border:1px solid #d1d5db;border-radius:12px;font-size:.9rem;flex:1 1 180px}
.credential-status{font-size:.85rem;font-weight:500;color:#16a34a}
.credential-status i{margin-right:4px}
.cookie-card{background:#f0f4ff;border:1px solid #a5c9ff;border-radius:24px;padding:16px 20px;margin-bottom:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cookie-card .cookie-input{flex:1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cookie-card .cookie-input input[type="file"]{padding:8px 14px;border:1px solid #d1d5db;border-radius:12px;font-size:.9rem;flex:1 1 220px}
.cookie-card .cookie-input .btn-upload{background:#3b82f6;color:white;border:none;padding:8px 20px;border-radius:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.cookie-card .cookie-input .btn-upload:hover{background:#2563eb}
.cookie-info{font-size:.9rem;color:#1e293b}
.search-card{border-radius:24px;padding:16px 20px;margin-bottom:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:#f0fdf4;border:1px solid #86efac}
.search-card .search-input{flex:1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search-card .search-input input{padding:8px 14px;border:1px solid #d1d5db;border-radius:12px;font-size:.9rem;flex:1 1 220px}
.search-card .search-input .btn-search{background:#16a34a;color:white;border:none;padding:8px 20px;border-radius:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.search-card .search-input .btn-search:hover{background:#15803d}

/* ===== Schedule ===== */
.schedule-card{background:#faf5ff;border:1px solid #e9d5ff;border-radius:24px;padding:20px;margin-bottom:28px}
.schedule-card .schedule-title{font-weight:600;color:#0f172a;display:flex;align-items:center;gap:8px;margin-bottom:16px}
.schedule-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.schedule-row .schedule-item{display:flex;align-items:center;gap:10px;flex:1 1 200px}
.schedule-row label{font-size:.85rem;font-weight:600;color:#475569}
.schedule-row input[type="number"]{width:80px;padding:8px 12px;border:1px solid #d1d5db;border-radius:12px;font-size:.9rem}
.toggle-switch{position:relative;display:inline-block;width:48px;height:26px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#cbd5e1;border-radius:26px;transition:.3s}
.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.3s}
input:checked + .toggle-slider{background:#8b5cf6}
input:checked + .toggle-slider:before{transform:translateX(22px)}
.schedule-info{font-size:.85rem;color:#64748b;margin-top:10px;padding-top:10px;border-top:1px solid #e9d5ff;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.schedule-info .next-run{color:#16a34a;font-weight:500}
.schedule-info .next-run.disabled{color:#ef4444;font-weight:700}
.schedule-info .last-run{color:#64748b}

/* ===== User Specific ===== */
.step-guide{background:#f0f9ff;border:1px solid #bae6fd;border-radius:20px;padding:20px;margin-bottom:28px}
.step-guide .guide-title{font-weight:700;color:#0f172a;font-size:1.05rem;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.step-guide .guide-title i{color:#0284c7}
.step-row{display:flex;flex-wrap:wrap;gap:12px}
.step-item{flex:1 1 200px;display:flex;align-items:flex-start;gap:12px;background:white;padding:14px 16px;border-radius:14px;border:1px solid #e0f2fe}
.step-num{width:32px;height:32px;border-radius:50%;background:#0284c7;color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.step-content{flex:1}
.step-content .step-label{font-weight:600;color:#0f172a;font-size:.9rem;margin-bottom:2px}
.step-content .step-desc{font-size:.8rem;color:#64748b}
.schedule-status{background:#f0fdf4;border:1px solid #86efac;border-radius:16px;padding:12px 18px;margin-bottom:24px;display:none;align-items:center;gap:10px;font-size:.9rem;color:#065f46}
.schedule-status.active{display:flex}
.schedule-status i{color:#16a34a}

/* ===== Alerts & Banners ===== */
.no-result-alert{background:#fffbeb;border:1px solid #fcd34d;border-radius:16px;padding:14px 18px;margin-bottom:24px;color:#92400e;font-size:.9rem;display:none;align-items:center;gap:10px}
.no-result-alert.show{display:flex}
.no-result-alert i{color:#f59e0b;font-size:1.1rem}
@keyframes alertShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.new-posts-banner {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #6ee7b7;
    border-radius: 16px;
    padding: 14px 20px;
    margin-bottom: 20px;
    display: none;
    align-items: center;
    gap: 12px;
    color: #065f46;
    font-weight: 600;
    font-size: .95rem;
    animation: bannerSlide 0.5s ease;
}
.new-posts-banner.show { display: flex; }
.new-posts-banner i { color: #10b981; font-size: 1.2rem; }
@keyframes bannerSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.post-item.matched-post {
    border-left-color: #22c55e !important;
    background-color: #f0fdf4;
}

/* ===== Utilities ===== */
.password-wrapper{position:relative;}
.password-wrapper input{width:100%;padding-right:44px;}
.toggle-password{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#94a3b8;padding:8px 10px;border-radius:8px;transition:.15s;}
.toggle-password:hover{color:#3b82f6;background:#eff6ff;}
.view-badge-admin{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);color:#1e40af;padding:4px 14px;border-radius:20px;font-size:.75rem;font-weight:700;border:1px solid #93c5fd;display:inline-flex;align-items:center;gap:6px;}
.view-badge-user{background:linear-gradient(135deg,#f3e8ff 0%,#e9d5ff 100%);color:#6b21a8;padding:4px 14px;border-radius:20px;font-size:.75rem;font-weight:700;border:1px solid #d8b4fe;display:inline-flex;align-items:center;gap:6px;}

/* ===== Keyword Preview Tags (Schedule) ===== */
.keyword-preview-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.keyword-preview-tag.matched {
    background: #d1fae5;
    color: #065f46;
    border-color: #86efac;
}
.keyword-preview-tag.unmatched {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}
.keyword-preview-tag i {
    font-size: .65rem;
}

/* ===== Responsive ===== */
@media(max-width:1024px){
.two-cols{grid-template-columns:1fr}
}
@media(max-width:640px){
.top-bar{flex-direction:column;align-items:stretch;text-align:center;padding:16px 20px}
.top-bar .brand{justify-content:center}
.top-bar .brand img{height:48px}
.top-bar .brand .brand-text .main{font-size:1.4rem}
.stats-grid{grid-template-columns:1fr 1fr}
.stat-card .stat-value{font-size:1.6rem}
.card-panel{padding:16px}
.post-item .post-meta{flex-wrap:wrap;gap:4px}
.two-cols{grid-template-columns:1fr}
.credential-card,.search-card,.cookie-card{flex-direction:column;align-items:stretch}
}

/* ===== 自訂排程區域 ===== */
.custom-schedule-section {
    background: #f8f7ff;
    border: 1px solid #e9d5ff;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
}
.schedule-source-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ===== 自動排程貼文標記 ===== */
.post-item.auto-post {
    border-left-color: #f59e0b !important;
    background: #fff7ed !important;
    border-color: #fdba74 !important;
}

/* ===== 排程失敗醒目提示 ===== */
.schedule-status.error {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
    display: flex !important;
    align-items: center;
    gap: 10px;
}
.schedule-status.error i {
    color: #ef4444;
}

/* ===== 排程 SOP 步驟條 ===== */
.schedule-sop-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    border-radius: 14px;
    padding: 14px;
}
.schedule-sop-item {
    flex: 1 1 180px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.schedule-sop-item .sop-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #8b5cf6;
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.schedule-sop-item .sop-content { flex: 1; }
.schedule-sop-item .sop-label {
    font-weight: 600; color: #0f172a; font-size: .85rem; margin-bottom: 2px;
}
.schedule-sop-item .sop-desc {
    font-size: .75rem; color: #64748b;
}

/* ===== 垂直步驟排程 ===== */
.schedule-vertical-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}
.schedule-step-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    border-radius: 14px;
    padding: 16px;
}
.schedule-step-row .step-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #8b5cf6;
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; flex-shrink: 0;
    margin-top: 2px;
}
.schedule-step-row .step-content {
    flex: 1;
}
.schedule-step-row .step-label {
    font-weight: 600; color: #0f172a; font-size: .95rem; margin-bottom: 4px;
    display: flex; align-items: center; gap: 6px;
}
.schedule-step-row .step-desc {
    font-size: .8rem; color: #64748b; margin-bottom: 8px;
}
.schedule-step-row .step-input {
    display: flex; align-items: center; gap: 12px;
}
.schedule-step-row .step-input input[type="number"] {
    width: 100px; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 12px; font-size: .9rem;
}
.schedule-step-row .step-unit {
    font-size: .85rem; color: #475569;
}

/* 狀態列 */
.schedule-status-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    font-size: .85rem; color: #475569;
    border-top: 1px solid #e9d5ff; padding-top: 12px;
}
.schedule-status-bar .next-run {
    color: #16a34a; font-weight: 500;
}
.schedule-status-bar .next-run.disabled {
    color: #ef4444;
    font-weight: 700;
}
.schedule-status-bar .last-run {
    color: #64748b;
}

/* Logo 點擊閃爍 */
.dot.blink {
    animation: blink 0.8s infinite;
}
@keyframes blink {
    0% { opacity: 1; background-color: #22c55e; }
    50% { opacity: 0.3; background-color: #f59e0b; }
    100% { opacity: 1; background-color: #22c55e; }
}