.wpdjot-block {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}

.wpdjot-block-wrapper {
    padding: 0;
}

.wpdjot-block .wpdjot-editor,
.wpdjot-block .wpdjot-editor textarea {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.6;
    min-height: 150px;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 4px;
    resize: none;
    overflow-y: auto;
    background: #f9f9f9;
    field-sizing: content;
}

.wpdjot-block .wpdjot-editor:focus,
.wpdjot-block .wpdjot-editor textarea:focus {
    outline: none;
    box-shadow: none;
    background: #fff;
}

.wpdjot-block .components-base-control__label {
    display: none;
}

.wpdjot-preview-wrapper {
    background: #fff;
}

.wpdjot-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #666;
}

.wpdjot-edit-button {
    background: #007cba;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    text-transform: none;
}

.wpdjot-edit-button:hover {
    background: #005a87;
}

.wpdjot-preview {
    padding: 16px;
    min-height: 100px;
}

.wpdjot-preview:empty::before {
    content: "Preview will appear here...";
    color: #999;
    font-style: italic;
}

/* Djot content styles in editor */
.wpdjot-preview.djot-content h1,
.wpdjot-preview.djot-content h2,
.wpdjot-preview.djot-content h3,
.wpdjot-preview.djot-content h4,
.wpdjot-preview.djot-content h5,
.wpdjot-preview.djot-content h6 {
    margin-top: 0;
}

.wpdjot-preview.djot-content pre {
    background: #f4f4f4;
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
}

.wpdjot-preview.djot-content code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}

.wpdjot-preview.djot-content pre code {
    background: none;
    padding: 0;
}

/* Torchlight code block structure */
.wpdjot-preview.djot-content pre code.torchlight {
    display: block;
    min-width: max-content;
    padding: 1rem 0;
    background: transparent;
}

.wpdjot-preview.djot-content pre code.torchlight .line {
    display: block;
    padding: 0 1rem;
}

.wpdjot-preview.djot-content pre code.torchlight .line-number {
    display: inline-block;
    width: 2em;
    margin-right: 1rem;
    text-align: right;
    color: #6e7681;
    user-select: none;
}

/* Torchlight highlight lines */
.wpdjot-preview.djot-content pre code.torchlight .line-highlight {
    background: rgba(255, 255, 0, 0.15);
}

/* Torchlight focus mode */
.wpdjot-preview.djot-content pre code.torchlight.has-focus-lines .line:not(.line-focus) {
    transition: filter 0.35s, opacity 0.35s;
    filter: blur(0.095rem);
    opacity: 0.65;
}

.wpdjot-preview.djot-content pre code.torchlight.has-focus-lines:hover .line:not(.line-focus) {
    filter: blur(0);
    opacity: 1;
}

/* Torchlight diff annotations */
.wpdjot-preview.djot-content pre code.torchlight .line-add {
    background: rgba(46, 160, 67, 0.15);
}

.wpdjot-preview.djot-content pre code.torchlight .line-remove {
    background: rgba(248, 81, 73, 0.15);
}

.wpdjot-preview.djot-content pre code.torchlight .diff-indicator {
    user-select: none;
}

.wpdjot-preview.djot-content pre code.torchlight .diff-indicator-add {
    color: #3fb950;
}

.wpdjot-preview.djot-content pre code.torchlight .diff-indicator-remove {
    color: #f85149;
}

.wpdjot-preview.djot-content blockquote {
    border-left: 4px solid #ddd;
    margin-left: 0;
    padding-left: 16px;
    color: #666;
}

/* Inserted - GitHub style green */
.wpdjot-preview.djot-content ins {
    text-decoration: none;
    background-color: #dafbe1;
    color: #116329;
}

/* Deleted - GitHub style red */
.wpdjot-preview.djot-content del,
.wpdjot-preview.djot-content s {
    text-decoration: line-through;
    background-color: #ffebe9;
    color: #82071e;
}

/* Highlighted / Mark */
.wpdjot-preview.djot-content mark {
    background-color: #fff8c5;
    color: inherit;
}

/* Tables */
.wpdjot-preview.djot-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.wpdjot-preview.djot-content th,
.wpdjot-preview.djot-content td {
    border: 1px solid #d0d7de;
    padding: 0.5em 1em;
    text-align: left;
}

.wpdjot-preview.djot-content th {
    background-color: #f6f8fa;
    font-weight: 600;
}

.wpdjot-preview.djot-content tr:nth-child(even) {
    background-color: #f6f8fa;
}

/* Horizontal Rules */
.wpdjot-preview.djot-content hr {
    height: 0.25em;
    padding: 0;
    margin: 1.5em 0;
    background-color: #d0d7de;
    border: 0;
}

/* Images */
.wpdjot-preview.djot-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Figures and Captions */
.wpdjot-preview.djot-content figure {
    margin: 1.5em 0;
    padding: 0;
}

.wpdjot-preview.djot-content figure img {
    display: block;
    margin: 0 auto;
}

.wpdjot-preview.djot-content figure blockquote {
    margin: 0;
    border-left-width: 4px;
}

.wpdjot-preview.djot-content figcaption {
    margin-top: 0.75em;
    padding: 0 0.5em;
    font-size: 0.875em;
    color: #57606a;
    text-align: center;
    font-style: italic;
}

/* Blockquote with attribution (figcaption after blockquote) */
.wpdjot-preview.djot-content figure > blockquote + figcaption {
    text-align: right;
    font-style: normal;
    margin-top: 0.5em;
}

.wpdjot-preview.djot-content figure > blockquote + figcaption::before {
    content: "— ";
}

/* Table captions */
.wpdjot-preview.djot-content table caption {
    caption-side: bottom;
    padding: 0.75em 0.5em;
    font-size: 0.875em;
    color: #57606a;
    text-align: center;
    font-style: italic;
}

/* Footnotes */
.wpdjot-preview.djot-content .footnote-ref {
    font-size: 0.75em;
    vertical-align: super;
    text-decoration: none;
}

.wpdjot-preview.djot-content .footnotes {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #d0d7de;
    font-size: 0.875em;
}

/* Div containers */
.wpdjot-preview.djot-content .note,
.wpdjot-preview.djot-content .warning,
.wpdjot-preview.djot-content .tip,
.wpdjot-preview.djot-content .danger,
.wpdjot-preview.djot-content .info {
    padding: 1em;
    border-radius: 6px;
    margin: 1em 0;
}

.wpdjot-preview.djot-content .note {
    background-color: #ddf4ff;
    border-left: 4px solid #0969da;
}

.wpdjot-preview.djot-content .warning {
    background-color: #fff8c5;
    border-left: 4px solid #bf8700;
}

.wpdjot-preview.djot-content .tip {
    background-color: #dafbe1;
    border-left: 4px solid #1a7f37;
}

.wpdjot-preview.djot-content .danger {
    background-color: #ffebe9;
    border-left: 4px solid #cf222e;
}

.wpdjot-preview.djot-content .info {
    background-color: #f6f8fa;
    border-left: 4px solid #57606a;
}

/* Superscript and Subscript */
.wpdjot-preview.djot-content sup {
    font-size: 0.75em;
    vertical-align: super;
}

.wpdjot-preview.djot-content sub {
    font-size: 0.75em;
    vertical-align: sub;
}

/* Task Lists */
.wpdjot-preview.djot-content ul.task-list,
.wpdjot-preview.djot-content .task-list {
    list-style: none;
    padding-left: 0;
}

.wpdjot-preview.djot-content .task-list li {
    position: relative;
    padding-left: 1.5em;
}

.wpdjot-preview.djot-content .task-list li input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1a7f37;
    pointer-events: none;
}

.wpdjot-preview.djot-content .task-list li input[type="checkbox"]:checked {
    accent-color: #1a7f37;
}

.wpdjot-preview.djot-content .task-list li:has(input[type="checkbox"]:checked) {
    color: #57606a;
    text-decoration: line-through;
}

/* Abbreviations */
.wpdjot-preview.djot-content abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* Keyboard Input */
.wpdjot-preview.djot-content kbd {
    display: inline-block;
    padding: 0.2em 0.4em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85em;
    line-height: 1;
    color: #24292f;
    background-color: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-shadow: inset 0 -1px 0 #d0d7de;
}

/* Definition Lists */
.wpdjot-preview.djot-content dl {
    margin: 1em 0;
}

.wpdjot-preview.djot-content dt {
    font-weight: 600;
    margin-top: 1em;
}

.wpdjot-preview.djot-content dt:first-child {
    margin-top: 0;
}

.wpdjot-preview.djot-content dd {
    margin-left: 1.5em;
    margin-bottom: 0.5em;
}

.wpdjot-preview.djot-content dd p {
    margin: 0.5em 0;
}

.wpdjot-preview.djot-content dd p:first-child {
    margin-top: 0;
}

/* Definitions (dfn element) */
.wpdjot-preview.djot-content dfn {
    font-style: italic;
}

.wpdjot-preview.djot-content dfn[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* Placeholder styles */
.wpdjot-block .components-placeholder {
    min-height: auto;
    padding: 24px;
}

.wpdjot-block .components-placeholder .wpdjot-editor textarea {
    margin-top: 16px;
}

/* Loading spinner */
.wpdjot-preview-wrapper .components-spinner {
    margin: 40px auto;
    display: block;
}

/* ========================================
   Mode Tabs (Write | Visual | Preview)
   ======================================== */

.wpdjot-mode-tabs {
    display: flex;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    padding: 0;
    margin: 0;
    list-style: none;
}

.wpdjot-mode-tabs button {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    transition: all 0.15s ease;
}

.wpdjot-mode-tabs button:hover {
    background: #e8e8e8;
    color: #333;
}

.wpdjot-mode-tabs button.active {
    color: #007cba;
    border-bottom-color: #007cba;
    background: #fff;
}

/* ========================================
   Visual Editor (Tiptap)
   ======================================== */

.wpdjot-visual-wrapper {
    background: #fff;
    min-height: 200px;
}

.wpdjot-visual-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
    background: #f6f8fa;
    border-bottom: 1px solid #ddd;
}

.wpdjot-visual-toolbar .toolbar-group {
    display: flex;
    gap: 2px;
    padding-right: 8px;
    margin-right: 4px;
    border-right: 1px solid #ddd;
}

.wpdjot-visual-toolbar .toolbar-group:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.wpdjot-visual-toolbar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
    transition: all 0.1s ease;
}

.wpdjot-visual-toolbar button:hover {
    background: #f0f0f0;
    border-color: #999;
}

.wpdjot-visual-toolbar button.is-active {
    background: #007cba;
    border-color: #007cba;
    color: #fff;
}

.wpdjot-visual-toolbar button svg {
    width: 16px;
    height: 16px;
}

/* Tiptap editor container */
.wpdjot-visual-editor {
    padding: 16px;
    min-height: 150px;
    outline: none;
}

.wpdjot-visual-editor .tiptap {
    outline: none;
    line-height: 1.6;
}

.wpdjot-visual-editor .tiptap > * + * {
    margin-top: 0.75em;
}

.wpdjot-visual-editor .tiptap p {
    margin: 0;
}

.wpdjot-visual-editor .tiptap h1,
.wpdjot-visual-editor .tiptap h2,
.wpdjot-visual-editor .tiptap h3,
.wpdjot-visual-editor .tiptap h4,
.wpdjot-visual-editor .tiptap h5,
.wpdjot-visual-editor .tiptap h6 {
    line-height: 1.3;
    margin-top: 0.75em;
    margin-bottom: 0.5em;
}

.wpdjot-visual-editor .tiptap h1:first-child,
.wpdjot-visual-editor .tiptap h2:first-child,
.wpdjot-visual-editor .tiptap h3:first-child {
    margin-top: 0;
}

.wpdjot-visual-editor .tiptap h1 { font-size: 1.8em; }
.wpdjot-visual-editor .tiptap h2 { font-size: 1.5em; }
.wpdjot-visual-editor .tiptap h3 { font-size: 1.25em; }

.wpdjot-visual-editor .tiptap code {
    background: #f6f8fa;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9em;
}

.wpdjot-visual-editor .tiptap pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1em 0;
}

.wpdjot-visual-editor .tiptap pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: 0.875em;
}

.wpdjot-visual-editor .tiptap blockquote {
    border-left: 4px solid #0969da;
    margin: 1em 0;
    padding-left: 1em;
    color: #57606a;
}

.wpdjot-visual-editor .tiptap ul,
.wpdjot-visual-editor .tiptap ol {
    padding-left: 1.5em;
    margin: 0.5em 0;
}

.wpdjot-visual-editor .tiptap li {
    margin: 0.25em 0;
}

.wpdjot-visual-editor .tiptap li p {
    margin: 0;
}

.wpdjot-visual-editor .tiptap a {
    color: #0969da;
    text-decoration: none;
}

.wpdjot-visual-editor .tiptap a:hover {
    text-decoration: underline;
}

.wpdjot-visual-editor .tiptap hr {
    border: none;
    border-top: 2px solid #d0d7de;
    margin: 2em 0;
}

/* Djot-specific marks */
.wpdjot-visual-editor .tiptap mark {
    background: #fff8c5;
    padding: 1px 4px;
    border-radius: 3px;
}

.wpdjot-visual-editor .tiptap .djot-insert {
    color: #1a7f37;
    text-decoration: none;
    background: #dafbe1;
    padding: 1px 4px;
    border-radius: 3px;
}

.wpdjot-visual-editor .tiptap .djot-delete {
    color: #cf222e;
    text-decoration: line-through;
    background: #ffebe9;
    padding: 1px 4px;
    border-radius: 3px;
}

.wpdjot-visual-editor .tiptap sup {
    font-size: 0.75em;
    vertical-align: super;
}

.wpdjot-visual-editor .tiptap sub {
    font-size: 0.75em;
    vertical-align: sub;
}

/* Tables in visual editor */
.wpdjot-visual-editor .tiptap table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.wpdjot-visual-editor .tiptap th,
.wpdjot-visual-editor .tiptap td {
    border: 1px solid #d0d7de;
    padding: 0.5em 1em;
    text-align: left;
}

.wpdjot-visual-editor .tiptap th {
    background: #f6f8fa;
    font-weight: 600;
}

.wpdjot-visual-editor .tiptap .selectedCell {
    background: rgba(0, 124, 186, 0.1);
}

/* Task lists in visual editor */
.wpdjot-visual-editor .tiptap ul[data-type="taskList"] {
    list-style: none;
    padding-left: 0;
}

.wpdjot-visual-editor .tiptap ul[data-type="taskList"] li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.wpdjot-visual-editor .tiptap ul[data-type="taskList"] li > label {
    flex-shrink: 0;
    margin-top: 4px;
}

.wpdjot-visual-editor .tiptap ul[data-type="taskList"] input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #1a7f37;
}

.wpdjot-visual-editor .tiptap ul[data-type="taskList"] li > div {
    flex: 1;
    min-height: 1.5em;
}

.wpdjot-visual-editor .tiptap ul[data-type="taskList"] li > div > p {
    margin: 0;
    min-height: 1.5em;
}

/* Ensure cursor is visible in task items */
.wpdjot-visual-editor .tiptap ul[data-type="taskList"] li > div:focus-within {
    outline: none;
}

.wpdjot-visual-editor .tiptap ul[data-type="taskList"] li > div > p:empty::before {
    content: "";
    display: inline-block;
}

/* Images in visual editor */
.wpdjot-visual-editor .tiptap img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1em 0;
}

.wpdjot-visual-editor .tiptap img.ProseMirror-selectednode {
    outline: 3px solid #007cba;
}

/* Div containers in visual editor */
.wpdjot-visual-editor .tiptap .djot-div {
    border-left: 4px solid #6c757d;
    padding: 12px 16px;
    margin: 1em 0;
    background: #f6f8fa;
    border-radius: 0 6px 6px 0;
}

.wpdjot-visual-editor .tiptap .djot-div.warning {
    border-left-color: #bf8700;
    background: #fff8c5;
}

.wpdjot-visual-editor .tiptap .djot-div.tip {
    border-left-color: #1a7f37;
    background: #dafbe1;
}

.wpdjot-visual-editor .tiptap .djot-div.danger {
    border-left-color: #cf222e;
    background: #ffebe9;
}

.wpdjot-visual-editor .tiptap .djot-div.note {
    border-left-color: #0969da;
    background: #ddf4ff;
}

.wpdjot-visual-editor .tiptap .djot-div.info {
    border-left-color: #57606a;
    background: #f6f8fa;
}

/* Placeholder text */
.wpdjot-visual-editor .tiptap p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: #adb5bd;
    pointer-events: none;
    float: left;
    height: 0;
}

/* Loading state for visual editor */
.wpdjot-visual-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    color: #666;
    font-size: 13px;
}

.wpdjot-visual-loading::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-top-color: #007cba;
    border-radius: 50%;
    margin-right: 10px;
    animation: wpdjot-spin 0.8s linear infinite;
}

@keyframes wpdjot-spin {
    to { transform: rotate(360deg); }
}

/* Code Groups */
.wpdjot-preview.djot-content .code-group {
    display: flex;
    flex-wrap: wrap;
    margin: 1em 0;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    overflow: hidden;
}

.wpdjot-preview.djot-content .code-group-radio {
    display: none;
}

.wpdjot-preview.djot-content .code-group-label {
    padding: 0.5rem 1rem;
    cursor: pointer;
    background: #f6f8fa;
    border-bottom: 2px solid transparent;
    color: #57606a;
    font-size: 0.875rem;
}

.wpdjot-preview.djot-content .code-group-label:hover {
    color: #24292f;
    background: #f3f4f6;
}

.wpdjot-preview.djot-content .code-group-radio:checked + .code-group-label {
    color: #24292f;
    border-bottom-color: #fd8c73;
    background: #fff;
}

.wpdjot-preview.djot-content .code-group-panel {
    display: none;
    width: 100%;
    order: 1;
}

.wpdjot-preview.djot-content .code-group-panel pre {
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid #d0d7de;
}

.wpdjot-preview.djot-content .code-group-radio:nth-of-type(1):checked ~ .code-group-panel:nth-of-type(1),
.wpdjot-preview.djot-content .code-group-radio:nth-of-type(2):checked ~ .code-group-panel:nth-of-type(2),
.wpdjot-preview.djot-content .code-group-radio:nth-of-type(3):checked ~ .code-group-panel:nth-of-type(3),
.wpdjot-preview.djot-content .code-group-radio:nth-of-type(4):checked ~ .code-group-panel:nth-of-type(4),
.wpdjot-preview.djot-content .code-group-radio:nth-of-type(5):checked ~ .code-group-panel:nth-of-type(5) {
    display: block;
}

/* Tabs */
.wpdjot-preview.djot-content .tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 1em 0;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    overflow: hidden;
}

.wpdjot-preview.djot-content .tabs-radio {
    display: none;
}

.wpdjot-preview.djot-content .tabs-label {
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    background: #f6f8fa;
    border-bottom: 2px solid transparent;
    color: #57606a;
    font-weight: 500;
}

.wpdjot-preview.djot-content .tabs-label:hover {
    color: #24292f;
    background: #f3f4f6;
}

.wpdjot-preview.djot-content .tabs-radio:checked + .tabs-label {
    color: #24292f;
    border-bottom-color: #fd8c73;
    background: #fff;
}

.wpdjot-preview.djot-content .tabs-panel {
    display: none;
    width: 100%;
    order: 1;
    padding: 1rem;
    border-top: 1px solid #d0d7de;
    background: #fff;
}

.wpdjot-preview.djot-content .tabs-panel > :first-child {
    margin-top: 0;
}

.wpdjot-preview.djot-content .tabs-panel > :last-child {
    margin-bottom: 0;
}

.wpdjot-preview.djot-content .tabs-radio:nth-of-type(1):checked ~ .tabs-panel:nth-of-type(1),
.wpdjot-preview.djot-content .tabs-radio:nth-of-type(2):checked ~ .tabs-panel:nth-of-type(2),
.wpdjot-preview.djot-content .tabs-radio:nth-of-type(3):checked ~ .tabs-panel:nth-of-type(3),
.wpdjot-preview.djot-content .tabs-radio:nth-of-type(4):checked ~ .tabs-panel:nth-of-type(4),
.wpdjot-preview.djot-content .tabs-radio:nth-of-type(5):checked ~ .tabs-panel:nth-of-type(5) {
    display: block;
}

/* ========================================
   Visual Editor - Code Groups & Tabs
   ======================================== */

/* Code Group wrapper in visual editor */
.wpdjot-visual-editor .djot-code-group-wrapper {
    margin: 1em 0;
}

.wpdjot-visual-editor .djot-code-group-label,
.wpdjot-visual-editor .djot-tabs-label {
    font-size: 11px;
    color: #666;
    padding: 4px 8px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
}

/* Code Groups in visual editor */
.wpdjot-visual-editor .djot-content .code-group {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    border: 1px solid #d0d7de;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.wpdjot-visual-editor .djot-content .code-group-radio {
    display: none;
}

.wpdjot-visual-editor .djot-content .code-group-label {
    padding: 0.5rem 1rem;
    cursor: pointer;
    background: #f6f8fa;
    border-bottom: 2px solid transparent;
    color: #57606a;
    font-size: 0.875rem;
}

.wpdjot-visual-editor .djot-content .code-group-label:hover {
    color: #24292f;
    background: #f3f4f6;
}

.wpdjot-visual-editor .djot-content .code-group-radio:checked + .code-group-label {
    color: #24292f;
    border-bottom-color: #fd8c73;
    background: #fff;
}

.wpdjot-visual-editor .djot-content .code-group-panel {
    display: none;
    width: 100%;
    order: 1;
}

.wpdjot-visual-editor .djot-content .code-group-panel pre {
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid #d0d7de;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 16px;
    overflow-x: auto;
}

.wpdjot-visual-editor .djot-content .code-group-panel pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
}

.wpdjot-visual-editor .djot-content .code-group-radio:nth-of-type(1):checked ~ .code-group-panel:nth-of-type(1),
.wpdjot-visual-editor .djot-content .code-group-radio:nth-of-type(2):checked ~ .code-group-panel:nth-of-type(2),
.wpdjot-visual-editor .djot-content .code-group-radio:nth-of-type(3):checked ~ .code-group-panel:nth-of-type(3),
.wpdjot-visual-editor .djot-content .code-group-radio:nth-of-type(4):checked ~ .code-group-panel:nth-of-type(4),
.wpdjot-visual-editor .djot-content .code-group-radio:nth-of-type(5):checked ~ .code-group-panel:nth-of-type(5) {
    display: block;
}

/* Tabs wrapper in visual editor */
.wpdjot-visual-editor .djot-tabs-wrapper {
    margin: 1em 0;
}

/* Tabs in visual editor */
.wpdjot-visual-editor .djot-content .tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    border: 1px solid #d0d7de;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.wpdjot-visual-editor .djot-content .tabs-radio {
    display: none;
}

.wpdjot-visual-editor .djot-content .tabs-label {
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    background: #f6f8fa;
    border-bottom: 2px solid transparent;
    color: #57606a;
    font-weight: 500;
}

.wpdjot-visual-editor .djot-content .tabs-label:hover {
    color: #24292f;
    background: #f3f4f6;
}

.wpdjot-visual-editor .djot-content .tabs-radio:checked + .tabs-label {
    color: #24292f;
    border-bottom-color: #fd8c73;
    background: #fff;
}

.wpdjot-visual-editor .djot-content .tabs-panel {
    display: none;
    width: 100%;
    order: 1;
    padding: 1rem;
    border-top: 1px solid #d0d7de;
    background: #fff;
}

.wpdjot-visual-editor .djot-content .tabs-panel > :first-child {
    margin-top: 0;
}

.wpdjot-visual-editor .djot-content .tabs-panel > :last-child {
    margin-bottom: 0;
}

/* Tables inside tabs in visual editor */
.wpdjot-visual-editor .djot-content .tabs-panel table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.wpdjot-visual-editor .djot-content .tabs-panel th,
.wpdjot-visual-editor .djot-content .tabs-panel td {
    border: 1px solid #d0d7de;
    padding: 0.5em 1em;
    text-align: left;
}

.wpdjot-visual-editor .djot-content .tabs-panel th {
    background: #f6f8fa;
    font-weight: 600;
}

/* Code blocks inside tabs in visual editor */
.wpdjot-visual-editor .djot-content .tabs-panel pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1em 0;
}

.wpdjot-visual-editor .djot-content .tabs-panel pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
}

.wpdjot-visual-editor .djot-content .tabs-radio:nth-of-type(1):checked ~ .tabs-panel:nth-of-type(1),
.wpdjot-visual-editor .djot-content .tabs-radio:nth-of-type(2):checked ~ .tabs-panel:nth-of-type(2),
.wpdjot-visual-editor .djot-content .tabs-radio:nth-of-type(3):checked ~ .tabs-panel:nth-of-type(3),
.wpdjot-visual-editor .djot-content .tabs-radio:nth-of-type(4):checked ~ .tabs-panel:nth-of-type(4),
.wpdjot-visual-editor .djot-content .tabs-radio:nth-of-type(5):checked ~ .tabs-panel:nth-of-type(5) {
    display: block;
}