/* YouTube Rank Checker - form, progress, results table, history. */

.yrc-intro { margin: 0 0 14px; color: #4b5563; font-size: 0.95rem; }
.yrc-form { display: flex; flex-direction: column; gap: 12px; }
.yrc-row { display: flex; gap: 10px; flex-wrap: wrap; }
.yrc-field { display: flex; flex-direction: column; gap: 5px; }
.yrc-field-grow { flex: 1 1 320px; }
.yrc-field-sm { flex: 0 1 170px; }
.yrc-label { font-size: 0.8rem; font-weight: 600; color: #374151; }
.yrc-text { flex: 0 0 auto; }
.yrc-area {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.6;
    font-family: inherit;
    resize: vertical;
}
.yrc-select {
    border: 1px solid #d7dbe0;
    border-radius: 8px;
    background: #fff;
    padding: 9px 10px;
    font-size: 0.9rem;
    color: #1f2937;
}
.yrc-hint { font-size: 0.78rem; color: #6b7280; }
.yrc-actions { display: flex; gap: 10px; align-items: center; }

/* progress */
.yrc-progress {
    margin: 14px 0 4px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    padding: 14px 16px;
}
.yrc-progress[hidden] { display: none; }
.yrc-progress-track { height: 8px; border-radius: 4px; background: #eef0f3; overflow: hidden; }
.yrc-progress .progress-fill { height: 100%; background: #cc0000; border-radius: 4px; width: 10%; transition: width 0.4s ease; }
.yrc-progress-msg { margin-top: 8px; font-size: 0.84rem; color: #6b7280; }

/* errors */
.yrc-errors { margin: 12px 0 4px; }
.yrc-errors[hidden] { display: none; }
.yrc-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

/* results table */
#yrc-table .col-kw { width: 24%; }
#yrc-table .col-pos { width: 110px; }
#yrc-table .col-match { width: 30%; }
#yrc-table .col-top { width: 30%; }
#yrc-table .col-view { width: 110px; }
.yrc-kw { font-weight: 600; color: #1f2937; word-break: break-word; }
.yrc-kw-err { font-size: 0.78rem; color: #b45309; margin-top: 2px; }
.yrc-pos-badge {
    display: inline-block;
    background: #ecfdf5;
    color: #047857;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.85rem;
}
.yrc-pos-none { color: #9ca3af; font-size: 0.85rem; }
.yrc-link { color: #0b57d0; text-decoration: none; word-break: break-word; }
.yrc-link:hover { text-decoration: underline; }
.yrc-muted { color: #9ca3af; }
.yrc-top-meta { font-size: 0.78rem; margin-top: 2px; }
.yrc-view-btn { padding: 5px 10px; font-size: 0.8rem; }

/* history */
.yrc-history { margin: 18px 0 4px; }
.yrc-history[hidden] { display: none; }
.yrc-history-title { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; color: #1f2937; }
.yrc-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    position: relative;
}
.history-item:hover { border-color: #cbd2d9; }
.history-item-input { font-weight: 600; font-size: 0.86rem; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item-meta { font-size: 0.78rem; color: #6b7280; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item-when { font-size: 0.76rem; color: #9ca3af; flex: 0 0 auto; }
.history-item-delete {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #9ca3af;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    opacity: 0;
}
.history-item:hover .history-item-delete { opacity: 1; }
.history-item-delete:hover { background: #fef2f2; color: #b91c1c; }

@media (max-width: 640px) {
    .yrc-actions .primary-btn { width: 100%; }
    .history-item-meta { display: none; }
}