/* ============================================================
   Phone Verify — стили блока подтверждения в /settings + модалка
   с OTP-вводом 4-значного flashcall-кода.
   Использует общие токены теплой светлой темы:
       --brand, --green, --red, --bg-card, --border, --r-md, --shadow-3.
   ============================================================ */

/* ===== Бейдж статуса возле label «Телефон» в настройках ===== */
.set-verify-pill {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}
.set-verify-pill[data-state="verified"] {
    background: var(--green-bg, #daeddf);
    color: var(--green-ink, #2e6849);
}
.set-verify-pill[data-state="unverified"] {
    background: var(--amber-bg, #f8ebc5);
    color: var(--amber-ink, #7a5d14);
}
.set-verify-pill[data-state="verified"]::before { content: '✓ '; }

/* ===== Строка телефона + кнопка ===== */
.set-phone-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.set-phone-row .set-input { flex: 1; }
.set-verify-btn {
    flex-shrink: 0;
    padding: 0 16px;
    font-size: 13px; font-weight: 600;
    background: var(--brand, #3d3a8e);
    color: #fff;
    border: none;
    border-radius: var(--r-md, 10px);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.set-verify-btn:hover { background: var(--brand-hover, #5754ae); }
.set-verify-btn:active { transform: translateY(1px); }
.set-verify-btn:disabled {
    background: var(--text-dim, #8a7f73);
    cursor: not-allowed;
    opacity: 0.6;
}
.set-phone-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-dim, #8a7f73);
    min-height: 16px;
}

/* ===== Soft-баннер «подтвердите телефон» в шапке ===== */
.phone-verify-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: var(--amber-bg, #f8ebc5);
    color: var(--amber-ink, #7a5d14);
    border-bottom: 1px solid var(--border, #eae3d5);
    font-size: 13px;
    animation: anim-fade-down 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.phone-verify-banner-ico { font-size: 18px; flex-shrink: 0; }
.phone-verify-banner-text { flex: 1; }
.phone-verify-banner-text a {
    color: var(--amber-ink, #7a5d14);
    text-decoration: underline; text-underline-offset: 2px;
    font-weight: 600;
}
.phone-verify-banner-close {
    background: none; border: none; cursor: pointer;
    color: inherit; opacity: 0.6;
    font-size: 18px; padding: 4px 8px;
    border-radius: 6px;
    transition: opacity 0.15s, background 0.15s;
}
.phone-verify-banner-close:hover { opacity: 1; background: rgba(122,93,20,0.1); }

/* ===== Модалка ввода кода ===== */
.pv-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 16, 12, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    animation: anim-fade-in 0.18s ease-out both;
    padding: 20px;
}
/* `display: flex` выше перетирает дефолтное поведение [hidden] (display:none) —
   без этой строки модалка показывалась бы при загрузке любой страницы. */
.pv-overlay[hidden] { display: none !important; }
.pv-card {
    position: relative;
    width: 100%; max-width: 420px;
    background: var(--bg-card, #fff);
    border-radius: var(--r-lg, 14px);
    padding: 32px 28px 24px;
    box-shadow: var(--shadow-3, 0 18px 40px rgba(60,50,40,.10), 0 6px 14px rgba(60,50,40,.06));
    text-align: center;
    animation: anim-scale-in 0.22s cubic-bezier(0.22,1,0.36,1) both;
}
.pv-close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px;
    border: none; background: transparent;
    color: var(--text-dim, #8a7f73);
    font-size: 16px; cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.pv-close:hover { background: var(--bg-soft, #f4efe5); color: var(--text, #2a2622); }

.pv-ico {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: var(--brand-soft, #e8e6f7);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
}
.pv-ico-ok {
    background: var(--green-bg, #daeddf);
    color: var(--green-ink, #2e6849);
    font-weight: 700;
}
.pv-h {
    font-size: 20px; font-weight: 700;
    color: var(--text, #2a2622);
    margin-bottom: 8px;
}
.pv-sub {
    font-size: 14px; line-height: 1.5;
    color: var(--text-secondary, #595048);
    margin-bottom: 20px;
}
.pv-sub b { color: var(--text, #2a2622); }

/* OTP-инпуты */
.pv-otp {
    display: flex; justify-content: center; gap: 8px;
    margin-bottom: 16px;
}
.pv-otp-input {
    width: 48px; height: 56px;
    text-align: center;
    font-size: 24px; font-weight: 700;
    border: 2px solid var(--border, #eae3d5);
    border-radius: var(--r-md, 10px);
    background: var(--bg-card, #fff);
    color: var(--text, #2a2622);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pv-otp-input:focus {
    outline: none;
    border-color: var(--brand, #3d3a8e);
    box-shadow: 0 0 0 3px rgba(61,58,142,0.15);
}
.pv-otp.is-err .pv-otp-input {
    border-color: var(--red, #c75a6e);
    box-shadow: 0 0 0 3px var(--red-bg, #f7dfe3);
    animation: anim-shake 0.55s ease-in-out;
}

.pv-err {
    margin: 0 0 14px;
    padding: 8px 12px;
    background: var(--red-bg, #f7dfe3);
    color: var(--red-ink, #8e3a4a);
    border-radius: var(--r-md, 10px);
    font-size: 13px;
}

.pv-foot {
    font-size: 12px;
    color: var(--text-dim, #8a7f73);
    min-height: 24px;
}
.pv-resend-timer b { font-weight: 600; }
.pv-resend-btn {
    background: none; border: none;
    color: var(--brand, #3d3a8e);
    font-size: 13px; font-weight: 600;
    cursor: pointer; padding: 0;
    text-decoration: underline; text-underline-offset: 2px;
}
.pv-resend-btn:hover { color: var(--brand-hover, #5754ae); }

.pv-devcode {
    margin-top: 16px; padding: 10px 14px;
    background: var(--amber-bg, #f8ebc5);
    color: var(--amber-ink, #7a5d14);
    border-radius: var(--r-md, 10px);
    font-size: 12px;
    text-align: left;
}
.pv-devcode b { font-family: ui-monospace, 'Cascadia Code', Menlo, monospace; }

.pv-primary-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--brand, #3d3a8e);
    color: #fff;
    border: none;
    border-radius: var(--r-md, 10px);
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    text-align: center;
}
.pv-primary-btn:hover { background: var(--brand-hover, #5754ae); }

/* ===== Карточка Telegram в /settings ===== */
.tg-link-empty .tg-link-desc {
    font-size: 13px;
    color: var(--text-secondary, #595048);
    margin-bottom: 14px;
    line-height: 1.5;
}
.tg-link-active {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
}
.tg-link-info {
    flex: 1;
    min-width: 200px;
    display: flex; flex-direction: column; gap: 6px;
}
.tg-link-row {
    display: flex; gap: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.tg-link-label {
    color: var(--text-dim, #8a7f73);
    min-width: 80px;
}
.tg-link-value {
    color: var(--text, #2a2622);
    font-weight: 500;
}
.set-verify-btn-danger {
    background: var(--red-bg, #f7dfe3) !important;
    color: var(--red-ink, #8e3a4a) !important;
}
.set-verify-btn-danger:hover { background: var(--red, #c75a6e) !important; color: #fff !important; }

.tg-link-poll-state {
    text-align: center;
    color: var(--text-dim, #8a7f73);
    font-size: 13px;
    line-height: 1.4;
}
.tg-link-poll-state::before {
    content: '';
    display: inline-block;
    width: 12px; height: 12px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid var(--border, #eae3d5);
    border-top-color: var(--brand, #3d3a8e);
    border-radius: 50%;
    animation: anim-spin 0.8s linear infinite;
}

/* ===== Модалка пересчёта цены (reprice) ===== */
.reprice-date-row {
    display: flex; align-items: center; gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}
.reprice-date-row label {
    font-size: 13px;
    color: var(--text-secondary, #595048);
}
.reprice-date-row .set-input {
    width: auto;
    padding: 8px 12px;
    border: 1px solid var(--border, #eae3d5);
    border-radius: 10px;
    font-size: 14px; font-family: inherit;
    background: var(--bg-card, #fff);
    color: var(--text, #2a2622);
}
.reprice-date-row .set-input:focus {
    outline: none;
    border-color: var(--brand, #3d3a8e);
    box-shadow: 0 0 0 3px rgba(61,58,142,0.1);
}
.pv-btn-ghost {
    background: transparent !important;
    color: var(--text-secondary, #595048) !important;
    border: 1px solid var(--border, #eae3d5) !important;
}
.pv-btn-ghost:hover {
    background: var(--bg-soft, #f4efe5) !important;
    color: var(--text, #2a2622) !important;
}

/* ===== API-ключи в /settings ===== */
.ak-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ak-empty {
    font-size: 13px; color: var(--text-dim, #8a7f73);
    padding: 10px 0;
}
.ak-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card-2, #fbf8f2);
    border: 1px solid var(--border, #eae3d5);
    border-radius: 10px;
}
.ak-row-body { flex: 1; min-width: 0; }
.ak-row-name { font-size: 14px; font-weight: 600; color: var(--text, #2a2622); }
.ak-row-meta {
    font-size: 12px; color: var(--text-dim, #8a7f73);
    margin-top: 2px; line-height: 1.5;
}
.ak-row-meta code {
    font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
    background: var(--bg-soft, #f4efe5);
    padding: 1px 5px; border-radius: 5px;
}
.ak-revoke-btn {
    flex-shrink: 0;
    background: none; border: 1px solid var(--border, #eae3d5);
    color: var(--text-dim, #8a7f73);
    font-size: 12px; font-weight: 600;
    padding: 6px 12px; border-radius: 8px;
    cursor: pointer; font-family: inherit;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ak-revoke-btn:hover {
    border-color: var(--red, #c75a6e);
    color: var(--red-ink, #8e3a4a);
    background: var(--red-bg, #f7dfe3);
}

/* Модалка создания */
.ak-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; text-align: left; }
.ak-form .set-input {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border, #eae3d5);
    border-radius: 10px; font-size: 14px; font-family: inherit;
    background: var(--bg-card, #fff); color: var(--text, #2a2622);
}
.ak-form .set-input:focus {
    outline: none;
    border-color: var(--brand, #3d3a8e);
    box-shadow: 0 0 0 3px rgba(61,58,142,0.1);
}
.ak-scope {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; line-height: 1.45;
    color: var(--text-secondary, #595048);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.12s;
}
.ak-scope:hover { background: var(--bg-soft, #f4efe5); }
.ak-scope input { margin-top: 2px; accent-color: var(--brand, #3d3a8e); }
.ak-scope b { color: var(--text, #2a2622); }

/* Показ ключа */
.ak-key-box {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-soft, #f4efe5);
    border: 1px solid var(--border, #eae3d5);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
.ak-key-box code {
    flex: 1;
    font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
    font-size: 12px;
    word-break: break-all;
    text-align: left;
    color: var(--text, #2a2622);
}
.ak-copy-btn {
    flex-shrink: 0;
    background: var(--brand, #3d3a8e);
    color: #fff; border: none;
    font-size: 12px; font-weight: 600;
    padding: 7px 12px; border-radius: 8px;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s;
}
.ak-copy-btn:hover { background: var(--brand-hover, #5754ae); }

.ak-howto {
    text-align: left;
    background: var(--amber-bg, #f8ebc5);
    border-radius: 10px;
    padding: 10px 12px;
}
.ak-howto-title {
    font-size: 12px; font-weight: 600;
    color: var(--amber-ink, #7a5d14);
    margin-bottom: 6px;
}
.ak-howto-code {
    display: block;
    font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
    font-size: 11px;
    word-break: break-all;
    color: var(--amber-ink, #7a5d14);
    line-height: 1.5;
}