.lk { max-width: 860px; margin: 0 auto; line-height: 1.55; }
.lk h2 { margin-top: 2.2rem; }
.lk-lead { font-size: 1.15rem; opacity: .92; }
.lk-priv { font-size: .9rem; opacity: .75; border-left: 3px solid rgba(127,127,127,.5); padding-left: .8rem; }
.lk-noscript { color: #ff5c5c; }
.lk code { font-size: .88em; padding: .1em .35em; border-radius: 4px; background: rgba(127,127,127,.2); overflow-wrap: anywhere; }

.lk-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0; }
.lk-btn { font: inherit; color: inherit; cursor: pointer; padding: .45rem .9rem; border-radius: 8px;
    border: 1px solid rgba(127,127,127,.45); background: rgba(127,127,127,.12); }
.lk-btn:hover:not(:disabled) { background: rgba(127,127,127,.25); }
.lk-btn:disabled { opacity: .45; cursor: default; }

.lk-scanning { opacity: .75; padding: 2rem 0; text-align: center; }

.lk-summary { display: flex; gap: 1.2rem; align-items: center; padding: 1.1rem 1.3rem; margin-bottom: 1.2rem;
    border: 1px solid rgba(127,127,127,.35); border-radius: 14px; }
.lk-grade { flex: none; width: 4.2rem; height: 4.2rem; display: grid; place-items: center; font-size: 2.4rem;
    font-weight: 800; border-radius: 14px; color: #0b0b0b; }
.lk-g-a { background: #3ecf8e; } .lk-g-b { background: #9ad65a; } .lk-g-c { background: #f5d142; }
.lk-g-d { background: #f59a42; } .lk-g-f { background: #ff5c5c; }
.lk-score { font-size: 1.2rem; font-weight: 600; }
.lk-idline { opacity: .85; margin-top: .25rem; overflow-wrap: anywhere; }
.lk-idnote { font-size: .85rem; opacity: .65; margin-top: .25rem; }

.lk-card { border: 1px solid rgba(127,127,127,.35); border-radius: 14px; padding: .4rem 1.2rem 1rem; margin-bottom: 1rem; }
.lk-card h2 { font-size: 1.05rem; margin: 1rem 0 .4rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.lk-rows { list-style: none; margin: 0; padding: 0; }
.lk-row { display: grid; grid-template-columns: 14px 190px 1fr; column-gap: .8rem; padding: .55rem 0;
    border-top: 1px solid rgba(127,127,127,.2); }
.lk-row:first-child { border-top: 0; }
.lk-k { opacity: .8; }
.lk-v { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; }
.lk-n { grid-column: 3; font-size: .84rem; opacity: .65; margin-top: .2rem; }

.lk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-top: .45rem; }
.lk-l-good { background: #3ecf8e; } .lk-l-warn { background: #f5b942; }
.lk-l-bad { background: #ff5c5c; } .lk-l-info { background: #6ea8fe; }
.lk-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .85rem; opacity: .8; margin-top: 1rem; }
.lk-legend .lk-dot { margin: 0 .35rem 0 0; vertical-align: middle; }

.lk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.lk-tip { border: 1px solid rgba(127,127,127,.35); border-radius: 12px; padding: .2rem 1.1rem 1rem; }
.lk-tip h3 { margin-bottom: .3rem; }
.lk-tip p { margin: 0; font-size: .92rem; }

@media (max-width: 620px) {
    .lk-row { grid-template-columns: 14px 1fr; }
    .lk-v, .lk-n { grid-column: 2; }
    .lk-summary { flex-direction: column; align-items: flex-start; }
}