/* ============================================================
 *  Akashi Dungeon — TinyMCE UI + фронтенд шорткодов
 *  Файл: assets/tinymce-ui.css
 * ============================================================ */


/* ============================================================
 *  ПОПАПЫ РЕДАКТОРА
 * ============================================================ */

.akashi-mce-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.akashi-mce-popup {
    background: #1e1e2e;
    border: 1px solid #3a3a5c;
    border-radius: 10px;
    width: 560px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    overflow: hidden;
}

.akashi-mce-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #16162a;
    border-bottom: 1px solid #2e2e4a;
    flex-shrink: 0;
}

.akashi-mce-popup-title {
    font-size: 15px;
    font-weight: 600;
    color: #e2e2f0;
}

.akashi-mce-popup-close {
    background: none;
    border: none;
    color: #888;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.akashi-mce-popup-close:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}

.akashi-mce-popup-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}

.akashi-mce-popup-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px 18px;
    border-top: 1px solid #2e2e4a;
    flex-shrink: 0;
}

/* ── Общие элементы форм ── */
.akashi-mce-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #9090b8;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.akashi-mce-input {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: #12121f;
    border: 1px solid #2e2e4a;
    border-radius: 6px;
    color: #e2e2f0;
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color .15s;
    margin-bottom: 6px;
}
.akashi-mce-input:focus {
    outline: none;
    border-color: #6262c8;
}

.akashi-mce-select {
    padding: 8px 10px;
    background: #12121f;
    border: 1px solid #2e2e4a;
    border-radius: 6px;
    color: #e2e2f0;
    font-size: 13px;
    margin-bottom: 8px;
    box-sizing: border-box;
    width: 100%;
}

.akashi-mce-textarea {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: #12121f;
    border: 1px solid #2e2e4a;
    border-radius: 6px;
    color: #e2e2f0;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 6px;
}
.akashi-mce-textarea:focus {
    outline: none;
    border-color: #6262c8;
}

/* ── Счётчик символов ── */
.akashi-mce-counter {
    display: block;
    text-align: right;
    font-size: 10px;
    color: #555580;
    margin-top: -4px;
    margin-bottom: 6px;
    letter-spacing: .04em;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* ── Ряды (хронология, инфобокс, сравнение) ── */
.akashi-mce-tl-row,
.akashi-mce-ib-row,
.akashi-mce-cmp-row,
.akashi-mce-cmp-heads {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.akashi-mce-tl-row .akashi-mce-input,
.akashi-mce-ib-row .akashi-mce-input,
.akashi-mce-cmp-row .akashi-mce-input,
.akashi-mce-cmp-heads .akashi-mce-input {
    margin-bottom: 0;
}

.akashi-mce-row-del {
    background: none;
    border: 1px solid #3a3a5c;
    color: #888;
    border-radius: 5px;
    width: 28px;
    height: 32px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12px;
    transition: color .15s, border-color .15s;
}
.akashi-mce-row-del:hover {
    color: #ff6b6b;
    border-color: #ff6b6b;
}

.akashi-mce-add-row {
    background: none;
    border: 1px dashed #3a3a5c;
    color: #6262c8;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 4px;
    transition: border-color .15s, color .15s;
    width: 100%;
}
.akashi-mce-add-row:hover {
    border-color: #6262c8;
    color: #9090f0;
}

/* ── Кнопки попапа ── */
.akashi-mce-btn-cancel {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid #3a3a5c;
    border-radius: 6px;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.akashi-mce-btn-cancel:hover {
    border-color: #666;
    color: #ccc;
}

.akashi-mce-btn-insert {
    padding: 8px 20px;
    background: #4a4ac8;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.akashi-mce-btn-insert:hover {
    background: #6262e0;
}

/* ── Поиск и результаты ── */
.akashi-mce-search-wrap {
    margin-bottom: 8px;
}

.akashi-mce-search {
    background: #12121f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
    padding-left: 32px;
}

.akashi-mce-results {
    border: 1px solid #2e2e4a;
    border-radius: 6px;
    max-height: 240px;
    overflow-y: auto;
    background: #12121f;
}

.akashi-mce-hint {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 13px;
}
.akashi-mce-hint--error {
    color: #ff6b6b;
}

.akashi-mce-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #1e1e30;
    transition: background .1s;
}
.akashi-mce-result-item:last-child {
    border-bottom: none;
}
.akashi-mce-result-item:hover {
    background: rgba(98,98,200,.12);
}
.akashi-mce-result-item.selected {
    background: rgba(98,98,200,.25);
    outline: 1px solid #6262c8;
}

.akashi-mce-res-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.akashi-mce-res-thumb-placeholder {
    width: 40px;
    height: 40px;
    background: #2a2a40;
    border-radius: 4px;
    flex-shrink: 0;
}

.akashi-mce-res-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.akashi-mce-res-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6262c8;
}
.akashi-mce-res-title {
    font-size: 13px;
    font-weight: 500;
    color: #e2e2f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.akashi-mce-res-preview {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
 *  ТУЛБАР РЕДАКТОРА (aed-wrap)
 * ============================================================ */

.aed-wrap {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}

/* Название редактора над тулбаром */
.aed-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-dim, #6b6b78);
    padding: 8px 10px 0;
    background: rgba(255,255,255,.03);
    border-bottom: none;
    pointer-events: none;
    user-select: none;
}

.aed-toolbar,
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.07);
    min-height: 42px;
}

/* Разделитель в тулбаре */
.aed-toolbar .tb-sep,
.editor-toolbar .tb-sep {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,.1);
    margin: 0 3px;
    flex-shrink: 0;
}

/* Кнопки тулбара */
.aed-toolbar .tb-btn,
.editor-toolbar .tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    min-width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text, #c0c0cc);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: .85;
}
.aed-toolbar .tb-btn:hover,
.editor-toolbar .tb-btn:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.13);
    color: var(--text-h, #e0e0ef);
    opacity: 1;
}
.aed-toolbar .tb-btn.active,
.editor-toolbar .tb-btn.active {
    background: rgba(98,98,200,.2);
    border-color: rgba(98,98,200,.4);
    color: #b0b0f0;
    opacity: 1;
}

/* Кнопки блоков — чуть шире */
.aed-toolbar .tb-block,
.editor-toolbar .tb-block {
    padding: 3px 8px;
    font-size: 11px;
}

.aed-body {
    min-height: 160px;
    padding: 12px 14px;
    outline: none;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-h, #e0e0ef);
}
.aed-body:empty::before,
.aed-body[data-placeholder][data-empty]:not(:focus)::before {
    content: attr(data-placeholder);
    color: var(--text-dim, #666);
    pointer-events: none;
}

/* ============================================================
 *  ФРОНТЕНД — РЕНДЕР ШОРТКОДОВ
 *  Стили для вывода на сайте (лицевая часть)
 * ============================================================ */

/* ── Спойлер ── */
.akashi-spoiler {
    margin: 1.5em 0;
    border: 1px solid rgba(255,255,255,.07);
    border-left: 2px solid rgba(170, 37, 24, .45);
    border-radius: 0 6px 6px 0;
    overflow: hidden;
    background: rgba(255,255,255,.015);
}

.akashi-spoiler-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-h, #eeeef2);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: background .15s;
    font-family: inherit;
}
.akashi-spoiler-toggle:hover {
    background: rgba(170, 37, 24, .06);
}
.akashi-spoiler-toggle[aria-expanded="true"] {
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.akashi-spoiler-icon {
    font-size: 9px;
    color: rgba(170, 37, 24, .7);
    transition: transform .2s ease;
    flex-shrink: 0;
}
.akashi-spoiler-toggle[aria-expanded="true"] .akashi-spoiler-icon {
    transform: rotate(90deg);
    color: var(--accent);
}

.akashi-spoiler-title {
    flex: 1;
}

.akashi-spoiler-body {
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text, #c8c8d0);
}

/* ── Хронология ── */
.akashi-timeline {
    position: relative;
    padding: 6px 0 6px 36px;
    margin: 2em 0;
}

/* Вертикальная линия с фейдом на концах */
.akashi-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--tl-color, var(--accent)) 45%, transparent) 8%,
        color-mix(in srgb, var(--tl-color, var(--accent)) 45%, transparent) 92%,
        transparent 100%
    );
}

.akashi-tl-item {
    position: relative;
    padding-bottom: 30px;
}
.akashi-tl-item:last-child {
    padding-bottom: 0;
}

/* Точка-маркер */
.akashi-tl-dot {
    position: absolute;
    left: -32px;
    top: 5px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--tl-color, var(--accent));
    border: 2px solid var(--bg2, #131316);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tl-color, var(--accent)) 40%, transparent),
                0 0 10px color-mix(in srgb, var(--tl-color, var(--accent)) 20%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}
.akashi-tl-item:hover .akashi-tl-dot {
    transform: scale(1.25);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tl-color, var(--accent)) 65%, transparent),
                0 0 16px color-mix(in srgb, var(--tl-color, var(--accent)) 45%, transparent);
}

/* Строка дата + название события */
.akashi-tl-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 5px;
    line-height: 1.35;
}

.akashi-tl-date {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--tl-color, var(--accent));
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Courier New', Courier, monospace;
    padding-top: 1px;
}

.akashi-tl-event {
    display: inline;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-h, #eeeef2);
    line-height: 1.3;
}

.akashi-tl-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text, #c8c8d0);
    opacity: .72;
    margin: 0;
    padding-left: 1px;
}

.akashi-tl-content {
    /* flex context уже задан родителем */
}

.akashi-tl-heading {
    font-family: 'Cinzel', 'Raleway', serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(170, 37, 24, .65);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(170, 37, 24, .2);
}

/* ── Горизонтальный режим ── */
.akashi-timeline--h {
    padding: 0;
    overflow: hidden;
}
.akashi-timeline--h::before {
    display: none;
}
.akashi-tl-track {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 44px 20px 20px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}
.akashi-tl-track::-webkit-scrollbar { display: none; }
.akashi-tl-track.is-dragging { cursor: grabbing; }
.akashi-tl-track::before {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        color-mix(in srgb, var(--tl-color, var(--accent)) 40%, transparent) 6%,
        color-mix(in srgb, var(--tl-color, var(--accent)) 40%, transparent) 94%,
        transparent 100%
    );
    pointer-events: none;
}
.akashi-tl-slide {
    flex-shrink: 0;
    width: 200px;
    scroll-snap-align: start;
    padding-right: 16px;
    position: relative;
}
.akashi-tl-slide .akashi-tl-dot {
    position: absolute;
    left: 2px;
    top: -17px;
}
.akashi-timeline--h .akashi-tl-heading {
    margin-bottom: 0;
    padding-bottom: 8px;
    border-bottom: none;
}

/* ── Свотчеры цвета в попапах ── */
.tl-clr-wrap {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 5px;
}
.tl-clr-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.12);
    cursor: pointer;
    padding: 0;
    transition: border-color .12s, transform .12s, outline .12s, box-shadow .12s;
    flex-shrink: 0;
    outline: 3px solid transparent;
    outline-offset: 2px;
}
.tl-clr-btn:hover { transform: scale(1.18); border-color: rgba(255,255,255,.6); }
.tl-clr-btn.active {
    border-color: #fff;
    outline: 3px solid rgba(255,255,255,.9);
    outline-offset: 3px;
    transform: scale(1.32);
    box-shadow: 0 0 0 5px rgba(0,0,0,.5), 0 0 14px rgba(255,255,255,.25);
}

/* ── Переключатель режима vertical/horizontal ── */
.tl-mode-wrap {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.tl-mode-btn {
    padding: 4px 10px;
    background: var(--bg3, #1a1a1e);
    border: 1px solid var(--border, rgba(255,255,255,.07));
    border-radius: 4px;
    color: var(--text-dim, #6b6b78);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}
.tl-mode-btn:hover {
    background: var(--bg4, #202025);
    color: var(--text, #c8c8d0);
}
.tl-mode-btn.active {
    background: rgba(var(--accent-rgb),.18);
    border-color: rgba(var(--accent-rgb),.5);
    color: var(--text-h, #eeeef2);
}

/* ── Цитата ── */
.akashi-lore-quote {
    position: relative;
    border-left: 2px solid rgba(170, 37, 24, .6);
    margin: 1.75em 0;
    padding: 14px 20px 14px 24px;
    background: rgba(170, 37, 24, .04);
    border-radius: 0 6px 6px 0;
}
.akashi-lore-quote::before {
    content: '\201C';
    position: absolute;
    left: 14px;
    top: 8px;
    font-size: 32px;
    line-height: 1;
    color: rgba(170, 37, 24, .3);
    font-family: Georgia, serif;
    pointer-events: none;
}
.akashi-lore-quote p {
    font-style: italic;
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 8px;
    padding-left: 18px;
    color: var(--text-h, #eeeef2);
}
.akashi-lore-quote p:last-child {
    margin-bottom: 0;
}
.akashi-lore-quote cite {
    display: block;
    font-size: 11px;
    opacity: .5;
    font-style: normal;
    margin-top: 8px;
    padding-left: 18px;
    letter-spacing: .04em;
}
.akashi-lore-quote cite::before {
    content: '— ';
}

/* ── Инфобокс ── */
.akashi-infobox {
    float: right;
    width: 270px;
    margin: 0 0 20px 22px;
    border: 1px solid rgba(255,255,255,.08);
    border-top: 2px solid rgba(170, 37, 24, .6);
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    font-size: 13px;
    background: rgba(255,255,255,.015);
}
@media (max-width: 600px) {
    .akashi-infobox {
        float: none;
        width: 100%;
        margin: 1.25em 0;
    }
}

.akashi-infobox-title {
    padding: 9px 14px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(170, 37, 24, .12);
    text-align: center;
    color: var(--text-h, #eeeef2);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.akashi-infobox-table {
    width: 100%;
    border-collapse: collapse;
}
.akashi-infobox-table th,
.akashi-infobox-table td {
    padding: 7px 12px;
    border-top: 1px solid rgba(255,255,255,.05);
    vertical-align: top;
    line-height: 1.45;
}
.akashi-infobox-table tr:first-child th,
.akashi-infobox-table tr:first-child td {
    border-top: none;
}
.akashi-infobox-table th {
    font-weight: 600;
    font-size: 12px;
    opacity: .55;
    white-space: nowrap;
    width: 44%;
    color: var(--text, #c8c8d0);
}
.akashi-infobox-table td {
    font-size: 12.5px;
    color: var(--text-h, #eeeef2);
}

/* ── Сравнение ── */
.akashi-comparison {
    overflow-x: auto;
    margin: 1.75em 0;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.07);
}
.akashi-cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.akashi-cmp-table th,
.akashi-cmp-table td {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    text-align: left;
    vertical-align: top;
}
.akashi-cmp-table thead th {
    background: rgba(255,255,255,.04);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .8;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.akashi-cmp-table thead th:nth-child(2) { color: #a0b8d0; }
.akashi-cmp-table thead th:nth-child(3) { color: #d0a8a0; }
.akashi-cmp-label {
    opacity: .5;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    width: 32%;
}
.akashi-cmp-table tbody tr:last-child td { border-bottom: none; }
.akashi-cmp-table tbody tr:nth-child(even) td {
    background: rgba(255,255,255,.018);
}

/* ── Карточка-врезка ── */
.akashi-entity-card {
    display: flex;
    gap: 0;
    border: 1px solid rgba(255,255,255,.07);
    border-left: 3px solid rgba(170, 37, 24, .45);
    border-radius: 0 6px 6px 0;
    overflow: hidden;
    margin: 1.75em 0;
    text-decoration: none;
    color: inherit;
    background: rgba(255,255,255,.02);
    transition: border-left-color .2s ease, background .2s ease, transform .15s ease;
}
.akashi-entity-card:hover {
    border-left-color: var(--accent);
    background: rgba(170, 37, 24, .04);
    transform: translateX(3px);
}

.akashi-ec-img {
    flex-shrink: 0;
}
.akashi-ec-img img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.akashi-ec-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 11px 14px;
}

.akashi-ec-type {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(170, 37, 24, .7);
    line-height: 1;
}

.akashi-ec-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-h, #eeeef2);
    line-height: 1.3;
}

.akashi-ec-preview {
    font-size: 12px;
    opacity: .6;
    margin: 0;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--text, #c8c8d0);
}

/* Примечание карточки — отображается вместо авто-превью если задано */
.akashi-ec-note {
    font-size: 11px;
    font-style: italic;
    opacity: .55;
    margin: 0;
    line-height: 1.5;
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 5px;
    margin-top: 3px;
    color: var(--text, #c8c8d0);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Примечание в превью редактора TSEditor */
.rb-card-note {
    font-size: 10px;
    font-style: italic;
    color: var(--text-dim, #6b6b78);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.akashi-ec-more {
    font-size: 11px;
    color: rgba(170, 37, 24, .65);
    margin-top: auto;
    letter-spacing: .02em;
    transition: color .15s;
}
.akashi-entity-card:hover .akashi-ec-more {
    color: var(--accent);
}

/* ── Внутренняя ссылка ── */
.akashi-internal-link {
    color: #c8c0e8;
    text-decoration: none;
    border-bottom: 1px dotted rgba(200, 192, 232, .45);
    padding-bottom: 0;
    transition: color .15s, border-color .15s;
}
.akashi-internal-link:hover {
    color: #e0d8ff;
    border-bottom-color: rgba(224, 216, 255, .7);
    border-bottom-style: solid;
}
/* Цветовые метки по типу */
.akashi-ilink--persona        { color: #a8cce8; border-bottom-color: rgba(168,204,232,.4); }
.akashi-ilink--persona:hover  { color: #c8e4ff; border-bottom-color: rgba(200,228,255,.65); }
.akashi-ilink--location       { color: #8ec8a8; border-bottom-color: rgba(142,200,168,.4); }
.akashi-ilink--location:hover { color: #b0e8c8; border-bottom-color: rgba(176,232,200,.65); }
.akashi-ilink--akashi-faction        { color: #d4a870; border-bottom-color: rgba(212,168,112,.4); }
.akashi-ilink--akashi-faction:hover  { color: #f0c888; border-bottom-color: rgba(240,200,136,.65); }
.akashi-ilink--akashi-article        { color: #b890d8; border-bottom-color: rgba(184,144,216,.4); }
.akashi-ilink--akashi-article:hover  { color: #d4aef0; border-bottom-color: rgba(212,174,240,.65); }
.akashi-ilink--akashi-titles         { color: #d89090; border-bottom-color: rgba(216,144,144,.4); }
.akashi-ilink--akashi-titles:hover   { color: #f0aaaa; border-bottom-color: rgba(240,170,170,.65); }

/* ============================================================
 *  НОВЫЕ БЛОКИ — фронтенд
 * ============================================================ */

/* ── Выноска (callout) ── */
.akashi-callout {
    display: flex;
    gap: 13px;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    border: 1px solid rgba(255,255,255,.07);
    border-left: 2px solid;
    margin: 1.5em 0;
    background: rgba(255,255,255,.02);
}
.akashi-callout--note {
    background: rgba(60,100,180,.06);
    border-color: rgba(60,100,180,.18);
    border-left-color: rgba(80,130,220,.7);
}
.akashi-callout--warn {
    background: rgba(200,130,30,.06);
    border-color: rgba(200,130,30,.18);
    border-left-color: rgba(220,155,40,.7);
}
.akashi-callout--tip {
    background: rgba(30,140,100,.06);
    border-color: rgba(30,140,100,.18);
    border-left-color: rgba(40,165,115,.7);
}
.akashi-callout-icon {
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: .8;
}
.akashi-callout-body {
    min-width: 0;
    flex: 1;
}
.akashi-callout-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 5px;
    line-height: 1;
}
.akashi-callout--note .akashi-callout-title { color: #6090d8; }
.akashi-callout--warn .akashi-callout-title { color: #c89040; }
.akashi-callout--tip  .akashi-callout-title { color: #40a880; }
.akashi-callout-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text, #c8c8d0);
    opacity: .9;
}

/* ── Изображение с подписью ── */
.akashi-img-caption {
    max-width: 100%;
    margin: 1.5em 0;
}
.akashi-img-caption img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}
.akashi-img-caption figcaption {
    font-size: 12px;
    opacity: .55;
    font-style: italic;
    text-align: center;
    margin-top: 6px;
    line-height: 1.4;
}

/* Выравнивание без float */
.akashi-img--center { display: block; }
.akashi-img--fill   { width: 100%; }

/* Сброс float на мобильных */
@media (max-width: 600px) {
    .akashi-img-caption {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ── Tab-группы и toggle-кнопки в попапах TSEditor (dashboard.php) ── */
.aed-tab-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.aed-tab {
    padding: 5px 11px;
    background: var(--bg3, #1a1a1e);
    border: 1px solid var(--border, rgba(255,255,255,.07));
    border-radius: 4px;
    color: var(--text-dim, #6b6b78);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
    line-height: 1.4;
}
.aed-tab:hover:not(:disabled) {
    background: var(--bg4, #202025);
    color: var(--text, #c8c8d0);
}
.aed-tab.active {
    background: rgba(170, 37, 24, .18);
    border-color: rgba(170, 37, 24, .5);
    color: var(--text-h, #eeeef2);
}
.aed-tab:disabled {
    opacity: .3;
    cursor: not-allowed;
}
.aed-toggle {
    padding: 5px 13px;
    background: var(--bg3, #1a1a1e);
    border: 1px solid var(--border, rgba(255,255,255,.07));
    border-radius: 4px;
    color: var(--text-dim, #6b6b78);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1.4;
}
.aed-toggle:hover:not(:disabled) {
    background: var(--bg4, #202025);
    color: var(--text, #c8c8d0);
}
.aed-toggle.active {
    background: rgba(170, 37, 24, .18);
    border-color: rgba(170, 37, 24, .5);
    color: var(--text-h, #eeeef2);
}
.aed-toggle:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Блок термина / кода ── */
.akashi-code-block {
    margin: 1.25em 0;
}
.akashi-code-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .55;
    margin-bottom: 5px;
}
.akashi-code-block pre {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 5px;
    padding: 10px 14px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
    margin: 0;
}

/* ── Произвольная таблица ── */
.akashi-custom-table {
    overflow-x: auto;
    margin: 1.5em 0;
}
.akashi-custom-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.akashi-custom-table th,
.akashi-custom-table td {
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.08);
    text-align: left;
}
.akashi-custom-table thead th {
    background: rgba(98,98,200,.10);
    font-weight: 700;
}
.akashi-custom-table tbody tr:nth-child(even) td {
    background: rgba(255,255,255,.02);
}

/* ── Float-изображение в TSEditor (rblock-обёртка несёт float) ── */
.rblock[data-rblock="img_caption"] {
    display: block; /* явно block, чтобы браузер не конфликтовал с float */
}

/* Clearfix: float-блок не вылезает за нижнюю границу .aed-body */
.aed-body::after {
    content: '';
    display: table;
    clear: both;
}

/* Небольшой отступ снизу у float-блока чтобы текст не прилипал */
.rblock[data-rblock="img_caption"][style*="float:left"],
.rblock[data-rblock="img_caption"][style*="float:right"] {
    margin-bottom: 10px;
}

/* ============================================================
 *  ГАЛЕРЕЯ — превью в TSEditor
 * ============================================================ */

.rb-gallery-preview {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rb-gallery-meta {
    display: flex;
    align-items: center;
    gap: 7px;
}

.rb-gallery-icon {
    font-size: 15px;
    line-height: 1;
}

.rb-gallery-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-h);
}

.rb-gallery-info {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    margin-left: 4px;
}

.rb-gallery-thumbs {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================
 *  ГАЛЕРЕЯ — элемент списка в попапе TSEditor
 * ============================================================ */

.aed-gal-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: default;
}

.aed-gal-drag {
    color: var(--text-dim);
    cursor: grab;
    font-size: 14px;
    flex-shrink: 0;
    padding: 0 2px;
    user-select: none;
}
.aed-gal-drag:active { cursor: grabbing; }

.aed-gal-item.dragging {
    opacity: .4;
    border-style: dashed;
}

.aed-gal-thumb {
    width: 52px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg4);
    border: 1px solid var(--border);
}
.aed-gal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aed-gal-caption {
    flex: 1;
    font-size: 12px;
    margin: 0;
}

/* ============================================================
 *  ГАЛЕРЕЯ — попап TinyMCE (элементы D&D)
 * ============================================================ */

.gal-item {
    transition: opacity .15s;
}
.gal-item.gal-dragging {
    opacity: .35;
}


/* ============================================================
 *  РАЗДЕЛИТЕЛЬ — фронтенд (.akashi-divider)
 * ============================================================ */

.akashi-divider {
    margin: 2em auto;
    text-align: center;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

/* line */
.akashi-divider--line::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(200,200,220,.25) 20%,
        rgba(200,200,220,.25) 80%,
        transparent 100%);
}

/* ornament */
.akashi-divider--ornament::before,
.akashi-divider--ornament::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 32px);
    height: 1px;
    background: rgba(200,200,220,.2);
}
.akashi-divider--ornament::before { left: 0; }
.akashi-divider--ornament::after  { right: 0; }
.akashi-divider--ornament {
    color: rgba(200,200,220,.45);
    font-size: 14px;
    letter-spacing: .3em;
}
.akashi-divider--ornament span,
.akashi-divider--ornament::content { content: '✦'; }
/* Pure CSS ornament via content trick */
.akashi-divider--ornament { color: transparent; }
.akashi-divider--ornament::before {
    content: '── ✦ ──';
    display: block;
    position: static;
    width: auto;
    height: auto;
    background: none;
    color: rgba(200,200,220,.4);
    font-size: 13px;
    letter-spacing: .25em;
}

/* dots */
.akashi-divider--dots::before {
    content: '· · · · · · ·';
    display: block;
    color: rgba(200,200,220,.35);
    font-size: 18px;
    letter-spacing: .5em;
    line-height: 1;
}

/* asterism */
.akashi-divider--asterism::before {
    content: '⁂';
    display: block;
    color: rgba(200,200,220,.4);
    font-size: 22px;
    line-height: 1;
}

/* fade */
.akashi-divider--fade::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(to right,
        rgba(var(--accent-rgb),.5) 0%,
        rgba(200,200,220,.2) 40%,
        transparent 100%);
}

/* ============================================================
 *  РАЗДЕЛИТЕЛЬ — превью в TSEditor (.rb-divider)
 * ============================================================ */

.rb-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.rb-divider-icon {
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: .2em;
    flex: 1;
    text-align: center;
    opacity: .6;
}

.rb-divider-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-dim);
    flex-shrink: 0;
    opacity: .5;
}

/* ============================================================
 *  РАЗДЕЛИТЕЛЬ — попап TSEditor (.aed-div-card)
 * ============================================================ */

.aed-div-card {
    padding: 14px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg3);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.aed-div-card:hover {
    border-color: var(--border2);
    background: var(--bg4);
}
.aed-div-card.active {
    border-color: rgba(var(--accent-rgb),.6);
    background: rgba(var(--accent-rgb),.1);
}
.aed-div-card .aed-div-preview {
    font-size: 13px;
    letter-spacing: .15em;
    color: var(--text-dim);
    margin-bottom: 6px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.aed-div-card.active .aed-div-preview { color: var(--text-h); }
.aed-div-card > span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-dim);
}
.aed-div-card.active > span { color: var(--text-h); }

/* Превью конкретных стилей */
.aed-div-preview--line::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: .5;
}
.aed-div-preview--ornament::before {
    content: '── ✦ ──';
    font-size: 12px;
    letter-spacing: .2em;
}
.aed-div-preview--dots::before {
    content: '· · · ·';
    font-size: 16px;
    letter-spacing: .4em;
}
.aed-div-preview--asterism::before {
    content: '⁂';
    font-size: 18px;
}
.aed-div-preview--fade::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, currentColor 0%, transparent 100%);
    opacity: .6;
}


/* ============================================================
 *  CHARACTER STATS — фронтенд (.akashi-char-stats)
 * ============================================================ */

.akashi-char-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 1em 0;
}

.akashi-stat-row {
    display: grid;
    grid-template-columns: 140px 1fr 36px;
    align-items: center;
    gap: 10px;
}

.akashi-stat-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-h, #eeeef2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .02em;
}

.akashi-stat-bar-wrap {
    height: 6px;
    background: rgba(255,255,255,.07);
    border-radius: 3px;
    overflow: hidden;
}

.akashi-stat-bar {
    height: 100%;
    border-radius: 3px;
    width: 0;                        /* начальное состояние — JS анимирует до --stat-val */
    background: var(--stat-color, var(--accent));
    box-shadow: 0 0 8px color-mix(in srgb, var(--stat-color, var(--accent)) 40%, transparent);
}

.akashi-stat-num {
    font-size: 11px;
    color: var(--text-dim, #6b6b78);
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* ============================================================
 *  CHARACTER STATS — превью в TSEditor (.rb-char-stats)
 * ============================================================ */

.rb-char-stats {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 14px;
}

.rb-stat-row {
    display: grid;
    grid-template-columns: 110px 1fr 28px;
    align-items: center;
    gap: 8px;
}

.rb-stat-name {
    font-size: 11px;
    color: var(--text-h);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-stat-bar-wrap {
    height: 5px;
    background: rgba(255,255,255,.07);
    border-radius: 3px;
    overflow: hidden;
}

.rb-stat-bar {
    height: 100%;
    border-radius: 3px;
    /* width задаётся inline */
}

.rb-stat-val {
    font-size: 10px;
    color: var(--text-dim);
    text-align: right;
}


/* ============================================================
 *  LORE TERM — фронтенд (.akashi-lore-term)
 * ============================================================ */

.akashi-lore-term {
    position: relative;
    display: inline;
    border-bottom: 1px dashed rgba(180,160,255,.55);
    color: inherit;
    cursor: help;
    /* touch: активируем по :focus */
}
.akashi-lore-term:focus {
    outline: none;
}

.akashi-lt-tooltip {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    max-width: 280px;
    background: #1a1a2e;
    border: 1px solid rgba(180,160,255,.3);
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.45;
    color: #c8c0e8;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,.45);
    /* Стрелка вниз */
}
.akashi-lt-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(180,160,255,.3);
}
.akashi-lt-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a1a2e;
    margin-top: -1px;
    z-index: 1;
}

/* Показываем tooltip при hover и focus (touch) */
.akashi-lore-term:hover .akashi-lt-tooltip,
.akashi-lore-term:focus .akashi-lt-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
 *  LORE TERM — превью в TSEditor (.ts-lore-term)
 * ============================================================ */

.ts-lore-term {
    display: inline;
    position: relative;
    border-bottom: 1px dashed rgba(180,160,255,.6);
    color: #c8c0e8;
    cursor: default;
    padding: 0 1px;
    user-select: none;
}

/* Подсказка внутри редактора скрыта — видна только содержательная часть */
.ts-lore-term .ts-lt-tip {
    display: none;
}

/* При наведении — маленькая плашка над словом */
.ts-lore-term::after {
    content: attr(data-def);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    max-width: 220px;
    background: #1a1a2e;
    border: 1px solid rgba(180,160,255,.3);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.4;
    color: #c8c0e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    z-index: 10;
}
.ts-lore-term:hover::after {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
 *  MAP PIN — фронтенд (.akashi-map-pin-wrap)
 * ============================================================ */

.akashi-map-pin-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 1em 0;
    line-height: 0;
    border-radius: 6px;
    overflow: hidden;
}

.akashi-mp-map {
    width: 100%;
    display: block;
    border-radius: 6px;
}

.akashi-mp-pin {
    position: absolute;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transform: translate(-50%, -100%);
    z-index: 5;
}
.akashi-mp-pin:focus {
    outline: none;
}

.akashi-mp-dot {
    display: block;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.35), 0 2px 8px rgba(0,0,0,.4);
    transition: transform .15s, box-shadow .15s;
}
.akashi-mp-pin:hover .akashi-mp-dot,
.akashi-mp-pin:focus .akashi-mp-dot {
    transform: rotate(-45deg) scale(1.2);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.5), 0 4px 12px rgba(0,0,0,.5);
}

.akashi-mp-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 120px;
    max-width: 240px;
    background: rgba(13,13,20,.95);
    border: 1px solid rgba(var(--accent-rgb),.4);
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #e0e0f0;
    white-space: normal;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    z-index: 10;
}
.akashi-mp-tooltip strong {
    display: block;
    color: #fff;
    font-size: 12px;
    margin-bottom: 3px;
}
.akashi-mp-tooltip p {
    margin: 0;
    opacity: .75;
    font-size: 11px;
}
/* Стрелка вниз от tooltip */
.akashi-mp-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(var(--accent-rgb),.4);
}
.akashi-mp-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(13,13,20,.95);
    margin-top: -1px;
    z-index: 1;
}

.akashi-mp-pin:hover .akashi-mp-tooltip,
.akashi-mp-pin:focus .akashi-mp-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
 *  MAP PIN — превью в TSEditor (.rb-map-pin-preview)
 * ============================================================ */

.rb-map-pin-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.rb-mp-img {
    width: 80px;
    height: 50px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.rb-mp-placeholder {
    width: 80px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg4);
    border-radius: 3px;
    font-size: 22px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.rb-mp-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rb-mp-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-h);
}

.rb-mp-count {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
}