/* Generated appearance overrides. Source: existing methoden/index.html. */
:root {
    --blue-950: rgb(21, 38, 57);
    --blue-900: rgb(21, 38, 57);
    --blue-700: rgb(21, 94, 239);
    --blue-100: rgb(237, 243, 255);
    --blue-50: rgb(245, 248, 250);
    --green-600: rgb(8, 127, 120);
    --green-50: rgb(233, 248, 241);
    --orange-600: rgb(217, 119, 6);
    --orange-50: rgb(255, 244, 223);
    --red-600: rgb(199, 54, 54);
    --red-50: rgb(255, 240, 240);
    --ink: rgb(21, 38, 57);
    --muted: rgb(107, 119, 133);
    --line: rgb(224, 230, 235);
    --soft: rgb(245, 248, 250);
    --white: rgb(255, 255, 255);
    --shadow: var(--aw-shadow)
}
body {
    background: linear-gradient(180deg, rgb(255, 255, 255) 0, rgb(245, 248, 250) 520px, rgb(255, 255, 255) 100%)
}
.topbar {
    border-bottom: 1px solid rgba(224, 230, 235, 0.95);
    box-shadow: var(--aw-shadow)
}
.mode-chip {
    color: rgb(81, 97, 113)
}
.panel {
    box-shadow: var(--aw-shadow)
}
.section-head p:last-child,
.summary-text {
    color: rgb(81, 97, 113)
}
.field span,
.data-box legend {
    color: rgb(21, 38, 57)
}
input,
select,
textarea {
    box-shadow: inset 0 1px 0 rgba(21, 38, 57, 0.02), 0 2px 8px rgba(21, 38, 57, 0.03)
}
input:focus,
select:focus,
textarea:focus {
    box-shadow: var(--aw-shadow)
}
.check-item {
    border: 1px solid rgb(224, 230, 235);
    color: rgb(21, 38, 57)
}
.primary-button {
    box-shadow: var(--aw-shadow)
}
.primary-button:hover {
    box-shadow: var(--aw-shadow)
}
.secondary-button,
.copy-button,
.icon-button {
    border-color: rgb(224, 230, 235)
}
.score-badge {
    border: 1px solid rgba(8, 127, 120, 0.24);
    color: rgb(8, 127, 120)
}
.score-badge span {
    color: rgb(68, 112, 92)
}
.score-badge.tight {
    color: rgb(161, 86, 4)
}
.score-badge.critical {
    color: rgb(155, 39, 39)
}
.advice-item {
    color: rgb(81, 97, 113)
}
.empty-state {
    border: 1px dashed rgb(224, 230, 235);
    color: rgb(81, 97, 113)
}
.method-card.best {
    border-color: rgba(21, 94, 239, 0.34);
    background: linear-gradient(180deg, rgb(245, 248, 250), rgb(255, 255, 255))
}
.tag {
    border: 1px solid rgb(224, 230, 235);
    color: rgb(81, 97, 113)
}
.tag.good {
    border-color: rgba(8, 127, 120, 0.28);
    color: rgb(8, 127, 120)
}
.tag.warning {
    color: rgb(154, 86, 5)
}
.tag.critical {
    color: rgb(155, 39, 39)
}
.score-track {
    background: rgb(237, 243, 255)
}
.info-box li,
.plan-content li {
    color: rgb(81, 97, 113)
}
.reason-list li {
    color: rgb(81, 97, 113)
}
th {
    color: rgb(81, 97, 113);
    background: rgb(245, 248, 250)
}
td {
    color: rgb(21, 38, 57)
}
.method-name span {
    color: rgb(107, 119, 133)
}
.plan-section p {
    color: rgb(81, 97, 113)
}
.tool-footer {
    color: rgb(107, 119, 133)
}
.tool-footer a {
    color: rgb(16, 73, 190)
}
.toast {
    border: 1px solid rgba(21, 94, 239, 0.22);
    box-shadow: var(--aw-shadow)
}