html[data-cf-textsize="small"] { font-size: 93.75%; }
html[data-cf-textsize="large"] { font-size: 112.5%; }
html[data-cf-layout="compact"] .container { max-width: 1080px; }

html[data-cf-theme="dark"] body,
html[data-cf-theme="dark"] .main-header,
html[data-cf-theme="dark"] .main-footer {
    background-color: #111827 !important;
    color: #e5e7eb !important;
}
html[data-cf-theme="dark"] .main-header,
html[data-cf-theme="dark"] .main-footer { border-color: #374151 !important; }
html[data-cf-theme="dark"] .main-header :is(a, button, .nav-link),
html[data-cf-theme="dark"] .main-footer :is(a, p, h4, span) { color: #e5e7eb; }
html[data-cf-theme="dark"] .main-header .dropdown-menu,
html[data-cf-theme="dark"] .main-header .mobile-menu { background: #1f2937; }

.cf-display-settings { position: relative; font-size: 13px; }
.cf-display-settings > summary { cursor: pointer; color: #526174; }
.cf-display-settings-panel {
    position: absolute; z-index: 30; right: 0; bottom: calc(100% + 8px);
    display: grid; gap: 10px; width: min(260px, calc(100vw - 32px));
    padding: 14px; border: 1px solid #d8dee8; border-radius: 12px;
    background: #fff; color: #172033; box-shadow: 0 12px 32px #17203324;
}
.cf-display-settings-panel label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cf-display-settings-panel select,
.cf-display-settings-panel button { min-height: 36px; padding: 5px 9px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #172033; }
.cf-display-settings-panel button { cursor: pointer; }
@media (max-width: 680px) {
    .cf-display-settings-panel { right: auto; left: 0; }
    html[data-cf-layout="compact"] .container { padding-right: 16px; padding-left: 16px; }
}