/* temp/web/css/page.css */
.header {
text-align: center;
margin-bottom: 20px;
color: #555;
width: 100%;
max-width: 700px;}
.author-info {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
text-align: right;
font-size: 0.9em;
color: #777;}
.author-info p {margin: 5px 0;}
.card-date {font-size: 0.85em; color: #999; margin-left: 8px;}
.author-link {color: #007bff; text-decoration: none; border-bottom: 1px dotted #007bff;}
.author-link:hover {color: #0056b3; border-bottom: 1px solid #0056b3;}
.comment-bubble {
    position: absolute;
    display: none;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;}
.content-view {padding: 40px 50px;}
.editor-container.content-view {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 40px 50px;
    position: relative;}
.edit-container {position: absolute; top: 20px; right: 15px;}
.action-button.edit-button {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    cursor: pointer;
    background-color: #ffc107; /* Желтый */
    transition: transform 0.2s;}
.action-button.edit-button:hover {transform: scale(1.1);}
.content h1 {text-align: center;}
.card-footer .tag {padding: 2px 8px; font-size: 0.75rem;}
.citation-index {
    font-size: 0.75em;
    vertical-align: super;
    color: #fff;
    background-color: #f1c40f;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 2px;
    margin-right: 2px;
    cursor: pointer;
    user-select: none;
    font-weight: bold;
    transition: transform 0.1s ease, background-color 0.2s;
    display: inline-block;
    line-height: 1.2;}
.citation-index:hover {
    background-color: #f39c12;
    transform: scale(1.15);
    z-index: 10;}
.citation-index.active {background-color: #e67e22; box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.3);}
.citation-popup {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px 12px;
    border-radius: 4px;
    z-index: 2000;
    font-size: 0.9em;
    max-width: 250px;
    word-wrap: break-word;}
.citation-popup-link {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dotted #3498db;
    cursor: pointer;}
.citation-popup-link:hover {border-bottom: 1px solid #2980b9; color: #2980b9;}
iframe, video, embed, object {
    max-width: 100%;
    width: 100% !important; 
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: block;
    margin: 15px 0;}
@media (max-width: 600px) {iframe { border-radius: 4px; }}
pre {
    background-color: #f5f7f9;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 12px;
    margin: 15px 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    overflow-x: auto;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.9em;
    line-height: 1.45;
    color: #24292e;}
.content ul, .content ol,
.card-content ul, .card-content ol {padding-left: 24px; margin: 10px 0;}
.custom-header-img {
    width: 100%;
    max-width: 700px;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;}
body.page-editor-body { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; padding-top: 40px; }
.editor-container {
width: 100%;
max-width: 700px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 20px 40px;
position: relative;}
.input-field {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-bottom: 2px solid #ddd;
font-size: 1.2em;
outline: none;
transition: border-color 0.3s;}
.input-field:focus {border-bottom-color: #007bff;}
.toolbar {width: 100%; background-color: #f1f1f1; padding: 8px; border-bottom: 1px solid #ddd;}
.toolbar-button {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
width: auto;
height: 30px;
font-size: 1em;
margin-right: 5px;
padding: 0 5px;    }
.toolbar-button:hover {background-color: #e9e9e9;}
.content-area {
    width: 100%;
    min-height: 300px;
    padding: 10px;
    font-size: 1em;
    line-height: 1.6;
    outline: none;
    border: none;}
.content-area:focus {border-color: #007bff;}
.content-area[data-placeholder]:empty:before {content: attr(data-placeholder); color: #999; pointer-events: none;}
.actions,
.edit-container {position: absolute; top: 20px; right: 15px;}
.action-button {
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 50%;
cursor: pointer;
transition: transform 0.2s;}
.action-button:hover {transform: scale(1.1);}
.publish-button {background-color: #28a745;}
.edit-button {background-color: #ffc107;}
#topic-input {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 0;
    margin-bottom: 5px;
    font-family: inherit;
    font-size: 1rem;
    color: #666;
    outline: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;}
.content-area ul, .content-area ol {padding-left: 24px; margin: 10px 0;}
#topic-input:focus {border-bottom-color: #ddd;}
#topic-input::placeholder {color: #ccc; font-style: italic;}