/* BCrypt 页只包含模式切换、密码输入、成本因子和校验结果样式。 */
.bcrypt-mode,
.bcrypt-form,
.bcrypt-result,
.bcrypt-verify-result { max-width: 800px; }
.bcrypt-mode {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.bcrypt-mode legend {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 14px;
}

.bcrypt-mode-options {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.bcrypt-mode-options label {
    position: relative;
    cursor: pointer;
}

.bcrypt-mode-options input {
    position: absolute;
    opacity: 0;
}

.bcrypt-mode-options span {
    display: block;
    min-width: 112px;
    padding: 8px 15px;
    text-align: center;
}

.bcrypt-mode-options label + label span {
    border-left: 1px solid var(--line);
}

.bcrypt-mode-options input:checked + span {
    color: #ffffff;
    background: var(--forest);
}

.bcrypt-mode-options input:focus-visible + span {
    outline: 3px solid var(--eye);
    outline-offset: -3px;
}

.bcrypt-field + .bcrypt-field {
    margin-top: 20px;
}

.bcrypt-field-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 9px;
}

.bcrypt-field-heading label,
/* 密码显示选项是横向可点击行，不能继承字段标题的块级布局。 */
.bcrypt-field > label:not(.password-option) {
    display: block;
    font-weight: 750;
}

.password-bytes {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 13px;
}

.password-bytes.is-over-limit {
    color: var(--error);
    font-weight: 750;
}

.bcrypt-form input[type="password"],
.bcrypt-form input[type="text"],
.bcrypt-form input[type="number"],
.bcrypt-form textarea,
.bcrypt-result textarea {
    display: block;
    width: 100%;
    padding: var(--tool-control-padding) 12px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
    font: 500 var(--tool-input-font)/22px ui-monospace, "Cascadia Code", Consolas, monospace;
    letter-spacing: 0;
}

.bcrypt-form input[type="password"],
.bcrypt-form input[type="text"] {
    min-height: var(--tool-control-height);
}

.bcrypt-form input[type="number"] {
    width: 112px;
    min-height: var(--tool-control-height);
}

.bcrypt-form textarea,
.bcrypt-result textarea {
    min-height: 80px;
    resize: vertical;
    overflow-wrap: anywhere;
}

.bcrypt-form input:focus,
.bcrypt-form textarea:focus,
.bcrypt-result textarea:focus {
    border-color: var(--forest);
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.password-option {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
}

.password-option input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--orange-dark);
}

.field-help {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.bcrypt-result,
.bcrypt-verify-result {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.bcrypt-result label {
    display: block;
    margin-bottom: 9px;
    font-weight: 750;
}

.bcrypt-result-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
}

.bcrypt-result-actions p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.bcrypt-verify-result {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 800;
}

.bcrypt-verify-result.is-match {
    color: var(--forest);
}

.bcrypt-verify-result.is-mismatch {
    color: var(--error);
}

.primary-command:disabled {
    cursor: wait;
    opacity: 0.68;
}

@media (max-width: 520px) {
    .bcrypt-mode-options {
        display: flex;
    }

    .bcrypt-mode-options label {
        flex: 1 1 50%;
    }

    .bcrypt-mode-options span {
        min-width: 0;
    }

    .bcrypt-result-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}