/* ============================================================
   Scam Checker HR — styles.css
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
    --bg:           #f4f4f5;
    --surface:      #ffffff;
    --border:       #e4e4e7;
    --border-focus: #3b82f6;

    --text:         #18181b;
    --text-2:       #52525b;
    --text-3:       #a1a1aa;

    --blue:         #1d4ed8;
    --blue-dark:    #1e3a8a;
    --blue-light:   #eff6ff;

    --green:        #15803d;
    --green-bg:     #f0fdf4;
    --green-border: #86efac;

    --amber:        #92400e;
    --amber-bg:     #fffbeb;
    --amber-border: #fcd34d;

    --red:          #991b1b;
    --red-bg:       #fef2f2;
    --red-border:   #fca5a5;

    --radius-sm:    4px;
    --radius:       6px;
    --radius-lg:    8px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "SF Mono", "Fira Code", "Consolas", "Menlo", monospace;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}
a { color: var(--blue); }
a:hover { text-decoration: underline; }

/* ── Layout ──────────────────────────────────────────────── */
.container {
    max-width: 740px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ── Header ──────────────────────────────────────────────── */
.site-header {
    background: #0f172a;
    color: #fff;
    padding: 2rem 0 0;
    border-bottom: 3px solid #2563eb;
}

.header-inner {
    margin-bottom: 1.25rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.brand-icon {
    width: 22px;
    height: 22px;
    color: #60a5fa;
    flex-shrink: 0;
}

.brand-name {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #94a3b8;
}

.header-copy {
    margin-bottom: 1.5rem;
}

.header-copy h1 {
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.025em;
    margin-bottom: .5rem;
    color: #fff;
}

.header-copy p {
    font-size: .9rem;
    color: #94a3b8;
    max-width: 560px;
    line-height: 1.55;
}

.alert-banner {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: rgba(239,68,68,.12);
    border-top: 1px solid rgba(239,68,68,.25);
    padding: .75rem 0;
    font-size: .8rem;
    color: #fca5a5;
    line-height: 1.5;
}

.alert-banner svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: .1rem;
    color: #f87171;
}

/* ── Main ────────────────────────────────────────────────── */
main { padding: 1.5rem 0 3rem; }

/* ── Privacy bar ─────────────────────────────────────────── */
.privacy-bar {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    border-radius: var(--radius);
    padding: .7rem .9rem;
    font-size: .8rem;
    color: #166534;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.privacy-bar svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: .15rem;
    color: #16a34a;
}

/* ── Samples ─────────────────────────────────────────────── */
.samples-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.samples-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
    white-space: nowrap;
}

.samples-list {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.sample-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .3rem .7rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    line-height: 1.4;
    transition: border-color .12s, color .12s, background .12s;
}

.sample-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-light);
}

/* ── Card ────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem 1.1rem;
    margin-bottom: .875rem;
    box-shadow: var(--shadow-sm);
}

.card-label {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.card-num {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--text-3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .2rem .45rem;
    line-height: 1;
    margin-top: .15rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.card-label h2 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: .2rem;
}

.card-label p {
    font-size: .8rem;
    color: var(--text-2);
    line-height: 1.45;
}

/* ── Inputs ──────────────────────────────────────────────── */
textarea,
input[type="text"] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .7rem .875rem;
    font-size: .875rem;
    font-family: var(--font);
    color: var(--text);
    background: #fafafa;
    line-height: 1.55;
    resize: vertical;
    transition: border-color .12s, box-shadow .12s, background .12s;
    -webkit-appearance: none;
}

textarea:focus,
input[type="text"]:focus {
    outline: none;
    border-color: var(--border-focus);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

textarea::placeholder,
input::placeholder { color: var(--text-3); }

.mono {
    font-family: var(--mono);
    font-size: .75rem;
    line-height: 1.6;
}

/* ── How-to collapsible ──────────────────────────────────── */
.how-to {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: .875rem;
    overflow: hidden;
}

.how-to summary {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem .875rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-2);
    background: #fafafa;
    cursor: pointer;
    user-select: none;
    list-style: none;
    border: none;
    transition: background .12s;
}

.how-to summary::-webkit-details-marker { display: none; }

.how-to summary:hover { background: #f4f4f5; }

.how-to summary svg {
    width: 15px;
    height: 15px;
    color: var(--text-3);
    flex-shrink: 0;
}

.how-to[open] summary {
    background: #f4f4f5;
    border-bottom: 1px solid var(--border);
}

.how-to-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: #fff;
}

@media (min-width: 600px) {
    .how-to-body {
        grid-template-columns: repeat(3, 1fr);
    }
    .how-to-col + .how-to-col {
        border-left: 1px solid var(--border);
    }
}

.how-to-col {
    padding: .875rem 1rem;
    font-size: .78rem;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
}

.how-to-col:last-child {
    border-bottom: none;
}

@media (min-width: 600px) {
    .how-to-col { border-bottom: none; }
}

.how-to-col strong {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .5rem;
}

.how-to-col ol {
    padding-left: 1.1rem;
    line-height: 1.7;
}

/* ── Form actions ────────────────────────────────────────── */
.form-actions {
    display: flex;
    gap: .6rem;
    margin: 1.25rem 0 .25rem;
}

.btn-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .7rem 1.4rem;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    flex: 1;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(29,78,216,.35);
    transition: background .12s, box-shadow .12s, transform .08s;
    -webkit-appearance: none;
}

.btn-check:hover { background: var(--blue-dark); box-shadow: 0 2px 6px rgba(29,78,216,.4); }
.btn-check:active { transform: scale(.98); }

.btn-check svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-clear {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .7rem 1.1rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    -webkit-appearance: none;
}

.btn-clear:hover { background: var(--bg); border-color: #a1a1aa; }

.btn-clear svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ── Results ─────────────────────────────────────────────── */
.results { margin-top: 1rem; }
.hidden  { display: none !important; }

.results-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem;
    padding-bottom: 1rem;
}

.btn-copy {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    -webkit-appearance: none;
}

.btn-copy:hover { background: var(--bg); border-color: #a1a1aa; }

.btn-copy svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Result card ─────────────────────────────────────────── */
.result-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: .875rem;
    box-shadow: var(--shadow-sm);
}

.result-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.risk-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.risk-label {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1;
}

.risk-score {
    margin-left: auto;
    font-size: .75rem;
    color: var(--text-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Low risk */
.result-card.low .result-header    { background: var(--green-bg); }
.result-card.low .risk-indicator   { background: #16a34a; box-shadow: 0 0 0 3px #bbf7d0; }
.result-card.low .risk-label       { color: var(--green); }

/* Suspicious */
.result-card.suspicious .result-header  { background: var(--amber-bg); }
.result-card.suspicious .risk-indicator { background: #d97706; box-shadow: 0 0 0 3px #fde68a; }
.result-card.suspicious .risk-label     { color: var(--amber); }

/* High risk */
.result-card.high .result-header    { background: var(--red-bg); }
.result-card.high .risk-indicator   { background: #dc2626; box-shadow: 0 0 0 3px #fecaca; }
.result-card.high .risk-label       { color: var(--red); }

.result-body { background: var(--surface); }

/* ── Signal blocks ───────────────────────────────────────── */
.signal-group {
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.signal-group:last-child { border-bottom: none; }

.signal-group-title {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: .6rem;
}

.signal-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.signal-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem;
    align-items: baseline;
    font-size: .825rem;
    line-height: 1.5;
    color: var(--text);
}

.signal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: .45rem;
    flex-shrink: 0;
}

.signal-dot.warn  { background: #d97706; }
.signal-dot.bad   { background: #dc2626; }
.signal-dot.ok    { background: #16a34a; }
.signal-dot.info  { background: #6366f1; }

.signal-source {
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: .04em;
    margin-right: .3rem;
}

/* ── Advice block ────────────────────────────────────────── */
.advice-block {
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: #fafafa;
}

.advice-title {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: .6rem;
}

.advice-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.advice-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem;
    font-size: .825rem;
    line-height: 1.5;
    color: var(--text-2);
}

.advice-list li::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue);
    margin-top: .55rem;
    flex-shrink: 0;
}

/* ── Header parsed table ─────────────────────────────────── */
.parsed-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: .875rem;
    box-shadow: var(--shadow-sm);
}

.parsed-block-title {
    padding: .75rem 1.25rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-2);
    background: #fafafa;
    border-bottom: 1px solid var(--border);
}

.parsed-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .775rem;
}

.parsed-table tr + tr td { border-top: 1px solid #f4f4f5; }

.parsed-table td {
    padding: .55rem 1.25rem .55rem 1.25rem;
    vertical-align: top;
    line-height: 1.5;
}

.parsed-table td:first-child {
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .68rem;
    white-space: nowrap;
    width: 90px;
    padding-top: .65rem;
}

.parsed-table td:last-child {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--text);
    word-break: break-all;
}

.status-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .15rem .45rem;
    border-radius: 3px;
    text-transform: uppercase;
    white-space: nowrap;
    font-family: var(--font);
}

.status-pass  { background: #dcfce7; color: #15803d; }
.status-fail  { background: #fee2e2; color: #b91c1c; }

/* ── Contacts block ──────────────────────────────────────── */
.contacts-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: .875rem;
    box-shadow: var(--shadow-sm);
}

.contacts-block-title {
    padding: .75rem 1.25rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-2);
    background: #fafafa;
    border-bottom: 1px solid var(--border);
}

.contact-row {
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: .2rem;
}

.contact-row:last-child { border-bottom: none; }

.contact-name {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
}

.contact-desc {
    font-size: .78rem;
    color: var(--text-2);
    line-height: 1.45;
}

.contact-url {
    font-size: .78rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

.contact-url:hover { text-decoration: underline; }

.contact-note {
    font-size: .73rem;
    color: var(--text-3);
    line-height: 1.4;
}

.contact-warn-row {
    padding: .8rem 1.25rem;
    background: var(--amber-bg);
    font-size: .8rem;
    color: var(--amber);
    line-height: 1.5;
    border-top: 1px solid var(--amber-border);
}

/* ── Empty state ─────────────────────────────────────────── */
.empty-notice {
    background: var(--amber-bg);
    border: 1px solid var(--amber-border);
    border-radius: var(--radius-lg);
    padding: .875rem 1.25rem;
    font-size: .85rem;
    color: var(--amber);
    font-weight: 500;
}

/* ── No signals ──────────────────────────────────────────── */
.no-signals-msg {
    font-size: .825rem;
    color: var(--text-3);
    padding: .875rem 1.25rem;
    font-style: italic;
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #18181b;
    color: #fff;
    padding: .55rem 1.1rem;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
}

.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
    background: #0f172a;
    color: #64748b;
    padding: 1.75rem 0;
    font-size: .78rem;
    line-height: 1.8;
}

.footer-inner { text-align: center; }

.footer-links {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-top: .5rem;
}

.footer-links a {
    color: #94a3b8;
    text-decoration: none;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .04em;
}

.footer-links a:hover { color: #fff; }

/* ── API config card ─────────────────────────────────────── */
.api-card { padding: 0; }

.api-config summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.25rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
    list-style: none;
    border-radius: var(--radius-lg);
    transition: background .12s;
}

.api-config summary::-webkit-details-marker { display: none; }
.api-config summary:hover { background: #fafafa; }

.api-config summary svg {
    width: 15px;
    height: 15px;
    color: var(--text-3);
    flex-shrink: 0;
}

.api-config[open] summary {
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: #fafafa;
}

.api-config-body {
    padding: 1rem 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.api-note {
    font-size: .78rem;
    color: var(--text-2);
    line-height: 1.55;
}

.api-note code {
    font-family: var(--mono);
    font-size: .72rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .05rem .3rem;
    color: var(--text);
}

.api-field-row {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.api-field-row label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text);
}

.api-input-group {
    display: flex;
    gap: .5rem;
}

.api-input-group input {
    flex: 1;
    font-family: var(--mono);
    font-size: .8rem;
}

.btn-save-key {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .6rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
    -webkit-appearance: none;
}

.btn-save-key:hover { background: var(--bg); border-color: #a1a1aa; }

.btn-save-key.saved {
    background: var(--green-bg);
    border-color: var(--green-border);
    color: var(--green);
}

.api-help-link {
    font-size: .75rem;
    color: var(--blue);
    text-decoration: none;
}

.api-help-link:hover { text-decoration: underline; }

.api-auto-note {
    font-size: .75rem;
    color: var(--text-3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .55rem .875rem;
    line-height: 1.5;
}

.api-auto-note strong { color: var(--text-2); }

/* ── Loading state ───────────────────────────────────────── */
.loading-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    margin-bottom: .875rem;
    box-shadow: var(--shadow-sm);
}

.loading-title {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 1rem;
}

.loading-checks {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.loading-check {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .825rem;
    color: var(--text-2);
}

.loading-check.done   { color: var(--text-3); }
.loading-check.active { color: var(--text); }

.check-status {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.check-done-icon {
    width: 14px;
    height: 14px;
    color: var(--green);
}

.check-skip-icon {
    width: 14px;
    height: 14px;
    color: var(--text-3);
}

/* ── External checks block ───────────────────────────────── */
.ext-block {
    border-top: 1px solid var(--border);
}

.ext-block .signal-group-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ext-tag {
    display: inline-block;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .1rem .4rem;
    border-radius: 3px;
    text-transform: uppercase;
    background: #e0f2fe;
    color: #0369a1;
    font-family: var(--font);
}

/* Button loading state */
.btn-check:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .site-header { padding: 1.5rem 0 0; }
    .header-copy h1 { font-size: 1.3rem; }
    .card { padding: 1rem 1rem .9rem; }
    .card-label { gap: .7rem; }
    .form-actions { flex-direction: column; }
    .btn-check { flex: unset; width: 100%; }
    .btn-clear { width: 100%; justify-content: center; }
    .result-header { padding: .875rem 1rem; }
    .signal-group, .advice-block { padding: .75rem 1rem; }
    .parsed-table td { padding: .5rem 1rem; }
    .contacts-block-title,
    .parsed-block-title { padding: .65rem 1rem; }
    .contact-row { padding: .7rem 1rem; }
    .samples-bar { flex-direction: column; align-items: flex-start; gap: .5rem; }
}