:root { --studio-accent: #ffd326; --studio-ink: #151515; --studio-soft: color-mix(in srgb, var(--studio-accent) 20%, var(--color-background)); }
html, html[data-theme="dark"] { --color-primary: var(--studio-accent); --color-on-primary: var(--studio-ink); }
.button-primary, html[data-theme="dark"] .button-primary, .whatsapp-float, .service-image .service-icon, .mini-browser-square, .about-points .bi, .admin-push-button[aria-pressed="true"], .developer-page .button-light { background: var(--studio-accent); color: var(--studio-ink); border-color: var(--studio-accent); }
.button-primary:hover, html[data-theme="dark"] .button-primary:hover { background: color-mix(in srgb, var(--studio-accent) 88%, #151515); }
.hero h1 em { background: var(--studio-accent); color: var(--studio-ink); }
.contact-simple, html[data-theme="dark"] .contact-simple { background: var(--studio-soft); color: var(--color-text); }
.brand-name .brand-slashes, html[data-theme="dark"] .brand-name .brand-slashes { color: color-mix(in srgb, var(--studio-accent) 65%, var(--color-text)); }
.developer-page h1 em, .brand-footer .brand-name .brand-slashes { color: var(--studio-accent); }
.visitor-notifications, .visitor-preferences, .owner-panel-link { position: relative; width: 32px; height: 32px; flex-shrink: 0; font-size: 18px; border-radius: 9px; }
.service-card h3, .settings-category summary { overflow-wrap: anywhere; }
.visitor-notifications.has-unread { color: var(--color-text); background: var(--studio-soft); }
.visitor-notification-count { position: absolute; right: -4px; top: -5px; min-width: 16px; height: 16px; font-size: 9px; border: 2px solid var(--color-background); }
.notification-panel, .appearance-dialog { width: min(440px, calc(100vw - 30px)); padding: 34px 26px 26px; }
.notification-panel h2, .appearance-dialog h2, .owner-settings h2 { font-size: 27px; padding-right: 22px; }
.settings-note { color: var(--color-text-muted); font-size: 12px; line-height: 1.7; margin: 12px 0 22px; }
.notification-items { display: grid; gap: 10px; margin-bottom: 20px; }
.notification-item { display: flex; align-items: center; gap: 12px; text-align: left; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 15px 12px; }
.notification-item > .bi { font-size: 22px; }
.notification-item > span { display: grid; gap: 5px; flex: 1; min-width: 0; }
.notification-item strong { font-size: 13px; }
.notification-item small { font-size: 12px; overflow-wrap: anywhere; }
.notification-item code { font-size: 10px; color: var(--color-text-muted); }
.notification-item:hover { border-color: var(--studio-accent); }
.notifications-empty { padding: 22px 15px; text-align: center; color: var(--color-text-muted); font-size: 13px; line-height: 1.7; }
.notifications-empty > .bi { display: block; font-size: 27px; margin-bottom: 12px; }
.appearance-dialog fieldset, .owner-settings fieldset { border: 1px solid var(--color-border); border-radius: 10px; padding: 15px; margin: 18px 0; min-width: 0; }
.appearance-dialog legend, .owner-settings legend { font-size: 12px; font-weight: 600; padding: 0 5px; }
.accent-options { display: flex; gap: 8px; flex-wrap: wrap; }
.accent-options button { min-width: 36px; height: 36px; border: 2px solid transparent; border-radius: 8px; background: var(--swatch); color: #151515; font-size: 11px; padding: 0 8px; }
.accent-options button[aria-pressed="true"] { outline: 2px solid var(--color-text); outline-offset: 2px; }
.accent-options button .bi { visibility: hidden; }
.accent-options button[aria-pressed="true"] .bi { visibility: visible; font-size: 18px; }
.settings-field { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.6; margin: 14px 0; }
.settings-field input:not([type="color"]), .settings-field textarea, .settings-field select { width: 100%; min-width: 0; color: var(--color-text); background: var(--color-background); border: 1px solid var(--color-border); border-radius: 7px; padding: 11px; font: inherit; font-size: 13px; }
.settings-field input[type="color"] { width: 74px; height: 42px; padding: 3px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-background); }
.settings-field textarea { resize: vertical; }
.settings-field input:focus-visible, .settings-field select:focus-visible, .settings-field textarea:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 2px; }
.appearance-dialog .button { margin-top: 10px; }
.appearance-dialog .chat-text-button { width: 100%; margin-top: 13px; }
.owner-settings { width: min(760px, calc(100vw - 30px)); padding: 34px 28px 24px; }
.settings-category { border-top: 1px solid var(--color-border); padding: 17px 0; }
.settings-category > summary { cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.6; }
.settings-languages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-languages fieldset { margin: 12px 0 0; }
.settings-check { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.settings-check input { accent-color: var(--studio-accent); }
.settings-actions { display: flex; gap: 10px; position: sticky; bottom: -24px; padding: 15px 0; background: var(--color-background); border-top: 1px solid var(--color-border); }
.settings-actions .button { width: auto; flex: 1; font-size: 12px; }
.settings-feedback { font-size: 13px; line-height: 1.6; padding: 12px; border-radius: 8px; background: var(--studio-soft); margin: 14px 0; }
.language-loading { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 14px; background: color-mix(in srgb, var(--color-background) 94%, transparent); color: var(--color-text); font-size: 14px; font-weight: 550; backdrop-filter: blur(5px); animation: loading-arrive .12s ease; cursor: default; }
.loading-spinner { width: 27px; height: 27px; border-radius: 50%; border: 3px solid var(--color-border); border-top-color: var(--studio-accent); animation: loading-spin .7s linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-arrive { from { opacity: .5; } to { opacity: 1; } }
html[data-density="compact"] .hero { padding-block: 22px; }
html[data-density="compact"] .services-section { padding-block: 18px 26px; }
html[data-density="compact"] .service-card > p { margin-block: 6px 10px; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (max-width: 1050px) and (min-width: 701px) { .main-nav { gap: 14px; } .header-controls { gap: 5px; } .brand-mark { display: none; } }
@media (max-width: 700px) {
  .settings-languages { grid-template-columns: 1fr; gap: 0; }
  .owner-settings { padding-inline: 20px; }
  .admin-header-actions { gap: 5px; }
  .admin-header-actions .icon-button { width: 29px; height: 29px; font-size: 18px; }
}
@media (max-width: 480px) {
  .site-header .brand-mark { display: none; }
  .site-header .brand { gap: 0; }
  .site-header .brand-name { font-size: 16px; }
  .site-header .brand-name > span:not(.brand-slashes) { font-size: 11px; }
  .site-header .brand-name small { font-size: 7px; }
  .site-header .header-controls { gap: 2px; }
  .site-header .header-controls .icon-button { width: 27px; height: 30px; font-size: 16px; }
  .site-header .language-switch { gap: 1px; }
  .site-header .language-switch button { min-width: 21px; padding-inline: 2px; font-size: 10px; }
  .site-header .language-switch > span { font-size: 9px; }
  .site-header .header-inner { gap: 6px; }
  .visitor-notification-count { right: -2px; top: -1px; }
}
@media (prefers-reduced-motion: reduce) { .loading-spinner { animation: none; } .language-loading { animation: none; } }