:root {
    --bg: #0b1220;
    --bg2: #0f172a;
    --panel: #111827;
    --panel2: #182234;
    --line: rgba(255,255,255,.08);
    --text: #e5edf9;
    --muted: #95a3bb;
    --accent: #4f8cff;
    --accent2: #22c55e;
    --danger: #ef4444;
    --warn: #f59e0b;
    --doc-bg: #eef3f9;
    --doc-card: #ffffff;
    --doc-text: #172033;
    --doc-muted: #637391;
    --doc-line: #e6ebf4;
    --doc-soft: #f7faff;
    --shadow: 0 12px 40px rgba(0,0,0,.12);
    --radius: 18px;
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,.04);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,rgba(79,140,255,.72),rgba(46,94,212,.72));
    border-radius: 999px;
    border: 2px solid rgba(11,18,32,.6);
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg,rgba(113,163,255,.9),rgba(59,107,228,.9));
    }

select {
    appearance: none;
    background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat,no-repeat;
    background-position: 0 0,right 12px center;
    padding-right: 40px;
    color: var(--text);
}

    select option {
        background: #122033;
        color: #e5edf9;
    }

body {
    margin: 0;
    font-family: Inter,Segoe UI,Roboto,Arial,sans-serif;
    color: var(--text);
    background: linear-gradient(180deg,var(--bg),var(--bg2));
}

.hidden {
    display: none !important
}

.toast {
    position: fixed;
    top: 88px;
    right: 20px;
    z-index: 9999;
    min-width: 320px;
    max-width: 520px;
    padding: 14px 16px;
    border-radius: 14px;
    font-weight: 800;
    box-shadow: 0 16px 40px rgba(0,0,0,.32);
    display: none;
    line-height: 1.45;
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
}

    .toast.show {
        display: block
    }

    .toast.ok {
        background: linear-gradient(180deg,rgba(16,185,129,.96),rgba(5,150,105,.96));
        color: #fff;
    }

    .toast.error {
        background: linear-gradient(180deg,rgba(239,68,68,.98),rgba(185,28,28,.98));
        color: #fff;
    }

    .toast.warn {
        background: linear-gradient(180deg,rgba(245,158,11,.98),rgba(217,119,6,.98));
        color: #fff;
    }

* {
    scrollbar-width: thin;
    scrollbar-color: #42506d #0f172a;
}

    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    *::-webkit-scrollbar-track {
        background: #0f172a;
    }

    *::-webkit-scrollbar-thumb {
        background: #42506d;
        border-radius: 999px;
        border: 2px solid #0f172a;
    }

        *::-webkit-scrollbar-thumb:hover {
            background: #5e7096;
        }

.app {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(10,16,30,.78);
    backdrop-filter: blur(8px);
}

.topbar-center {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.topbar-right {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
}

    .brand .logo {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        display: inline-block;
        position: relative;
        /* (optionnel) si tu veux un visuel comme avant :
       background: linear-gradient(135deg, var(--link), rgba(255,255,255,0));
    */
    }

    .brand h1 {
        margin: 0;
        font-size: 1.02rem;
        font-weight: 800;
        letter-spacing: .01em;
    }

    .brand p {
        margin: 0;
        font-size: .84rem;
        color: var(--muted);
    }

.toolbar, .mini-toolbar, .mode-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

button {
    border: 0;
    border-radius: 14px;
    padding: 10px 14px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease,opacity .18s ease,background .18s ease;
    background: linear-gradient(135deg,var(--accent),#2563eb);
    color: white;
}

    button:hover {
        transform: translateY(-1px)
    }

    button:active {
        transform: translateY(0)
    }

    button.secondary {
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.08);
        color: var(--text);
    }

    button.ghost {
        background: transparent;
        border: 1px dashed rgba(255,255,255,.14);
        color: var(--muted);
    }

    button.warn {
        background: rgba(245,158,11,.12);
        border: 1px solid rgba(245,158,11,.28);
        color: #ffe6b0;
    }

    button.danger {
        background: rgba(239,68,68,.12);
        border: 1px solid rgba(239,68,68,.28);
        color: #ffd7d7;
    }

    button.active-mode {
        background: linear-gradient(135deg,#22c55e,#16a34a);
        border: 0;
        color: #fff;
    }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}

.shell {
    height: calc(100vh - 72px);
    display: grid;
    grid-template-columns: minmax(250px,300px) minmax(0,1fr) minmax(280px,360px);
    overflow: hidden;
}

.shell.left-hidden {
    grid-template-columns: minmax(0,1fr) minmax(280px,360px);
}

.shell.right-hidden {
    grid-template-columns: minmax(250px,300px) minmax(0,1fr);
}

.shell.left-hidden.right-hidden {
    grid-template-columns: minmax(0,1fr);
}

.left-pane {
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg,rgba(17,24,39,.97),rgba(15,23,42,.97));
    overflow: auto;
    height: 100%;
}

.left-pane.is-collapsed,
.right-pane.is-collapsed {
    display: none !important;
}

.center-pane {
    background: var(--doc-bg);
    overflow: auto;
    height: 100%;
}

.right-pane {
    border-left: 1px solid var(--line);
    background: linear-gradient(180deg,rgba(17,24,39,.97),rgba(15,23,42,.97));
    overflow: auto;
    height: 100%;
}

.pane-section {
    padding: 16px;
    display: grid;
    gap: 12px;
}

.panel-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    gap: 12px;
}

.app.preview-mode .left-pane,
.app.preview-mode .right-pane {
    background: linear-gradient(180deg,rgba(17,24,39,.97),rgba(15,23,42,.97));
    border-color: var(--line);
}

.app.preview-mode .panel-card,
.app.preview-mode .empty-box,
.app.preview-mode .status,
.app.preview-mode .page-item {
    background: rgba(255,255,255,.04);
    color: var(--text);
    border-color: rgba(255,255,255,.08);
    box-shadow: none;
}

.app.preview-mode .panel-title,
.app.preview-mode .page-item-title,
.app.preview-mode .space-card-header {
    color: var(--text);
}

.app.preview-mode .small-note,
.app.preview-mode .page-item-meta,
.app.preview-mode label,
.app.preview-mode .status,
.app.preview-mode .side-action-btn .muted {
    color: var(--muted);
}

.app.preview-mode input[type="text"],
.app.preview-mode select,
.app.preview-mode textarea {
    background: rgba(255,255,255,.04);
    color: var(--text);
    border-color: rgba(255,255,255,.08);
}

    .app.preview-mode select option {
        background: #122033;
        color: #e5edf9;
    }

.app.preview-mode button.secondary,
.app.preview-mode .tab-btn,
.app.preview-mode .side-action-btn {
    background: rgba(255,255,255,.06);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.08);
}

.app.preview-mode .badge {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
    color: var(--muted);
}

.panel-title {
    margin: 0;
    font-size: .96rem;
    font-weight: 800;
}

.field {
    display: grid;
    gap: 6px
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px
}

label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--muted);
}

input[type="text"], select, textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.08);
    background: #182234;
    color: #e5edf9;
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    outline: none;
}

    select option {
        background: #182234;
        color: #e5edf9;
    }

textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
    font-size: 13px;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

    input:focus, select:focus, textarea:focus {
        border-color: rgba(79,140,255,.58);
        box-shadow: 0 0 0 3px rgba(79,140,255,.16);
    }

.status {
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-size: .9rem;
}

    .status.ok {
        color: #d8fff0;
        background: rgba(16,185,129,.08);
        border-color: rgba(16,185,129,.26);
    }

    .status.error {
        color: #ffd7d7;
        background: rgba(239,68,68,.08);
        border-color: rgba(239,68,68,.26);
    }

.pages-list, .quick-list {
    display: grid;
    gap: 10px;
}

.page-item {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    padding: 12px;
    cursor: pointer;
    transition: background .16s ease,border-color .16s ease;
}

    .page-item:hover {
        background: rgba(255,255,255,.06)
    }

    .page-item.active {
        background: rgba(79,140,255,.12);
        border-color: rgba(79,140,255,.4);
        box-shadow: inset 0 0 0 1px rgba(79,140,255,.18);
    }

.page-item-title {
    font-weight: 800;
    margin-bottom: 6px;
}

.page-item-meta {
    font-size: .82rem;
    color: var(--muted);
}

.editor-wrap {
    width: min(100%, 1720px);
    max-width: 1720px;
    margin: 0 auto;
    padding: 34px 26px 26px;
    display: grid;
    gap: 18px;
}

.doc-toolbar {
    position: static;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: rgba(238,243,249,.96);
    backdrop-filter: blur(8px);
    padding: 12px;
    border: 1px solid rgba(23,32,51,.08);
    border-radius: 18px;
    margin-bottom: 4px;
}

.canvas-page {
    width: 100%;
    background: var(--doc-card);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 24px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.canvas-page-header {
    padding: 34px 40px 20px;
    background: linear-gradient(135deg,#eff5ff,#f8fbff 56%,#eefcf6);
    border-bottom: 1px solid var(--doc-line);
}

.crumb {
    font-size: .85rem;
    color: #6d7a96;
    margin-bottom: 8px;
    font-weight: 700;
}

.page-title-input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--doc-text);
    font-size: clamp(2rem,3vw,2.6rem);
    font-weight: 900;
    letter-spacing: -.02em;
    padding: 0;
    margin: 0 0 8px;
}

.page-intro-input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--doc-muted);
    font-size: 1rem;
    line-height: 1.7;
    resize: none;
    min-height: 72px;
    padding: 0;
    margin: 0;
    font-family: inherit;
}

.canvas-body {
    display: grid;
    grid-template-columns: clamp(220px, 18vw, 300px) minmax(0, 1fr);
}

.canvas-page.no-toc .canvas-body {
    grid-template-columns: 1fr
}

.canvas-toc {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow: auto;
    border-right: 1px solid var(--doc-line);
    background: #fbfcff;
    padding: 18px 14px;
}

    .canvas-toc h3 {
        margin: 0 0 10px;
        color: #44516e;
        font-size: .95rem;
    }

    .canvas-toc a {
        display: block;
        text-decoration: none;
        color: #44516e;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: .92rem;
        font-weight: 600;
    }

        .canvas-toc a:hover {
            background: #eef4ff;
            color: #183e91
        }

.canvas-main {
    min-width: 0;
    padding: 24px 26px 36px;
    display: grid;
    gap: 14px;
}

.insert-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    flex-wrap: wrap;
    transition: all .14s ease;
    border-radius: 14px;
}

    .insert-bar.drop-target {
        background: rgba(79,140,255,.08);
        padding: 10px 8px;
    }

        .insert-bar.drop-target .insert-line {
            background: #8fb2ff;
            height: 2px;
        }

.insert-line {
    flex: 1;
    height: 1px;
    background: #d9e2f0;
}

.insert-bar button {
    padding: 7px 12px;
    font-size: .82rem;
    border-radius: 999px;
}

.block-card {
    border: 1px solid var(--doc-line);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(18,32,63,.04);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, opacity .14s ease;
}

    .block-card[draggable="true"] {
        cursor: grab;
    }

    .block-card.dragging {
        opacity: .35;
    }

    .block-card.selected {
        border-color: #7ba8ff;
        box-shadow: 0 0 0 3px rgba(79,140,255,.12), 0 10px 30px rgba(79,140,255,.08);
    }

.block-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--doc-line);
    background: #fbfcff;
}

.block-type {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 800;
    color: #5d6a87;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.drag-handle {
    border: 1px solid #dbe4f3;
    background: #fff;
    color: #394761;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: .8rem;
    font-weight: 900;
    cursor: grab;
    user-select: none;
}

    .drag-handle:active {
        cursor: grabbing;
    }

.block-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.icon-btn {
    border: 1px solid #dbe4f3;
    background: #fff;
    color: #394761;
    border-radius: 10px;
    padding: 7px 9px;
    font-size: .8rem;
    cursor: pointer;
    font-weight: 800;
}

    .icon-btn:hover {
        background: #f5f8ff
    }

    .icon-btn.danger {
        color: #b42318;
        border-color: #f0c7c7;
        background: #fff7f7
    }

.block-body {
    padding: 16px 18px 18px;
    display: grid;
    gap: 12px;
}

.block-title-edit {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--doc-text);
    border: 0;
    outline: none;
    background: transparent;
    width: 100%;
    padding: 0;
}

.editable {
    border: 1px dashed transparent;
    border-radius: 12px;
    padding: 8px 10px;
    min-height: 52px;
    outline: none;
    line-height: 1.72;
    color: #283550;
}

    .editable:focus {
        border-color: #cdddff;
        background: #fbfdff;
    }

    .editable.empty:before {
        content: attr(data-placeholder);
        color: #9aa6bd;
    }

.html-preview .editable {
    min-height: 90px;
}

.html-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid var(--doc-line);
    border-radius: 14px;
    background: #f8fbff;
}

    .html-toolbar button {
        border: 1px solid #dbe4f3;
        background: #fff;
        color: #394761;
        border-radius: 10px;
        padding: 7px 10px;
        font-size: .82rem;
        font-weight: 800;
        cursor: pointer;
    }

        .html-toolbar button:hover {
            background: #eef4ff;
        }

.copy-code-btn,
.copy-mermaid-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dbe4f3;
    background: linear-gradient(180deg,#ffffff,#f7faff);
    color: #31415f;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(18,32,63,.06);
    cursor: pointer;
    transition: all .16s ease;
}

    .copy-code-btn:hover,
    .copy-mermaid-btn:hover {
        background: linear-gradient(180deg,#f8fbff,#edf4ff);
        border-color: #bfd3fb;
        color: #183e91;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(24,62,145,.12);
    }

    .copy-code-btn.copied,
    .copy-mermaid-btn.copied {
        background: linear-gradient(180deg,#ecfdf5,#d1fae5);
        border-color: #a7f3d0;
        color: #065f46;
    }

    .copy-code-btn.error,
    .copy-mermaid-btn.error {
        background: linear-gradient(180deg,#fff1f2,#ffe4e6);
        border-color: #fecdd3;
        color: #9f1239;
    }

.mermaid-preview, .code-preview, .table-preview, .html-preview, .media-preview {
    border: 1px solid var(--doc-line);
    border-radius: 16px;
    background: #fff;
    padding: 14px;
    overflow: auto;
}

.media-frame {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--doc-line);
    border-radius: 14px;
    overflow: hidden;
    background: #f8fbff;
}

.media-frame.is-empty {
    border-style: dashed;
}

.media-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.media-stage {
    display: flex;
    align-items: center;
    min-height: 160px;
    padding: 14px;
    background: linear-gradient(180deg,#fbfdff,#f4f8ff);
}

    .media-frame img {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        border: 1px solid rgba(30,41,59,.08);
        background: white;
    }

    .media-frame iframe {
        display: block;
        max-width: 100%;
        border: 0;
        border-radius: 12px;
        background: #000;
    }

.media-inspector-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.media-inspector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.media-file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 42px;
    text-align: center;
}

.paste-zone {
    border: 1px dashed rgba(148,163,184,.45);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    color: var(--muted);
    padding: 14px;
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    outline: none;
    transition: .18s ease;
}

.paste-zone:focus,
.paste-zone.dragover {
    border-color: rgba(79,140,255,.55);
    background: rgba(79,140,255,.08);
    color: #dbe8ff;
    box-shadow: 0 0 0 3px rgba(79,140,255,.12);
}

.preview-mode .paste-zone {
    color: #42506b;
    background: #f8fbff;
}

@media (max-width: 700px) {
    .media-inspector-grid {
        grid-template-columns: 1fr;
    }
}

.preview-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.code-preview pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    background: #111827;
    color: #dbe6f7;
    font-size: 13px;
    line-height: 1.55;
    border-radius: 14px;
    padding: 16px;
    overflow: auto;
}

.admonition {
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid #d9e6ff;
    background: #f6f9ff;
    color: #22314d;
}

    .admonition.warning {
        border-color: #f6dfaa;
        background: #fffaf1
    }

    .admonition.success {
        border-color: #bcebd8;
        background: #f2fdf8
    }

.table-wrap {
    overflow: auto
}

table.smart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.smart-table th, .smart-table td {
    border: 1px solid var(--doc-line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    color: #273550;
}

.smart-table th {
    background: #f7faff;
    font-weight: 800;
}

code.inline {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 8px;
    background: #eef4ff;
    border: 1px solid #dbe7ff;
    color: #193b7a;
    font-size: .92em;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.content-block a,
.preview-block a {
    color: #1d4ed8;
    text-decoration: none;
    border-bottom: 1px solid rgba(29,78,216,.25);
}

    .content-block a:hover,
    .preview-block a:hover {
        color: #1e40af;
        border-bottom-color: rgba(30,64,175,.5);
    }

.doc-footer {
    border-top: 1px solid var(--doc-line);
    padding: 16px 26px 24px;
    color: var(--doc-muted);
    font-size: .9rem;
}

.right-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tab-btn {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    border-radius: 12px;
    padding: 9px 12px;
    font-weight: 800;
    cursor: pointer;
}

    .tab-btn.active {
        background: rgba(79,140,255,.16);
        color: white;
        border-color: rgba(79,140,255,.28);
    }

.type-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef4ff;
    border: 1px solid #dbe4f3;
    color: #41506c;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dbe4f3;
    font-size: .82rem;
    line-height: 1;
    flex: 0 0 auto;
}

.add-block-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .add-block-btn .btn-icon,
    .add-block-btn-top .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 999px;
        background: rgba(255,255,255,.12);
        font-size: .82rem;
        line-height: 1;
    }

.add-block-btn-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.panel-card.accent {
    background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));
    box-shadow: 0 12px 30px rgba(0,0,0,.14);
}

.small-note {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
}

.side-action-grid {
    display: grid;
    gap: 10px;
}

.side-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: var(--text);
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
}

    .side-action-btn:hover {
        background: rgba(255,255,255,.08);
    }

.mobile-pane-open {
    display: block !important;
    position: fixed !important;
    top: 64px;
    bottom: 0;
    z-index: 80;
    width: min(360px,88vw);
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

.left-pane.mobile-pane-open {
    left: 0;
}

.right-pane.mobile-pane-open {
    right: 0;
}

.side-action-btn .muted {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
}

.empty-box {
    border: 1px dashed rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    color: var(--muted);
    padding: 16px;
}

.preview-only {
    width: min(100%, 1720px);
    max-width: 1720px;
    margin: 0 auto;
    padding: 24px 26px 26px;
    display: grid;
    grid-template-columns: minmax(240px,320px) minmax(0,1fr) minmax(220px,300px);
    gap: 20px;
    align-items: start;
}

.space-left, .space-right {
    position: sticky;
    top: 90px;
    display: grid;
    gap: 14px;
}

.space-card {
    background: #fff;
    color: var(--doc-text);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

.space-card-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--doc-line);
    background: #fbfcff;
    font-weight: 800;
    font-size: .92rem;
}

.space-card-body {
    padding: 12px
}

.space-link {
    display: block;
    text-decoration: none;
    color: #31415f;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 600;
}

    .space-link:hover {
        background: #eef4ff;
        color: #183e91
    }

    .space-link.active-page-link {
        background: #dbeafe;
        color: #183e91;
        box-shadow: inset 0 0 0 1px #93c5fd;
    }

.doc-center {
    min-width: 0;
    display: grid;
    gap: 24px;
    align-content: start;
}

.doc-center > *:first-child {
    margin-top: 0;
}

.preview-page {
    width: 100%;
    align-self: start;
    background: #fff;
    color: var(--doc-text);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.10);
    scroll-margin-top: 90px;
}

.preview-header {
    padding: 34px 40px 20px;
    background: linear-gradient(135deg,#eff5ff,#f8fbff 55%,#eefcf6);
    border-bottom: 1px solid var(--doc-line);
}

    .preview-header h1 {
        margin: 0;
        font-size: clamp(1.8rem,3vw,2.35rem);
        line-height: 1.1;
    }

    .preview-header p {
        margin: 10px 0 0;
        line-height: 1.65;
        color: var(--doc-muted);
        max-width: 72ch;
        font-size: 1rem;
    }

.preview-body {
    display: grid;
    grid-template-columns: clamp(220px, 18vw, 300px) minmax(0, 1fr);
}

.preview-page.no-toc .preview-body {
    grid-template-columns: 1fr
}

.preview-toc {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow: auto;
    border-right: 1px solid var(--doc-line);
    background: #fbfcff;
    padding: 18px 14px;
}

    .preview-toc h3 {
        margin: 0 0 10px;
        font-size: .95rem;
        color: #44516e;
    }

    .preview-toc a {
        display: block;
        text-decoration: none;
        color: #42506d;
        padding: 7px 10px;
        border-radius: 10px;
        font-size: .92rem;
        font-weight: 600;
    }

        .preview-toc a:hover {
            background: #eef4ff;
            color: #183e91
        }

.preview-main {
    min-width: 0;
    padding: 24px 30px 36px;
    display: grid;
    gap: 20px;
}

.preview-block h2 {
    margin: 0 0 10px;
    font-size: 1.4rem;
    scroll-margin-top: 90px;
}

.preview-block p, .preview-block li {
    line-height: 1.72;
    color: #283550;
}

.public-floating-actions {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    max-width: min(92vw,720px);
}

    .public-floating-actions .copy-code-btn {
        box-shadow: 0 12px 26px rgba(18,32,63,.16);
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(8px);
    }

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8,12,20,.62);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 120;
    padding: 24px;
}

    .modal-backdrop.show {
        display: flex
    }

.modal-card {
    width: min(900px,100%);
    background: linear-gradient(180deg,rgba(17,24,39,.98),rgba(15,23,42,.98));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    padding: 18px;
    display: grid;
    gap: 14px;
}

.modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}

.modal-textarea {
    width: 100%;
    min-height: 360px;
    resize: vertical;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: var(--text);
    border-radius: 14px;
    padding: 14px;
    font: 13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    outline: none;
}

    .modal-textarea:focus {
        border-color: rgba(79,140,255,.58);
        box-shadow: 0 0 0 3px rgba(79,140,255,.16);
    }

@media (max-width: 980px) {
    .topbar {
        align-items: flex-start;
    }

    .brand {
        min-width: 0;
    }

        .brand h1 {
            font-size: .95rem;
        }

        .brand p {
            display: none;
        }

    .topbar-center {
        justify-content: flex-start;
    }

    .toolbar, .mode-buttons {
        width: 100%;
    }

    .toolbar {
        gap: 8px;
    }

        .toolbar button,
        .mode-buttons button {
            padding: 9px 12px;
            font-size: .88rem;
        }

    .badge {
        font-size: .74rem;
        padding: 5px 8px;
    }
}

@media (max-width: 700px) {
    .topbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .topbar-center {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .mode-buttons,
    .toolbar {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        width: 100%;
    }

        .mode-buttons .badge {
            justify-content: center;
        }

        .mode-buttons button,
        .toolbar button {
            width: 100%;
            justify-content: center;
        }

    .shell {
        height: auto;
        min-height: calc(100vh - 72px);
        grid-template-columns: 1fr;
    }

    .left-pane, .right-pane {
        display: none;
    }

    .center-pane {
        height: auto;
        min-height: calc(100vh - 140px);
    }

    .editor-wrap {
        padding: 16px 10px 20px;
    }

    .canvas-page-header,
    .preview-header {
        padding: 22px 18px 16px;
    }

    .canvas-main,
    .preview-main {
        padding: 16px 14px 24px;
    }

    .block-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .block-actions {
        width: 100%;
    }

        .block-actions .icon-btn {
            flex: 1;
        }

    .doc-toolbar {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

        .doc-toolbar button {
            width: 100%;
        }

    .preview-only {
        width: 100%;
        padding: 74px 12px 12px;
    }

    .public-floating-actions {
        left: 12px;
        right: 12px;
        top: 12px;
        max-width: none;
    }

        .public-floating-actions .copy-code-btn {
            flex: 1 1 calc(50% - 10px);
            justify-content: center;
        }

    .toast {
        left: 12px;
        right: 12px;
        top: 72px;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 1600px) {
    .shell {
        grid-template-columns: 240px minmax(0,1fr) 300px
    }

    .preview-only {
        width: min(100%, 1680px)
    }

    .editor-wrap {
        width: min(100%, 1560px)
    }
}

@media (max-width: 1450px) {
    .shell {
        grid-template-columns: 240px minmax(0,1fr) 280px
    }

    .preview-only {
        grid-template-columns: 240px minmax(0,1fr) 220px
    }
}

@media (max-width: 1260px) {
    .shell {
        grid-template-columns: 1fr
    }

    .left-pane, .right-pane {
        display: none
    }

    .preview-only {
        grid-template-columns: 1fr
    }

    .space-left, .space-right {
        position: static
    }

    .canvas-body, .preview-body {
        grid-template-columns: 1fr
    }

    .canvas-toc, .preview-toc {
        border-right: 0;
        border-bottom: 1px solid var(--doc-line)
    }

    .row, .row-3 {
        grid-template-columns: 1fr
    }
}

@media print {
    @page {
        size: auto;
        margin: 14mm 12mm 16mm;
    }

    .topbar, .left-pane, .right-pane, .doc-toolbar, .space-left, .space-right, .public-floating-actions {
        display: none !important
    }

    body {
        background: #fff
    }

    .center-pane {
        background: #fff
    }

    .shell {
        display: block
    }

    .editor-wrap, .preview-only {
        padding: 0;
        display: block;
        max-width: 100%
    }

    .canvas-page, .preview-page {
        border: 0;
        box-shadow: none;
        border-radius: 0;
        page-break-after: always;
    }

        .canvas-page:last-child, .preview-page:last-child {
            page-break-after: auto
        }

    .canvas-body, .preview-body {
        display: block
    }

    .canvas-toc, .preview-toc {
        display: none
    }
}

.preview-top-actions-stack{display:grid;grid-template-columns:1fr;gap:10px;}
.preview-only-designer .space-left,.preview-only-designer .space-right{top:24px;}
.preview-only-designer .space-card:first-child .space-card-body{display:grid;gap:6px;}

.topbar-right{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
button.attention{box-shadow:0 0 0 1px rgba(255,193,7,.35), 0 0 18px rgba(255,193,7,.15);}
button:disabled{opacity:.55;cursor:not-allowed;}