.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

.ua-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 120px;
}

.example-badge { cursor: pointer; user-select: none; font-size: .72rem; }
.example-badge:hover { background-color: var(--bs-primary) !important; color: #fff !important; }

.summary-card {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: .85rem 1rem .85rem 1.15rem;
    height: 100%;
    background: var(--bs-body-bg);
    position: relative;
    overflow: hidden;
    transition: box-shadow .15s ease;
}
.summary-card:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); }
.summary-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--bs-secondary);
}
.summary-card.sc-browser::before { background: #0d6efd; }
.summary-card.sc-os::before      { background: #6f42c1; }
.summary-card.sc-device::before  { background: #20c997; }
.summary-card.sc-engine::before  { background: #fd7e14; }

.sc-label {
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: .2rem;
}
.sc-value {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    word-break: break-word;
}
.sc-sub {
    font-family: ui-monospace, monospace;
    font-size: .78rem;
    color: var(--bs-secondary-color);
    margin-top: .2rem;
    word-break: break-all;
}
.sc-icon { font-size: 1.1rem; margin-right: .3rem; }

.info-tile {
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    padding: .6rem .8rem;
    height: 100%;
}
.info-tile .k {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .15rem;
}
.info-tile .v {
    font-family: ui-monospace, monospace;
    font-weight: 600;
    font-size: .88rem;
    word-break: break-all;
    line-height: 1.4;
}
.info-tile .v.empty { color: var(--bs-secondary-color); font-weight: 400; font-style: italic; }

/* UA 结构拆解 */
.ua-token {
    display: inline-block;
    padding: .16rem .48rem;
    margin: .16rem .1rem;
    border-radius: .35rem;
    font-family: ui-monospace, monospace;
    font-size: .76rem;
    line-height: 1.35;
    border: 1px solid transparent;
    cursor: default;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.tok-mozilla { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.tok-engine  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.tok-browser { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.tok-comment { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.tok-device  { background: #fce7f3; color: #9d174d; border-color: #fbcfe8; }
.tok-other   { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }

.ua-legend span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    color: var(--bs-secondary-color);
}
.ua-legend i {
    display: inline-block;
    width: .7rem; height: .7rem;
    border-radius: .18rem;
}

.raw-ua {
    background: #0b1220;
    color: #cbd5e1;
    border-radius: .5rem;
    padding: .75rem .9rem;
    font-family: ui-monospace, monospace;
    font-size: .8rem;
    line-height: 1.6;
    word-break: break-all;
    white-space: pre-wrap;
}

.env-table td { font-size: .82rem; vertical-align: top; }
.env-table td:first-child { color: var(--bs-secondary-color); width: 34%; white-space: nowrap; }
.env-table td:last-child { font-family: ui-monospace, monospace; word-break: break-all; }