.slpd-app {
    --slpd-green: #236a35;
    --slpd-green-dark: #174a26;
    --slpd-green-soft: #edf7ef;
    --slpd-red: #c91d24;
    --slpd-blue-soft: #eef5fb;
    --slpd-border: #d6e0e7;
    --slpd-text: #1f2933;
    --slpd-muted: #5b6875;
    --slpd-danger: #a12622;
    color: var(--slpd-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.55;
    margin: 24px auto;
    max-width: 900px;
}
.slpd-app * { box-sizing: border-box; }
.slpd-shell {
    background: #fff;
    border: 1px solid var(--slpd-border);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(31,41,51,.10);
    overflow: hidden;
}
.slpd-header {
    align-items: center;
    background: linear-gradient(135deg, var(--slpd-green-soft), #fff);
    border-bottom: 1px solid var(--slpd-border);
    display: flex;
    gap: 18px;
    padding: 26px 30px;
}
.slpd-mark {
    align-items: center;
    background: var(--slpd-green);
    border-radius: 50%;
    color: #fff !important;
    display: flex;
    flex: 0 0 54px;
    font-size: 31px;
    font-weight: 800;
    height: 54px;
    justify-content: center;
    -webkit-text-fill-color: #fff !important;
}
.slpd-kicker {
    color: var(--slpd-green-dark);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .03em;
    margin: 0 0 4px;
    text-transform: uppercase;
}
.slpd-header h1 {
    color: var(--slpd-text);
    font-size: clamp(27px, 4vw, 38px);
    line-height: 1.16;
    margin: 0;
}
.slpd-header-note {
    color: #42515e;
    font-size: 16px;
    font-weight: 700;
    margin: 9px 0 0;
}
.slpd-main { padding: 30px; }
.slpd-welcome h2,
.slpd-question h2,
.slpd-summary h2,
.slpd-finish h2 {
    color: var(--slpd-text);
    font-size: clamp(25px, 3vw, 33px);
    line-height: 1.25;
    margin: 0 0 18px;
}
.slpd-lead { font-size: 21px; }
.slpd-info,
.slpd-notice,
.slpd-success {
    border-radius: 11px;
    margin: 17px 0;
    padding: 15px 17px;
}
.slpd-info { background: var(--slpd-blue-soft); border-left: 5px solid #3978a8; }
.slpd-notice { background: #fff7e6; border: 1px solid #e6b64d; }
.slpd-success { background: var(--slpd-green-soft); border: 1px solid #78b98a; color: #174a26; }
.slpd-progress-wrap { margin-bottom: 26px; }
.slpd-progress-text { color: var(--slpd-muted); font-size: 16px; margin: 0 0 7px; }
.slpd-progress { background: #e9eef2; border-radius: 999px; height: 12px; overflow: hidden; }
.slpd-progress > div { background: var(--slpd-green); border-radius: 999px; height: 100%; transition: width .25s ease; }
.slpd-section {
    background: var(--slpd-green-soft);
    border: 1px solid #bedbc4;
    border-radius: 999px;
    color: var(--slpd-green-dark);
    display: inline-block;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 18px;
    padding: 6px 12px;
}
.slpd-help { color: var(--slpd-muted); margin: -6px 0 18px; }
.slpd-input,
.slpd-select,
.slpd-textarea {
    background: #fff !important;
    border: 2px solid #87939d !important;
    border-radius: 12px !important;
    color: var(--slpd-text) !important;
    display: block;
    font: inherit;
    min-height: 58px;
    padding: 13px 15px;
    width: 100%;
    -webkit-text-fill-color: var(--slpd-text) !important;
}
.slpd-textarea { min-height: 125px; resize: vertical; }
.slpd-input:focus,
.slpd-select:focus,
.slpd-textarea:focus { border-color: #1557b0 !important; outline: 4px solid rgba(21,87,176,.20); }
.slpd-input-row { align-items: stretch; display: grid; gap: 10px; grid-template-columns: minmax(0,1fr) auto; }
.slpd-choice-grid { display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.slpd-app .slpd-choice,
.slpd-app button.slpd-choice {
    appearance: none;
    -webkit-appearance: none;
    align-items: center;
    background: #fff !important;
    border: 2px solid #87939d !important;
    border-radius: 12px;
    color: var(--slpd-text) !important;
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
    font-weight: 800;
    justify-content: center;
    min-height: 58px;
    padding: 13px 16px;
    text-align: center;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--slpd-text) !important;
}
.slpd-app .slpd-choice:hover { background: #f5f8f6 !important; }
.slpd-app .slpd-choice.is-selected {
    background: var(--slpd-green-soft) !important;
    border-color: var(--slpd-green) !important;
    box-shadow: inset 0 0 0 1px var(--slpd-green);
    color: var(--slpd-green-dark) !important;
    -webkit-text-fill-color: var(--slpd-green-dark) !important;
}
.slpd-app .slpd-choice:disabled { cursor: wait; opacity: 1; }
.slpd-choice-hint { color: #4c5a66; font-size: 15px; margin: 10px 0 0; }
.slpd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.slpd-app .slpd-button,
.slpd-app button.slpd-button,
.slpd-app a.slpd-button {
    appearance: none;
    -webkit-appearance: none;
    align-items: center;
    background: #fff !important;
    border: 2px solid var(--slpd-green) !important;
    border-radius: 12px;
    color: var(--slpd-green-dark) !important;
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
    font-weight: 800;
    justify-content: center;
    min-height: 52px;
    padding: 12px 19px;
    text-align: center;
    text-decoration: none !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--slpd-green-dark) !important;
}
.slpd-app .slpd-button--primary,
.slpd-app button.slpd-button--primary,
.slpd-app a.slpd-button--primary {
    background: var(--slpd-green) !important;
    border-color: var(--slpd-green) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.slpd-app .slpd-button--primary:hover { background: var(--slpd-green-dark) !important; }
.slpd-app .slpd-button--red,
.slpd-app button.slpd-button--red {
    background: var(--slpd-red) !important;
    border-color: var(--slpd-red) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.slpd-app .slpd-button--secondary { border-color: #7b8792 !important; color: #35424d !important; -webkit-text-fill-color: #35424d !important; }
.slpd-app .slpd-button:disabled {
    background: #e8eeea !important;
    border-color: #bdc8c1 !important;
    color: #4f5d54 !important;
    cursor: not-allowed;
    opacity: 1;
    -webkit-text-fill-color: #4f5d54 !important;
}
.slpd-app .slpd-button.is-reading { background: #eef6ff !important; border-color: #1557b0 !important; color: #0d3c78 !important; -webkit-text-fill-color: #0d3c78 !important; }
.slpd-app .slpd-button.is-listening { background: #fff0ef !important; border-color: var(--slpd-red) !important; color: var(--slpd-red) !important; -webkit-text-fill-color: var(--slpd-red) !important; }
.slpd-status { border-radius: 10px; margin-top: 16px; min-height: 0; }
.slpd-status:not(:empty) { background: var(--slpd-green-soft); padding: 12px 14px; }
.slpd-status.is-error:not(:empty) { background: #fff1f0; color: var(--slpd-danger); }
.slpd-summary-list { display: grid; gap: 14px; margin: 20px 0; }
.slpd-summary-group { background: #f7f9fa; border: 1px solid var(--slpd-border); border-radius: 12px; padding: 15px; }
.slpd-summary-group h3 { font-size: 21px; margin: 0 0 10px; }
.slpd-summary-row { border-top: 1px solid #dde4e9; display: grid; gap: 10px; grid-template-columns: minmax(170px, .7fr) minmax(0, 1.3fr); padding: 10px 0; }
.slpd-summary-row:first-of-type { border-top: 0; }
.slpd-summary-value { overflow-wrap: anywhere; }
.slpd-footer { background: #f6f8f9; border-top: 1px solid var(--slpd-border); color: #52616d; font-size: 14px; padding: 16px 30px; }
.slpd-footer p { margin: 3px 0; }
.slpd-proof-list { margin-bottom: 0; }
.slpd-finish-buttons { display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 700px) {
    .slpd-app { font-size: 17px; margin: 12px auto; }
    .slpd-header { align-items: flex-start; padding: 21px 18px; }
    .slpd-mark { flex-basis: 46px; height: 46px; }
    .slpd-main { padding: 22px 18px; }
    .slpd-choice-grid,
    .slpd-finish-buttons { grid-template-columns: 1fr; }
    .slpd-input-row { grid-template-columns: 1fr; }
    .slpd-actions .slpd-button { width: 100%; }
    .slpd-summary-row { grid-template-columns: 1fr; gap: 3px; }
    .slpd-footer { padding: 15px 18px; }
}