/* --- Расширения для карточки материала --- */
.sp-card-body {
 display: block;
 color: inherit;
 text-decoration: none;
}
.sp-card-body:hover,
.sp-card-body:hover .sp-card-title {
 color: inherit;
 opacity: 1;
}

.sp-card-moder {
 display: flex;
 justify-content: flex-end;
 gap: 12px;
 margin-bottom: 10px;
 font-size: 12px;
 color: var(--text-secondary);
}
.sp-card-moder a {
 color: var(--text-secondary);
 font-size: 12px;
 text-decoration: underline;
 text-decoration-color: transparent;
 transition: color 0.15s, text-decoration-color 0.15s;
}
.sp-card-moder a:hover {
 color: var(--text-primary);
 text-decoration-color: currentColor;
 opacity: 1;
}

.sp-card-meta-item {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 color: var(--text-secondary);
 font-size: 12px;
 line-height: 1;
 text-decoration: none;
 transition: color 0.15s;
}
a.sp-card-meta-item:hover {
 color: var(--text-primary);
 opacity: 1;
}

.sp-meta-icon {
 width: 13px;
 height: 13px;
 flex-shrink: 0;
 opacity: 0.85;
}
/* StoryPad — комментарии uCoz */
.comm-form-box,
.comm-card {
 background: #171717 !important;
 border: 1px solid #424242 !important;
 border-radius: 14px !important;
 color: #ececec !important;
 padding: 20px !important;
 margin-bottom: 16px !important;
}
html[data-theme="light"] .comm-form-box,
html[data-theme="light"] .comm-card {
 background: #f7f7f8 !important;
 border-color: #d9d9e3 !important;
 color: #0d0d0d !important;
}

.comm-form-unsubscribe {
 display: inline-block;
 font-size: 12.5px;
 color: #8e8ea0 !important;
 margin-bottom: 10px;
}

.comm-form-inner {
 display: flex;
 gap: 14px;
 align-items: flex-start;
}

.comm-form-avatar {
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 overflow: hidden;
 background: #2f2f2f;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #b4b4b4;
}
html[data-theme="light"] .comm-form-avatar {
 background: #ececf1;
 color: #6e6e80;
}
.comm-form-avatar .comm-avatar-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.comm-form-avatar .svg-icon {
 width: 22px;
 height: 22px;
 fill: currentColor;
}

.comm-form-body {
 flex: 1;
 min-width: 0;
}

.comm-form-field {
 margin-bottom: 12px;
}

.comm-form-label {
 display: block;
 font-size: 13px;
 font-weight: 600;
 color: #b4b4b4 !important;
 margin-bottom: 6px;
}
html[data-theme="light"] .comm-form-label { color: #6e6e80 !important; }

.comm-form-input {
 width: 100% !important;
 background: #212121 !important;
 border: 1px solid #424242 !important;
 border-radius: 10px !important;
 padding: 12px 14px !important;
 color: #ececec !important;
 font-family: inherit !important;
 font-size: 14px !important;
 outline: none !important;
 box-sizing: border-box !important;
}
html[data-theme="light"] .comm-form-input {
 background: #ffffff !important;
 border-color: #d9d9e3 !important;
 color: #0d0d0d !important;
}
.comm-form-input:focus { border-color: #5a5a5a !important; }
.comm-form-input::placeholder { color: #b4b4b4; opacity: 0.6; }

textarea.comm-form-input {
 min-height: 100px;
 resize: vertical;
 line-height: 1.6;
}

.comm-form-actions {
 display: flex;
 align-items: center;
 gap: 14px;
 flex-wrap: wrap;
 margin-top: 12px;
}

.comm-form-btn,
#addcBut {
 background: #ffffff !important;
 color: #000000 !important;
 border: none !important;
 border-radius: 10px !important;
 padding: 10px 22px !important;
 font-weight: 600 !important;
 font-size: 14px !important;
 cursor: pointer !important;
 font-family: inherit !important;
 transition: opacity 0.15s ease !important;
}
html[data-theme="light"] .comm-form-btn,
html[data-theme="light"] #addcBut {
 background: #0d0d0d !important;
 color: #ffffff !important;
}
.comm-form-btn:hover,
#addcBut:hover { opacity: 0.85 !important; }

.comm-form-options { display: inline-flex; gap: 10px; align-items: center; }
.comm-option { display: inline-flex; align-items: center; cursor: pointer; }
.comm-option-input { cursor: pointer; }
.comm-option .svg-icon { width: 18px; height: 18px; fill: #8e8ea0; margin-right: 4px; }

.ucf-bb {
 display: flex;
 flex-wrap: wrap;
 gap: 3px;
 margin-bottom: 8px;
 align-items: center;
}
.ucf-bb img,
.ucf-bb button,
.ucf-bb a {
 background: #2f2f2f !important;
 border: 1px solid #424242 !important;
 border-radius: 6px !important;
 padding: 4px 6px !important;
 color: #ececec !important;
 cursor: pointer;
}
html[data-theme="light"] .ucf-bb img,
html[data-theme="light"] .ucf-bb button,
html[data-theme="light"] .ucf-bb a {
 background: #ececf1 !important;
 border-color: #d9d9e3 !important;
 color: #0d0d0d !important;
}

/* Смайлы */
.comm-form-message img,
.comm-form-box img[alt*="smile"],
.comm-form-box .smiles img {
 vertical-align: middle;
 margin: 2px;
 cursor: pointer;
}

/* Существующие комментарии */
.comm-card {
 display: flex;
 gap: 14px;
 padding: 18px !important;
}

.comm-card-avatar {
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 overflow: hidden;
 background: #2f2f2f;
 display: flex;
 align-items: center;
 justify-content: center;
}
html[data-theme="light"] .comm-card-avatar { background: #ececf1; }
.comm-card-avatar .svg-icon { width: 22px; height: 22px; fill: #b4b4b4; }

.comm-card-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 8px;
}
.comm-card-header-left {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}
.comm-card-header-left a,
.comm-card-header-left b {
 color: #ececec !important;
 font-weight: 600;
 text-decoration: none;
}
html[data-theme="light"] .comm-card-header-left a,
html[data-theme="light"] .comm-card-header-left b { color: #0d0d0d !important; }

.comm-info { font-size: 12.5px; color: #8e8ea0; }

.comm-rates {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 13px;
 color: #8e8ea0;
}
.comm-rates .svg-icon { width: 14px; height: 14px; fill: #8e8ea0; }
.u-rate-wrapper { font-weight: 600; color: #b4b4b4; min-width: 14px; text-align: center; }
.u-rate-btn { display: inline-flex; align-items: center; }

.comm-message,
.comm-card-body {
 color: #ececec !important;
 font-size: 15px;
 line-height: 1.6;
 word-break: break-word;
}
html[data-theme="light"] .comm-message,
html[data-theme="light"] .comm-card-body { color: #0d0d0d !important; }
.comm-message a,
.comm-card-body a { color: #7ab8ff !important; }
html[data-theme="light"] .comm-message a,
html[data-theme="light"] .comm-card-body a { color: #0b5fff !important; }
.comm-message img { max-width: 100%; border-radius: 8px; }

.comm-answer {
 margin-top: 8px;
 padding: 8px 12px;
 background: #1e2126;
 border-left: 3px solid #424242;
 border-radius: 6px;
 font-size: 13px;
 color: #b4b4b4;
}
html[data-theme="light"] .comm-answer {
 background: #f7f7f8;
 border-left-color: #d9d9e3;
 color: #6e6e80;
}

.comm-actions {
 margin-top: 8px;
}
.comm-answer-link {
 font-size: 13px;
 color: #8e8ea0 !important;
}
.comm-answer-link:hover { color: #ececec !important; }

.comm-form-box .highlight-red { color: #f87171; }
/* StoryPad — comments */
.sp-comment {
 display: flex;
 gap: 14px;
 padding: 18px 0;
 border-bottom: 1px solid #424242;
}
html[data-theme="light"] .sp-comment { border-bottom-color: #d9d9e3; }
.sp-comment:last-of-type { border-bottom: none; }

.sp-comment-avatar {
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 overflow: hidden;
 background: #2f2f2f;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #b4b4b4;
}
html[data-theme="light"] .sp-comment-avatar { background: #ececf1; color: #6e6e80; }
.sp-comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-comment-avatar svg { width: 22px; height: 22px; }
.sp-comment-avatar a { display: block; width: 100%; height: 100%; }

.sp-comment-body { flex: 1; min-width: 0; }

.sp-comment-head {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 6px;
}
.sp-comment-author a,
.sp-comment-author span {
 font-weight: 600;
 font-size: 14.5px;
 color: #ececec;
}
html[data-theme="light"] .sp-comment-author a,
html[data-theme="light"] .sp-comment-author span { color: #0d0d0d; }
.sp-comment-date { font-size: 12.5px; color: #8e8ea0; }
.sp-comment-reply-mark { font-size: 12px; color: #8e8ea0; }

.sp-comment-reply-to {
 background: #1e2126;
 border-left: 3px solid #424242;
 padding: 8px 12px;
 border-radius: 6px;
 font-size: 13px;
 color: #b4b4b4;
 margin-bottom: 8px;
}
html[data-theme="light"] .sp-comment-reply-to { background: #f7f7f8; border-left-color: #d9d9e3; color: #6e6e80; }

.sp-comment-text {
 font-size: 15px;
 line-height: 1.6;
 color: #ececec;
 word-break: break-word;
 margin-bottom: 10px;
}
html[data-theme="light"] .sp-comment-text { color: #0d0d0d; }
.sp-comment-text a { color: #7ab8ff; }
html[data-theme="light"] .sp-comment-text a { color: #0b5fff; }
.sp-comment-text img { max-width: 100%; border-radius: 8px; margin: 6px 0; }

.sp-comment-actions {
 display: flex;
 align-items: center;
 gap: 14px;
 flex-wrap: wrap;
}
.sp-comment-rates {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 13px;
 color: #8e8ea0;
}
.sp-rate-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 26px;
 height: 26px;
 border-radius: 6px;
 color: #8e8ea0;
 transition: all 0.15s ease;
}
.sp-rate-btn svg { width: 15px; height: 15px; }
.sp-rate-btn:hover { background: #2f2f2f; color: #ececec; }
html[data-theme="light"] .sp-rate-btn:hover { background: #ececf1; color: #0d0d0d; }
.sp-rate-btn.sp-rate-static { cursor: default; opacity: 0.5; }
.sp-rate-value { font-weight: 600; color: #b4b4b4; min-width: 14px; text-align: center; }

.sp-comment-reply-btn {
 font-size: 13px;
 color: #8e8ea0;
 transition: color 0.15s;
}
.sp-comment-reply-btn:hover { color: #ececec; }
html[data-theme="light"] .sp-comment-reply-btn:hover { color: #0d0d0d; }

.sp-comment-moder { margin-left: auto; font-size: 12px; opacity: 0.7; }

/* Comment form */
.sp-cform { margin-top: 20px; }

.sp-cform-unsub {
 display: inline-block;
 font-size: 12.5px;
 color: #8e8ea0;
 margin-bottom: 10px;
}

.sp-cform-inner { display: flex; gap: 14px; }

.sp-cform-avatar {
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 overflow: hidden;
 background: #2f2f2f;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #b4b4b4;
}
html[data-theme="light"] .sp-cform-avatar { background: #ececf1; color: #6e6e80; }
.sp-cform-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-cform-avatar svg { width: 22px; height: 22px; }

.sp-cform-body { flex: 1; min-width: 0; }

.sp-cform-input {
 width: 100%;
 background: #212121;
 border: 1px solid #424242;
 border-radius: 10px;
 padding: 11px 14px;
 color: #ececec;
 font-family: inherit;
 font-size: 14px;
 outline: none;
 margin-bottom: 10px;
 transition: border-color 0.15s;
}
html[data-theme="light"] .sp-cform-input { background: #fff; border-color: #d9d9e3; color: #0d0d0d; }
.sp-cform-input:focus { border-color: #5a5a5a; }

.sp-cform-textarea {
 width: 100%;
 background: #212121;
 border: 1px solid #424242;
 border-radius: 10px;
 padding: 12px 14px;
 color: #ececec;
 font-family: inherit;
 font-size: 15px;
 outline: none;
 resize: vertical;
 min-height: 90px;
 transition: border-color 0.15s;
}
html[data-theme="light"] .sp-cform-textarea { background: #fff; border-color: #d9d9e3; color: #0d0d0d; }
.sp-cform-textarea:focus { border-color: #5a5a5a; }

.sp-cform-bb,
.sp-cform-smiles {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
 margin-bottom: 8px;
 align-items: center;
}

.sp-cform-security { margin: 10px 0; }

.sp-cform-actions {
 display: flex;
 align-items: center;
 gap: 16px;
 flex-wrap: wrap;
 margin-top: 12px;
}

.sp-cform-submit {
 background: #ffffff;
 color: #000;
 border: none;
 border-radius: 10px;
 padding: 10px 22px;
 font-weight: 600;
 font-size: 14px;
 cursor: pointer;
 font-family: inherit;
 transition: opacity 0.15s ease, transform 0.1s ease;
}
html[data-theme="light"] .sp-cform-submit { background: #0d0d0d; color: #fff; }
.sp-cform-submit:hover { opacity: 0.85; }
.sp-cform-submit:active { transform: scale(0.97); }

.sp-cform-check {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 13px;
 color: #b4b4b4;
 cursor: pointer;
}
html[data-theme="light"] .sp-cform-check { color: #6e6e80; }
.sp-cform-check input { cursor: pointer; }

.sp-cform-error { color: #f87171; font-size: 14px; }

.sp-cform-auth {
 text-align: center;
 padding: 20px 0;
 color: #b4b4b4;
 font-size: 14px;
}
html[data-theme="light"] .sp-cform-auth { color: #6e6e80; }
.sp-cform-socials {
 display: flex;
 justify-content: center;
 gap: 10px;
 margin-top: 14px;
 flex-wrap: wrap;
}
.sp-cform-socials a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: #2f2f2f;
 color: #ececec;
 transition: transform 0.15s ease, background 0.15s ease;
}
html[data-theme="light"] .sp-cform-socials a { background: #ececf1; color: #0d0d0d; }
.sp-cform-socials a:hover { transform: scale(1.08); background: #424242; }

/* Тёмная адаптация дефолтной темы страницы комментариев */
.commTable,
.commTable td,
.commTable tr {
 background: transparent !important;
 color: inherit !important;
 border-color: #424242 !important;
}
html[data-theme="light"] .commTable,
html[data-theme="light"] .commTable td,
html[data-theme="light"] .commTable tr {
 border-color: #d9d9e3 !important;
}

@media (max-width: 640px) {
 .sp-comment { gap: 10px; padding: 14px 0; }
 .sp-comment-avatar { width: 34px; height: 34px; }
 .sp-comment-avatar svg { width: 18px; height: 18px; }
 .sp-cform-avatar { width: 34px; height: 34px; }
 .sp-cform-avatar svg { width: 18px; height: 18px; }
 .sp-comment-moder { margin-left: 0; flex-basis: 100%; }
}