pre {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--highlight-color);
    border-radius: 4px;
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 0.85em;
    line-height: 1.5;
}
.code-block { position: relative; }
.code-block pre { padding-right: 60px; }
.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.9em;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--highlight-color);
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 3px;
    line-height: 1;
}
.copy-btn:hover { background: var(--highlight-color); color: var(--bg-color); }
.copy-btn .fa-check { color: #4a9a5a; }
.dark-mode pre { background: rgba(255, 255, 255, 0.04); }
code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}
p code, li code, td code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 5px;
    border-radius: 3px;
}
.dark-mode p code,
.dark-mode li code,
.dark-mode td code {
    background: rgba(255, 255, 255, 0.08);
}
pre code { background: transparent; padding: 0; }

table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 0.95em;
}
th, td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--highlight-color);
}
th {
    font-weight: normal;
    opacity: 0.7;
    font-size: 0.85em;
    letter-spacing: 0.03em;
}

.tool-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 20px;
    margin: 24px 0;
    align-items: flex-end;
}
.tool-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tool-field label {
    font-size: 0.8em;
    opacity: 0.6;
    letter-spacing: 0.05em;
}
.tool-field input,
.tool-field select {
    font: inherit;
    font-size: 0.95em;
    color: var(--text-color);
    background: var(--bg-color);
    border: none;
    border-bottom: 1px solid var(--highlight-color);
    padding: 4px 2px;
    min-width: 140px;
}
.tool-field input:focus,
.tool-field select:focus {
    outline: none;
    border-bottom: 1.5px solid var(--active-color);
}
.tool-field option {
    background: var(--bg-color);
    color: var(--text-color);
}
.tool-button {
    font: inherit;
    font-size: 0.95em;
    background: var(--text-color);
    color: var(--bg-color);
    border: none;
    padding: 7px 22px;
    cursor: pointer;
    border-radius: 2px;
}
.tool-button:hover { opacity: 0.85; }
.tool-button:disabled { opacity: 0.4; cursor: not-allowed; }

.preview-area {
    border: 1px solid var(--highlight-color);
    padding: 24px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    overflow-x: auto;
    border-radius: 4px;
}
.preview-area.light { background: #f5f2e9; }
.preview-area.dark { background: #2c2c2c; }
.preview-area img { max-width: 100%; height: auto; display: block; }
.preview-placeholder,
.preview-spinner,
.preview-error {
    opacity: 0.55;
    font-size: 0.9em;
    font-style: italic;
}
.preview-error { color: #c8534a; opacity: 0.9; font-style: normal; }

.embed-section { margin-top: 20px; display: none; }
.embed-section.active { display: block; }
.embed-section label {
    display: block;
    font-size: 0.8em;
    opacity: 0.6;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.embed-box {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82em;
    padding: 10px 14px;
    border: 1px dashed var(--highlight-color);
    cursor: pointer;
    word-break: break-all;
    position: relative;
    border-radius: 4px;
}
.embed-box:hover { border-style: solid; }
.copied {
    position: absolute; top: 8px; right: 12px;
    font-size: 0.85em; opacity: 0; transition: opacity 0.2s;
    background: var(--bg-color); padding: 0 4px;
}
.copied.show { opacity: 0.8; }