.bok-oco {
    --bok-oco-blue: #007AFF;
    --bok-oco-blue-hover: #0064D1;
    --bok-oco-text: #1D1D1F;
    --bok-oco-muted: #6E6E73;
    --bok-oco-border: #D2D2D7;
    --bok-oco-radius: 12px;
    --bok-oco-radius-sm: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
    color: var(--bok-oco-text);
    max-width: 520px;
    margin: 0 auto;
}
.bok-oco *, .bok-oco *::before, .bok-oco *::after { box-sizing: border-box; }

.bok-oco__form {
    background: #fff;
    border: 1px solid var(--bok-oco-border);
    border-radius: var(--bok-oco-radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}
.bok-oco__title { margin: 0; font-size: 20px; }
.bok-oco__intro { margin: 0; color: var(--bok-oco-muted); font-size: 14px; line-height: 1.5; }

.bok-oco__field { display: flex; flex-direction: column; gap: 6px; }
.bok-oco__field > span { font-size: 13px; color: var(--bok-oco-muted); font-weight: 500; }
.bok-oco__field input,
.bok-oco__birthday input {
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid var(--bok-oco-border);
    border-radius: var(--bok-oco-radius-sm);
    background: #fff;
    font: inherit;
    color: inherit;
    width: 100%;
}
.bok-oco__field input:focus,
.bok-oco__birthday input:focus {
    outline: 2px solid var(--bok-oco-blue);
    outline-offset: 1px;
    border-color: var(--bok-oco-blue);
}

.bok-oco__birthday {
    border: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 10px;
}
.bok-oco__birthday legend { padding: 0 0 6px; font-size: 13px; color: var(--bok-oco-muted); font-weight: 500; }
.bok-oco__birthday label { display: flex; flex-direction: column; gap: 4px; }
.bok-oco__birthday label > span { font-size: 12px; color: var(--bok-oco-muted); }

.bok-oco__honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.bok-oco__actions { display: flex; }
.bok-oco__submit {
    flex: 1;
    background: var(--bok-oco-blue);
    color: #fff;
    border: 1px solid var(--bok-oco-blue);
    padding: 12px 20px;
    min-height: 44px;
    border-radius: var(--bok-oco-radius-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.bok-oco__submit:hover:not(:disabled) { background: var(--bok-oco-blue-hover); border-color: var(--bok-oco-blue-hover); }
.bok-oco__submit:disabled { opacity: .6; cursor: progress; }

.bok-oco__feedback { font-size: 14px; line-height: 1.5; }
.bok-oco__feedback.is-success { color: #1F883D; }
.bok-oco__feedback.is-error { color: #B42318; }
.bok-oco__feedback ul { margin: 6px 0 0 18px; padding: 0; }