.mk-comments-area {
--mk-accent:      #eb3349;
--mk-accent-alt:  #7b2ff7;
--mk-bg-deep:     #0d0d1a;
--mk-bg-card:     #12122a;
--mk-bg-card2:    #0f2040;
--mk-text:        #e0e0f0;
--mk-text-muted:  #8888aa;
--mk-border:      rgba(255, 255, 255, 0.07);
--mk-radius:      12px;
--mk-radius-sm:   8px;
}
.mk-comments-area {
margin-top: 10px;
font-family: inherit;
} .manga-comment-login-wall {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 52px 30px 46px;
background: linear-gradient(160deg, var(--mk-bg-card) 0%, var(--mk-bg-deep) 100%);
border: 1px solid var(--mk-border);
border-radius: var(--mk-radius);
text-align: center;
}
.mk-login-wall__icon {
font-size: 52px;
color: var(--mk-accent);
opacity: 0.9;
animation: mk-icon-float 3.2s ease-in-out infinite;
line-height: 1;
}
@keyframes mk-icon-float {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(-7px); }
}
.mk-login-wall__title {
margin: 0;
font-size: 22px;
font-weight: 700;
color: var(--mk-text);
letter-spacing: 0.02em;
}
.mk-login-wall__desc {
margin: 0;
font-size: 14px;
color: var(--mk-text-muted);
max-width: 320px;
line-height: 1.6;
}
.mk-login-wall__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-top: 6px;
} .mk-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 11px 24px;
border-radius: var(--mk-radius-sm);
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
cursor: pointer;
letter-spacing: 0.03em;
transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease, border-color 0.2s ease, color 0.2s ease;
}
.mk-btn:hover {
transform: translateY(-2px);
text-decoration: none !important;
}
.mk-btn--primary {
background-color: var(--mk-accent);
color: #fff !important;
border: 2px solid var(--mk-accent);
box-shadow: 0 4px 18px rgba(235, 51, 73, 0.35);
}
.mk-btn--primary:hover {
box-shadow: 0 6px 26px rgba(235, 51, 73, 0.55);
opacity: 0.92;
color: #fff !important;
}
.mk-btn--secondary {
background-color: transparent;
color: var(--mk-text) !important;
border: 2px solid rgba(255, 255, 255, 0.18);
}
.mk-btn--secondary:hover {
border-color: var(--mk-accent);
color: var(--mk-accent) !important;
box-shadow: 0 4px 16px rgba(235, 51, 73, 0.18);
} .mk-comments-header {
margin-bottom: 18px;
}
.mk-comments-title {
font-size: 17px;
font-weight: 700;
color: var(--mk-text);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.mk-comments-count {
color: var(--mk-accent);
} .mk-comment-list {
list-style: none;
padding: 0;
margin: 0 0 28px;
}
.mk-comment-list .children {
list-style: none;
padding-left: 22px;
margin-top: 12px;
} .mk-comment-card {
border: 1px solid rgba(235, 51, 73, 0.28);
border-radius: var(--mk-radius);
margin-bottom: 14px;
animation: mk-border-pulse 5s ease-in-out infinite alternate;
transition: box-shadow 0.25s ease;
}
.mk-comment-card:hover {
box-shadow: 0 4px 28px rgba(123, 47, 247, 0.2);
} @keyframes mk-border-pulse {
from {
border-color: rgba(235, 51, 73, 0.28);
box-shadow: 0 0 8px  rgba(235, 51, 73, 0.07);
}
to {
border-color: rgba(123, 47, 247, 0.38);
box-shadow: 0 0 14px rgba(123, 47, 247, 0.11);
}
} .mk-comment-body {
background: linear-gradient(
135deg,
var(--mk-bg-card)  0%,
var(--mk-bg-deep)  50%,
var(--mk-bg-card2) 100%
);
background-size: 300% 300%;
animation: mk-bg-drift 11s ease infinite;
border-radius: calc(var(--mk-radius) - 1px);
padding: 18px 20px;
} @keyframes mk-bg-drift {
0%   { background-position: 0%   50%; }
50%  { background-position: 100% 50%; }
100% { background-position: 0%   50%; }
} .mk-comment-body {
display: flex;
align-items: flex-start;
gap: 12px;
} .mk-comment-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
} .mk-comment-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 10px;
}
.mk-comment-avatar img {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.1);
display: block;
flex-shrink: 0;
}
.mk-comment-info {
flex: 1;
min-width: 0;
}
.mk-comment-author {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
font-weight: 700;
font-size: 14px;
color: var(--mk-text);
}
.mk-comment-date {
display: block;
font-size: 12px;
color: var(--mk-text-muted);
text-decoration: none !important;
margin-top: 2px;
transition: color 0.15s;
}
.mk-comment-date:hover {
color: var(--mk-accent);
}
.mk-comment-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.mk-reply-link a,
.mk-edit-link a {
font-size: 12px;
color: var(--mk-text-muted);
text-decoration: none !important;
padding: 3px 9px;
border: 1px solid var(--mk-border);
border-radius: 5px;
transition: border-color 0.15s, color 0.15s;
}
.mk-reply-link a:hover,
.mk-edit-link a:hover {
color: var(--mk-accent);
border-color: rgba(235, 51, 73, 0.5);
text-decoration: none !important;
}
.mk-comment-pending {
font-size: 11px;
color: var(--mk-text-muted);
font-style: normal;
background: rgba(255, 255, 255, 0.05);
padding: 2px 8px;
border-radius: 4px;
} .mk-comment-content {
font-size: 14px;
line-height: 1.72;
color: var(--mk-text);
}
.mk-comment-content p {
margin: 0 0 8px;
}
.mk-comment-content p:last-child {
margin-bottom: 0;
} .mk-kaomoji-toolbar {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 10px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--mk-border);
border-radius: var(--mk-radius-sm);
}
.mk-kaomoji-btn {
padding: 4px 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 6px;
color: var(--mk-text);
font-size: 13px;
line-height: 1.5;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
white-space: nowrap;
}
.mk-kaomoji-btn:hover {
background: rgba(235, 51, 73, 0.14);
border-color: rgba(235, 51, 73, 0.4);
transform: scale(1.08);
}
.mk-kaomoji-btn:active {
transform: scale(0.96);
} .mk-comment-form {
background: linear-gradient(160deg, var(--mk-bg-card) 0%, var(--mk-bg-deep) 100%);
border: 1px solid var(--mk-border);
border-radius: var(--mk-radius);
padding: 24px;
margin-top: 12px;
}
.mk-comment-form .comment-reply-title {
font-size: 15px;
font-weight: 700;
color: var(--mk-text);
margin: 0 0 18px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.mk-comment-form .comment-reply-title small {
display: block;
margin-top: 4px;
}
.mk-comment-form .comment-reply-title small a {
font-size: 12px;
color: var(--mk-text-muted);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
text-decoration: none;
}
.mk-comment-form .comment-reply-title small a:hover {
color: var(--mk-accent);
}
.mk-comment-form .comment-form-comment {
margin: 0;
}
.mk-comment-form label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--mk-text-muted);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 8px;
}
.mk-comment-form textarea#comment {
width: 100%;
min-height: 120px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--mk-border);
border-radius: var(--mk-radius-sm);
color: var(--mk-text);
font-size: 14px;
line-height: 1.65;
resize: vertical;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.mk-comment-form textarea#comment::placeholder {
color: var(--mk-text-muted);
opacity: 0.7;
}
.mk-comment-form textarea#comment:focus {
outline: none;
border-color: var(--mk-accent);
box-shadow: 0 0 0 3px rgba(235, 51, 73, 0.12);
background: rgba(255, 255, 255, 0.06);
}
.mk-comment-form .form-submit {
margin: 16px 0 0;
} .mk-submit-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 26px;
background-color: var(--mk-accent);
color: #fff !important;
border: none;
border-radius: var(--mk-radius-sm);
font-size: 14px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.04em;
transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease;
box-shadow: 0 4px 16px rgba(235, 51, 73, 0.32);
}
.mk-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(235, 51, 73, 0.52);
opacity: 0.92;
}
.mk-submit-btn:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(235, 51, 73, 0.3);
} .mk-comments-area .comment-navigation,
.mk-comments-area .comments-pagination {
margin: 20px 0;
}
.mk-comments-area .comment-navigation a,
.mk-comments-area .comments-pagination a {
color: var(--mk-text-muted);
text-decoration: none;
font-size: 13px;
transition: color 0.15s;
}
.mk-comments-area .comment-navigation a:hover,
.mk-comments-area .comments-pagination a:hover {
color: var(--mk-accent);
} .mk-comments-closed {
text-align: center;
color: var(--mk-text-muted);
font-size: 14px;
padding: 26px;
border: 1px dashed var(--mk-border);
border-radius: var(--mk-radius);
margin: 0;
} @media (max-width: 600px) {
.manga-comment-login-wall {
padding: 36px 18px 32px;
}
.mk-login-wall__actions {
flex-direction: column;
width: 100%;
}
.mk-btn {
justify-content: center;
width: 100%;
}
.mk-comment-meta {
flex-wrap: wrap;
}
.mk-comment-actions {
margin-left: 0;
width: 100%;
}
.mk-comment-list .children {
padding-left: 12px;
}
.mk-kaomoji-toolbar {
gap: 4px;
padding: 8px 10px;
}
.mk-kaomoji-btn {
font-size: 11px;
padding: 3px 7px;
}
.mk-comment-form {
padding: 18px 16px;
}
} .mk-level-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 6px;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.04em;
white-space: nowrap;
user-select: none;
vertical-align: middle;
transition: box-shadow 0.2s ease;
}
.mk-level-num {
font-weight: 800;
}
.mk-level-title {
font-weight: 500;
font-style: normal;
opacity: 0.88;
} .mk-level-tier-aprendiz {
background: rgba(100, 120, 165, 0.20);
border: 1px solid rgba(100, 120, 165, 0.42);
color: #a8b8d8;
} .mk-level-tier-maestro {
background: rgba(55, 175, 105, 0.18);
border: 1px solid rgba(55, 175, 105, 0.42);
color: #6ed098;
} .mk-level-tier-legendario {
background: rgba(200, 155, 28, 0.20);
border: 1px solid rgba(200, 155, 28, 0.48);
color: #e8c040;
text-shadow: 0 0 10px rgba(200, 155, 28, 0.30);
} .mk-level-tier-celestial {
background: linear-gradient(
90deg,
rgba(123, 47, 247, 0.26) 0%,
rgba(235, 51, 73, 0.22) 100%
);
border: 1px solid rgba(195, 90, 247, 0.52);
color: #cc88f8;
text-shadow: 0 0 10px rgba(195, 90, 247, 0.45);
animation: mk-badge-shimmer 3.5s ease-in-out infinite;
}
@keyframes mk-badge-shimmer {
0%, 100% { box-shadow: 0 0 6px  rgba(123, 47, 247, 0.28); }
50%       { box-shadow: 0 0 16px rgba(235, 51, 73,  0.36); }
}  .mk-comment-avatar {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0; } .mk-avatar-wrapper {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
flex-shrink: 0;
} .mk-avatar-wrapper > img:first-child {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
border: 2px solid rgba(255, 255, 255, 0.10);
} .mk-comment-avatar .mk-avatar-frame {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.4);
width: 100%;
height: 100%;
object-fit: contain;
z-index: 2;
pointer-events: none;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
}  .mk-pill {
display: inline-flex;
align-items: center;
background: var(--mk-badge-color, #a855f7);
color: #fff;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
line-height: 1.4;
white-space: nowrap;
user-select: none;
cursor: default;
vertical-align: middle;
transition: box-shadow .2s ease;
} .mk-level-pill {
display: block;
text-align: center;
font-size: 9px;
font-weight: 800;
padding: 2px 5px 3px;
border-radius: 4px;
max-width: 54px;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
} .mk-rank-pill {
font-size: 9px;
font-weight: 800;
padding: 2px 7px 3px;
border-radius: 8px;
margin-left: 4px;
}  .mk-pill.mk-tier-kami {
box-shadow: 0 0 8px rgba(235, 51, 73, .5);
} .mk-pill.mk-tier-celestial {
background: linear-gradient(90deg, #7b2ff7 0%, #f107a3 100%) !important;
animation: mk-badge-shimmer 3.5s ease-in-out infinite;
} .mk-reactions-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 10px 0 16px;
border-bottom: 1px solid var(--mk-border);
margin-bottom: 20px;
}
.mk-reactions-label {
font-size: 11px;
font-weight: 700;
color: #888;
text-transform: uppercase;
letter-spacing: 0.6px;
white-space: nowrap;
margin-right: 2px;
}
.mk-reaction-btn {
background: #1e1e24;
border: 1px solid #2a2a35;
border-radius: 20px;
padding: 6px 14px;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
color: #aaa;
font-size: 13px;
font-family: inherit;
line-height: 1;
transition: background .2s ease,
border-color .2s ease,
color .2s ease,
transform .1s ease,
box-shadow .2s ease;
}
.mk-reaction-btn:hover {
background: #25252f;
border-color: #4a4a60;
color: #e0e0e0;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.mk-reaction-btn:active {
transform: translateY(0);
box-shadow: none;
}
.mk-reaction-btn.mk-reaction-active {
background: #2d1f4e;
border-color: var(--mk-badge-color, #a855f7);
color: #fff;
box-shadow: 0 0 10px rgba(168, 85, 247, .3);
}
.mk-reaction-icon {
font-size: 16px;
line-height: 1;
display: inline-block;
}
.mk-reaction-count {
font-size: 12px;
font-weight: 700;
min-width: 14px;
text-align: center;
}