/* Doberman Comments — scoped to html[data-scheme] to beat theme specificity */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

#dc-comments {
    --dc-radius:    14px;
    --dc-radius-sm: 8px;
    --dc-radius-xs: 6px;
    --dc-trans:     0.16s ease;
}

/* ════════════════════════════════════════════════════════════
   СВЕТЛАЯ ТЕМА  [data-scheme="default"]
   Фон страницы: #e9edf1 | карточки: #ffffff | текст: #000000
   ════════════════════════════════════════════════════════════ */

html #dc-comments,
html[data-scheme="default"] #dc-comments {
    font-family: 'Montserrat', sans-serif !important;
    max-width: 720px;
    margin: 56px auto 0;
    padding: 0 16px 56px;
    line-height: 1.5;
    color: #000000 !important;
    background: transparent !important;
}

html #dc-comments *,
html[data-scheme="default"] #dc-comments * {
    font-family: 'Montserrat', sans-serif !important;
    box-sizing: border-box;
}

/* Header */
html #dc-comments .dc-title,
html[data-scheme="default"] #dc-comments .dc-title {
    font-size: 1.15rem; font-weight: 700; margin: 0;
    letter-spacing: -.02em; display: flex; align-items: baseline; gap: 6px;
    color: #000000 !important;
}
html #dc-comments .dc-count,
html[data-scheme="default"] #dc-comments .dc-count {
    color: #4d52e2 !important;
}
html #dc-comments .dc-user-name,
html[data-scheme="default"] #dc-comments .dc-user-name {
    color: #000000 !important; font-weight: 600;
}
html #dc-comments .dc-user-bar,
html[data-scheme="default"] #dc-comments .dc-user-bar {
    display: flex; align-items: center; gap: 10px; font-size: .875rem;
}
html #dc-comments .dc-user-avatar,
html[data-scheme="default"] #dc-comments .dc-user-avatar {
    border-radius: 50%; width: 30px; height: 30px;
    border: 2px solid #4d52e2 !important;
}

/* Auth */
html #dc-comments .dc-auth,
html[data-scheme="default"] #dc-comments .dc-auth {
    background: #f0f3f7 !important;
    border: 1px solid #d2d7e0 !important;
    border-radius: var(--dc-radius);
    padding: 28px; margin-bottom: 32px;
    box-shadow: 0 2px 16px rgba(77,82,226,0.10);
}
html #dc-comments .dc-auth__step { display: none; }
html #dc-comments .dc-auth__step.is-active { display: block; }
html #dc-comments .dc-auth__label,
html[data-scheme="default"] #dc-comments .dc-auth__label {
    display: block; font-size: .8rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: #4d52e2 !important; margin-bottom: 6px;
}
html #dc-comments .dc-auth__hint,
html[data-scheme="default"] #dc-comments .dc-auth__hint {
    margin: 0 0 18px; color: #5a6078 !important;
    font-size: .92rem; line-height: 1.55;
}
html #dc-comments .dc-auth__hint strong,
html[data-scheme="default"] #dc-comments .dc-auth__hint strong {
    color: #000000 !important;
}
html #dc-comments .dc-auth__row,
html[data-scheme="default"] #dc-comments .dc-auth__row {
    display: flex; gap: 10px; align-items: stretch;
}
html #dc-comments .dc-auth__row .dc-input { flex: 1 1 0; min-width: 0; }
html #dc-comments .dc-auth__row .dc-btn   { flex-shrink: 0; }
html #dc-comments .dc-auth__msg,
html[data-scheme="default"] #dc-comments .dc-auth__msg {
    margin: 12px 0 0; font-size: .85rem; min-height: 1.2em;
    color: #5a6078 !important;
}
html #dc-comments .dc-auth__msg.is-error { color: #d63355 !important; }
html #dc-comments .dc-auth__msg.is-ok    { color: #1a9d5c !important; }
html #dc-comments .dc-auth__links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }

/* Inputs */
html #dc-comments .dc-input,
html[data-scheme="default"] #dc-comments .dc-input {
    font-size: .95rem; font-weight: 500; padding: 11px 15px;
    border: 1.5px solid #d2d7e0 !important;
    border-radius: var(--dc-radius-sm);
    background: #ffffff !important;
    color: #000000 !important;
    width: 100%; outline: none; -webkit-appearance: none;
    transition: border-color var(--dc-trans), box-shadow var(--dc-trans);
}
html #dc-comments input.dc-input { height: 46px; min-height: unset; }
html #dc-comments .dc-input::placeholder,
html[data-scheme="default"] #dc-comments .dc-input::placeholder {
    color: #5a6078 !important; opacity: .7;
}
html #dc-comments .dc-input:focus {
    border-color: #4d52e2 !important;
    box-shadow: 0 0 0 3.5px rgba(77,82,226,0.10) !important;
}
html #dc-comments .dc-input--code { letter-spacing: .25em; text-transform: uppercase; max-width: 170px; text-align: center; font-size: 1.1rem; font-weight: 700; }
html #dc-comments .dc-input--textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
html #dc-comments .dc-input--reply { min-height: 70px; font-size: .9rem; }

/* Buttons */
html #dc-comments .dc-btn {
    font-size: .9rem; font-weight: 700; padding: 11px 22px;
    border-radius: var(--dc-radius-sm); border: none !important;
    cursor: pointer; white-space: nowrap; line-height: 1;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background var(--dc-trans), color var(--dc-trans), box-shadow var(--dc-trans), border-color var(--dc-trans);
}
html #dc-comments .dc-btn--primary,
html[data-scheme="default"] #dc-comments .dc-btn--primary {
    background: #4d52e2 !important; color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(77,82,226,0.28);
}
html #dc-comments .dc-btn--primary:hover  { background: #3c41cc !important; color: #ffffff !important; }
html #dc-comments .dc-btn--primary:active { transform: translateY(1px); }
html #dc-comments .dc-btn--primary[disabled] { opacity: .42; pointer-events: none; box-shadow: none; }

html #dc-comments .dc-btn--ghost,
html[data-scheme="default"] #dc-comments .dc-btn--ghost {
    background: transparent !important; border: 1.5px solid #d2d7e0 !important;
    color: #000000 !important;
}
html #dc-comments .dc-btn--ghost:hover {
    border-color: #4d52e2 !important; color: #4d52e2 !important;
    background: rgba(77,82,226,0.10) !important;
}

html #dc-comments .dc-btn--link,
html[data-scheme="default"] #dc-comments .dc-btn--link {
    background: none !important; border: none !important; padding: 0;
    color: #5a6078 !important; font-weight: 600; font-size: .855rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
html #dc-comments .dc-btn--link:hover { color: #4d52e2 !important; }

html #dc-comments .dc-btn--action,
html[data-scheme="default"] #dc-comments .dc-btn--action {
    background: none !important; border: none !important; padding: 5px 10px;
    color: #5a6078 !important; font-size: .82rem; font-weight: 600;
    border-radius: var(--dc-radius-xs); display: inline-flex; align-items: center; gap: 5px;
}
html #dc-comments .dc-btn--action:hover    { color: #4d52e2 !important; background: rgba(77,82,226,0.10) !important; }
html #dc-comments .dc-btn--action.is-liked { color: #4d52e2 !important; }

html #dc-comments .dc-btn--delete,
html[data-scheme="default"] #dc-comments .dc-btn--delete {
    background: none !important; border: none !important; padding: 5px;
    color: #5a6078 !important; cursor: pointer;
    border-radius: var(--dc-radius-xs); display: inline-flex; align-items: center;
    margin-left: auto; opacity: .5;
}
html #dc-comments .dc-btn--delete:hover { color: #d63355 !important; opacity: 1; }
html #dc-comments .dc-btn--sm  { padding: 8px 16px; font-size: .85rem; }
html #dc-comments .dc-logout   { padding: 7px 14px; font-size: .82rem; }

/* Compose */
html #dc-comments .dc-compose,
html[data-scheme="default"] #dc-comments .dc-compose {
    margin-bottom: 36px; background: #f0f3f7 !important;
    border: 1px solid #d2d7e0 !important; border-radius: var(--dc-radius);
    padding: 20px; box-shadow: 0 2px 16px rgba(77,82,226,0.10);
}
html #dc-comments .dc-compose__footer {
    display: flex; justify-content: space-between; align-items: center; margin-top: 10px;
}
html #dc-comments .dc-char-count,
html[data-scheme="default"] #dc-comments .dc-char-count {
    font-size: .78rem; color: #5a6078 !important; font-variant-numeric: tabular-nums;
}
html #dc-comments .dc-char-count.is-warn { color: #b06000 !important; }
html #dc-comments .dc-char-count.is-over { color: #d63355 !important; font-weight: 700; }

/* Comments */
html #dc-comments .dc-list { display: flex; flex-direction: column; gap: 0; }
html #dc-comments .dc-comment,
html[data-scheme="default"] #dc-comments .dc-comment {
    padding: 22px 0; border-bottom: 1px solid #d2d7e0 !important;
    animation: dcFadeIn .22s ease;
}
html #dc-comments .dc-comment:last-child { border-bottom: none !important; }

@keyframes dcFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

html #dc-comments .dc-comment__head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
html #dc-comments .dc-comment__avatar,
html[data-scheme="default"] #dc-comments .dc-comment__avatar {
    border-radius: 50%; width: 40px; height: 40px;
    flex-shrink: 0; border: 2px solid #d2d7e0 !important;
}
html #dc-comments .dc-comment__meta { flex: 1; min-width: 0; }

html #dc-comments .dc-comment__name,
html[data-scheme="default"] #dc-comments .dc-comment__name {
    font-weight: 700; font-size: .92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #000000 !important;
}
html #dc-comments .dc-comment__date,
html[data-scheme="default"] #dc-comments .dc-comment__date {
    font-size: .77rem; color: #5a6078 !important; margin-top: 2px;
}
html #dc-comments .dc-comment__body,
html[data-scheme="default"] #dc-comments .dc-comment__body {
    font-size: .95rem; line-height: 1.7; margin: 0 0 10px;
    word-break: break-word; padding-left: 52px;
    color: #000000 !important; font-weight: 400;
}
html #dc-comments .dc-comment__actions {
    display: flex; align-items: center; gap: 2px; padding-left: 48px;
}

/* Replies */
html #dc-comments .dc-replies { margin-top: 10px; padding-left: 52px; }
html #dc-comments .dc-reply,
html[data-scheme="default"] #dc-comments .dc-reply {
    padding: 14px 0 14px 16px;
    border-left: 2.5px solid rgba(77,82,226,0.15) !important;
    border-bottom: 1px solid #d2d7e0 !important;
    margin-bottom: 2px; border-radius: 0 0 0 4px;
}
html #dc-comments .dc-reply:last-child { border-bottom: none !important; }
html #dc-comments .dc-reply .dc-comment__body    { padding-left: 42px; }
html #dc-comments .dc-reply .dc-comment__actions { padding-left: 38px; }
html #dc-comments .dc-reply .dc-comment__avatar  { width: 30px; height: 30px; }

/* Reply form */
html #dc-comments .dc-reply-form,
html[data-scheme="default"] #dc-comments .dc-reply-form {
    margin: 12px 0 4px 52px; background: #e9edf1 !important;
    border: 1px solid #d2d7e0 !important; border-radius: var(--dc-radius-sm);
    padding: 14px; display: none;
}
html #dc-comments .dc-reply-form.is-open { display: block; animation: dcFadeIn .18s ease; }
html #dc-comments .dc-reply-form__footer { margin-top: 10px; display: flex; gap: 8px; }

/* Empty/error */
html #dc-comments .dc-empty,
html[data-scheme="default"] #dc-comments .dc-empty {
    text-align: center; padding: 44px 20px;
    color: #5a6078 !important; font-size: .94rem;
}
html #dc-comments .dc-empty--error { color: #d63355 !important; }

/* Spinner */
html #dc-comments .dc-spinner {
    width: 26px; height: 26px; border: 3px solid #d2d7e0;
    border-top-color: #4d52e2; border-radius: 50%;
    animation: dcSpin .65s linear infinite; margin: 0 auto; display: none;
}
html #dc-comments .dc-spinner.is-active { display: block; }
@keyframes dcSpin { to { transform: rotate(360deg); } }
html #dc-comments .dc-list__footer { display: flex; justify-content: center; margin-top: 28px; }

/* Avatar */
html #dc-comments .dc-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #ffffff !important; font-weight: 700;
    flex-shrink: 0; line-height: 1; padding: 0; user-select: none;
}
html #dc-comments .dc-user-bar .dc-avatar { border: 2px solid #4d52e2 !important; }
html #dc-comments .dc-comment__avatar.dc-avatar { width: 40px; height: 40px; font-size: 18px; }
html #dc-comments .dc-reply .dc-comment__avatar.dc-avatar { width: 30px; height: 30px; font-size: 13px; }

/* Accessibility */
html #dc-comments .dc-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Header layout */
html #dc-comments .dc-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 28px; flex-wrap: wrap; gap: 12px;
}

/* ════════════════════════════════════════════════════════════
   ТЁМНАЯ ТЕМА  html[data-scheme="dark"]
   Фон страницы: #232323 | текст: #ffffff
   ════════════════════════════════════════════════════════════ */

html[data-scheme="dark"] #dc-comments { color: #ffffff !important; }

html[data-scheme="dark"] #dc-comments .dc-title        { color: #ffffff !important; }
html[data-scheme="dark"] #dc-comments .dc-count        { color: #4d52e2 !important; }
html[data-scheme="dark"] #dc-comments .dc-user-name    { color: #ffffff !important; }

html[data-scheme="dark"] #dc-comments .dc-auth {
    background: #2a2a2a !important; border-color: #3a3a3a !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.45);
}
html[data-scheme="dark"] #dc-comments .dc-auth__hint   { color: #9090a8 !important; }
html[data-scheme="dark"] #dc-comments .dc-auth__hint strong { color: #ffffff !important; }
html[data-scheme="dark"] #dc-comments .dc-auth__msg    { color: #9090a8 !important; }
html[data-scheme="dark"] #dc-comments .dc-auth__msg.is-error { color: #d63355 !important; }
html[data-scheme="dark"] #dc-comments .dc-auth__msg.is-ok    { color: #1a9d5c !important; }

html[data-scheme="dark"] #dc-comments .dc-input {
    background: #2e2e2e !important; border-color: #3a3a3a !important;
    color: #ffffff !important;
}
html[data-scheme="dark"] #dc-comments .dc-input::placeholder { color: #9090a8 !important; opacity: .7; }
html[data-scheme="dark"] #dc-comments .dc-input:focus {
    border-color: #4d52e2 !important;
    box-shadow: 0 0 0 3.5px rgba(77,82,226,0.18) !important;
}

html[data-scheme="dark"] #dc-comments .dc-btn--primary { background: #4d52e2 !important; color: #ffffff !important; }
html[data-scheme="dark"] #dc-comments .dc-btn--primary:hover { background: #3c41cc !important; }

html[data-scheme="dark"] #dc-comments .dc-btn--ghost {
    background: transparent !important; border-color: #3a3a3a !important; color: #ffffff !important;
}
html[data-scheme="dark"] #dc-comments .dc-btn--ghost:hover {
    border-color: #4d52e2 !important; color: #4d52e2 !important;
    background: rgba(77,82,226,0.18) !important;
}
html[data-scheme="dark"] #dc-comments .dc-btn--link   { color: #9090a8 !important; }
html[data-scheme="dark"] #dc-comments .dc-btn--link:hover { color: #4d52e2 !important; }
html[data-scheme="dark"] #dc-comments .dc-btn--action { color: #9090a8 !important; }
html[data-scheme="dark"] #dc-comments .dc-btn--action:hover { color: #4d52e2 !important; background: rgba(77,82,226,0.18) !important; }
html[data-scheme="dark"] #dc-comments .dc-btn--action.is-liked { color: #4d52e2 !important; }
html[data-scheme="dark"] #dc-comments .dc-btn--delete { color: #9090a8 !important; }
html[data-scheme="dark"] #dc-comments .dc-btn--delete:hover { color: #d63355 !important; }

html[data-scheme="dark"] #dc-comments .dc-compose {
    background: #2a2a2a !important; border-color: #3a3a3a !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.45);
}
html[data-scheme="dark"] #dc-comments .dc-char-count         { color: #9090a8 !important; }
html[data-scheme="dark"] #dc-comments .dc-char-count.is-warn { color: #e08030 !important; }
html[data-scheme="dark"] #dc-comments .dc-char-count.is-over { color: #d63355 !important; }

html[data-scheme="dark"] #dc-comments .dc-comment       { border-bottom-color: #3a3a3a !important; }
html[data-scheme="dark"] #dc-comments .dc-comment__avatar { border-color: #3a3a3a !important; }
html[data-scheme="dark"] #dc-comments .dc-comment__name { color: #ffffff !important; }
html[data-scheme="dark"] #dc-comments .dc-comment__date { color: #9090a8 !important; }
html[data-scheme="dark"] #dc-comments .dc-comment__body { color: #ffffff !important; font-weight: 400; }

html[data-scheme="dark"] #dc-comments .dc-reply {
    border-left-color: rgba(77,82,226,0.25) !important;
    border-bottom-color: #3a3a3a !important;
}
html[data-scheme="dark"] #dc-comments .dc-reply-form {
    background: #232323 !important; border-color: #3a3a3a !important;
}
html[data-scheme="dark"] #dc-comments .dc-empty { color: #9090a8 !important; }
html[data-scheme="dark"] #dc-comments .dc-spinner { border-color: #3a3a3a; border-top-color: #4d52e2; }

/* ════════════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    html #dc-comments { padding: 0 12px 40px; }
    html #dc-comments .dc-auth { padding: 20px 16px; }
    html #dc-comments .dc-auth__row { flex-direction: column; }
    html #dc-comments .dc-auth__row .dc-btn { width: 100%; justify-content: center; }
    html #dc-comments .dc-input--code { max-width: 100%; text-align: left; }
    html #dc-comments .dc-compose { padding: 16px; }
    html #dc-comments .dc-replies { padding-left: 20px; }
    html #dc-comments .dc-comment__body    { padding-left: 42px; }
    html #dc-comments .dc-comment__actions { padding-left: 42px; }
    html #dc-comments .dc-reply-form { margin-left: 20px; }
}