/* ============================================================================
   YFG ID - оформление кабинета, экрана согласия, страниц приложения
   и попапа покупки на стороннем сайте.

   Все цвета, тени и границы берутся из переменных темы (static/style.css),
   поэтому страницы автоматически работают в тёмной теме. Фолбэки в var()
   нужны для попапа и для случаев, когда style.css не подключён.
   ========================================================================= */

/* ---------- Общий каркас страниц кабинета ---------- */

.yfgid-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 0 64px;
}

.yfgid-header {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 26px;
}

.yfgid-header h1 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Иконка перед заголовком - фирменный градиент */
.yfgid-header h1 i {
    background: var(--gradient-main, linear-gradient(135deg, #c2410c, #c2410c));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.yfgid-subtitle {
    margin: 0;
    max-width: 620px;
    color: var(--text-secondary, #43474f);
    font-size: 15px;
    line-height: 1.55;
}

.yfgid-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* ---------- Карточки ---------- */

.yfgid-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #dedcd6);
    border-radius: 20px;
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: var(--shadow, 0 2px 12px rgba(0, 0, 0, .04));
}

.yfgid-card > h2 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.yfgid-card > h2 i {
    color: var(--color-primary, #c2410c);
}

.yfgid-card > h2:not(:first-child) {
    margin-top: 26px;
}

.yfgid-success-card {
    border-color: rgba(34, 197, 94, .45);
    box-shadow: 0 12px 40px -18px rgba(34, 197, 94, .45);
}

.yfgid-success-card h1 {
    margin: 0 0 8px;
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.yfgid-success-card h1 i {
    color: var(--toast-success, #22c55e);
}

/* ---------- Подсказки, заметки, код ---------- */

.yfgid-hint {
    margin: 6px 0 0;
    color: var(--text-secondary, #43474f);
    font-size: 13px;
    line-height: 1.5;
}

.yfgid-hint code,
.yfgid-code,
code.yfgid-client-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.yfgid-hint code {
    background: var(--code-bg, #f0efec);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 12px;
}

.yfgid-code {
    display: block;
    margin: 0;
    padding: 14px 16px;
    background: var(--code-bg, #f0efec);
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 14px;
    font-size: 12.5px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.yfgid-note {
    border-left: 3px solid var(--color-secondary, #c2410c);
    background: rgba(194, 65, 12, .08);
    border-radius: 0 14px 14px 0;
    padding: 14px 18px;
    margin: 18px 0;
    font-size: 14px;
    line-height: 1.55;
}

.yfgid-note--warn {
    border-color: var(--color-primary, #c2410c);
    background: rgba(234, 88, 12, .10);
}

/* ---------- Бейджи ---------- */

.yfgid-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(194, 65, 12, .14);
    color: var(--color-secondary-dark, #9a3412);
}

.yfgid-badge--ok {
    background: rgba(34, 197, 94, .16);
    /* 5.66:1 на светлом фоне бейджа */
    color: #146c34;
}

.yfgid-badge--off,
.yfgid-badge--muted {
    background: rgba(120, 120, 140, .16);
    color: var(--text-muted, #777c86);
}

.yfgid-badge--warn {
    background: rgba(234, 88, 12, .16);
    color: #b45309;
}

.yfgid-badge--danger {
    background: rgba(239, 68, 68, .16);
    color: #b91c1c;
}

.dark-theme .yfgid-badge--ok { color: #4ade80; }
.dark-theme .yfgid-badge--warn { color: #fdba74; }
.dark-theme .yfgid-badge--danger { color: #fca5a5; }
.dark-theme .yfgid-badge--off,
.dark-theme .yfgid-badge--muted { color: var(--text-secondary); }
.dark-theme .yfgid-badge--primary { color: var(--color-secondary-text); }

/* ---------- Пустые состояния ---------- */

.yfgid-empty {
    text-align: center;
    padding: 56px 24px;
    border: 1px dashed var(--border-color, #dedcd6);
    border-radius: 22px;
    background: var(--bg-card, #fff);
}

.yfgid-empty > i {
    font-size: 38px;
    background: var(--gradient-main, linear-gradient(135deg, #c2410c, #c2410c));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.yfgid-empty h2 {
    margin: 16px 0 8px;
    font-size: 20px;
}

.yfgid-empty p {
    margin: 0 auto 20px;
    max-width: 460px;
    color: var(--text-secondary, #43474f);
    font-size: 14px;
}

/* ============================================================================
   СПИСОК ПРИЛОЖЕНИЙ
   ========================================================================= */

.yfgid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.yfgid-stat {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #dedcd6);
    border-radius: 16px;
    padding: 16px 18px;
}

.yfgid-stat__value {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    background: var(--gradient-main, linear-gradient(135deg, #c2410c, #c2410c));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.yfgid-stat__label {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-secondary, #43474f);
}

.yfgid-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.yfgid-toolbar form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1 1 260px;
}

.yfgid-toolbar input[type="search"] {
    flex: 1 1 auto;
    padding: 10px 16px;
    border-radius: 40px;
    border: 1px solid var(--border-color, #dedcd6);
    background: var(--bg-input, #fff);
    color: var(--text-primary, #16181d);
    font: inherit;
    font-size: 14px;
}

/* Выпадающие списки в стиле полей YFG ID */
.yfgid-toolbar select,
.yfgid-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10px 38px 10px 18px;
    border-radius: 40px;
    border: 1px solid var(--border-color, #dedcd6);
    background-color: var(--bg-input, #fff);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237a7494' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
    color: var(--text-primary, #16181d);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

.yfgid-toolbar select:hover,
.yfgid-form select:hover {
    border-color: var(--color-primary, #c2410c);
}

.yfgid-toolbar select:focus-visible,
.yfgid-form select:focus-visible {
    outline: none;
    border-color: var(--color-primary, #c2410c);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .18);
}

.dark-theme .yfgid-toolbar select,
.dark-theme .yfgid-form select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b8b2d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

.yfgid-toolbar select option,
.yfgid-form select option {
    background: var(--bg-card, #fff);
    color: var(--text-primary, #16181d);
}

.yfgid-apps {
    display: grid;
    gap: 16px;
}

.yfgid-app-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #dedcd6);
    border-radius: 20px;
    padding: 20px 22px;
    box-shadow: var(--shadow, 0 2px 12px rgba(0, 0, 0, .04));
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.yfgid-app-card:hover {
    box-shadow: var(--shadow-hover, 0 8px 30px rgba(194, 65, 12, .15));
    border-color: var(--color-secondary-light, #fdba74);
}

.yfgid-app-card--off {
    opacity: .72;
    border-style: dashed;
}

.yfgid-app-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.yfgid-app-ident {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.yfgid-app-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.yfgid-app-ident h2 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
}

.yfgid-app-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: cover;
    flex: 0 0 auto;
}

.yfgid-app-logo--letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-main, linear-gradient(135deg, #c2410c, #c2410c));
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

code.yfgid-client-id {
    display: inline-block;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--code-bg, #f0efec);
    color: var(--text-secondary, #43474f);
    font-size: 12px;
    word-break: break-all;
}

.yfgid-app-desc {
    margin: 0 0 14px;
    color: var(--text-secondary, #43474f);
    font-size: 14px;
    line-height: 1.55;
}

.yfgid-app-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px 20px;
    margin: 0 0 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border-light, #efeeea);
    border-bottom: 1px solid var(--border-light, #efeeea);
}

.yfgid-app-meta div {
    min-width: 0;
}

.yfgid-app-meta dt {
    margin: 0 0 3px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #777c86);
}

.yfgid-app-meta dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    word-break: break-word;
}

.yfgid-app-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.yfgid-app-actions .yfgid-hint {
    margin: 0;
}

.yfgid-app-actions form {
    display: inline-flex;
}

.yfgid-docs-hint {
    margin-top: 28px;
    padding: 20px 24px;
    border-radius: 20px;
    border: 1px solid var(--border-color, #dedcd6);
    background: var(--bg-hover, #f0efec);
}

.yfgid-docs-hint h2 {
    margin: 0 0 12px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.yfgid-docs-hint ul {
    margin: 0 0 10px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.7;
}

.yfgid-docs-hint code {
    background: var(--bg-card, #fff);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 12.5px;
}

.yfgid-docs-hint p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #43474f);
}

/* ============================================================================
   ФОРМА ПРИЛОЖЕНИЯ
   ========================================================================= */

.yfgid-form {
    display: grid;
    gap: 16px;
}

.yfgid-field {
    display: grid;
    gap: 6px;
}

.yfgid-field > label {
    font-weight: 600;
    font-size: 14px;
}

.yfgid-field input[type="text"],
.yfgid-field input[type="url"],
.yfgid-field input[type="number"],
.yfgid-field textarea,
.yfgid-field select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #dedcd6);
    background: var(--bg-input, #fff);
    color: var(--text-primary, #16181d);
    font: inherit;
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}

.yfgid-field input:focus,
.yfgid-field textarea:focus,
.yfgid-field select:focus {
    outline: none;
    border-color: var(--color-secondary, #c2410c);
    box-shadow: 0 0 0 3px rgba(194, 65, 12, .18);
}

.yfgid-field textarea {
    min-height: 92px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
}

.yfgid-field--error input,
.yfgid-field--error textarea {
    border-color: var(--toast-error, #ef4444);
}

.yfgid-field-error {
    margin: 0;
    color: var(--toast-error, #ef4444);
    font-size: 13px;
    font-weight: 500;
}

.yfgid-counter {
    justify-self: end;
    font-size: 12px;
    color: var(--text-muted, #777c86);
}

/* Копирование идентификаторов */

.yfgid-copy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.yfgid-copy-row > label {
    flex: 1 1 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #43474f);
}

.yfgid-copy-row code,
.yfgid-copy-row input[type="text"],
.yfgid-copy-row input[type="password"] {
    flex: 1 1 260px;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #dedcd6);
    background: var(--code-bg, #f0efec);
    color: var(--text-primary, #16181d);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    overflow-x: auto;
    white-space: nowrap;
}

.yfgid-copy-row code {
    display: block;
    padding: 11px 14px;
    letter-spacing: .02em;
}

/* Кнопки копирования/показа секрета - компактные, а не во всю ширину */
.yfgid-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #dedcd6);
    background: var(--bg-card, #fff);
    color: var(--text-secondary, #43474f);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.yfgid-copy:hover {
    border-color: var(--color-primary, #c2410c);
    background: var(--bg-hover, #f0efec);
    color: var(--color-primary, #c2410c);
}

.yfgid-copy:active {
    transform: translateY(1px);
}

.yfgid-copy:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Список эндпоинтов */

.yfgid-endpoints {
    display: grid;
    gap: 10px;
    margin: 0 0 8px;
}

.yfgid-endpoints > div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    align-items: baseline;
}

.yfgid-endpoints dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #777c86);
}

.yfgid-endpoints dd {
    margin: 0;
    min-width: 0;
}

.yfgid-endpoints code {
    display: block;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--code-bg, #f0efec);
    font-size: 12.5px;
    word-break: break-all;
}

/* Готовый сниппет встраивания */

.yfgid-snippet-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.yfgid-snippet-head h3 {
    margin: 0;
    font-size: 15px;
}

.yfgid-snippet-builder {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.yfgid-snippet-builder .yfgid-field {
    flex: 1 1 200px;
}

/* Выбор прав доступа */

.yfgid-scope-picker {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.yfgid-scope-picker fieldset {
    border: 1px solid var(--border-color, #dedcd6);
    border-radius: 16px;
    padding: 14px 16px;
    margin: 0;
}

.yfgid-scope-picker legend {
    padding: 0 8px;
    font-weight: 700;
    font-size: 14px;
}

.yfgid-scope-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--text-secondary, #43474f);
    cursor: pointer;
}

.yfgid-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    cursor: pointer;
}

.yfgid-check input {
    margin-top: 3px;
    accent-color: var(--color-secondary, #c2410c);
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.yfgid-check span {
    display: grid;
    gap: 2px;
    font-size: 14px;
    line-height: 1.45;
}

.yfgid-check strong {
    font-weight: 600;
}

.yfgid-check em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--text-secondary, #43474f);
}

/* Действия формы и опасная зона */

.yfgid-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
}

.yfgid-danger {
    border-color: rgba(239, 68, 68, .4);
}

.yfgid-danger > h2 i {
    color: var(--toast-error, #ef4444);
}

.yfgid-danger > p {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--text-secondary, #43474f);
    line-height: 1.55;
}

.yfgid-danger form {
    margin-bottom: 10px;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 40px;
    border: 1px solid rgba(239, 68, 68, .5);
    background: rgba(239, 68, 68, .12);
    color: #b91c1c;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, .2);
    transform: translateY(-1px);
}

.dark-theme .btn-danger { color: #fca5a5; }

/* Проверка настроек и журнал */

.yfgid-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 14px;
}

.yfgid-checklist li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.yfgid-checklist i {
    margin-top: 3px;
}

.yfgid-checklist-text {
    display: grid;
    gap: 2px;
}

.yfgid-checklist-text strong {
    font-weight: 600;
    color: var(--text-primary, #16181d);
}

.yfgid-checklist-text > span {
    font-size: 13px;
    color: var(--text-muted, #777c86);
}

.yfgid-checklist .is-ok i { color: var(--toast-success, #22c55e); }
.yfgid-checklist .is-bad i { color: var(--toast-error, #ef4444); }
.yfgid-checklist .is-warn i { color: var(--color-primary, #c2410c); }

.yfgid-token-list,
.yfgid-audit {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 13px;
}

.yfgid-token-list li,
.yfgid-audit li {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--bg-hover, #f0efec);
}

.yfgid-audit time,
.yfgid-token-list time {
    color: var(--text-muted, #777c86);
    font-size: 12px;
}

/* ============================================================================
   ЭКРАН СОГЛАСИЯ
   ========================================================================= */

.yfgid-consent {
    max-width: 620px;
    margin: 12px auto 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #dedcd6);
    border-radius: 24px;
    padding: 28px 30px 26px;
    box-shadow: var(--shadow-heavy, 0 20px 50px -12px rgba(0, 0, 0, .15));
}

.yfgid-consent-head {
    margin-bottom: 22px;
}

.yfgid-consent-app {
    display: flex;
    gap: 16px;
    align-items: center;
}

.yfgid-consent-app h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    word-break: break-word;
}

.yfgid-app-link {
    font-size: 13px;
    color: var(--color-primary-text, #bd3f0a);
    word-break: break-all;
}

.yfgid-consent-lead {
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary, #43474f);
}

.yfgid-consent-user {
    display: block;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bg-hover, #f0efec);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary, #43474f);
}

.yfgid-consent-user strong {
    color: var(--text-primary, #16181d);
}

.yfgid-consent-user .yfgid-app-link {
    word-break: break-all;
}

.yfgid-consent-user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.yfgid-consent-form {
    display: grid;
    gap: 18px;
}

.yfgid-scope-list {
    display: grid;
    gap: 14px;
}

.yfgid-scope-group h2 {
    margin: 0 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted, #777c86);
}

.yfgid-scope-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.yfgid-scope-group li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 14px;
    background: var(--bg-hover, #f0efec);
}

.yfgid-scope-group li > i {
    margin-top: 3px;
    width: 18px;
    text-align: center;
    color: var(--color-secondary, #c2410c);
}

.yfgid-scope-group li > div {
    display: grid;
    gap: 2px;
}

.yfgid-scope-title {
    font-weight: 600;
    font-size: 14px;
}

.yfgid-scope-desc {
    font-size: 13px;
    color: var(--text-secondary, #43474f);
    line-height: 1.5;
}

.yfgid-consent-note {
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(34, 197, 94, .10);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary, #43474f);
}

.yfgid-consent-note i {
    color: var(--toast-success, #22c55e);
    margin-right: 6px;
}

.yfgid-consent-note a {
    color: var(--color-secondary, #c2410c);
    font-weight: 600;
}

.yfgid-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.yfgid-consent-actions .btn-secondary { order: 1; }
.yfgid-consent-actions .btn-primary { order: 2; }

/* ============================================================================
   ПОДКЛЮЧЁННЫЕ ПРИЛОЖЕНИЯ
   ========================================================================= */

.yfgid-connections {
    display: grid;
    gap: 16px;
}

.yfgid-connection {
    margin: 0;
}

.yfgid-connection-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.yfgid-connection-head h2 {
    margin: 0 0 4px;
    font-size: 18px;
}

.yfgid-scope-inline {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
}

.yfgid-scope-inline li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--tag-bg, #efeeea);
    color: var(--tag-color, #9a3412);
    font-size: 12.5px;
    font-weight: 500;
}

/* ============================================================================
   ПОПАП ПОКУПКИ (сторонний сайт в iframe-окне или отдельной вкладке)
   ========================================================================= */

body.yfgid-embed-body {
    margin: 0;
    padding: 0;
    background: var(--bg-body, #f6f6f4);
    color: var(--text-primary, #16181d);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.yfgid-embed-checkout {
    max-width: 460px;
    margin: 0 auto;
    padding: 16px 16px 26px;
}

.yfgid-embed-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--text-muted, #777c86);
}

.yfgid-embed-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.01em;
    background: var(--gradient-main, linear-gradient(135deg, #c2410c, #c2410c));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.yfgid-embed-provider {
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yfgid-embed-image {
    display: block;
    width: 100%;
    height: 168px;
    object-fit: cover;
    border-radius: 18px;
    margin-bottom: 16px;
    background: var(--code-bg, #f0efec);
}

.yfgid-embed-title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.yfgid-embed-meta {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary, #43474f);
}

.yfgid-embed-meta i {
    width: 18px;
    margin-right: 6px;
    color: var(--color-primary, #c2410c);
}

.yfgid-embed-login,
.yfgid-embed-error,
.yfgid-embed-form {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #dedcd6);
    border-radius: 18px;
    padding: 18px;
    font-size: 14px;
    box-shadow: var(--shadow, 0 2px 12px rgba(0, 0, 0, .04));
}

.yfgid-embed-error {
    border-left: 3px solid var(--color-primary, #c2410c);
}

.yfgid-embed-login p {
    margin: 0 0 14px;
    color: var(--text-secondary, #43474f);
    line-height: 1.55;
}

.yfgid-embed-form {
    display: grid;
    gap: 14px;
}

.yfgid-embed-form > label {
    font-weight: 600;
    font-size: 13.5px;
}

.yfgid-embed-quantity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.yfgid-embed-quantity button {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #dedcd6);
    background: var(--bg-hover, #f0efec);
    color: var(--text-primary, #16181d);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.yfgid-embed-quantity button:hover {
    background: var(--border-color, #dedcd6);
}

.yfgid-embed-quantity input {
    width: 76px;
    height: 40px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid var(--border-color, #dedcd6);
    background: var(--bg-input, #fff);
    color: var(--text-primary, #16181d);
    font: inherit;
    font-weight: 600;
}

.yfgid-embed-balance-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.yfgid-embed-balance-label i {
    color: var(--color-primary, #c2410c);
}

.yfgid-embed-balance strong {
    color: var(--text-primary, #16181d);
}

.yfgid-embed-balance {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-secondary, #43474f);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.yfgid-embed-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 0;
    border-radius: 40px;
    background: var(--gradient-main, linear-gradient(135deg, #c2410c, #c2410c));
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.yfgid-embed-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(194, 65, 12, .7);
}

.yfgid-embed-button--primary {
    width: 100%;
}

.yfgid-embed-button[disabled] {
    opacity: .6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.yfgid-embed-result {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
}

.yfgid-embed-result--ok {
    background: rgba(34, 197, 94, .14);
    color: #15803d;
}

.yfgid-embed-result--error {
    background: rgba(239, 68, 68, .14);
    color: #b91c1c;
}

.dark-theme .yfgid-embed-result--ok { color: #4ade80; }
.dark-theme .yfgid-embed-result--error { color: #fca5a5; }

.yfgid-embed-result a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.yfgid-embed-footer {
    margin: 18px 0 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--text-muted, #777c86);
}

/* Скелетон загрузки попапа и виджета */
.yfgid-skeleton {
    border-radius: 14px;
    background: linear-gradient(90deg,
        var(--bg-hover, #f0efec) 25%,
        var(--border-light, #efeeea) 37%,
        var(--bg-hover, #f0efec) 63%);
    background-size: 400% 100%;
    animation: yfgid-shimmer 1.4s ease infinite;
}

@keyframes yfgid-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ============================================================================
   УВЕДОМЛЕНИЯ В КАБИНЕТЕ (JS-тосты)
   ========================================================================= */

.yfgid-toast-host {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.yfgid-toast {
    pointer-events: auto;
    min-width: 220px;
    max-width: 340px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #dedcd6);
    box-shadow: var(--shadow-heavy, 0 20px 50px -12px rgba(0, 0, 0, .15));
    font-size: 14px;
    animation: yfgid-toast-in .2s ease;
}

.yfgid-toast--ok { border-left: 3px solid var(--toast-success, #22c55e); }
.yfgid-toast--error { border-left: 3px solid var(--toast-error, #ef4444); }

@keyframes yfgid-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   ДОПОЛНЕНИЯ: строки списков, журнал, постраничная навигация, формы в строку
   ========================================================================= */

/* Журнал событий приложения: строки собираются в шаблонах как
   .yfgid-audit-row (что случилось) и .yfgid-audit-meta (когда и откуда). */
.yfgid-audit-row {
    font-weight: 600;
    color: var(--text-primary, #16181d);
}

.yfgid-audit-meta,
.yfgid-token-meta {
    color: var(--text-muted, #777c86);
    font-size: 12px;
}

.yfgid-token-row {
    align-items: flex-start;
}

.yfgid-token-meta code {
    font-size: 12px;
    color: var(--text-secondary, #43474f);
}

/* Формы внутри карточек: одна строка полей, встроенные кнопки действий */
.yfgid-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 18px;
}

.yfgid-app-ident h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #16181d);
}

.yfgid-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.yfgid-inline-form {
    display: inline-flex;
    margin: 0;
}

.yfgid-logo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.yfgid-logo-preview {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid var(--border-color, #dedcd6);
    background: var(--bg-hover, #f0efec);
    font-size: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Постраничная навигация списка приложений */
.yfgid-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin: 18px 0 6px;
}

.yfgid-pager-link {
    padding: 8px 16px;
    border-radius: 40px;
    border: 1px solid var(--border-color, #dedcd6);
    background: var(--bg-card, #fff);
    color: var(--text-primary, #16181d);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s, transform .2s;
}

.yfgid-pager-link:hover {
    background: var(--bg-hover, #f0efec);
    border-color: var(--color-primary, #c2410c);
    transform: translateY(-1px);
}

/* Попап и виджет: знак бренда и подпись в шапке */
.yfgid-embed-brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-main, linear-gradient(135deg, #c2410c, #c2410c));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    flex: 0 0 auto;
}

.yfgid-embed-brand-text {
    background: var(--gradient-main, linear-gradient(135deg, #c2410c, #c2410c));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.yfgid-embed-stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color, #dedcd6);
    border-radius: 40px;
    padding: 4px;
    background: var(--bg-card, #fff);
}

.yfgid-embed-stepper button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-hover, #f0efec);
    color: var(--text-primary, #16181d);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.yfgid-embed-stepper button:hover:not([disabled]) {
    background: var(--gradient-main, linear-gradient(135deg, #c2410c, #c2410c));
    color: #fff;
}

.yfgid-embed-stepper button[disabled] {
    opacity: .45;
    cursor: default;
}

.yfgid-embed-stepper output {
    min-width: 34px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary, #16181d);
}

/* Типы билетов в попапе: радио-карточки. Цена и остаток берутся из data-*
   атрибутов (их читает yfgid_checkout.js), поэтому разметку можно менять
   без правок в скрипте. */
.yfgid-embed-types {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.yfgid-embed-types-legend {
    padding: 0;
    margin-bottom: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #16181d);
}

.yfgid-embed-type {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-color, #dedcd6);
    border-radius: 14px;
    background: var(--bg-card, #fff);
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.yfgid-embed-type:hover {
    border-color: var(--color-primary, #c2410c);
}

.yfgid-embed-type:has(.yfgid-embed-type-input:checked) {
    border-color: var(--color-primary, #c2410c);
    background: var(--bg-hover, #f0efec);
    box-shadow: 0 0 0 2px rgba(234, 88, 12, .22);
}

/* Класс дублирует :has() для браузеров без него - его ставит сам input при
   выборе типа (см. syncTicketType в yfgid_checkout.js). */
.yfgid-embed-type--active {
    border-color: var(--color-primary, #c2410c);
    background: var(--bg-hover, #f0efec);
    box-shadow: 0 0 0 2px rgba(234, 88, 12, .22);
}

.yfgid-embed-type--sold-out {
    opacity: .55;
    cursor: default;
}

.yfgid-embed-type-input {
    margin: 3px 0 0;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary, #c2410c);
}

.yfgid-embed-type-body {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.yfgid-embed-type-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.yfgid-embed-type-name {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text-primary, #16181d);
    overflow-wrap: anywhere;
}

.yfgid-embed-type-price {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--color-primary-text, #bd3f0a);
    white-space: nowrap;
}

.yfgid-embed-type-desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary, #43474f);
}

.yfgid-embed-type-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 12.5px;
    color: var(--text-secondary, #43474f);
}

.yfgid-embed-type-zones i {
    margin-right: 5px;
    color: var(--color-primary, #c2410c);
}

.yfgid-embed-type-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-hover, #f0efec);
}

.yfgid-embed-type-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Цена и итог: итог пересчитывается при выборе типа и смене количества. */
.yfgid-embed-totals {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 13.5px;
    color: var(--text-secondary, #43474f);
}

.yfgid-embed-totals strong {
    color: var(--text-primary, #16181d);
}

.yfgid-embed-total strong {
    font-size: 16px;
    color: var(--color-primary-text, #bd3f0a);
}

/* ============================================================================
   ДОСТУПНОСТЬ И АДАПТИВНОСТЬ
   ========================================================================= */

.yfgid-page :focus-visible,
.yfgid-consent :focus-visible,
.yfgid-embed-checkout :focus-visible {
    outline: 2px solid var(--color-secondary, #c2410c);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .yfgid-app-meta { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .yfgid-endpoints > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 640px) {
    .yfgid-page { padding: 18px 0 48px; }
    .yfgid-header h1 { font-size: 22px; }
    .yfgid-card,
    .yfgid-app-card { padding: 16px; border-radius: 16px; }
    .yfgid-consent { padding: 20px 18px; border-radius: 18px; margin-top: 0; }
    .yfgid-scope-picker { grid-template-columns: 1fr; }
    .yfgid-form-actions,
    .yfgid-consent-actions { flex-direction: column-reverse; align-items: stretch; }
    .yfgid-form-actions > *,
    .yfgid-consent-actions > * { justify-content: center; width: 100%; }
    .yfgid-consent-app { flex-wrap: wrap; }
    .yfgid-embed-checkout { padding: 12px 12px 20px; }
    .yfgid-embed-image { height: 140px; border-radius: 14px; }
}

/* ---------- Документация и примеры на странице приложений ---------- */

.yfgid-docs-title {
    margin: 22px 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #16181d);
}

.yfgid-tips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.yfgid-tips li {
    position: relative;
    padding: 10px 14px 10px 42px;
    background: var(--bg-secondary, #f6f6f4);
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary, #43474f);
}

.yfgid-tips li::before {
    content: '\2713';
    position: absolute;
    left: 12px;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary-soft, rgba(194, 65, 12, .12));
    color: var(--color-primary, #c2410c);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.yfgid-tips code {
    background: var(--code-bg, #f0efec);
    border-radius: 6px;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.yfgid-doc {
    margin-top: 10px;
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 14px;
    background: var(--bg-card, #fff);
    overflow: hidden;
}

.yfgid-doc > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.yfgid-doc > summary::-webkit-details-marker { display: none; }

.yfgid-doc > summary::before {
    content: '>';
    color: var(--color-primary, #c2410c);
    transition: transform .15s ease;
}

.yfgid-doc[open] > summary::before { transform: rotate(90deg); }

.yfgid-doc > summary:hover { background: var(--bg-secondary, #f6f6f4); }

.yfgid-doc > summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .18);
}

.yfgid-doc .yfgid-hint { margin: 0 16px 10px; }

.yfgid-doc-code {
    position: relative;
    margin: 0 16px 16px;
}

.yfgid-code-block {
    margin: 0;
    padding: 14px 96px 14px 16px;
    background: var(--code-block-bg, #16181d);
    color: var(--code-block-color, #eceae6);
    border-radius: 12px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre;
}

.yfgid-doc-code .yfgid-code-block {
    padding: 40px 16px 14px;
}

.yfgid-doc-code .yfgid-copy {
    position: absolute;
    top: 8px;
    right: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .yfgid-app-card,
    .yfgid-embed-button,
    .btn-danger { transition: none; }
    .yfgid-skeleton { animation: none; }
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 12px;
    color: var(--text-muted);
    font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
.passkey-login-btn {
    width: 100%;
    justify-content: center;
}
.passkey-status {
    min-height: 18px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.passkey-status.is-error { color: var(--toast-error, #dc2626); }
.passkey-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.passkey-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-input);
}
.passkey-meta { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.passkey-empty { color: var(--text-muted); }

/* Вебхуки: компактная таблица подписок */
.yfgid-table-wrap { overflow-x: auto; margin-top: 12px; }
.yfgid-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.yfgid-table th, .yfgid-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  vertical-align: top;
}
.yfgid-table th { font-weight: 600; white-space: nowrap; }
.yfgid-table tr:last-child td { border-bottom: 0; }
.yfgid-table code { overflow-wrap: anywhere; }
.yfgid-table .yfgid-badge { margin: 0 4px 4px 0; }

/* ---------- Публичная документация YFG ID (/id/docs) ---------- */

.yfgid-docs-page {
    max-width: 1240px;
}

.yfgid-docs-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 26px;
    padding: 38px 40px 34px;
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0, rgba(194, 65, 12, .14), transparent 46%),
        var(--bg-card, #fff);
    box-shadow: var(--shadow-sm, 0 8px 24px rgba(17, 24, 39, .05));
}

.yfgid-docs-hero::after {
    content: 'YFG ID';
    position: absolute;
    right: 34px;
    bottom: -18px;
    color: var(--text-primary, #16181d);
    font-size: clamp(64px, 11vw, 148px);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: 1;
    opacity: .035;
    pointer-events: none;
}

.yfgid-docs-hero__badges,
.yfgid-docs-actions,
.yfgid-docs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.yfgid-docs-hero__badges { margin-bottom: 16px; }

.yfgid-docs-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    max-width: 850px;
    font-size: clamp(32px, 4.2vw, 50px);
    line-height: 1.06;
    letter-spacing: -.025em;
}

.yfgid-docs-lead {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 0 22px;
    color: var(--text-secondary, #43474f);
    font-size: 16px;
    line-height: 1.65;
}

.yfgid-docs-actions {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.yfgid-docs-actions .btn-primary,
.yfgid-docs-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    text-decoration: none;
}

.yfgid-docs-meta {
    position: relative;
    z-index: 1;
    align-items: stretch;
    gap: 10px;
}

.yfgid-docs-meta > div {
    min-width: 190px;
    padding: 10px 13px;
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 12px;
    background: var(--bg-secondary, #f6f6f4);
}

.yfgid-docs-meta dt {
    margin-bottom: 3px;
    color: var(--text-muted, #7a7f88);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.yfgid-docs-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-primary, #16181d);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
}

.yfgid-docs-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.yfgid-docs-nav {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 116px);
    overflow: auto;
    padding: 16px;
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 16px;
    background: var(--bg-card, #fff);
}

.yfgid-docs-nav__title {
    margin: 0 0 10px;
    color: var(--text-muted, #7a7f88);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.yfgid-docs-nav a {
    display: block;
    padding: 7px 9px;
    border-radius: 8px;
    color: var(--text-secondary, #43474f);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.yfgid-docs-nav a:hover,
.yfgid-docs-nav a:focus-visible {
    background: var(--bg-secondary, #f6f6f4);
    color: var(--color-primary, #c2410c);
    outline: none;
}

.yfgid-docs-main {
    min-width: 0;
}

.yfgid-docs-section {
    scroll-margin-top: 92px;
    padding: 26px 28px;
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 18px;
    background: var(--bg-card, #fff);
}

.yfgid-docs-section + .yfgid-docs-section {
    margin-top: 16px;
}

.yfgid-docs-section-head {
    display: flex;
    align-items: baseline;
    gap: 11px;
    margin-bottom: 12px;
}

.yfgid-docs-section-head__num {
    flex: 0 0 auto;
    color: var(--color-primary, #c2410c);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
}

.yfgid-docs-section h2 {
    margin: 0;
    font-size: clamp(21px, 2.3vw, 28px);
    line-height: 1.18;
    letter-spacing: -.01em;
}

.yfgid-docs-section h3 {
    margin: 22px 0 9px;
    font-size: 16px;
    line-height: 1.3;
}

.yfgid-docs-section p,
.yfgid-docs-section li {
    color: var(--text-secondary, #43474f);
    font-size: 14px;
    line-height: 1.68;
}

.yfgid-docs-section p { margin: 0 0 12px; }
.yfgid-docs-section ul,
.yfgid-docs-section ol { margin: 0 0 14px; padding-left: 22px; }
.yfgid-docs-section li + li { margin-top: 5px; }

.yfgid-docs-section code {
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--code-bg, #f0efec);
    color: var(--text-primary, #16181d);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    overflow-wrap: anywhere;
}

.yfgid-docs-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.yfgid-docs-card {
    padding: 15px;
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 13px;
    background: var(--bg-secondary, #f6f6f4);
}

.yfgid-docs-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 9px;
    border-radius: 9px;
    background: var(--color-primary-soft, rgba(194, 65, 12, .12));
    color: var(--color-primary, #c2410c);
    font-size: 13px;
}

.yfgid-docs-card h3 {
    margin: 0 0 5px;
    font-size: 14px;
}

.yfgid-docs-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.yfgid-docs-callout {
    margin: 14px 0;
    padding: 12px 14px;
    border-left: 3px solid var(--color-primary, #c2410c);
    border-radius: 0 10px 10px 0;
    background: var(--bg-secondary, #f6f6f4);
    color: var(--text-secondary, #43474f);
    font-size: 13px;
    line-height: 1.6;
}

.yfgid-docs-callout--warning {
    border-left-color: #b45309;
    background: rgba(180, 83, 9, .07);
}

.yfgid-docs-callout strong { color: var(--text-primary, #16181d); }

.yfgid-docs-table-wrap {
    width: 100%;
    margin: 12px 0 16px;
    overflow-x: auto;
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

.yfgid-docs-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.5;
}

.yfgid-docs-table th,
.yfgid-docs-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-light, #efeeea);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.yfgid-docs-table th {
    background: var(--bg-secondary, #f6f6f4);
    color: var(--text-primary, #16181d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.yfgid-docs-table tr:last-child td { border-bottom: 0; }
.yfgid-docs-table code { white-space: nowrap; }

.yfgid-docs-code {
    position: relative;
    margin: 12px 0 16px;
}

.yfgid-docs-code .yfgid-copy {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 1;
}

.yfgid-docs-code .yfgid-code-block {
    padding: 54px 16px 14px;
    font-size: 12px;
    line-height: 1.55;
}

.yfgid-docs-code--wide .yfgid-code-block { font-size: 11.5px; }

.yfgid-docs-steps {
    display: grid;
    gap: 10px;
    margin: 14px 0;
    padding: 0;
    list-style: none;
    counter-reset: docs-step;
}

.yfgid-docs-steps > li {
    position: relative;
    padding: 13px 15px 13px 48px;
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 12px;
    background: var(--bg-secondary, #f6f6f4);
    counter-increment: docs-step;
}

.yfgid-docs-steps > li::before {
    content: counter(docs-step);
    position: absolute;
    left: 14px;
    top: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--color-primary, #c2410c);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.yfgid-docs-steps strong { color: var(--text-primary, #16181d); }
.yfgid-docs-steps p { margin: 3px 0 0; font-size: 13px; }

.yfgid-docs-inline-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

.yfgid-docs-inline-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--border-light, #efeeea);
    border-radius: 999px;
    color: var(--text-secondary, #43474f);
    font-size: 12px;
    text-decoration: none;
}

.yfgid-docs-inline-links a:hover {
    border-color: var(--color-primary, #c2410c);
    color: var(--color-primary, #c2410c);
}

@media (max-width: 1040px) {
    .yfgid-docs-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
    .yfgid-docs-hero { padding: 30px 28px; }
    .yfgid-docs-cards { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .yfgid-docs-layout { grid-template-columns: minmax(0, 1fr); }
    .yfgid-docs-nav {
        position: static;
        max-height: none;
        padding: 12px;
    }
    .yfgid-docs-nav nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px;
    }
    .yfgid-docs-nav a { font-size: 12px; }
    .yfgid-docs-section { padding: 20px 18px; }
}

@media (max-width: 560px) {
    .yfgid-docs-hero { padding: 22px 18px; border-radius: 20px; }
    .yfgid-docs-hero h1 { font-size: 30px; }
    .yfgid-docs-lead { font-size: 14px; }
    .yfgid-docs-actions .btn-primary,
    .yfgid-docs-actions .btn-secondary { flex: 1 1 100%; justify-content: center; }
    .yfgid-docs-meta { display: grid; grid-template-columns: 1fr; }
    .yfgid-docs-meta > div { min-width: 0; }
    .yfgid-docs-nav nav { grid-template-columns: 1fr; }
    .yfgid-docs-section { padding: 17px 14px; border-radius: 14px; }
    .yfgid-docs-code .yfgid-copy { top: 6px; right: 6px; }
    .yfgid-docs-code .yfgid-code-block { padding: 52px 12px 12px; font-size: 11px; }
    .yfgid-docs-table { min-width: 520px; }
    .yfgid-docs-table--stacked { min-width: 0; width: 100%; }
    .yfgid-docs-table--stacked thead { display: none; }
    .yfgid-docs-table--stacked tbody,
    .yfgid-docs-table--stacked tr,
    .yfgid-docs-table--stacked td { display: block; width: 100%; }
    .yfgid-docs-table--stacked tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color, #dedcd6);
    }
    .yfgid-docs-table--stacked td {
        padding: 3px 0;
        border: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .yfgid-docs-table--stacked td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--text-secondary, #43474f);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .yfgid-docs-table--stacked td:first-child { padding-top: 0; }
    .yfgid-docs-table--stacked code { white-space: pre-wrap; overflow-wrap: anywhere; }
}