/* ── ФИКСИРОВАННЫЕ ДЕЙСТВИЯ TELEPORT ── */
#action-bar {
    position: fixed;
    right: 8px;
    top: calc(51% - 8px);
    transform: translateY(-50%);
    z-index: 140;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
    background: rgba(16, 16, 16, 0.34);
    backdrop-filter: blur(8px) saturate(125%);
    -webkit-backdrop-filter: blur(8px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.act-btn {
    width: 32px;
    height: 30px;
    min-width: 32px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r);
    cursor: pointer;
    user-select: none;
}

.act-btn { font-family: system-ui, "Segoe UI Symbol", sans-serif; font-variant-emoji: text; }
.act-btn[aria-label="Удалить"] { color: var(--text); }
.act-btn[aria-label="Копировать"], .act-btn[aria-label="Вставить"] { font-size: 14px; font-weight: 500; }

.act-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: transparent;
}

.act-btn.danger:hover {
    background: rgba(255, 62, 62, 0.14);
    border-color: transparent;
    color: var(--accent);
}

.act-btn:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.42);
    outline-offset: -2px;
}

/* Компактный индикатор передачи по центру над масштабом */
#transfer-bar {
    position: fixed;
    left: 50%;
    bottom: 82px;
    z-index: 119;
    width: min(420px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 10px;
    background: rgba(16, 16, 16, 0.97);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    color: var(--dim);
    font-size: 11px;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity 0.9s ease, transform 0.9s ease, visibility 0s linear 0.9s;
}

#transfer-bar.visible {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

#transfer-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

#transfer-status {
    flex: 0 0 auto;
    min-width: 58px;
    white-space: nowrap;
}

#transfer-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    color: var(--dim);
    font-size: 10px;
}

#transfer-pause,
#transfer-cancel {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--field);
    color: var(--text);
    font-size: 14px;
    line-height: 19px;
    cursor: pointer;
}

#transfer-cancel {
    border-color: rgba(255, 62, 62, 0.7);
    background: rgba(255, 62, 62, 0.16);
    color: var(--accent);
    font-size: 17px;
}

#transfer-pause:hover:not(:disabled),
#transfer-cancel:hover:not(:disabled) {
    background: var(--tab);
    border-color: var(--accent);
    color: var(--text);
}

#transfer-cancel:hover:not(:disabled) {
    background: var(--accent);
    color: var(--bg);
}

#transfer-pause:disabled,
#transfer-cancel:disabled {
    opacity: 0.35;
    cursor: default;
}

#transfer-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 10px;
}

.transfer-track {
    width: 100%;
    height: 4px;
    overflow: hidden;
    background: var(--field);
    border-radius: var(--r);
}

#transfer-fill {
    width: 0;
    height: 100%;
    background: var(--accent);
    transition: width 0.12s ease;
}

#transfer-percent {
    width: 100%;
    min-width: 0;
    text-align: right;
    font-size: 10px;
}

#transfer-time {
    min-height: 12px;
    color: var(--dim);
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── FOLDER STYLER ── */
.folder-styler-modal { --styler-square: clamp(24px, calc((100vw - 140px) / 3), 144px); position: fixed; left: 50%; top: 50%; z-index: 300; transform: translate(-50%, -50%); width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; background: #151515; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 48px #000b; font-family: system-ui, "Segoe UI", sans-serif; }
#folder-styler-overlay.qr-overlay { position: static; display: contents; background: transparent; backdrop-filter: none; pointer-events: none; }
#folder-styler-overlay.open { display: contents; }
#folder-styler-overlay #folder-styler-modal { display: none; pointer-events: auto; }
#folder-styler-overlay.open #folder-styler-modal { display: flex; flex-direction: column; }

.folder-styler-modal .qr-modal-header { font-size: 14px; }
.folder-styler-modal button, .folder-styler-modal input, .folder-styler-modal select { font-family: inherit; }
.folder-styler-modal .qr-modal-header, .folder-styler-body label, .styler-section-title, .styler-stealth-toggle, .styler-apply { text-transform: none; letter-spacing: normal; }
.folder-styler-modal .qr-modal-header > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-1px); }
.styler-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.styler-header-actions #folder-style-reset.nav-btn { width: auto; min-width: 30px; height: 30px; margin: 0; padding: 0 8px; border: 1px solid var(--line); background: var(--field); font-size: 12px; }
.folder-styler-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.folder-styler-body *, .folder-styler-body *::before, .folder-styler-body *::after { box-sizing: border-box; }
.folder-styler-body [hidden] { display: none !important; }
.styler-text-controls { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.styler-text-controls > label, .styler-text-color-control { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 7px; color: var(--dim); font-size: 11px; }
.styler-text-controls > label > span, .styler-text-color-control > label { text-align: center; }
.styler-text-color-inline { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 6px; }
.styler-text-color-inline.custom { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#folder-style-text-custom-row { display: flex; justify-content: center; min-width: 0; }
.styler-text-color-inline input[type="color"] { width: 32px; height: 32px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px; }
.styler-text-color-inline input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.styler-text-color-inline input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.styler-text-color-inline input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }
.styler-text-controls input, .styler-text-controls select { display: block; width: 100%; min-width: 0; height: 32px; margin: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); color: var(--text); font: inherit; font-size: 12px; }
.styler-text-controls .qr-ctrl-row input[type="text"] { padding: 6px 8px; }
.styler-text-controls input[type="color"] { padding: 3px; cursor: pointer; }
.styler-text-controls input:focus-visible, .styler-text-controls select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.styler-effects-block { display: flex; flex-direction: column; gap: 8px; }
.styler-effect-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: end; gap: 12px; }
.styler-effect-row > .styler-effect-toggle input { transform: translateX(5px); }
.styler-effect-row > .styler-effect-toggle span { margin-left: 5px; }
.styler-gradient-toggle-row { align-self: flex-start; }
.styler-effect-toggle { display: flex; align-items: center; gap: 7px; min-height: 14px; color: var(--text); font-size: 11px; text-transform: none; }
.styler-effect-toggle input { flex: 0 0 auto; width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.styler-effect-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.styler-range { min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--dim); font-size: 10px; }
.styler-range b { font-weight: 400; color: var(--text); }
.styler-range input { width: 100%; min-width: 0; height: 14px; margin: 0; accent-color: var(--accent); }
.styler-range input:disabled { opacity: .35; }
.styler-gradient-block { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.styler-gradient-column { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }

.styler-color-picker { display: grid; grid-template-columns: var(--styler-square) 18px; align-items: stretch; gap: 6px; height: var(--styler-square); }
.gradient-sv-picker { position: relative; width: var(--styler-square); height: var(--styler-square); overflow: hidden; border: 0; border-radius: 7px; touch-action: none; cursor: crosshair; background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent); }
.gradient-picker-marker { position: absolute; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #0008; transform: translate(-50%, -50%); pointer-events: none; }
.gradient-hue { appearance: none; writing-mode: vertical-lr; direction: rtl; width: 18px; height: var(--styler-square); min-width: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: none; }
.gradient-hue::-webkit-slider-runnable-track { width: 8px; height: 100%; border-radius: 999px; background: linear-gradient(to top, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.gradient-hue::-moz-range-track { width: 8px; height: 100%; border-radius: 999px; background: linear-gradient(to top, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.gradient-hue::-webkit-slider-thumb { appearance: none; width: 16px; height: 8px; margin-left: -4px; border: 2px solid #fff; border-radius: 4px; background: #333; box-shadow: 0 1px 3px #0008; }
.gradient-hue::-moz-range-thumb { width: 12px; height: 4px; border: 2px solid #fff; border-radius: 4px; background: #333; }
.gradient-preview-large { position: relative; width: calc(var(--styler-square) * 1.1); height: calc(var(--styler-square) * 1.1); border: 0; border-radius: 7px; background: #2b2b2b; }
.gradient-point { position: absolute; width: 16px; height: 16px; padding: 0; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); cursor: grab; touch-action: none; }
.gradient-point:active { cursor: grabbing; }
.gradient-point:focus-visible, .gradient-sv-picker:focus-visible, .gradient-hue:focus-visible, .styler-tile-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gradient-point-a { left: 6%; top: 6%; }
.gradient-point-b { left: 94%; top: 94%; }

.styler-bottom-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 10px; padding-top: 4px; }
.folder-live-preview { min-width: 0; display: grid; grid-template-rows: 158.4px; align-content: start; justify-items: center; }
.styler-bottom-row .styler-tile-size { min-width: 0; display: grid; grid-template-rows: 140px auto; align-content: start; justify-items: center; gap: 4px; position: relative; }
.styler-shape-controls { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 8px; }
.styler-shape-controls .ctx-tile-buttons { width: min(100%, 116px); }
.styler-section-title { position: absolute; top: 0; display: flex; align-items: center; justify-content: center; min-width: 0; color: var(--dim); font-size: 11px; line-height: 1.3; font-weight: 400; text-align: center; overflow-wrap: anywhere; }
.styler-stealth-toggle { transform: translateY(-1px); flex: 0 0 auto; justify-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; min-height: 30px; margin: 0; padding: 5px 8px; border: 0; border-radius: 6px; background: var(--field); color: var(--dim); font: inherit; font-size: 12px; text-align: center; cursor: pointer; }
.styler-stealth-toggle:hover, .styler-stealth-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.styler-stealth-toggle:focus-visible, .styler-apply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.styler-card-stage, .styler-grid-stage { width: 100%; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.folder-live-card { --styler-preview-fit: 1; flex: 0 0 auto; width: calc(var(--file-card-side) * var(--file-scale)); height: calc(var(--file-card-side) * var(--file-scale)); min-height: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; border: 0; border-radius: 10px; background: #2b2b2b; color: var(--text); box-shadow: 0 6px 18px #0004; transition: background .18s ease, color .18s ease, backdrop-filter .18s ease; }
#folder-style-live-icon { font-size: calc(38px * var(--file-scale) * var(--styler-preview-fit)); line-height: 1; }
#folder-style-live-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(11px * var(--file-scale) * var(--styler-preview-fit)); }
.styler-tile-grid { width: min(100%, 64px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4px; }
.styler-tile-cell { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: #343434; cursor: pointer; transition: background .15s ease; }
.styler-tile-cell.active { background: var(--accent); }
.styler-tile-cell:hover { background: #555; }
.styler-tile-cell.active:hover { background: var(--accent); filter: brightness(1.15); }
.styler-bottom-row .btn-vpn.primary.styler-apply { justify-self: center; width: auto; max-width: 100%; min-height: 30px; margin: 0; padding: 5px 12px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff; font: inherit; font-size: 12px; text-align: center; white-space: normal; cursor: pointer; }
#folder-styler-status:empty { display: none; }
@media (max-width: 460px) {
    .folder-styler-body { gap: 10px; padding: 12px; }
    .styler-gradient-block, .styler-bottom-row { gap: 8px; }
    .styler-effect-row { grid-template-columns: 88px minmax(0, 1fr); gap: 6px; }
    .styler-effect-controls { gap: 8px; }
    .styler-bottom-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
    .styler-bottom-row .styler-text-controls { grid-column: 1 / -1; }
}
@media (max-width: 300px) {
    .folder-styler-modal .qr-modal-header { gap: 4px; padding: 0 8px; }
    .styler-header-actions { gap: 2px; }
    .styler-header-actions #folder-style-reset.nav-btn { padding: 0 4px; }
    .styler-effect-row, .styler-effect-controls, .styler-bottom-row { grid-template-columns: minmax(0, 1fr); }
}

/* ── ПЛАВАЮЩИЙ МЕДИА-ПЛЕЕР ── */
.player-window {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 180;
    width: min(680px, calc(100vw - 32px));
    height: min(460px, calc(100vh - 80px));
    min-width: 240px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    resize: both;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

#media-player.player-window {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.player-window.maximized {
    inset: 10px;
    left: 10px !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    height: auto !important;
    transform: none;
    resize: none;
}

.player-window:fullscreen,
.player-window:-webkit-full-screen {
    inset: 0;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border: none;
    border-radius: 0;
    transform: none;
    resize: none;
}

/* Нативный resize работает за правый нижний угол; делаем его заметным. */
.player-window:not(.maximized):not(:fullscreen)::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    pointer-events: none;
    background: linear-gradient(135deg, transparent 45%, var(--dim) 46%, var(--dim) 55%, transparent 56%) 0 0 / 7px 7px;
    opacity: 0.8;
}

.player-header {
    flex: 0 0 34px;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px 0 12px;
    background: rgba(35, 35, 35, 0.48);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    cursor: move;
    user-select: none;
}

.player-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 12px;
}

.player-controls {
    display: flex;
    gap: 4px;
}

.player-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--field);
    color: var(--text);
}

.player-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.player-btn.danger:hover {
    background: var(--accent);
    color: var(--bg);
}

.player-body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(180, 190, 205, .08) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15);
}

.player-body img,
.player-body video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.player-body audio {
    width: calc(100% - 24px);
}

/* Пустой нижний блок для будущих ссылок автора: на всю ширину */
#footer-links {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 109;
    height: 38px;
    background: var(--window);
    border: 1px solid var(--line);
}

/* Нижний островок масштаба на всю ширину */
#scale-bar {
    position: fixed;
    left: 148px;
    right: 0;
    bottom: 38px;
    z-index: 110;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: rgba(16, 16, 16, 0.34);
    backdrop-filter: blur(8px) saturate(125%);
    -webkit-backdrop-filter: blur(8px) saturate(125%);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--dim);
    font-size: 11px;
}

#ui-scale {
    flex: 1 1 80px;
    min-width: 40px;
    height: 4px;
    appearance: none;
    background: var(--line);
    border-radius: 999px;
    accent-color: var(--accent);
}

#ui-scale::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--line);
    border-radius: 999px;
}

#ui-scale::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4px;
    appearance: none;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
}

#ui-scale::-moz-range-track {
    height: 4px;
    background: var(--line);
    border-radius: 999px;
}

#ui-scale::-moz-range-progress {
    height: 4px;
    background: var(--accent);
    border-radius: 999px;
}

#ui-scale::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
}

.scale-btn,
.scale-value {
    height: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--field);
    color: var(--text);
    cursor: pointer;
}

.scale-btn {
    width: 24px;
    min-width: 24px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

.scale-value {
    width: 78px;
    min-width: 78px;
    padding: 0 5px;
    font-size: 11px;
    box-sizing: border-box;
}

#scale-readout {
    width: 52px;
    min-width: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hidden-files-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 0;
    outline: none;
    box-shadow: none;
}

.hidden-files-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.hidden-files-toggle svg {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hidden-files-toggle.showing-hidden {
    border-color: var(--accent);
    color: var(--accent);
}

.hidden-files-toggle.showing-hidden .hidden-eye-slash {
    display: none;
}

.space-mode-toggle {
    width: 78px;
    min-width: 78px;
    flex: 0 0 78px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
    transition: border-color .15s ease;
}

.space-mode-toggle.canvas-mode-active {
    border-color: var(--accent);
    color: var(--text);
}

#space-mode-toggle[hidden] {
    display: none !important;
}

.scale-label-value {
    display: inline;
}

.scale-btn:hover,
.scale-value:hover {
    border-color: var(--accent);
    color: var(--accent);
}

@keyframes tp-content-fade {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

.content-enter {
    animation: tp-content-fade 0.24s ease both;
}

@media (max-width: 520px) {
    #vpn-view {
        padding-left: 12px;
        padding-right: 12px;
    }

    .vpn-card {
        padding: 14px;
    }

    #nav-right {
        width: 120px;
        flex: 0 1 120px;
        padding-right: 6px;
    }

    #search-box {
        max-width: none;
    }

    #path-bar {
        min-width: 0;
    }

    #scale-bar {
        left: 148px;
        gap: 2px;
        padding: 0 4px;
    }

    #scale-bar .scale-btn {
        width: 20px;
        min-width: 20px;
    }

    #scale-readout {
        width: 40px;
        min-width: 40px;
        flex-basis: 40px;
    }

    .hidden-files-toggle svg {
        width: 14px;
        height: 14px;
    }

    .space-mode-toggle {
        width: 62px;
        min-width: 62px;
        flex-basis: 62px;
    }

    #ui-scale {
        min-width: 0;
    }

    #transfer-bar {
        left: 156px;
        right: 6px;
        bottom: 82px;
        width: auto;
        transform: translateY(8px);
    }

    #transfer-bar.visible {
        transform: translateY(0);
    }

    #action-bar {
        right: 6px;
    }
}

.item.dragging {
    opacity: 0.45;
}

.item.drop-target,
.win-row.drop-target {
    outline: 1px dashed var(--accent);
    background: rgba(255, 62, 62, 0.14);
}

/* ── СТИЛИ ЛИЧНОГО КАБИНЕТА VPN ── */
#vpn-view {
    display: none;
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 24px 24px 110px;
    background: var(--bg);
}

.vpn-empty-msg {
    color: var(--dim);
    font-size: 13px;
    padding: 60px;
    text-align: center;
}

.vpn-card {
    width: 100%;
    max-width: 820px;
    background: var(--window);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.vpn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.vpn-selector-label {
    color: var(--dim);
    font-size: 11px;
    margin: 8px 0 6px;
    text-transform: lowercase;
}

.vpn-proto-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.proto-btn {
    padding: 6px 14px;
    font-size: 12px;
    background: var(--tab);
    border-radius: var(--r);
    color: var(--dim);
    cursor: pointer;
}

.proto-btn.active {
    background: var(--accent);
    color: var(--bg);
    font-weight: 600;
}

.vpn-keybox {
    background: #0a0a0a;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 10px;
    font-family: monospace;
    font-size: 11px;
    word-break: break-all;
    max-height: 60px;
    overflow-y: auto;
    scrollbar-width: thin;
    color: #a3e635;
    margin-bottom: 12px;
    user-select: all;
}

.vpn-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    margin-bottom: 14px;
}

.btn-vpn {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    border-radius: var(--r);
    background: var(--tab);
    color: var(--text);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-vpn.primary {
    background: var(--accent);
    color: var(--bg);
}

.btn-vpn.copy-btn {
    background: #3a3a3a;
    color: #eeeeee;
    border: 1px solid #555555;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.btn-vpn.copy-btn:hover {
    background: #4a4a4a;
    border-color: #777777;
}

.btn-vpn.copy-btn.copy-success {
    background: #4ade80;
    border-color: #4ade80;
    color: #101010;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.35);
}

.btn-vpn.copy-btn.copy-error {
    background: #ef4444;
    border-color: #ef4444;
    color: #101010;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

.vpn-qr-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 8px;
    border-radius: 6px;
    width: fit-content;
    max-width: 100%;
}

.vpn-qr-wrap { position: relative; }
.vpn-qr-step { position: absolute; right: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 3px 6px; border-radius: 4px; background: rgba(255,255,255,.88); color: #222; font-size: 10px; text-align: right; }
.vpn-qr-step[hidden] { display: none; }
.vpn-qr-wrap img {
    display: block;
    width: 220px;
    height: 220px;
    max-width: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
@media (max-width: 520px) {
    .vpn-qr-wrap img { width: min(220px, calc(100vw - 72px)); height: auto; aspect-ratio: 1; }
}

.vpn-downloads {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vpn-downloads .btn-vpn {
    cursor: pointer;
    border: 0;
}

.vpn-admin-card {
    border-color: var(--accent);
}

.vpn-admin-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vpn-admin-form input,
.vpn-admin-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--field);
    border: 0;
    border-radius: var(--r);
    color: var(--text);
    padding: 8px;
    font: inherit;
    font-size: 12px;
}

.vpn-admin-form textarea {
    min-height: 60px;
    resize: vertical;
    font-family: monospace;
}

.vpn-ok {
    color: #4ade80;
    font-size: 11px;
}

.vpn-error {
    color: #f87171;
    font-size: 11px;
}

.guide-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px 0;
}

.guide-content p,
.guide-content h1,
.guide-content h2,
.guide-content h3 {
    margin: 8px 0;
}

.guide-accordion details {
    background: var(--tab);
    margin-bottom: 6px;
    border-radius: var(--r);
    border: 1px solid var(--line);
}

.guide-accordion summary {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
}

.guide-content {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--dim);
    border-top: 1px solid var(--line);
}

.guide-content img,
#vpn-guide-body img {
    display: block;
    max-width: 100%;
    height: auto;
}

#vpn-guide-body {
    max-width: 100%;
    overflow-wrap: anywhere;
}