:root {
    --opter-green: #204a3c;
    --opter-green-dark: #163428;
    --opter-beige: #dfdad4;
    --opter-beige-light: #ece9e5;
    --opter-orange: #f64f10;
    --opter-yellow: #f2f8a7;
    --opter-gray: #787470;
    --opter-gray-light: #a09b96;
    --opter-soft-green: #7ecaab;

    --bg: var(--opter-beige);
    --fg: #1a1a1a;
    --muted: var(--opter-gray);
    --accent: var(--opter-green);
    --accent-hover: var(--opter-green-dark);
    --cta: var(--opter-orange);
    --ok: #1f7a3a;
    --warn: #b07207;
    --fail: #b13434;
    --border: #c9c4be;
    --card: #fbfaf8;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.55;
    font-size: 16px;
}

h1, h2, h3, h4 {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    color: var(--opter-green);
    line-height: 1.15;
    letter-spacing: -.01em;
}

h1 { font-size: 2.625rem; margin: 0 0 1rem; }
h2 { font-size: 1.875rem; margin: 0 0 1rem; }
h3 { font-size: 1.5rem; margin: 1.5rem 0 .625rem; }

a { color: var(--cta); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
    background: var(--opter-beige-light);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: .9em;
}

pre {
    background: var(--opter-green);
    color: #e6f0ea;
    padding: .85rem 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: .75rem 0;
    font-size: .85rem;
    line-height: 1.5;
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
}

.site-header {
    background: var(--opter-green);
    color: var(--opter-beige-light);
    border-bottom: 4px solid var(--opter-orange);
}

.site-header .container { padding: 1.25rem 1.5rem; }

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.lang-switch {
    display: flex;
    gap: .35rem;
    align-items: center;
}

.lang-switch .lang {
    color: var(--opter-beige-light);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .06em;
    padding: .3rem .55rem;
    border-radius: 3px;
    border: 1px solid transparent;
}

.lang-switch .lang:hover {
    background: rgba(255,255,255,.08);
    text-decoration: none;
}

.lang-switch .lang.current {
    background: var(--opter-orange);
    color: #fff;
}

.info-note {
    margin: 1.5rem 0 .5rem;
    color: var(--muted);
    font-style: italic;
    font-size: .9rem;
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: .75rem;
    color: inherit;
    text-decoration: none;
}

.brand:hover { text-decoration: none; }

.brand-mark {
    font-family: Roboto, sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: .01em;
}

.brand-tool {
    font-family: Roboto, sans-serif;
    font-size: .9rem;
    font-weight: 500;
    color: var(--opter-soft-green);
    text-transform: uppercase;
    letter-spacing: .12em;
}

.hero {
    padding: 2.5rem 0 1.5rem;
}

.hero h1 {
    max-width: 720px;
}

.lede {
    font-size: 1.15rem;
    color: var(--opter-gray);
    max-width: 720px;
    margin: 0 0 1rem;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.form-section label {
    display: block;
    font-weight: 500;
    margin-bottom: .5rem;
    color: var(--opter-green);
}

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

.input-row input {
    flex: 1;
    padding: .7rem .9rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: #fff;
    color: var(--fg);
}

.input-row input:focus {
    outline: 2px solid var(--opter-soft-green);
    outline-offset: 1px;
    border-color: var(--opter-green);
}

.input-row button {
    padding: .7rem 1.6rem;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    background: var(--cta);
    color: #fff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: .02em;
    transition: background-color .12s ease-in-out;
}

.input-row button:hover { background: #d8430b; }

.hint {
    margin: .5rem 0 0;
    color: var(--muted);
    font-size: .9rem;
}

.error-box {
    border-left: 4px solid var(--fail);
}

.error-box h2 { color: var(--fail); }

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
    margin: 1rem 0 1.25rem;
}

.summary-cell {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .85rem 1rem;
    background: var(--opter-beige-light);
}

.summary-cell .label {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .25rem;
}

.summary-cell .value {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--opter-green);
}

.summary-cell.ok { border-left: 4px solid var(--ok); }
.summary-cell.fail { border-left: 4px solid var(--fail); background: #fbeded; }
.summary-cell.warn { border-left: 4px solid var(--warn); background: var(--opter-yellow); }

.summary-cell.fail .value { color: var(--fail); }

.issues {
    list-style: none;
    padding: 0;
    margin: 0;
}

.issues .issue {
    border-left: 4px solid var(--muted);
    background: var(--opter-beige-light);
    padding: .7rem 1rem;
    margin-bottom: .5rem;
    border-radius: 3px;
}

.issue strong { color: var(--opter-green); }

.issue.error { border-left-color: var(--fail); background: #fbeded; }
.issue.error strong { color: var(--fail); }
.issue.warning { border-left-color: var(--warn); background: var(--opter-yellow); }
.issue.info { border-left-color: var(--opter-soft-green); background: #eaf6ef; }

.issue p { margin: .2rem 0 0; }

.verdicts {
    width: 100%;
    border-collapse: collapse;
    margin-top: .5rem;
    background: #fff;
    border: 1px solid var(--border);
}

.verdicts th, .verdicts td {
    border-bottom: 1px solid var(--border);
    padding: .6rem .85rem;
    text-align: left;
    vertical-align: top;
}

.verdicts thead {
    background: var(--opter-green);
    color: #fff;
}

.verdicts th {
    font-weight: 500;
    border-bottom: none;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .8rem;
}

.verdicts tbody tr:nth-child(even) { background: var(--opter-beige-light); }
.verdicts tr.ok td:nth-child(3) { color: var(--ok); font-weight: 600; }
.verdicts tr.fail td:nth-child(3) { color: var(--fail); font-weight: 600; }

.reasons {
    margin: 0;
    padding-left: 1.2rem;
}

.cert {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .65rem 1rem;
    margin-bottom: .5rem;
    background: var(--opter-beige-light);
}

.cert summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--opter-green);
}

.cert summary .role {
    display: inline-block;
    min-width: 100px;
    color: var(--cta);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .06em;
}

.cert summary .issuer {
    color: var(--muted);
    font-weight: 400;
    margin-left: .5rem;
}

.cert dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
    margin: .75rem 0 .25rem;
    font-size: .92rem;
}

.cert dt {
    color: var(--muted);
    font-weight: 500;
}

.cert dd {
    margin: 0;
    word-break: break-word;
}

.fingerprint {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
    font-size: .85rem;
}

.anchor-notes {
    color: var(--muted);
    font-style: italic;
    margin: .5rem 0 0;
}

.wire-order {
    margin: 1rem 0;
    background: var(--opter-beige-light);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .65rem 1rem;
}

.wire-order summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--opter-green);
}

.wire-order ol {
    margin: .5rem 0 0 0;
    padding-left: 1.5rem;
}

.wire-order .muted { color: var(--muted); }

.wire-order-detail {
    color: var(--fail);
    margin: .5rem 0 0;
}

.tldr-versions {
    margin: 1rem 0 .5rem;
}

.tldr-line {
    margin: 0 0 .35rem;
    padding: .55rem .85rem;
    border-radius: 3px;
    font-size: 1.05rem;
    font-weight: 500;
    border-left: 4px solid var(--border);
}

.tldr-ok {
    color: var(--ok);
    background: #eaf6ef;
    border-left-color: var(--ok);
}

.tldr-fail {
    color: var(--fail);
    background: #fbeded;
    border-left-color: var(--fail);
}

.tldr-line strong {
    font-weight: 700;
}

.info p { max-width: 760px; }
.info ul, .info ol { padding-left: 1.25rem; max-width: 760px; }
.info li { margin-bottom: .35rem; }
.info h3 { color: var(--opter-green); margin-top: 1.5rem; }

.site-footer {
    background: var(--opter-green);
    color: var(--opter-beige-light);
    margin-top: 2rem;
    font-size: .85rem;
}

.site-footer .container {
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.site-footer p { margin: 0; }