/* user-agent.css */

.ua-main { max-width: 760px; }

.ua-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.4rem;
}

.ua-raw-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ua-raw-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.ua-raw {
    font-size: 0.88rem;
    color: var(--color-text);
    word-break: break-all;
    line-height: 1.5;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
}

.copy-btn {
    align-self: flex-start;
    padding: 0.3rem 0.75rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    cursor: pointer;
    font-family: var(--font-main);
    transition: background 0.15s;
}
.copy-btn:hover { background: var(--color-primary-dk); }
.copy-btn.copied { background: #28a745; }

.ua-details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.4rem;
}

.ua-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
}

.ua-item-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.ua-item-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-primary);
    word-break: break-word;
}

.ua-item-value.unknown { color: var(--color-text-muted); font-weight: 400; }

/* Parse section */
.ua-parse-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.4rem;
}

.parse-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.8rem;
}

.custom-result {
    margin-top: 1rem;
}

.custom-result.hidden { display: none; }