.tgauth-submit-btn {
    border-radius: 24px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 18px 18px !important;
    padding-right: 46px !important;
}

.tgauth-logout-line {
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.tgauth-logout-line a {
    font-family: inherit;
}

.tgauth-highlighted-comment {
    background-color: rgba(153, 186, 146, .18);
    border-radius: 8px;
    padding: 10px;
    margin: -10px;
    transition: background-color 1.5s ease;
}

/* ============================================================
 * COMMENT LIST STYLING (YouTube-inspired)
 * ============================================================ */

/* commenter name - sans-serif, regardless of the theme's font */
.comment-author .fn,
.comment-author .fn a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* name and date - on the same line, date to the right of the name (date format left untouched) */
.comment-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
}

.comment-metadata {
    margin: 0;
}

/* remove the gray divider line between a comment and its replies -
   the source is unclear (not one of our styles), so we suppress the most likely spots */
.comment-list .comment-body,
.comment-list .children,
.comment-list li.comment {
    border: none !important;
    box-shadow: none !important;
}

/* reply nesting - a clear block on the left, so it's obvious who's replying
   to whom (similar to the bordered block in the reference) */
.comment-list .children {
    margin: 8px 0 0;
    padding: 0 0 0 16px;
    border-left: 3px solid #d8d8d8;
}

/* like on YouTube - replies to replies don't keep shifting further right,
   they stay at the same level as the first row of replies (no growing indentation) */
.comment-list .children .children {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* less breathing room between neighboring comments/replies */
.comment-list .comment-body {
    margin-bottom: 0;
}

.comment-list li.comment {
    margin-bottom: 4px;
}

.comment-author .avatar {
    border-radius: 50%;
}

/* the site admin's badge - a dark pill with the name, like a "channel author" on YouTube */
.tgauth-admin-badge {
    display: inline-block;
    background: #0f0f0f;
    color: #fff !important;
    padding: 2px 10px;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
}

.tgauth-comment-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    margin: 20px 0 14px;
    background-color: #99BA92;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.tgauth-pattern-layer {
    position: absolute;
    inset: 0;
    background-image: url(../pattern.svg);
    background-repeat: repeat;
    background-size: 320px 657px;
    opacity: .32;
    pointer-events: none;
}

.tgauth-inner {
    position: relative;
    padding: 18px;
}

.tgauth-textarea {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    font-size: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border: 0;
    border-radius: 16px;
    resize: none;
    overflow-y: hidden;
    display: block;
    opacity: .85;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.tgauth-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 14px;
    background: #2AABEE;
    color: #fff;
    border: 0;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.tgauth-login-button:hover,
.tgauth-login-button:focus,
.tgauth-login-button:active,
.tgauth-login-button:visited {
    background: #2AABEE;
    color: #fff;
}

/* while the panel is open - the button visually merges with it: no gap,
   bottom corners not rounded, so it reads as one solid block */
.tgauth-login-button--active {
    background: #1690d0;
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tgauth-login-button svg {
    margin-right: 8px;
    flex-shrink: 0;
}

.tgauth-panel {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
    background-color: #ebebeb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.tgauth-panel--hidden {
    display: none;
}

.tgauth-panel-pattern {
    position: absolute;
    inset: 0;
    background-image: url(../pattern.svg);
    background-repeat: repeat;
    background-size: 320px 657px;
    opacity: .32;
    pointer-events: none;
}

.tgauth-panel-inner {
    /* opacity of the backdrop behind all the panel's content - tweak this
       one number to adjust it */
    --tgauth-steps-bg-opacity: .75;
    position: relative;
    padding: 16px;
    background: rgba(255, 255, 255, var(--tgauth-steps-bg-opacity));
}

.tgauth-panel-inner p {
    margin: 0 0 16px;
    line-height: 1.6;
}

.tgauth-bot-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2AABEE;
    color: #fff;
    padding: 14px;
    border-radius: 24px;
    text-decoration: none;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
}

.tgauth-bot-link svg {
    margin-right: 8px;
    flex-shrink: 0;
}

.tgauth-code-input {
    display: block;
    width: 100%;
    height: 52px;
    margin-bottom: 14px;
    padding: 0 14px;
    border: 2px solid #2AABEE;
    border-radius: 24px;
    font-size: 17px;
    text-align: center;
    letter-spacing: 4px;
    box-sizing: border-box;
    outline: none;
    background: #ececec;
    color: #333;
    opacity: .85;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.tgauth-code-input::placeholder {
    color: #aaa;
    letter-spacing: 4px;
}

.tgauth-code-input:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.tgauth-confirm-btn {
    width: 100%;
    padding: 14px;
    background: #333;
    color: #fff;
    border: 0;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    cursor: pointer;
}

.tgauth-confirm-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.tgauth-error-text {
    color: #c00;
    font-size: 13px;
    margin-bottom: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.tgauth-hint-text {
    color: #8a8a8a;
    font-size: 13px;
    margin: -6px 0 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}