/* Existing style.css and rich-editor.css own the original palette.
   Only components introduced today need these color rules. */
.service-switch a{color:var(--muted)}
.service-switch a:hover{background:#eceee6}
.service-switch a[aria-current=page]{background:var(--lime);color:var(--ink);border-color:#d5dd9c}
.service-mark{background:var(--red)}
.service-mark.studio{background:#c4de36;border-color:#697b14}
.service-mark.flow{background:#ffda35;border-color:#806b0e}
.text-tools .button,.media-tools{background:var(--white);color:var(--ink)}
.image-tools .button{background:var(--paper);color:var(--ink)}
@media(max-width:800px){.service-switch{background:var(--white)}}

/* Matte black navigation shell; original content and accent colors stay intact. */
.sidebar{background:#111111}
.sidebar nav button:hover{background:#292929}
.sidebar nav button.active:hover{background:var(--lime);color:var(--ink)}
.project-switch select{background:#222222;border-color:#555555}
.sidebar-bottom .potok-link{background:#191919;border-color:#494949}
.sidebar-bottom .potok-link:hover{background:#222222;border-color:#666666}
@media(max-width:800px){.sidebar nav,.mobile-project-switch{background:#111111}}

/* The former dark olive role is matte black everywhere in the editor. */
:root{--ink:#111111}
.login-art,.mini-logo,.button.dark,.segmented label:has(input:checked),#toast{background:#111111}
.button.dark{border-color:#111111}
nav b{background:#111111}
nav button.active,nav button.active:hover,.potok-symbol{color:#111111}
.instagram-entry:hover{background:#292929}
.post img,.post video,.media-choice video{background:#111111}
dialog::backdrop{background:#11111199}
.text-tool[aria-pressed=true],.text-link-actions button:first-child{background:#111111;border-color:#111111;color:#fff}
.text-tool{color:#111111}
.orb{border-color:#555;box-shadow:0 0 0 38px #222,0 0 0 39px #555,0 0 0 80px #191919,0 0 0 81px #444}
.preparation-usage b,.accept-news,.schedule-day-switch button[aria-pressed=true],.schedule-day-switch button:hover,.tg-pre{color:#111111}
.schedule-day-switch button[aria-pressed=true]{box-shadow:0 1px 3px #1111111a}
@media(max-width:800px){.preview>.actions{box-shadow:0 -5px 15px #1111110a}}

/* Same accent as the live Instagram studio (--accent: #d6f54b). */
:root{--lime:#d6f54b}
.days label:has(input:checked),.service-switch a[aria-current=page]{border-color:#b8d437}
.service-mark.studio{background:var(--lime);border-color:#697b14}
.sidebar-bottom .potok-link{border-color:#d6f54b30}
.sidebar-bottom .potok-link:hover{border-color:#d6f54b68}