/* ===== Body scroll lock ===== */
.mio-no-scroll { overflow: hidden; }

/* ===== Base buttons (available on every page that loads modals.css) ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    background: transparent;
    color: inherit;
    transition: all 0.2s ease;
}
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.btn-primary   { background: #111111; color: #ffffff; border-color: #111111; }
.btn-primary:hover { background: #333333; border-color: #333333; }
.btn-secondary { color: #111111; border-color: #e0e0e0; }
.btn-secondary:hover { border-color: #999999; color: #444444; }
.btn-ghost     { color: #111111; border-color: #ececec; }
.btn-ghost:hover { background: #f5f5f5; border-color: #d8d8d8; }
.btn-danger    { background: #b94646; color: #ffffff; border-color: #b94646; }
.btn-danger:hover { background: #9b3737; border-color: #9b3737; }
.btn-inline    { width: auto; padding: 0 16px; height: 36px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ===== Modals ===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: #ffffff;
    border-radius: 18px;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 48px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 28px 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition: opacity 0.28s ease;
    margin: auto;
}

.modal-md { max-width: 500px; }
.modal-lg { max-width: 560px; }
.modal-sm { max-width: 400px; }

.modal-backdrop.open .modal {
    opacity: 1;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 14px;
}

.modal-title {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #111111;
}

.modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #aaaaaa;
    font-size: 22px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.modal-close:hover {
    color: #111111;
    background: #f5f5f5;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 6px 4px 0;
}

.modal-intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #666666;
    word-break: break-word;
}

.modal-hint {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.55;
    color: #777777;
}

.modal-foot {
    margin-top: 24px;
    padding-top: 4px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.modal .rule-select,
.modal .mio-select {
    max-width: 100%;
    word-break: break-word;
}
.modal-foot .btn {
    width: auto;
    padding: 0 18px;
    min-width: 96px;
}

/* ===== Modal fields ===== */
.modal .field input,
.modal .field select,
.modal .field textarea {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    background: #ffffff;
    color: #111111;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    outline: none;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.modal .field textarea {
    height: auto;
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}
.modal .field input:focus,
.modal .field select:focus,
.modal .field textarea:focus {
    border-color: #111111;
}

/* ===== Verify modal — minimalist centered design ===== */
.verify-modal {
    position: relative;
    padding: 36px 32px 28px;
    overflow: hidden;
}
.verify-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}
.verify-hero {
    text-align: center;
    margin-bottom: 26px;
    animation: mio-fade 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.verify-hero img.mio-verified {
    display: inline-block;
    margin-bottom: 16px;
    animation: mio-fade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.verify-hero-title {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: #111111;
    margin: 0 0 8px;
}
.verify-hero-sub {
    font-size: 13.5px;
    line-height: 1.6;
    color: #777777;
    margin: 0 auto;
    max-width: 360px;
}

.verify-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: min(62vh, 640px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

.verify-media-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.verify-media-block > .field-label { margin-bottom: 2px; }

.mio-upload-zone { margin: 0; }
.mio-upload-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 16px;
    border: 1.5px dashed var(--c-border, #d8d8d8);
    border-radius: 12px;
    background: var(--c-bg-soft, #fafafa);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.mio-upload-drop:hover {
    border-color: var(--c-text-soft, #999);
    background: var(--c-bg-elev, #fff);
}
.mio-upload-zone.has-files .mio-upload-drop {
    border-style: solid;
    border-color: var(--c-text, #111);
}
.mio-upload-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.mio-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--c-bg-elev, #fff);
    border: 1px solid var(--c-border, #ececec);
    color: var(--c-text, #111);
}
.mio-upload-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text, #111);
}
.mio-upload-sub {
    font-size: 11px;
    line-height: 1.45;
    color: var(--c-text-mut, #888);
    max-width: 280px;
}
.mio-upload-cta {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-mut, #777);
}
.mio-upload-files {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--c-text-mut, #777);
}
.mio-upload-files li {
    padding: 4px 0;
    border-bottom: 1px solid var(--c-border, #ececec);
    word-break: break-all;
}
.mio-upload-files li:last-child { border-bottom: none; }

@media (min-width: 640px) {
    .verify-proof-links {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 12px;
    }
    .verify-proof-links > .field-label,
    .verify-proof-links > .field-hint {
        grid-column: 1 / -1;
    }
    .verify-proof-links .field-label-sub { display: none; }
    .verify-media-block {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: start;
    }
    .verify-media-block > .field-label,
    .verify-media-block > .field-hint {
        grid-column: 1 / -1;
    }
}

.verify-disclaimer {
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.65;
    color: #777777;
    text-align: center;
}
.verify-disclaimer b {
    color: #111111;
    font-weight: 500;
}

/* ===== User tags ===== */
.user-tag {
    --ut-fg: #52525b;
    --ut-bg: #f4f4f5;
    --ut-bd: #d4d4d8;
    --ut-accent: #a1a1aa;
    display: inline-flex;
    align-items: center;
    padding: 5px 11px 5px 9px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ut-fg);
    background: var(--ut-bg);
    border: 1px solid var(--ut-bd);
    border-left: 3px solid var(--ut-accent);
}
/* Роли платформы */
.user-tag-owner {
    --ut-fg: #7a5c10;
    --ut-bg: #fffbeb;
    --ut-bd: #e8d48b;
    --ut-accent: #c9a227;
}
.user-tag-co_owner {
    --ut-fg: #5b21b6;
    --ut-bg: #faf5ff;
    --ut-bd: #c4b5fd;
    --ut-accent: #7c3aed;
}
.user-tag-tester {
    --ut-fg: #0c6b7a;
    --ut-bg: #ecfeff;
    --ut-bd: #a5f3fc;
    --ut-accent: #0891b2;
}
.user-tag-admin {
    --ut-fg: #9f1239;
    --ut-bg: #fff1f2;
    --ut-bd: #fecdd3;
    --ut-accent: #e11d48;
}
/* Назначенные теги */
.user-tag-dev       { --ut-fg: #1d4ed8; --ut-bg: #eff6ff; --ut-bd: #bfdbfe; --ut-accent: #2563eb; }
.user-tag-design    { --ut-fg: #6d28d9; --ut-bg: #f5f3ff; --ut-bd: #ddd6fe; --ut-accent: #7c3aed; }
.user-tag-mod       { --ut-fg: #0f766e; --ut-bg: #f0fdfa; --ut-bd: #99f6e4; --ut-accent: #0d9488; }
.user-tag-support   { --ut-fg: #15803d; --ut-bg: #f0fdf4; --ut-bd: #bbf7d0; --ut-accent: #16a34a; }
.user-tag-partner   { --ut-fg: #1e3a5f; --ut-bg: #f0f4f8; --ut-bd: #b8c9dc; --ut-accent: #1e3a5f; }
.user-tag-official  { --ut-fg: #854d0e; --ut-bg: #fefce8; --ut-bd: #fde68a; --ut-accent: #b8860b; }
.user-tag-creator   { --ut-fg: #be185d; --ut-bg: #fdf2f8; --ut-bd: #fbcfe8; --ut-accent: #db2777; }
.user-tag-edu       { --ut-fg: #0e7490; --ut-bg: #ecfeff; --ut-bd: #a5f3fc; --ut-accent: #0891b2; }
.user-tag-gaming    { --ut-fg: #7e22ce; --ut-bg: #faf5ff; --ut-bd: #e9d5ff; --ut-accent: #9333ea; }
.user-tag-vip       { --ut-fg: #a16207; --ut-bg: #fffbeb; --ut-bd: #fde68a; --ut-accent: #ca8a04; }
.user-tag-media     { --ut-fg: #334155; --ut-bg: #f8fafc; --ut-bd: #cbd5e1; --ut-accent: #475569; }
.user-tag-community { --ut-fg: #047857; --ut-bg: #ecfdf5; --ut-bd: #a7f3d0; --ut-accent: #059669; }
.user-tag-science   { --ut-fg: #0369a1; --ut-bg: #f0f9ff; --ut-bd: #bae6fd; --ut-accent: #0284c7; }
.user-tag-security  { --ut-fg: #b91c1c; --ut-bg: #fef2f2; --ut-bd: #fecaca; --ut-accent: #dc2626; }
.user-tag-legal     { --ut-fg: #44403c; --ut-bg: #fafaf9; --ut-bd: #d6d3d1; --ut-accent: #57534e; }
.user-tag-culture   { --ut-fg: #7e22ce; --ut-bg: #faf5ff; --ut-bd: #e9d5ff; --ut-accent: #a855f7; }
.user-tag-guest     { --ut-fg: #71717a; --ut-bg: #fafafa; --ut-bd: #e4e4e7; --ut-accent: #a1a1aa; }
.user-tag-restricted{ --ut-fg: #991b1b; --ut-bg: #fef2f2; --ut-bd: #fca5a5; --ut-accent: #991b1b; }
.user-tag-ambassador{ --ut-fg: #c2410c; --ut-bg: #fff7ed; --ut-bd: #fed7aa; --ut-accent: #ea580c; }
.user-tag-volunteer { --ut-fg: #4d7c0f; --ut-bg: #f7fee7; --ut-bd: #d9f99d; --ut-accent: #65a30d; }
.user-tag-editor    { --ut-fg: #334155; --ut-bg: #f8fafc; --ut-bd: #cbd5e1; --ut-accent: #64748b; }
.user-tag-analyst   { --ut-fg: #0369a1; --ut-bg: #f0f9ff; --ut-bd: #bae6fd; --ut-accent: #0284c7; }
.user-tag-manager   { --ut-fg: #1e3a5f; --ut-bg: #f0f4f8; --ut-bd: #b8c9dc; --ut-accent: #334e68; }
.user-tag-curator   { --ut-fg: #7e22ce; --ut-bg: #faf5ff; --ut-bd: #e9d5ff; --ut-accent: #9333ea; }
.user-tag-finance   { --ut-fg: #854d0e; --ut-bg: #fefce8; --ut-bd: #fde68a; --ut-accent: #a16207; }
.user-tag-marketing { --ut-fg: #c2410c; --ut-bg: #fff7ed; --ut-bd: #fed7aa; --ut-accent: #ea580c; }
.user-tag-nav {
    margin-left: 6px;
    font-size: 8px;
    padding: 4px 8px 4px 7px;
    letter-spacing: 0.08em;
}
:root[data-theme="dark"] .user-tag-owner {
    --ut-fg: #f5d76e;
    --ut-bg: rgba(201, 162, 39, 0.14);
    --ut-bd: rgba(201, 162, 39, 0.42);
    --ut-accent: #c9a227;
}
:root[data-theme="dark"] .user-tag-co_owner {
    --ut-fg: #c4b5fd;
    --ut-bg: rgba(124, 58, 237, 0.14);
    --ut-bd: rgba(124, 58, 237, 0.4);
    --ut-accent: #7c3aed;
}
:root[data-theme="dark"] .user-tag-tester {
    --ut-fg: #67e8f9;
    --ut-bg: rgba(8, 145, 178, 0.14);
    --ut-bd: rgba(8, 145, 178, 0.4);
    --ut-accent: #0891b2;
}
:root[data-theme="dark"] .user-tag-admin {
    --ut-fg: #fda4af;
    --ut-bg: rgba(225, 29, 72, 0.14);
    --ut-bd: rgba(225, 29, 72, 0.4);
    --ut-accent: #e11d48;
}
:root[data-theme="dark"] .user-tag {
    --ut-fg: #d4d4d8;
    --ut-bg: rgba(255, 255, 255, 0.05);
    --ut-bd: rgba(255, 255, 255, 0.12);
    --ut-accent: #71717a;
}
:root[data-theme="dark"] .user-tag-dev       { --ut-fg: #93c5fd; --ut-bg: rgba(37, 99, 235, 0.14);  --ut-bd: rgba(37, 99, 235, 0.38);  --ut-accent: #2563eb; }
:root[data-theme="dark"] .user-tag-design    { --ut-fg: #c4b5fd; --ut-bg: rgba(124, 58, 237, 0.14); --ut-bd: rgba(124, 58, 237, 0.38); --ut-accent: #7c3aed; }
:root[data-theme="dark"] .user-tag-mod       { --ut-fg: #5eead4; --ut-bg: rgba(13, 148, 136, 0.14); --ut-bd: rgba(13, 148, 136, 0.38); --ut-accent: #0d9488; }
:root[data-theme="dark"] .user-tag-support   { --ut-fg: #86efac; --ut-bg: rgba(22, 163, 74, 0.14);  --ut-bd: rgba(22, 163, 74, 0.38);  --ut-accent: #16a34a; }
:root[data-theme="dark"] .user-tag-partner   { --ut-fg: #94a3b8; --ut-bg: rgba(30, 58, 95, 0.28);  --ut-bd: rgba(148, 163, 184, 0.32); --ut-accent: #64748b; }
:root[data-theme="dark"] .user-tag-official  { --ut-fg: #fde68a; --ut-bg: rgba(184, 134, 11, 0.14); --ut-bd: rgba(184, 134, 11, 0.38); --ut-accent: #b8860b; }
:root[data-theme="dark"] .user-tag-creator   { --ut-fg: #f9a8d4; --ut-bg: rgba(219, 39, 119, 0.14); --ut-bd: rgba(219, 39, 119, 0.38); --ut-accent: #db2777; }
:root[data-theme="dark"] .user-tag-edu       { --ut-fg: #67e8f9; --ut-bg: rgba(8, 145, 178, 0.14);  --ut-bd: rgba(8, 145, 178, 0.38);  --ut-accent: #0891b2; }
:root[data-theme="dark"] .user-tag-gaming    { --ut-fg: #d8b4fe; --ut-bg: rgba(147, 51, 234, 0.14); --ut-bd: rgba(147, 51, 234, 0.38); --ut-accent: #9333ea; }
:root[data-theme="dark"] .user-tag-vip       { --ut-fg: #fde68a; --ut-bg: rgba(202, 138, 4, 0.14);  --ut-bd: rgba(202, 138, 4, 0.38);  --ut-accent: #ca8a04; }
:root[data-theme="dark"] .user-tag-media     { --ut-fg: #cbd5e1; --ut-bg: rgba(71, 85, 105, 0.22); --ut-bd: rgba(148, 163, 184, 0.32); --ut-accent: #475569; }
:root[data-theme="dark"] .user-tag-community { --ut-fg: #6ee7b7; --ut-bg: rgba(5, 150, 105, 0.14);  --ut-bd: rgba(5, 150, 105, 0.38);  --ut-accent: #059669; }
:root[data-theme="dark"] .user-tag-science   { --ut-fg: #7dd3fc; --ut-bg: rgba(2, 132, 199, 0.14);  --ut-bd: rgba(2, 132, 199, 0.38);  --ut-accent: #0284c7; }
:root[data-theme="dark"] .user-tag-security  { --ut-fg: #fca5a5; --ut-bg: rgba(220, 38, 38, 0.14);  --ut-bd: rgba(220, 38, 38, 0.38);  --ut-accent: #dc2626; }
:root[data-theme="dark"] .user-tag-legal     { --ut-fg: #d6d3d1; --ut-bg: rgba(87, 83, 78, 0.22);  --ut-bd: rgba(168, 162, 158, 0.32); --ut-accent: #57534e; }
:root[data-theme="dark"] .user-tag-culture   { --ut-fg: #d8b4fe; --ut-bg: rgba(168, 85, 247, 0.14); --ut-bd: rgba(168, 85, 247, 0.38); --ut-accent: #a855f7; }
:root[data-theme="dark"] .user-tag-guest     { --ut-fg: #a1a1aa; --ut-bg: rgba(255, 255, 255, 0.04); --ut-bd: rgba(255, 255, 255, 0.1);  --ut-accent: #71717a; }
:root[data-theme="dark"] .user-tag-restricted{ --ut-fg: #fca5a5; --ut-bg: rgba(153, 27, 27, 0.2);  --ut-bd: rgba(220, 38, 38, 0.38);  --ut-accent: #991b1b; }
:root[data-theme="dark"] .user-tag-ambassador{ --ut-fg: #fdba74; --ut-bg: rgba(234, 88, 12, 0.14); --ut-bd: rgba(234, 88, 12, 0.38); --ut-accent: #ea580c; }
:root[data-theme="dark"] .user-tag-volunteer { --ut-fg: #bef264; --ut-bg: rgba(101, 163, 13, 0.14); --ut-bd: rgba(101, 163, 13, 0.38); --ut-accent: #65a30d; }
:root[data-theme="dark"] .user-tag-editor    { --ut-fg: #cbd5e1; --ut-bg: rgba(71, 85, 105, 0.22); --ut-bd: rgba(148, 163, 184, 0.32); --ut-accent: #64748b; }
:root[data-theme="dark"] .user-tag-analyst   { --ut-fg: #7dd3fc; --ut-bg: rgba(2, 132, 199, 0.14);  --ut-bd: rgba(2, 132, 199, 0.38);  --ut-accent: #0284c7; }
:root[data-theme="dark"] .user-tag-manager   { --ut-fg: #94a3b8; --ut-bg: rgba(30, 58, 95, 0.28);  --ut-bd: rgba(148, 163, 184, 0.32); --ut-accent: #64748b; }
:root[data-theme="dark"] .user-tag-curator   { --ut-fg: #d8b4fe; --ut-bg: rgba(147, 51, 234, 0.14); --ut-bd: rgba(147, 51, 234, 0.38); --ut-accent: #9333ea; }
:root[data-theme="dark"] .user-tag-finance   { --ut-fg: #fde68a; --ut-bg: rgba(161, 98, 7, 0.14);  --ut-bd: rgba(161, 98, 7, 0.38);  --ut-accent: #a16207; }
:root[data-theme="dark"] .user-tag-marketing { --ut-fg: #fdba74; --ut-bg: rgba(234, 88, 12, 0.14); --ut-bd: rgba(234, 88, 12, 0.38); --ut-accent: #ea580c; }

/* ===== Site block card ===== */
.block-card {
    border: 1px solid var(--c-border, #ececec);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: var(--c-bg-elev, #fff);
    animation: mio-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.block-card-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-text-mut, #777);
    flex: 1;
}
.block-card-text b {
    color: var(--c-text, #111);
    font-weight: 600;
}
.block-card-actions {
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .block-card {
        flex-direction: column;
        align-items: stretch;
        padding: 18px 16px;
        gap: 14px;
    }
    .block-card-text { font-size: 13px; }
    .block-card-actions { width: 100%; }
    .block-card-actions .btn { width: 100%; }
}

/* ===== Cropper ===== */
.cropper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cropper-stage {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
    background: #fafafa;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #ececec;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.cropper-stage:active { cursor: grabbing; }
.cropper-stage canvas { display: block; }
.cropper-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        0 0 0 200px rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
}
.cropper-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.88);
    pointer-events: none;
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 50%, #000 51%);
            mask: radial-gradient(circle at 50% 50%, transparent 50%, #000 51%);
}
.cropper-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cropper-zoom {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cropper-zoom-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888888;
    flex-shrink: 0;
}
.cropper-zoom input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #ececec;
    border-radius: 999px;
    outline: none;
}
.cropper-zoom input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #111111;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.cropper-zoom input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #111111;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ===== Toasts ===== */
.toasts {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 200;
    pointer-events: none;
}
.toast {
    background: #111111;
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
    max-width: 320px;
}
.toast.show { opacity: 1; }
.toast.toast-error   { background: #b94646; }
.toast.toast-success { background: #1f7a4d; }

/* ===== Cookie banner ===== */
.cookie-banner {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: calc(100% - 48px);
    max-width: 420px;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10);
    padding: 18px 20px 16px;
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.cookie-banner.show {
    opacity: 1;
    pointer-events: auto;
}
.cookie-title {
    font-size: 14px;
    font-weight: 500;
    color: #111111;
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}
.cookie-text {
    font-size: 12px;
    line-height: 1.6;
    color: #777777;
    margin-bottom: 14px;
}
.cookie-text a {
    color: #111111;
    text-decoration: none;
    border-bottom: 1px solid #e0e0e0;
}
.cookie-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.cookie-actions .btn {
    width: auto;
    padding: 0 16px;
    height: 34px;
    font-size: 12px;
}

/* ===== Verified badge ===== */
.mio-verified {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -2px;
}

/* ===== Minecraft account modal ===== */
.mc-modal .modal-body { gap: 0; }

.mc-modal-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin: 0 0 20px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--c-border, #ececec);
    background: var(--c-bg-soft, #fafafa);
}
.mc-modal-meta-item { display: contents; }
.mc-modal-meta dt {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888888;
}
.mc-modal-meta dd {
    margin: 0;
    font-size: 14px;
    color: #111111;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.mc-modal-meta dd code {
    font-size: 13px;
    word-break: break-all;
}
.mc-modal-copy {
    height: 32px;
    padding: 0 12px;
    font-size: 11px;
}

.mc-modal-banner[hidden] { display: none !important; }
.mc-modal-banner {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid #ee9a3a;
    background: rgba(238, 154, 58, 0.08);
}
.mc-modal-banner .field-label { margin-bottom: 8px; display: block; }
.mc-modal-banner-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.mc-modal-banner-row code {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    word-break: break-all;
}

.mc-modal-section {
    padding: 20px 0;
    border-top: 1.5px solid #ececec;
}
.mc-modal-section:first-of-type { border-top: none; padding-top: 4px; }
.mc-modal-section > .field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #111111;
}
.mc-modal-section > .modal-intro {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: #777777;
}
.mc-modal-section--danger > .field-label { color: #b94646; }
.mc-modal-section--danger > .modal-intro { color: #888888; }

.mc-modal-tabs { margin-top: 4px; }
.mc-modal-tablist {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1.5px solid #ececec;
}
.mc-modal-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 12px;
    margin-bottom: -1.5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #888888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.mc-modal-tab:hover { color: #444444; }
.mc-modal-tab.is-active {
    color: #111111;
    border-bottom-color: #111111;
}
.mc-modal-panel[hidden] { display: none !important; }
.mc-modal-panel .field { margin-bottom: 12px; }
.mc-modal-panel .field:last-of-type { margin-bottom: 0; }
.mc-modal-panel .field-hint { margin: 0 0 14px; }

.mc-modal-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.mc-modal-actions .btn { min-width: 120px; }

.mc-modal-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #444444;
    cursor: pointer;
}
.mc-modal-check input {
    margin: 3px 0 0;
    flex-shrink: 0;
}
.mc-modal-radios {
    border: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

:root[data-theme="dark"] .mc-modal-meta {
    background: var(--c-bg-soft);
    border-color: var(--c-border);
    backdrop-filter: blur(var(--c-surface-blur));
    -webkit-backdrop-filter: blur(var(--c-surface-blur));
    box-shadow: inset 0 1px 0 var(--c-surface-highlight);
}
:root[data-theme="dark"] .mc-modal-meta dt { color: var(--c-text-mut); }
:root[data-theme="dark"] .mc-modal-meta dd { color: var(--c-text); }
:root[data-theme="dark"] .mc-modal-section { border-top-color: var(--c-border); }
:root[data-theme="dark"] .mc-modal-tablist { border-bottom-color: var(--c-border); }
:root[data-theme="dark"] .mc-modal-tab { color: var(--c-text-mut); }
:root[data-theme="dark"] .mc-modal-tab:hover { color: var(--c-text); }
:root[data-theme="dark"] .mc-modal-tab.is-active {
    color: var(--c-text);
    border-bottom-color: var(--c-primary, #fff);
}
:root[data-theme="dark"] .mc-modal-banner {
    border-color: rgba(238, 154, 58, 0.5);
    background: rgba(238, 154, 58, 0.1);
}
:root[data-theme="dark"] .mc-modal-check { color: var(--c-text-soft); }

@media (max-width: 720px) {
    .mc-modal-meta { grid-template-columns: 1fr; gap: 10px; }
    .mc-modal-meta-item { display: grid; grid-template-columns: 88px 1fr; gap: 8px; align-items: baseline; }
    .mc-modal-tablist { flex-wrap: wrap; }
    .mc-modal-tab { flex: 1 1 auto; min-width: 0; }
    .mc-modal-actions .btn { width: 100%; min-width: 0; }
}

/* ===== Mobile adaptive ===== */
@media (max-width: 720px) {
    .modal-backdrop { padding: 16px; align-items: flex-end; }
    .modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        padding: 26px 20px 22px;
        margin-bottom: 0;
    }
    .modal-md, .modal-lg { max-width: 100%; }

    .modal-foot { flex-direction: column-reverse; }
    .modal-foot .btn { width: 100%; }

    .verify-modal {
        padding: 24px 16px 18px;
        max-height: 92vh;
        display: flex;
        flex-direction: column;
    }
    .verify-modal-close { top: 10px; right: 10px; }
    .verify-hero { margin-bottom: 16px; flex-shrink: 0; }
    .verify-hero-title { font-size: 19px; }
    .verify-hero-sub   { font-size: 13px; max-width: none; }
    .verify-form {
        max-height: none;
        flex: 1;
        min-height: 0;
        gap: 14px;
    }
    .verify-proof-links .field { margin-bottom: 0; }
    .verify-media-block {
        grid-template-columns: 1fr;
    }
    .mio-upload-drop { padding: 16px 12px; }
    .verify-disclaimer { font-size: 11px; padding: 10px 12px; }

    .cropper-stage {
        width: 100%;
        max-width: 280px;
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .cookie-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
    }
    .toasts {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }
    .toast { max-width: 100%; }
}

@media (max-width: 380px) {
    .modal-title { font-size: 16px; }
    .verify-sub  { font-size: 11px; }
}

/* Report user modal */
.report-target-card {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--c-border-soft, #ececec);
    background: var(--c-bg-soft, #fafafa);
}
.report-target-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-soft, #aaa);
    margin-bottom: 10px;
}
.report-target-user {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.report-target-user > div {
    min-width: 0;
    flex: 1;
}
.report-target-user .profile-tags-row-inline {
    margin-top: 6px;
}
.report-target-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg-elev, #fff);
    border: 1px solid var(--c-border-soft, #ececec);
    font-size: 16px;
    font-weight: 500;
    color: var(--c-text-mut, #888);
}
.report-target-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.report-target-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text, #111);
}
.report-target-handle {
    font-size: 13px;
    color: var(--c-text-mut, #888);
    margin-top: 2px;
}
.report-target-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--c-text-mut, #888);
}
.modal-intro-muted {
    margin-top: 4px;
    font-size: 12px;
    color: var(--c-text-soft, #aaa);
}
:root[data-theme="dark"] .report-target-card {
    background: var(--c-bg-soft);
    border-color: var(--c-border);
}

/* Dark theme — модалки и поля */
:root[data-theme="dark"] .modal {
    background: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    backdrop-filter: blur(var(--c-surface-blur));
    -webkit-backdrop-filter: blur(var(--c-surface-blur));
    box-shadow: var(--c-surface-shadow), inset 0 1px 0 var(--c-surface-highlight);
}
:root[data-theme="dark"] .modal-title { color: #ffffff; }
:root[data-theme="dark"] .modal-intro,
:root[data-theme="dark"] .modal-hint { color: #94a3b8; }
:root[data-theme="dark"] .modal-close { color: #64748b; }
:root[data-theme="dark"] .modal-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .modal .field input,
:root[data-theme="dark"] .modal .field select,
:root[data-theme="dark"] .modal .field textarea {
    background: rgba(8, 12, 22, 0.55);
    border-color: var(--c-border);
    color: var(--c-text);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
:root[data-theme="dark"] .modal .field input:focus,
:root[data-theme="dark"] .modal .field select:focus,
:root[data-theme="dark"] .modal .field textarea:focus {
    border-color: #64748b;
}
:root[data-theme="dark"] .modal .field-label,
:root[data-theme="dark"] .modal .field-optional { color: #94a3b8; }
:root[data-theme="dark"] .modal-backdrop {
    background: rgba(4, 6, 12, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

:root:not([data-theme="dark"]) .modal {
    background: var(--c-bg-elev);
    border: 1px solid var(--c-border);
    backdrop-filter: blur(var(--c-surface-blur));
    -webkit-backdrop-filter: blur(var(--c-surface-blur));
    box-shadow: var(--c-surface-shadow), inset 0 1px 0 var(--c-surface-highlight);
}

:root:not([data-theme="dark"]) .modal-backdrop {
    background: rgba(238, 242, 248, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}