.comments-sdk {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin: 2rem 0
}

.comments-light {
    --cs-bg-primary: #ffffff;
    --cs-bg-secondary: #f5f5f5;
    --cs-text-primary: #1a1a1a;
    --cs-text-secondary: #666666;
    --cs-text-muted: #999999;
    --cs-border: #e0e0e0;
    --cs-accent: #0066ff;
    --cs-accent-hover: #0052cc;
    --cs-success: #00aa00;
    --cs-error: #dd3333;
    --cs-warning: #ff9900
}

.comments-dark {
    --cs-bg-primary: #1e1e2e;
    --cs-bg-secondary: #151521;
    --cs-text-primary: #ffffff;
    --cs-text-secondary: #b0b0b0;
    --cs-text-muted: #808080;
    --cs-border: #2a2a3e;
    --cs-accent: #00ff88;
    --cs-accent-hover: #00cc6a;
    --cs-success: #00ff88;
    --cs-error: #ff4444;
    --cs-warning: #ffaa00
}

.comments-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important
}

.comments-form-wrapper {
    background: rgb(255 251 251);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #373737;
    margin-bottom: 2rem
}

.comments-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 .5rem 0;
    color: var(--cs-text-primary)
}

.comments-notice {
    font-size: .85rem;
    color: var(--cs-warning);
    margin: 0 0 1rem 0;
    padding: .5rem;
    background: rgba(255, 153, 0, .1);
    border-left: 3px solid var(--cs-warning);
    border-radius: 4px
}

.comments-form {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.comments-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem
}

@media (min-width: 600px) {
    .comments-form-row {
        grid-template-columns: 1fr 1fr
    }
}

.comments-input,
.comments-textarea {
    width: 100%;
    padding: .75rem;
    background: #f6f6f6;
    border: 1px solid #616161;
    border-radius: 6px;
    color: black;
    font-family: inherit;
    font-size: .95rem;
    transition: all .2s ease;
    box-sizing: border-box
}

.comments-input:focus,
.comments-textarea:focus {
    outline: 0;
    border-color: #d4b60e;
    box-shadow: 0 0 0 3px rgba(126, 97, 3, 0.1)
}

.comments-dark .comments-input:focus,
.comments-dark .comments-textarea:focus {
    box-shadow: 0 0 0 3px rgba(0, 255, 136, .1)
}

.comments-textarea {
    resize: vertical;
    min-height: 100px
}

.comments-char-count {
    font-size: .85rem;
    color: var(--cs-text-muted);
    text-align: right;
    margin-top: -.5rem
}

.comments-submit {
    padding: .75rem 1.5rem;
    background: rgb(63 6 6);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    align-self: flex-start
}

.comments-submit:hover:not(:disabled) {
    background: rgb(110, 40, 13);
    transform: translateY(-1px)
}

.comments-submit:disabled {
    opacity: .6;
    cursor: not-allowed
}

.comments-message {
    margin-top: 1rem;
    padding: .75rem;
    border-radius: 6px;
    font-size: .9rem
}

.comments-message-success {
    background: rgba(0, 170, 0, .1);
    color: var(--cs-success);
    border: 1px solid var(--cs-success)
}

.comments-message-error {
    background: rgba(221, 51, 51, .1);
    color: var(--cs-error);
    border: 1px solid var(--cs-error)
}

.comments-list-wrapper {
    background: rgb(255 251 251);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #373737;
}

.comments-count-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    color: var(--cs-text-primary)
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.comments-empty,
.comments-error,
.comments-loading {
    text-align: center;
    padding: 2rem;
    color: var(--cs-text-secondary);
    font-style: italic
}

.comments-error {
    color: var(--cs-error)
}

.comments-item {
    background: var(--cs-bg-secondary);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--cs-border);
    transition: all .2s ease
}

.comments-item:hover {
    border-color: var(--cs-accent)
}

.comments-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
    flex-wrap: wrap;
    gap: .5rem
}

.comments-author {
    font-weight: 600;
    color: var(--cs-text-primary);
    font-size: .95rem
}

.comments-date {
    font-size: .85rem;
    color: var(--cs-text-muted)
}

.comments-item-text {
    color: var(--cs-text-secondary);
    line-height: 1.6;
    word-wrap: break-word
}

.comments-load-more {
    margin-top: 1.5rem;
    padding: .75rem 1.5rem;
    background: 0 0;
    color: var(--cs-accent);
    border: 2px solid var(--cs-accent);
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    width: 100%
}

.comments-load-more:hover {
    background: var(--cs-accent);
    color: #fff;
    transform: translateY(-1px)
}

@media (max-width: 599px) {
    .comments-sdk {
        font-size: 14px
    }

    .comments-form-wrapper,
    .comments-list-wrapper {
        padding: 1rem
    }

    .comments-count-title,
    .comments-title {
        font-size: 1.1rem
    }
}

@media print {
    .comments-form-wrapper {
        display: none
    }
}