/* Публикация сайтов: окно и раздел «Мои сайты».
   Цвета берём из переменных темы — иначе окно выпадет из светлой темы. */

.psite-backdrop {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0, 0, 0, .55);
}
.psite-dialog {
    position: fixed; z-index: 9999;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    max-height: min(86vh, 760px); overflow: auto;
    padding: 22px;
    background: var(--panel, #14161f);
    color: var(--text, #e7e7ee);
    border: 1px solid var(--border, #262a3b);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.psite-dialog-wide { width: min(760px, calc(100vw - 32px)); }
.psite-title { margin: 0 0 16px; font-size: 19px; font-weight: 800; }
.psite-label {
    display: block; margin: 12px 0 5px;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-muted, #8b90a6);
}
.psite-path {
    padding: 9px 11px; border-radius: 8px;
    background: var(--bg-soft, #0f111a);
    border: 1px solid var(--border, #262a3b);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
    word-break: break-all;
}
.psite-input {
    width: 100%; padding: 10px 12px; border-radius: 8px;
    background: var(--bg-soft, #0f111a);
    border: 1px solid var(--border, #262a3b);
    color: var(--text, #e7e7ee); font-size: 14px;
}
.psite-input:focus { outline: none; border-color: var(--osc-signal, #f05a32); }
.psite-slug-row { display: flex; align-items: center; gap: 8px; }
.psite-slug-row .psite-input { flex: 1; min-width: 0; }
.psite-suffix { color: var(--text-muted, #8b90a6); font-size: 13px; white-space: nowrap; }
.psite-hint { margin-top: 6px; min-height: 18px; font-size: 12.5px; color: #4ade80; }
.psite-hint.is-bad { color: #f87171; }
.psite-check {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; font-size: 13.5px; cursor: pointer;
}
.psite-note {
    margin: 14px 0 0; padding: 10px 12px; border-radius: 8px;
    background: rgba(240, 90, 50, .08);
    border: 1px solid rgba(240, 90, 50, .22);
    font-size: 12.5px; line-height: 1.5; color: var(--text, #e7e7ee);
}
.psite-steps { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.psite-step {
    padding: 8px 10px; border-radius: 8px; font-size: 13px;
    background: var(--bg-soft, #0f111a);
    border: 1px solid var(--border, #262a3b);
}
.psite-step-ok { border-color: rgba(74, 222, 128, .4); }
.psite-step-bad { border-color: rgba(248, 113, 113, .5); color: #fca5a5; }
.psite-done { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.psite-url { color: var(--osc-signal, #f05a32); font-size: 13.5px; word-break: break-all; }
.psite-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 10px; }
.psite-btn {
    min-height: 40px; padding: 0 16px; border-radius: 9px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; border: 1px solid var(--border, #262a3b);
    background: transparent; color: var(--text, #e7e7ee);
}
.psite-btn:hover { border-color: currentColor; }
.psite-btn-main { background: var(--osc-signal, #f05a32); border-color: transparent; color: #fff; }
.psite-btn-main:disabled { opacity: .55; cursor: default; }
.psite-btn-danger { color: #f87171; }

.psite-list { display: flex; flex-direction: column; gap: 12px; }
.psite-card {
    padding: 14px; border-radius: 10px;
    background: var(--bg-soft, #0f111a);
    border: 1px solid var(--border, #262a3b);
}
.psite-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.psite-badge {
    padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: rgba(255, 255, 255, .07); color: var(--text-muted, #8b90a6);
}
.psite-badge-active { background: rgba(74, 222, 128, .16); color: #4ade80; }
.psite-badge-blocked { background: rgba(248, 113, 113, .16); color: #f87171; }
.psite-meta { margin-top: 6px; font-size: 12px; color: var(--text-muted, #8b90a6); }
.psite-card-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.psite-card-actions .psite-btn { min-height: 34px; padding: 0 12px; font-size: 12.5px; }

/* Телефон: окно во весь экран, кнопки в палец. */
@media (max-width: 640px) {
    .psite-dialog {
        top: 0; left: 0; transform: none;
        width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0;
    }
    .psite-actions { position: sticky; bottom: 0; padding-top: 12px;
                     background: var(--panel, #14161f); }
    .psite-btn { min-height: 44px; }
}