@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700;900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/turntablz-bb');

html { color-scheme: dark; }

* {
    font-family: 'Google Sans', 'Montserrat', system-ui, sans-serif;
}

.synk-wordmark {
    font-family: 'Turntablz BB', 'Red Hat Display', sans-serif;
    letter-spacing: 0.05em;
}

iconify-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.225em;
    font-size: 1.4em;
    flex-shrink: 0;
    line-height: 1;
}

button > iconify-icon,
a > iconify-icon {
    font-size: 1.5em;
}

#msgBody img { max-width: 100%; height: auto; }
#msgBody a { color: #e8e3d8; text-decoration: underline; }

.wm-input {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    outline: none;
    transition: border-color 0.15s ease;
}
.wm-input:focus { border-color: rgba(255,255,255,0.3); }

.wm-btn {
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    transition: background 0.15s ease;
    cursor: pointer;
}
.wm-btn:hover { background: rgba(255,255,255,0.1); }
.wm-btn:disabled { opacity: 0.5; cursor: default; }

select.wm-input { appearance: none; cursor: pointer; }
.wm-input option { background: #1f1f1f; color: #fff; }

.ce-tool {
    padding: 0.35rem;
    border-radius: 0.375rem;
    color: rgba(255,255,255,0.75);
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
}
.ce-tool:hover { background: rgba(255,255,255,0.1); color: #fff; }

#cBody:empty:before {
    content: attr(data-placeholder);
    color: rgba(255,255,255,0.35);
}
#cBody a { color: #e8e3d8; text-decoration: underline; }
#cBody ul { list-style: disc; padding-left: 1.5rem; }
#cBody ol { list-style: decimal; padding-left: 1.5rem; }

.more-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: #fff;
    text-align: left;
    transition: background 0.15s;
}
.more-item:hover { background: rgba(255,255,255,0.1); }
.more-item iconify-icon { font-size: 1.1rem; color: rgba(255,255,255,0.7); }