:root {
    --bg: #0f1117;
    --bg-card: #1a1d29;
    --bg-input: #252836;
    --border: #2d3142;
    --text: #e4e6eb;
    --text-muted: #8b8fa3;
    --accent: #22c55e; /* Яркий зеленый из картинки */
    --accent-soft: #4ade80; /* Светлый зеленый */
    --accent-2: #10b981; /* Изумрудный для градиента */
    --accent-hover: #16a34a; /* Темный зеленый */
    --grad: linear-gradient(135deg, #22c55e, #10b981);
    --grad-glow: 0 2px 14px rgba(34,197,94,.4);
    --green: #4ade80;
    --red: #f87171;
    --orange: #fbbf24;
    --radius: 8px;
    --navbar-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

a { color: var(--accent-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%238b8fa3' d='M6 8L2 4h8z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
select:focus { outline: none; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
select option { background: var(--bg-card); color: var(--text); }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s, border-color .2s, color .2s;
    text-decoration: none;
}
.btn-primary {
    background: var(--grad);
    color: #fff;
    box-shadow: 0 2px 10px rgba(34,197,94,.25);
}
.btn-primary:hover {
    background: var(--grad);
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(34,197,94,.45);
    text-decoration: none;
}
.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-outline:hover {
    border-color: rgba(34,197,94,.55);
    color: var(--accent-soft);
    transform: translateY(-1px);
    text-decoration: none;
}
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-tiny { padding: 3px 10px; font-size: 12px; border-radius: 6px; }
.btn-danger {
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font: inherit;
    transition: all .2s;
}
.btn-danger:hover { background: #dc2626; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(239,68,68,.35); }
.btn-danger[disabled] { opacity: .4; cursor: not-allowed; transform: none; }

/* Container */
.container { max-width: 1100px; margin: 32px auto; padding: 0 24px; }
.container-sm { max-width: 460px; }

/* Headings */
h1 { font-size: 28px; margin-bottom: 8px; }
h2 { font-size: 20px; margin-bottom: 12px; }
h3 { font-size: 16px; margin-bottom: 6px; }
.subtitle { color: var(--text-muted); margin-bottom: 24px; font-size: 14px; }

/* Plugin grid (старая сеточная раскладка) */
.plugin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.plugin-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.plugin-card:hover {
    transform: translateY(-3px);
    border-color: rgba(34,197,94,.5);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.plugin-desc { color: var(--text-muted); font-size: 14px; flex-grow: 1; }
.plugin-prices { display: flex; flex-wrap: wrap; gap: 8px; }
.price-tag {
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-muted);
}
.price-perm { color: var(--green); border: 1px solid var(--green); }
.price-free { color: var(--orange); }
.plugin-actions { display: flex; gap: 8px; margin-top: 4px; }

/* Forms */
.form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 100%;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }
label { font-size: 14px; font-weight: 500; color: var(--text-muted); }
input, textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}
input:focus, textarea:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}
.hint { color: var(--text-muted); font-size: 12px; }
.form-footer { text-align: center; margin-top: 16px; color: var(--text-muted); }

/* Alerts */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; }
.alert-error { background: rgba(248,113,113,.1); border: 1px solid var(--red); color: var(--red); }
.alert-ok { background: rgba(74,222,128,.1); border: 1px solid var(--green); color: var(--green); }

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.table th, .table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.table th {
    background: var(--bg-input);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.table tbody tr { transition: background .15s; }
.table tbody tr:hover td { background: rgba(34,197,94,.05); }
.table tr:last-child td { border-bottom: none; }

/* Badges */
.badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.badge-ok { background: #27ae60; color: #fff; }
.badge-err { background: #e74c3c; color: #fff; }
.badge-wait { background: #f39c12; color: #fff; }
.badge-perm {
    background: var(--grad);
    color: #fff;
    box-shadow: 0 0 8px rgba(34,197,94,.4);
}

/* Misc */
.bind-code {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
}
.muted { color: var(--text-muted); }
.empty-state { text-align: center; color: var(--text-muted); padding: 40px; }
.section { margin-bottom: 32px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.info-box {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.info-box ol { margin-left: 20px; color: var(--text-muted); }
.info-box code { background: var(--bg-card); padding: 2px 6px; border-radius: 3px; }

/* ============ 2. ДОБАВЛЕНИЯ ============ */

/* Tabs */
.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}
.tab-link {
    padding: 8px 16px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--accent-soft); border-bottom-color: #22c55e; }

.admin-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.plugins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.plugin-card-header h3 { margin: 0 0 4px; font-size: 16px; }
.plugin-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}
.price-period { color: var(--text-muted); }
.price-value { font-weight: 600; }
.plugin-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

/* Modal — поддержка .show (account.php) и .open (profile.php / admin.php)
   z-index выше шапки (1000), чтобы окно не проваливалось под navbar */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.show,
.modal-overlay.open { display: flex; }
.modal {
    background: var(--bg-card);
    border: 1px solid rgba(34,197,94,.3);
    border-radius: 16px;
    padding: 32px;
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0,0,0,.5), 0 0 32px rgba(34,197,94,.08);
    animation: modalIn .18s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.modal h3 { font-size: 20px; margin-bottom: 20px; }
.modal-close {
    float: right;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    transition: color .15s;
}
.modal-close:hover { color: var(--accent-soft); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-actions form { margin: 0; }
.modal-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.modal-info-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.modal-info-row .label { color: var(--text-muted); }

/* Popup сервера */
.server-plugins-popup {
    display: none;
    position: absolute;
    background: var(--bg-card);
    border: 1px solid rgba(34,197,94,.3);
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
    z-index: 1500;
    min-width: 200px;
}
.server-plugins-popup.show { display: block; }
.popup-item { padding: 4px 8px; font-size: 13px; border-bottom: 1px solid var(--border); }
.popup-item:last-child { border-bottom: none; }
.plugin-count-link { cursor: pointer; color: var(--accent-soft); text-decoration: underline; }

/* Plugin card images */
.plugin-card-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--radius) var(--radius) 0 0;
}
.plugin-card-no-image {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, rgba(34,197,94,.1), rgba(16,185,129,.08));
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
}
.plugin-card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.plugin-card-body h3 { font-size: 17px; }

/* Tooltip */
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 11px;
    cursor: help;
    position: relative;
    margin-left: 6px;
    vertical-align: middle;
}
.tooltip-icon::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-input);
    border: 1px solid rgba(34,197,94,.3);
    padding: 10px 14px;
    border-radius: 8px;
    width: max-content;
    max-width: 300px;
    font-size: 13px;
    color: var(--text);
    z-index: 50;
    margin-bottom: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    line-height: 1.5;
}
.tooltip-icon:hover::after { opacity: 1; }

/* Сетка цен */
.price-periods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.price-period-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border-radius: 6px;
    padding: 8px 12px;
}
.price-period-label { font-size: 14px; white-space: nowrap; flex-shrink: 0; }
.price-period-item input { flex: 1; min-width: 0; }

/* no-spin */
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.no-spin { -moz-appearance: textfield; }

/* Admin layout */
.admin-wrapper {
    max-width: 1324px;
    margin: 0 auto;
    padding: 32px 24px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.admin-sidebar { width: 200px; flex-shrink: 0; position: sticky; top: 80px; }
.admin-sidebar a {
    display: block;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 4px;
    transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.admin-sidebar a:hover {
    background: var(--bg-input);
    color: var(--text);
    transform: translateX(2px);
    text-decoration: none;
}
.admin-sidebar a.active {
    background: var(--grad);
    color: #fff;
    box-shadow: var(--grad-glow);
}
.admin-wrapper > .container { margin: 0; padding: 0; flex: 1 1 1100px; max-width: 1100px; }
.admin-back { margin-bottom: 16px; }
@media (max-width: 900px) {
    .admin-wrapper { flex-direction: column; padding: 16px; }
    .admin-sidebar { width: 100%; position: static; }
    .admin-sidebar a { display: inline-block; margin: 0 4px 4px 0; }
}

/* Gallery / plugin detail (старая раскладка) */
.plugin-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}
.plugin-gallery-main { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); display: block; }
.plugin-gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.plugin-info-panel { display: flex; flex-direction: column; gap: 8px; }
.plugin-full-desc { color: var(--text-muted); font-size: 15px; line-height: 1.7; margin-bottom: 8px; }
.plugin-buy-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 8px;
}
.buy-periods-list { display: flex; flex-direction: column; gap: 10px; }
.buy-period-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color .2s;
}
.buy-period-row:hover { border-color: rgba(34,197,94,.5); }
.buy-period-info { display: flex; flex-direction: column; gap: 2px; }
.buy-period-name { font-size: 14px; font-weight: 500; }
.buy-period-price { font-size: 14px; color: var(--green); }
.plugin-meta { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.buy-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.buy-modal.open { display: flex; }
.buy-modal-content {
    background: var(--bg-card);
    border: 1px solid rgba(34,197,94,.3);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 420px;
    width: 90%;
}
.buy-modal-period, .buy-modal-price {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 15px;
}
@media (max-width: 768px) { .plugin-detail-layout { grid-template-columns: 1fr; } }

/* ============ 3. СТИЛИ СТРАНИЦ ============ */

/* ---------- upload.php + profile.php — тумблеры, IP ---------- */

.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: #3a3a4a;
    border-radius: 26px;
    transition: all .25s ease;
}
.slider:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: all .25s ease;
}
.switch input:checked + .slider {
    background: var(--grad);
    box-shadow: 0 0 10px rgba(34,197,94,.5);
}
.switch input:checked + .slider:before { transform: translateX(20px); }

.switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.switch-label { font-weight: 600; }

#shop-block { display: none; padding: 5px 0 0 0; margin-top: 5px; }
#shop-block.open { display: block; animation: fadein .25s ease; }
#trial-days-row { display: none; margin-top: 10px; }
#trial-days-row.open { display: flex; align-items: center; gap: 10px; }
.profile-wrapper #trial-days-row.open { display: block; }

.trial-select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #3a3a4a;
    background: #2b2b3a;
    color: #fff;
    font-size: 14px;
}

.ip-toggle-group { display: flex; gap: 10px; margin-top: 10px; }
.ip-toggle-btn {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    border-radius: 26px;
    cursor: pointer;
    text-align: center;
    font: inherit;
    font-size: 14px;
    transition: all .25s ease;
}
.ip-toggle-btn.active {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 10px rgba(34,197,94,.5);
}
.ip-toggle-btn:hover:not(.active) { background: #3a3a4a; }

@keyframes fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ---------- register.php ---------- */
.role-cards { display: flex; gap: 15px; margin-top: 10px; }
.role-cards .role-card {
    flex: 1;
    background-color: #1e1e2e;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.role-cards .role-card.active {
    border-color: #22c55e;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}
.role-cards .role-card:hover:not(.active) { border-color: #555; }
.role-cards .role-title { font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; }
.role-cards .role-desc { font-size: 0.85rem; color: #a0a0b0; line-height: 1.4; }
@media (max-width: 600px) { .role-cards { flex-direction: column; } }

/* ---------- login.php ---------- */
.role-select-block { max-width: 860px; margin: 0 auto; }
.role-cards-wrapper {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.role-cards-wrapper .role-card {
    flex: 1;
    min-width: 320px;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 18px;
    background-color: #1e1e2e;
    border: 1px solid #333;
    border-radius: 14px;
    padding: 22px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font: inherit;
    text-align: left;
    color: inherit;
    width: 100%;
}
.role-cards-wrapper .role-card:hover {
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.35);
    transform: translateY(-3px);
}
.role-icon { font-size: 2.2rem; flex-shrink: 0; line-height: 1; }
.role-text { flex: 1; }
.role-cards-wrapper .role-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 6px;
    color: #ffffff;
}
.role-cards-wrapper .role-desc { font-size: 0.9rem; color: #a0a0b0; line-height: 1.5; }
@media (max-width: 700px) {
    .role-cards-wrapper { flex-direction: column; align-items: stretch; }
    .role-cards-wrapper .role-card { max-width: none; }
}

/* ---------- profile.php ---------- */
.profile-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.profile-sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 80px; }
.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.profile-card .avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    margin: 0 auto 10px;
    box-shadow: 0 4px 14px rgba(34,197,94,.35);
}
.profile-card .nick { text-align: center; font-size: 15px; font-weight: 600; word-break: break-all; }
.profile-card .balance { text-align: center; margin-top: 6px; font-size: 14px; color: var(--green); font-weight: 700; }
.profile-card .group { text-align: center; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.profile-sidebar nav a {
    display: block;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 4px;
    transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.profile-sidebar nav a:hover {
    background: var(--bg-input);
    color: var(--text);
    transform: translateX(2px);
    text-decoration: none;
}
.profile-sidebar nav a.active {
    background: var(--grad);
    color: #fff;
    box-shadow: var(--grad-glow);
}
.profile-sidebar nav a .cnt { float: right; opacity: .7; font-size: 12px; }
.profile-main { flex: 1; min-width: 0; }

.card-list { display: flex; flex-direction: column; gap: 12px; }
.big-row {
    display: flex;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.big-row.clickable { cursor: pointer; }
.big-row.clickable:hover {
    border-color: rgba(34,197,94,.5);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
.big-row.st-online, .big-row.ps-active { border-left-color: #22c55e; }
.big-row.st-offline, .big-row.ps-pending { border-left-color: #d97706; }
.big-row.st-pending, .big-row.ps-rejected { border-left-color: #ef4444; }
.big-row.st-blocked, .big-row.ps-blocked { border-left-color: #7f1d1d; }
.big-poster {
    width: 160px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
    background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(16,185,129,.08));
    border: 1px solid rgba(34,197,94,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #4ade80;
    overflow: hidden;
}
.big-poster img { width: 100%; height: 100%; object-fit: cover; }
.big-row.st-offline .big-poster { filter: grayscale(.7) brightness(.7); }
.big-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.big-row-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.big-row-name { font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; transition: color .15s; }
.big-row-name:hover { color: var(--accent-soft); }
.big-row-id { font-size: 12px; color: var(--text-muted); font-family: monospace; }
.card-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-muted); }
.card-meta b { color: var(--text); font-weight: 600; }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}
.status-badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.status-badge.online, .status-badge.active {
    background: rgba(34,197,94,.12);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,.4);
}
.status-badge.online .dot, .status-badge.active .dot {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,.8);
}
.status-badge.offline, .status-badge.rejected {
    background: rgba(239,68,68,.12);
    color: #f87171;
    border: 1px solid rgba(239,68,68,.4);
}
.status-badge.offline .dot, .status-badge.rejected .dot { background: #ef4444; }
.status-badge.pending {
    background: rgba(217,119,6,.12);
    color: #fbbf24;
    border: 1px solid rgba(217,119,6,.4);
}
.status-badge.pending .dot { background: #d97706; }
.status-badge.blocked {
    background: rgba(127,29,29,.2);
    color: #fca5a5;
    border: 1px solid rgba(127,29,29,.5);
}
.status-badge.blocked .dot { background: #7f1d1d; }
.status-badge.free { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.4); }
.status-badge.paid { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.4); }

.plugin-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.55);
    color: #4ade80;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
}
.plugin-badge.zero { background: var(--bg-input); border-color: var(--border); color: var(--text-muted); }

.server-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 7px;
    border: 1px solid rgba(239,68,68,.45);
    background: rgba(239,68,68,.10);
    color: #f87171;
    cursor: pointer;
    transition: all .2s;
}
.server-delete-btn:hover { background: rgba(239,68,68,.25); border-color: #ef4444; color: #fff; }

.lic-src {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.lic-src-shop { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.45); }
.lic-src-dev { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.55); }
.lic-src-admin { background: rgba(249,115,22,.12); color: #fb923c; border: 1px solid rgba(249,115,22,.45); }

.limit-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-muted);
}
.limit-banner b { color: var(--text); }
.limit-banner.warn { border-color: #d97706; color: #fbbf24; }
.limit-banner.limit { border-color: var(--err, #ef4444); color: #f87171; }
.btn-sm[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.srv-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.srv-search { flex: 1; min-width: 220px; position: relative; }
.srv-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
}
.srv-search input:focus { outline: none; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.srv-search .search-ico {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}
.srv-select {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
}
.srv-select:focus { outline: none; border-color: #22c55e; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; }
.pagination a, .pagination span.cur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    transition: all .15s;
}
.pagination a:hover { background: var(--bg-input); color: var(--text); transform: translateY(-1px); }
.pagination span.cur {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
    box-shadow: var(--grad-glow);
}
.shown-count { text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 10px; }

.hist-table { font-size: 13px; }
.hist-table th {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    padding: 8px 10px;
    text-align: left;
}
.hist-table td { padding: 8px 10px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.hist-table tbody tr:last-child td { border-bottom: none; }
.hist-table tbody tr:hover td { background: rgba(34,197,94,.05); }
.ht-name { font-weight: 600; color: var(--text); }
.ht-dim { color: var(--text-muted); }
.ht-mono { font-family: monospace; font-size: 12px; }
.ht-actions { white-space: nowrap; text-align: right; }

.ver-act {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s;
}
.ver-act:hover { border-color: #22c55e; color: var(--accent-soft); transform: translateY(-1px); }
.ver-act.amber { background: rgba(217,119,6,.15); border-color: rgba(217,119,6,.5); color: #fbbf24; }
.ver-act.green { background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.5); color: #4ade80; }
.ver-act.red { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.45); color: #f87171; }
.ver-act.red:hover { background: rgba(239,68,68,.25); color: #fff; }
.ver-act:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.bind-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.bind-row select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    min-width: 220px;
}
.reserve-note { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* Drawer (панель сервера) */
.drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2050; }
.drawer-overlay.open { display: block; }
.drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background: var(--bg-card, #17171f);
    border-left: 1px solid rgba(34,197,94,.3);
    z-index: 2100;
    transition: right .25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 48px rgba(0,0,0,.5);
}
.drawer.open { right: 0; }
.drawer-head {
    padding: 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.drawer-title { font-size: 17px; font-weight: 700; }
.drawer-sub { font-size: 12px; color: var(--text-muted); font-family: monospace; margin-top: 4px; }
.drawer-close { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; transition: color .15s; }
.drawer-close:hover { color: var(--accent-soft); }
.drawer-stats { display: flex; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.drawer-stat {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
}
.drawer-stat .lbl { font-size: 11px; color: var(--text-muted); }
.drawer-stat .val { font-size: 14px; font-weight: 700; margin-top: 2px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.drawer-search {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    margin-bottom: 10px;
}
.drawer-search:focus { outline: none; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.dp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-bottom: 8px;
    transition: border-color .15s, transform .15s;
}
.dp-item:hover { border-color: rgba(34,197,94,.45); transform: translateX(2px); }
.dp-item .dp-name { flex: 1; min-width: 0; }
.dp-item .dp-name a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.dp-item .dp-name a:hover { color: var(--accent-soft); }
.dp-item .dp-exp { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.dp-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.dp-reserve-btn { flex-shrink: 0; margin: 0; }
.drawer-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px 0; }
.drawer-footer { padding: 14px 18px; border-top: 1px solid var(--border); }
.reset-btn {
    width: 100%;
    padding: 11px;
    border-radius: 10px;
    border: 1px solid rgba(239,68,68,.5);
    background: rgba(239,68,68,.08);
    color: #f87171;
    font-weight: 700;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    transition: all .2s;
}
.reset-btn:hover { background: rgba(239,68,68,.2); color: #fff; transform: translateY(-1px); }
.drawer-footer .note { font-size: 11px; color: var(--text-muted); margin-top: 8px; text-align: center; }

.edit-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.edit-image-item { position: relative; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: border-color .15s; }
.edit-image-item:hover { border-color: rgba(34,197,94,.45); }
.edit-image-item img { width: 100%; height: 100px; object-fit: cover; display: block; }
.edit-image-item label {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,.7);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #fff;
    cursor: pointer;
}

/* В профиле сетка цен переопределена в flex */
.profile-wrapper .price-periods-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.profile-wrapper .price-period-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    background: none;
    padding: 0;
}
.profile-wrapper .price-period-item .price-period-label { font-size: 13px; }
.profile-wrapper .price-period-item input { width: 100%; }

.ver-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .2s;
}
.ver-card:hover { border-color: rgba(34,197,94,.35); }
.ver-card.v-active { border-left-color: #22c55e; }
.ver-card.v-archived { border-left-color: #d97706; }
.ver-card.v-hidden { border-left-color: #555; opacity: .75; }
.ver-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ver-num { font-size: 16px; font-weight: 700; color: var(--accent-soft); font-family: monospace; }
.ver-date { font-size: 12px; color: var(--text-muted); }
.ver-changelog-form { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.ver-changelog-form textarea {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    resize: vertical;
}
.ver-actions-inline { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ver-files { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.ver-files code {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
}

@media (max-width: 640px) {
    .big-row { flex-direction: column; }
    .big-poster { width: 100%; height: 160px; }
    .profile-wrapper { flex-direction: column; padding: 16px; }
    .profile-sidebar { width: 100%; position: static; }
    .profile-sidebar nav a { display: inline-block; margin: 0 4px 4px 0; }
    .drawer { width: 100vw; }
}

/* ---------- plugin.php ---------- */
.plugin-page { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: flex-start; }
@media (max-width: 900px) { .plugin-page { grid-template-columns: 1fr; } }

.plugin-head { margin-bottom: 22px; }
.plugin-title { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; line-height: 1.15; margin: 0; }
.plugin-title .grad {
    background: linear-gradient(90deg, #22c55e, #10b981, #2dd4bf, #22c55e);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradFlow 6s linear infinite;
}
@keyframes gradFlow { to { background-position: 300% 0; } }

.gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery-main {
    width: 100%;
    height: 400px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(34,197,94,.1), rgba(16,185,129,.08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4ade80;
    font-size: 64px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-thumb {
    width: 84px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--bg-input);
    transition: border-color .2s, transform .15s;
}
.gallery-thumb:hover { transform: translateY(-2px); }
.gallery-thumb.active { border-color: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,.4); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.panel-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-title .ico { color: #4ade80; }

.plugin-meta-item { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; font-size: 14px; }
.plugin-meta-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.plugin-meta-label { color: var(--text-muted); min-width: 100px; flex-shrink: 0; font-size: 13px; }
.plugin-meta-value { color: var(--text); }
.plugin-meta-value a { color: var(--text); text-decoration: none; transition: color .15s; }
.plugin-meta-value a:hover { color: #4ade80; }
.plugin-version {
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.35);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #4ade80;
    font-weight: 600;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 12px;
}
.status-pill.ok { background: rgba(74,222,128,.12); color: var(--green); border: 1px solid rgba(74,222,128,.3); }
.status-pill.off { background: rgba(248,113,113,.12); color: var(--red); border: 1px solid rgba(248,113,113,.3); }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.buy-box {
    background: var(--bg-card);
    border: 1px solid rgba(34,197,94,.4);
    border-radius: 14px;
    padding: 24px;
    position: sticky;
    top: 80px;
    box-shadow: 0 0 32px rgba(34,197,94,.08);
    margin-top: 20px;
}
.buy-box h3 { font-size: 18px; margin-bottom: 16px; }
.buy-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .15s;
}
.buy-price-row:hover { border-color: rgba(34,197,94,.5); transform: translateX(2px); }
.buy-price-row:has(input:checked) {
    border-color: #22c55e;
    background: rgba(34,197,94,.08);
    box-shadow: 0 0 12px rgba(34,197,94,.15);
}
.buy-price-row label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.buy-price-row input { cursor: pointer; accent-color: #22c55e; }
.buy-price-row .price {
    font-weight: 700;
    font-size: 16px;
    background: linear-gradient(90deg, #22c55e, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.buy-price-row .price.free {
    color: var(--green);
    background: none;
    -webkit-text-fill-color: currentColor;
}
.buy-box .btn { width: 100%; margin-top: 14px; border-radius: 20px; }

.trial-box {
    background: linear-gradient(160deg, rgba(34,197,94,.08), var(--bg-card) 60%);
    border: 1px solid rgba(34,197,94,.45);
    border-radius: 14px;
    padding: 20px;
    margin-top: 20px;
}
.trial-box h3 {
    font-size: 15px;
    margin-bottom: 10px;
    color: #4ade80;
    display: flex;
    align-items: center;
    gap: 8px;
}
.trial-server {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.trial-server:last-of-type { border-bottom: none; }
.ts-ip { font-weight: 600; font-size: 14px; font-family: 'Courier New', monospace; }
.trial-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
.trial-box .btn { border-radius: 16px; }

.renew-license { padding: 14px 0; border-bottom: 1px solid var(--border); }
.renew-license:last-child { border-bottom: none; }
.renew-license-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    gap: 10px;
    flex-wrap: wrap;
}
.renew-license-server { font-weight: 600; color: var(--text); font-family: 'Courier New', monospace; }
.renew-license-expiry { font-size: 12px; color: var(--text-muted); }
.renew-license-expiry.expired { color: var(--red); }
.renew-license-expiry.soon { color: #facc15; }
.renew-periods { display: flex; flex-wrap: wrap; gap: 8px; }
.renew-period-btn {
    padding: 7px 14px;
    border-radius: 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}
.renew-period-btn:hover {
    border-color: #22c55e;
    color: #4ade80;
    background: rgba(34,197,94,.08);
    transform: translateY(-1px);
}

.desc-block { margin-top: 28px; }
.desc-block h3 {
    font-size: 18px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.desc-block h3::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, #22c55e, #10b981);
}
.desc-content { line-height: 1.7; color: var(--text); overflow-wrap: break-word; word-break: break-word; }
.desc-content pre {
    background: var(--bg-input);
    padding: 14px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 13px;
    border: 1px solid var(--border);
}
.desc-content code { font-family: monospace; }
.desc-content ul { margin: 8px 0 8px 20px; }
.desc-content li { margin-bottom: 4px; }

.version-history { position: relative; padding-left: 22px; }
.version-history::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, rgba(34,197,94,.6), rgba(16,185,129,.2));
}
.version-item { position: relative; padding: 14px 0; }
.version-item::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 20px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg);
    border: 3px solid #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,.5);
}
.version-item:not(.current)::before { border-color: var(--border); box-shadow: none; }
.version-item-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.version-item-tag { font-size: 15px; font-weight: 800; color: #4ade80; }
.version-item-date { font-size: 12px; color: var(--text-muted); }
.version-item-badge {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #0f1117;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.version-item-changelog { font-size: 14px; line-height: 1.6; color: var(--text); overflow-wrap: break-word; word-break: break-word; }

.plugin-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.plugin-actions .btn { border-radius: 20px; }
.server-warn { font-size: 13px; color: var(--text-muted); padding: 8px 0; }
.not-for-sale-note {
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.35);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.not-for-sale-note .ico { font-size: 20px; flex-shrink: 0; }

/* ---------- index.php ---------- */
.shop-head { margin-bottom: 28px; }
.shop-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #22c55e;
    margin-bottom: 10px;
}
.shop-title { font-size: clamp(26px, 4vw, 36px); font-weight: 800; margin: 0 0 8px; }
.shop-title .grad {
    background: linear-gradient(90deg, #22c55e, #10b981, #2dd4bf, #22c55e);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradFlow 6s linear infinite;
}
.shop-sub { color: var(--text-muted); font-size: 15px; }

.shop-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
}
.shop-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-cat {
    padding: 8px 18px;
    border-radius: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all .2s;
}
.shop-cat:hover { color: var(--text); border-color: rgba(34,197,94,.5); text-decoration: none; transform: translateY(-1px); }
.shop-cat.active {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 16px rgba(34,197,94,.35);
}
.shop-cat-count { opacity: .7; font-size: 11px; margin-left: 5px; }
.shop-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.shop-search { position: relative; min-width: 200px; flex: 1; max-width: 280px; }
.shop-search input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 9px 14px 9px 36px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.shop-search input:focus { outline: none; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.shop-search input::placeholder { color: var(--text-muted); }
.shop-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; }
.shop-sort select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 9px 14px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .2s;
}
.shop-sort select:focus { outline: none; border-color: #22c55e; }
.shop-count { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }

.plugin-list { display: flex; flex-direction: column; gap: 12px; }
.plugin-row {
    display: flex;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card);
    cursor: pointer;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}
.plugin-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #22c55e, #10b981);
    opacity: 0;
    transition: opacity .25s;
}
.plugin-row:hover { transform: translateY(-2px); border-color: rgba(34,197,94,.5); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.plugin-row:hover::before { opacity: 1; }
.plugin-poster {
    width: 130px;
    height: 98px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(16,185,129,.1));
    border: 1px solid rgba(34,197,94,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4ade80;
    font-size: 34px;
}
.plugin-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.plugin-row:hover .plugin-poster img { transform: scale(1.06); }
.plugin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.plugin-row-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plugin-row-cat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 10px;
}
.plugin-row-cat.free { background: rgba(74,222,128,.12); color: var(--green); border: 1px solid rgba(74,222,128,.3); }
.plugin-row-cat.paid { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.plugin-row-name { font-size: 17px; font-weight: 700; color: var(--text); text-decoration: none; transition: color .15s; }
.plugin-row:hover .plugin-row-name { color: #4ade80; text-decoration: none; }
.plugin-row-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.plugin-row-stats { display: flex; gap: 14px; margin-top: 2px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; align-items: center; }
.plugin-row-stats span { display: flex; align-items: center; gap: 5px; }
.ver-badge-update {
    background: linear-gradient(135deg, #f57f17, #fbbf24);
    color: #fff;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(251,191,36,.3);
}
.plugin-row-right { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 10px; min-width: 130px; }
.plugin-row-price { font-size: 19px; font-weight: 800; text-align: right; }
.plugin-row-price.free { color: var(--green); }
.plugin-row-price.paid {
    background: linear-gradient(90deg, #22c55e, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.plugin-row-price.none { color: var(--text-muted); font-size: 13px; font-weight: 400; }
.plugin-row-buy { min-width: 110px; border-radius: 20px; }

@media (max-width: 700px) {
    .plugin-row { flex-direction: column; }
    .plugin-poster { width: 100%; height: 170px; }
    .plugin-row-right { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
    .plugin-row-buy { flex: 1; }
    .shop-controls { flex-direction: column; align-items: stretch; }
    .shop-search { max-width: 100%; }
}

/* ---------- chat.php ---------- */
.chat-wrap { display: flex; gap: 20px; align-items: flex-start; }
.chat-sidebar { width: 280px; flex-shrink: 0; }
.chat-sidebar h3 { margin: 0 0 12px; font-size: 15px; }
.chat-system {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(34,197,94,.4);
    border-radius: 8px;
    margin-bottom: 16px;
    cursor: pointer;
    background: rgba(34,197,94,.06);
    transition: background .15s, box-shadow .15s;
}
.chat-system:hover { background: rgba(34,197,94,.12); box-shadow: 0 0 14px rgba(34,197,94,.2); }
.chat-system.active { background: rgba(34,197,94,.15); }
.chat-system-icon { font-size: 20px; flex-shrink: 0; }
.chat-system-body { flex: 1; min-width: 0; }
.chat-system-name { font-size: 14px; font-weight: 700; }
.chat-system-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.chat-system-unread {
    background: var(--grad);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 7px;
    flex-shrink: 0;
}

.chat-dialog {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    background: var(--bg-input);
    transition: border-color .15s, transform .15s;
}
.chat-dialog:hover { border-color: rgba(34,197,94,.45); transform: translateX(2px); }
.chat-dialog.active { border-color: #22c55e; background: rgba(34,197,94,.07); }
.chat-dialog-body { flex: 1; min-width: 0; }
.chat-dialog-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-dialog-last { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-dialog-unread {
    background: var(--grad);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 7px;
    flex-shrink: 0;
}
.chat-dialog-blocked { opacity: .5; font-size: 12px; flex-shrink: 0; }

.chat-main { flex: 1; min-width: 0; }
.chat-header {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--bg-input);
    font-weight: 600;
}
.chat-block-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.chat-block-btn:hover { border-color: #e53935; color: #e53935; }
.chat-block-btn.unblocked-state { border-color: #e53935; color: #e53935; }
.chat-messages {
    border: 1px solid var(--border);
    padding: 16px;
    min-height: 320px;
    max-height: 480px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-msg { max-width: 75%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; word-wrap: break-word; white-space: normal; }
.chat-msg.mine {
    align-self: flex-end;
    background: var(--grad);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg.theirs { align-self: flex-start; background: var(--bg-input); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg-text { white-space: normal; word-wrap: break-word; line-height: 1.4; }
.chat-msg-time { display: block; font-size: 10px; opacity: .6; margin-top: 3px; text-align: right; }
.chat-msg-new { position: relative; }
.chat-msg-new.theirs { border-color: #22c55e; box-shadow: 0 0 0 1px #22c55e; background: rgba(34,197,94,.12); }
.chat-msg-new.mine { outline: 2px solid rgba(255,255,255,.55); outline-offset: -2px; }
.chat-msg-new-label { display: block; font-size: 10px; font-weight: 700; opacity: .85; margin-top: 3px; text-align: right; }
.chat-day-badge {
    align-self: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    margin: 8px 0 4px;
    white-space: nowrap;
}
.chat-input-row {
    display: flex;
    gap: 8px;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 10px;
    background: var(--bg-input);
}
.chat-input-row textarea {
    flex: 1;
    resize: none;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    height: 42px;
}
.chat-input-row textarea:focus { outline: none; border-color: #22c55e; }
.chat-input-row textarea:disabled { opacity: .5; }
.chat-note {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 14px;
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}
.new-chat-row { display: flex; gap: 8px; margin-bottom: 12px; }
.new-chat-row select {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.chat-empty { border: 1px solid var(--border); border-radius: 8px; padding: 60px 20px; text-align: center; color: var(--text-muted); }
@media (max-width: 800px) { .chat-wrap { flex-direction: column; } .chat-sidebar { width: 100%; } }

/* ---------- admin.php ---------- */
.edit-prices-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.edit-price-item { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.edit-price-item label { font-size: 13px; }
.edit-price-item input { width: 100%; }
.edit-price-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

.sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    flex-wrap: wrap;
}
.sub-tabs a {
    padding: 10px 18px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 14px;
    border-radius: 8px 8px 0 0;
    transition: background .15s, color .15s;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
}
.sub-tabs a:hover { color: var(--text); background: var(--bg-input); text-decoration: none; }
.sub-tabs a.active { color: var(--accent-soft); border-bottom-color: #22c55e; font-weight: 600; }

.color-preview-box {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}
.color-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.lic-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 12px;
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.4);
    font-size: 12px;
    font-weight: 600;
    padding: 0 6px;
    color: #4ade80;
}
.lic-count-badge.zero { background: var(--bg-input); border-color: var(--border); color: var(--text-muted); opacity: .5; }
@media (max-width: 900px) { .color-fields-row { grid-template-columns: 1fr; } }

/* ---------- account.php ---------- */
.bind-code-cell { display: flex; align-items: center; gap: 8px; }
.bind-code-cell code { font-size: 13px; }

.steps-box { counter-reset: step; }
.step-item {
    position: relative;
    padding: 16px 16px 16px 56px;
    margin-bottom: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color .2s;
}
.step-item:hover { border-color: rgba(34,197,94,.4); }
.step-item::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--grad);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(34,197,94,.35);
}
.step-item h4 { margin: 0 0 4px; font-size: 15px; }
.step-item p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.step-item code { background: var(--bg-card); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.step-item .btn { margin-top: 8px; }
.module-download { display: inline-flex; align-items: center; gap: 6px; }

.dyn-name-cell { display: flex; flex-direction: column; gap: 2px; }
.dyn-name-cell .dyn-label { font-size: 12px; color: var(--text-muted); }
.dyn-name-cell code {
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    display: inline-block;
    width: fit-content;
}
.dyn-copy-btn {
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
}

/* ============ 4. НАВБАР (новый, единый) ============ */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px;
    flex-wrap: wrap;
    background: rgba(17,18,26,.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(34,197,94,.18);
}
.navbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34,197,94,.5), rgba(16,185,129,.5), transparent);
    pointer-events: none;
}
.nav-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Логотип */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    margin-right: 10px;
    transition: filter .2s;
}
.nav-brand:hover { filter: brightness(1.2); text-decoration: none; }
.nav-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #22c55e, #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(22,163,74,.4);
}
.nav-brand-logo svg { width: 19px; height: 19px; stroke: #fff; }
.nav-brand-text {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .4px;
    white-space: nowrap;
    background: linear-gradient(90deg, #a7f3d0, #22c55e, #5eead4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.nav-brand-sub {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #8b8fa3;
    margin-top: -2px;
}

/* Ссылки-пилюли */
.nav-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 22px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-muted, #9aa0b4);
    transition: all .2s;
    border: 1px solid transparent;
}
.nav-link svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .75; transition: opacity .2s; }
.nav-link:hover {
    color: var(--text, #e8e9f3);
    background: rgba(34,197,94,.09);
    text-decoration: none;
    border-color: rgba(34,197,94,.28);
}
.nav-link:hover svg { opacity: 1; }
.nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(34,197,94,.92), rgba(16,185,129,.92));
    box-shadow: 0 2px 14px rgba(34,197,94,.4);
}
.nav-link.active svg { opacity: 1; }

/* Кнопка чата */
.nav-chat { position: relative; margin-right: 4px; }
.nav-chat-btn {
    position: relative;
    background: rgba(34,197,94,.08);
    border: 1px solid rgba(34,197,94,.25);
    color: #4ade80;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    transition: all .2s;
}
.nav-chat-btn:hover {
    background: rgba(34,197,94,.2);
    box-shadow: 0 0 14px rgba(34,197,94,.35);
    transform: translateY(-1px);
}
.nav-chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(135deg, #22c55e, #10b981);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    padding: 0 4px;
    box-shadow: 0 0 8px rgba(34,197,94,.6);
}

/* Меню чатов */
.nav-chat-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 310px;
    background: rgba(26,27,38,.97);
    border: 1px solid rgba(34,197,94,.25);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 24px rgba(34,197,94,.1);
    z-index: 1100;
    overflow: hidden;
}
.nav-chat.open .nav-chat-menu { display: block; animation: navMenuIn .18s ease; }
@keyframes navMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.nav-chat-list { max-height: 280px; overflow-y: auto; }
.nav-chat-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    text-decoration: none;
    color: var(--text, #e8e9f3);
    transition: background .12s;
}
.nav-chat-item:hover { background: rgba(34,197,94,.08); text-decoration: none; }
.nav-chat-item-body { flex: 1; min-width: 0; }
.nav-chat-item-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-chat-item-name .sys-icon { font-size: 12px; margin-right: 4px; }
.nav-chat-item-text {
    font-size: 12px;
    color: var(--text-muted, #9aa0b4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.nav-chat-item-unread {
    background: linear-gradient(135deg, #22c55e, #10b981);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(34,197,94,.5);
}
.nav-chat-item.is-system { background: rgba(255,255,255,.03); }
.nav-chat-empty { padding: 22px 14px; font-size: 13px; color: var(--text-muted, #9aa0b4); text-align: center; }
.nav-chat-all {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 13px;
    color: #4ade80;
    text-decoration: none;
    font-weight: 600;
    border-top: 1px solid rgba(34,197,94,.2);
    background: rgba(34,197,94,.04);
    transition: background .15s;
}
.nav-chat-all:hover { background: rgba(34,197,94,.12); text-decoration: none; }

/* Пользователь */
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-dropdown { position: relative; }
.nav-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input, #262838);
    border: 1px solid var(--border, #3a3c4e);
    border-radius: 20px;
    padding: 8px 14px;
    color: var(--text, #e8e9f3);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: all .2s;
}
.nav-user-btn:hover { border-color: rgba(34,197,94,.5); box-shadow: 0 0 12px rgba(34,197,94,.2); }
.nav-balance { font-weight: 800; color: #4ade80; white-space: nowrap; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    background: rgba(26,27,38,.97);
    border: 1px solid rgba(34,197,94,.25);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    animation: navMenuIn .18s ease;
    z-index: 1100;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    padding: 11px 18px;
    font-size: 13.5px;
    color: var(--text, #e8e9f3);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: all .15s;
}
.nav-dropdown-menu a:hover {
    background: rgba(34,197,94,.12);
    color: #4ade80;
    text-decoration: none;
    padding-left: 22px;
}
.nav-dropdown-menu .dropdown-logout { color: #f87171; }
.nav-dropdown-menu .dropdown-logout:hover { color: #f87171; background: rgba(248,113,113,.08); }

@media (max-width: 720px) {
    .navbar { padding: 10px 14px; }
    .nav-link { padding: 7px 12px; font-size: 12.5px; }
    .nav-link span.nav-link-text { display: none; }
    .nav-brand-text { font-size: 16px; }
    .nav-chat-menu { width: calc(100vw - 28px); max-width: 310px; }
}

/* ============ 5. INDEX.PHP — HERO / LANDING ============ */

body.home-page { position: relative; }

body.home-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(34,197,94,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,185,129,.08) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: gridHue 12s linear infinite;
}

@keyframes gridHue {
    0%   {background-image:linear-gradient(rgba(34,197,94,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(16,185,129,.08) 1px,transparent 1px)}
    33%  {background-image:linear-gradient(rgba(45,212,191,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(34,197,94,.08) 1px,transparent 1px)}
    66%  {background-image:linear-gradient(rgba(16,185,129,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,191,.08) 1px,transparent 1px)}
    100% {background-image:linear-gradient(rgba(34,197,94,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(16,185,129,.08) 1px,transparent 1px)}
}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:640px;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;padding:80px 20px}

.hero-bg{position:absolute;inset:0;background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(34,197,94,.15), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(16,185,129,.1), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(45,212,191,.08), transparent 60%);
    animation:heroPulse 8s ease-in-out infinite alternate}
@keyframes heroPulse{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}

/* Плавающий Pawn-код */
.hero-code{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.hero-code span{
    position:absolute;
    font-family:'Fira Code','JetBrains Mono','Courier New',monospace;
    font-size:12px;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
    padding:7px 12px;
    border-radius:8px;
    color:rgba(134,239,172,.85);
    background:rgba(16,24,20,.55);
    border:1px solid rgba(34,197,94,.3);
    box-shadow:0 0 12px rgba(34,197,94,.15);
    opacity:0;
    animation:codeFloat 16s ease-in-out infinite;
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
}
.hero-code .kw{color:#86efac;font-weight:700}
.hero-code .fn{color:#5eead4}
.hero-code .str{color:#fbbf24}
.hero-code .cm{color:rgba(148,163,184,.7);font-style:italic}
.hero-code .num{color:#a78bfa}

.hero-code span:nth-child(1){left:6%;  top:72%; animation-delay:0s;    animation-duration:17s}
.hero-code span:nth-child(2){left:16%; top:18%; animation-delay:2.5s;  animation-duration:15s}
.hero-code span:nth-child(3){left:74%; top:14%; animation-delay:4s;    animation-duration:18s}
.hero-code span:nth-child(4){left:82%; top:58%; animation-delay:1.5s;  animation-duration:16s}
.hero-code span:nth-child(5){left:58%; top:80%; animation-delay:5.5s;  animation-duration:19s}
.hero-code span:nth-child(6){left:30%; top:8%;  animation-delay:3s;    animation-duration:14s}
.hero-code span:nth-child(7){left:68%; top:88%; animation-delay:6.5s;  animation-duration:17s}
.hero-code span:nth-child(8){left:42%; top:92%; animation-delay:7.5s;  animation-duration:15s}
.hero-code span:nth-child(9){left:10%; top:46%; animation-delay:9s;    animation-duration:16s}
.hero-code span:nth-child(10){left:88%; top:36%; animation-delay:10.5s; animation-duration:18s}

@keyframes codeFloat{
    0%   {opacity:0;transform:translateY(20px) rotate(-1deg) scale(.9)}
    12%  {opacity:.9}
    50%  {transform:translateY(-40px) rotate(.5deg) scale(1)}
    88%  {opacity:.6}
    100% {opacity:0;transform:translateY(-110px) rotate(-.5deg) scale(.95)}
}
@media(max-width:900px){
    .hero-code span{font-size:10px;padding:5px 9px}
    .hero-code span:nth-child(6),
    .hero-code span:nth-child(8),
    .hero-code span:nth-child(9),
    .hero-code span:nth-child(10){display:none}
}

.hero-inner{position:relative;z-index:2;max-width:840px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(34,197,94,.5);background:rgba(34,197,94,.1);color:#4ade80;font-size:13px;font-weight:600;padding:7px 18px;border-radius:30px;margin-bottom:26px;animation:fadeUp .7s ease both}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.hero-title{font-size:clamp(38px,7vw,68px);font-weight:800;line-height:1.08;margin:0 0 22px;animation:fadeUp .8s .1s ease both}
.hero-title .grad{background:linear-gradient(90deg,#22c55e,#10b981,#2dd4bf,#22c55e);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradFlow 6s linear infinite}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero-sub{font-size:clamp(15px,2.2vw,19px);color:var(--text-muted);line-height:1.65;max-width:640px;margin:0 auto 36px;animation:fadeUp .8s .2s ease both}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;animation:fadeUp .8s .3s ease both}
.btn-glow{position:relative;overflow:hidden;box-shadow:0 0 24px rgba(34,197,94,.45);transition:transform .2s,box-shadow .2s}
.btn-glow::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.25),transparent);animation:sheen 3.2s infinite}
@keyframes sheen{0%{left:-75%}60%,100%{left:125%}}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(34,197,94,.7)}

.hero-trust{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:36px;animation:fadeUp .8s .4s ease both}
.hero-trust-item{display:inline-flex;align-items:center;gap:8px;color:var(--text-muted);font-size:13px;font-weight:500}
.hero-trust-item svg{color:#4ade80;flex-shrink:0}

.hero-shield{position:absolute;right:-40px;top:12%;width:340px;opacity:.5;filter:drop-shadow(0 0 60px rgba(34,197,94,.35));animation:floaty 7s ease-in-out infinite;z-index:1;pointer-events:none;user-select:none}
.hero-shield svg{width:100%;height:auto;display:block}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-26px) rotate(3deg)}}
@media(max-width:900px){.hero-shield{display:none}}

/* ---------- СТАТИСТИКА ---------- */
.stats-strip{display:flex;gap:0;justify-content:center;flex-wrap:wrap;border:1px solid var(--border);border-radius:16px;background:var(--bg-card);max-width:900px;margin:-30px auto 0;position:relative;z-index:3;overflow:hidden}
.stat{flex:1;min-width:160px;padding:26px 18px;text-align:center;border-right:1px solid var(--border)}
.stat:last-child{border-right:none}
.stat-num{font-size:32px;font-weight:800;background:linear-gradient(90deg,#22c55e,#10b981);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-lbl{font-size:12px;color:var(--text-muted);margin-top:4px;letter-spacing:.4px;text-transform:uppercase}

/* ---------- СЕКЦИИ ---------- */
.home-page .section{max-width:1080px;margin:0 auto;padding:80px 20px 0}
.sec-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.sec-title{font-size:clamp(26px,4vw,40px);font-weight:800;margin:0 0 14px}
.sec-sub{color:var(--text-muted);font-size:16px;line-height:1.6;max-width:640px;margin-bottom:40px}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:26px;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.feature-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#22c55e,#10b981);transform:scaleX(0);transition:transform .35s;transform-origin:left}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(34,197,94,.5);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.feature-card:hover::before{transform:scaleX(1)}
.feature-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);margin-bottom:16px}
.feature-card h4{font-size:16px;margin:0 0 8px}
.feature-card p{font-size:13.5px;color:var(--text-muted);line-height:1.6;margin:0}

/* ---------- CTA ---------- */
.cta{margin:90px auto 0;max-width:1080px;padding:0 20px}
.cta-box{position:relative;overflow:hidden;border-radius:24px;padding:60px 40px;text-align:center;border:1px solid rgba(34,197,94,.4);
    background:linear-gradient(135deg,rgba(34,197,94,.16),rgba(16,185,129,.14))}
.cta-box h2{font-size:clamp(24px,4vw,38px);font-weight:800;margin:0 0 14px}
.cta-box p{color:var(--text-muted);max-width:520px;margin:0 auto 28px;line-height:1.6}
.home-footer{max-width:1080px;margin:0 auto;padding:48px 20px 60px;color:var(--text-muted);font-size:13px;text-align:center;border-top:1px solid var(--border);margin-top:80px}


/* ============ 6. MONITORING.PHP — СТРАНИЦА МОНИТОРИНГА ============ */

/* --- SVG-иконки (Feather) --- */
.mon-ico        { width: 16px; height: 16px; flex-shrink: 0; }
.mon-ico-sm     { width: 14px; height: 14px; flex-shrink: 0; }
.mon-ico-lg     { width: 22px; height: 22px; flex-shrink: 0; }
.mon-ico-empty  { width: 46px; height: 46px; opacity: .35; }

/* --- статистика сверху --- */
.mon-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.mon-stat {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; transition: border-color .2s;
}
.mon-stat:hover { border-color: rgba(34,197,94,.35); }
.mon-stat-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-input); border: 1px solid var(--border);
    flex-shrink: 0;
}
.mon-stat-value { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--text); }
.mon-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.mon-stat.accent .mon-stat-icon  { color: var(--accent-soft); border-color: rgba(34,197,94,.35); }
.mon-stat.accent .mon-stat-value { color: var(--accent-soft); }
.mon-stat.green  .mon-stat-icon  { color: var(--green); border-color: rgba(74,222,128,.35); }
.mon-stat.green  .mon-stat-value { color: var(--green); }
.mon-stat.blue   .mon-stat-icon  { color: #60a5fa; border-color: rgba(96,165,250,.35); }
.mon-stat.blue   .mon-stat-value { color: #60a5fa; }

/* --- поиск: под иконку SVG --- */
.shop-search-icon {
    display: inline-flex; align-items: center;
    pointer-events: none;
}

/* --- безымянная карта в постере --- */
.plugin-poster .poster-ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 34px; line-height: 1;
    color: #4ade80; opacity: .55;
}
.plugin-poster.is-offline-map .poster-ph {
    color: var(--text-muted); opacity: .45;
}

/* --- плашки статуса справа --- */
.mon-state-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    border: 1px solid; line-height: 1.4; white-space: nowrap;
}
.mon-state-pill.offline {
    background: rgba(248,113,113,.08); color: #f87171;
    border-color: rgba(248,113,113,.3);
}
.mon-state-pill.blocked {
    background: rgba(148,163,184,.1); color: #94a3b8;
    border-color: rgba(148,163,184,.3);
}

/* --- строки серверов (в мониторинге не кликабельны) --- */
body.monitoring-page .plugin-row { cursor: default; }
.plugin-row.is-offline  { opacity: .82; }
.plugin-row.is-blocked  { opacity: .6; }
.plugin-row.is-offline:hover, .plugin-row.is-blocked:hover {
    transform: none; border-color: var(--border); box-shadow: none;
}
.plugin-row.is-offline:hover::before, .plugin-row.is-blocked:hover::before { opacity: 0; }
.plugin-row.is-offline:hover .plugin-row-name,
.plugin-row.is-blocked:hover .plugin-row-name { color: var(--text); }
.plugin-row.is-offline:hover .plugin-poster img,
.plugin-row.is-blocked:hover .plugin-poster img { transform: none; }
.plugin-row.is-blocked .plugin-poster { filter: grayscale(.9) brightness(.6); }

/* --- бейдж плагинов (клик > drawer) --- */
.plugin-badge.mon-clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.plugin-badge.mon-clickable:hover {
    box-shadow: 0 0 12px rgba(34,197,94,.35);
    transform: translateY(-1px);
}
.plugin-badge.mon-clickable.zero { cursor: default; }
.plugin-badge.mon-clickable.zero:hover { box-shadow: none; transform: none; }
.plugin-badge .match-hit { color: var(--accent-soft); font-weight: 700; }

/* --- подсказка "найдено по плагину" --- */
.match-note {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--accent-soft);
    padding: 2px 0;
}
.match-note b { color: var(--accent-soft); font-weight: 600; }

/* --- inline-иконки в мета-строке --- */
.mon-meta { display: inline-flex; align-items: center; gap: 6px; }
.mon-meta svg { opacity: .65; }