/* Picmock: quiet surfaces, clear controls, image-led browsing. */
:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --panel-alt: #f2f4f6;
  --text: #232323;
  --muted: #676767;
  --line: #e4e7eb;
  --accent: #272b30;
  --accent-dark: #272b30;
  --accent-warm: #c0c0c0;
  --accent-rgb: 39, 43, 48;
  --shadow: 0 8px 24px rgba(36, 36, 36, .06);
  --ui-radius: 8px;
  --home-max: 1240px;
}
body.theme-freepik:not([data-ui-theme="dark"]) {
  --bg: #f7f8fa; --panel: #fff; --panel-alt: #f2f4f6;
  --text: #232323; --muted: #676767; --line: #e4e7eb;
  --accent: #e5e7eb; --accent-dark: #e5e7eb; --accent-warm: #c0c0c0;
  --accent-rgb: 229, 231, 235; --shadow: 0 8px 24px rgba(36, 36, 36, .06);
}
body { background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif; -webkit-font-smoothing: antialiased; }
body[data-ui-theme="dark"] { background: var(--bg); }
button, input, select, textarea { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }
.btn { min-height: 36px; border-radius: var(--ui-radius); font-weight: 500; letter-spacing: 0; gap: 8px; transition: background .18s, border-color .18s, color .18s; white-space: nowrap; }
.btn-primary, .theme-freepik .btn-primary { background: var(--accent); color: #fff; box-shadow: none; border: 1px solid transparent; }
.btn-primary:hover, .theme-freepik .btn-primary:hover { background: var(--accent-dark); }
.btn-outline, .btn-ghost, .theme-freepik .btn-ghost { background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.btn-outline:hover, .btn-ghost:hover { background: var(--panel-alt); border-color: #bdbdbd; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; }
.brand-dot { box-shadow: none; background: var(--accent); }
.app-workbench-brand .brand-name { letter-spacing: -.6px; }
.app-workbench-sidebar { background: var(--bg); border-right: 1px solid var(--line); }
.app-workbench-link { border-radius: 8px; font-weight: 450; }
.app-workbench-link.active { color: var(--accent); background: rgba(var(--accent-rgb), .075); }
.app-workbench-separator { background: var(--line); }
.theme-freepik .cms-card, .cms-card { border: 1px solid var(--line); border-radius: 10px; box-shadow: none; background: var(--panel); }
.theme-freepik .cms-topbar { background: var(--panel); border-bottom: 1px solid var(--line); }
.theme-freepik .cms-main { background: var(--bg); }
.theme-freepik .cms-logo-mark { background: var(--accent); }
.theme-freepik .nav-item.active { background: rgba(var(--accent-rgb), .075); color: var(--accent); }
:where(.cms-form, .auth-modal, .pricing-page) :where(input, textarea, select) { border-radius: 8px; border-color: var(--line); box-shadow: none; }

/* Shared navigation also mounts on the static tool pages. */
.topbar {
  flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr auto;
  height: 80px; min-height: 80px; gap: 48px;
  width: 100%; max-width: none; margin-inline: 0; box-sizing: border-box;
  padding: 0 24px;
  background: var(--panel); color: var(--text); border-bottom: 1px solid var(--line);
  box-shadow: none; z-index: 40;
}
.topbar .brand { font-family: inherit; gap: 10px; font-size: 25px; font-weight: 650; letter-spacing: -.9px; }
.topbar .brand-dot { width: 10px; height: 10px; border-radius: 3px; }
.topbar .nav { margin: 0; gap: 26px; flex-wrap: nowrap; min-width: 0; }
.topbar .nav-link, .topbar .products-trigger { font-family: inherit; font-size: 14px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.topbar .products-trigger { padding: 8px 0; height: 40px; border-radius: 6px; }
.topbar .nav-link:hover, .topbar .products-trigger:hover { color: var(--text); background: transparent; }
.topbar-user { display: flex; align-items: center; gap: 16px; }
.topbar-lang-trigger { height: 40px; max-width: 136px; padding: 8px 0; border-radius: 6px; }
.topbar .topbar-signin { width: auto; height: 40px; border: 0; background: transparent; box-shadow: none; padding: 0 6px; color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap; }
.topbar-signin .user-avatar { display: none; }
.topbar-start { display: inline-flex; align-items: center; justify-content: center; gap: 16px; height: 42px; padding: 0 20px; border-radius: 8px; color: #fff; background: #282828; text-decoration: none; font-size: 14px; font-weight: 550; white-space: nowrap; transition: background .18s; }
.topbar-start:hover { background: #484848; color: #fff; }
.topbar-start span { font-size: 17px; font-weight: 400; }
.topbar .products-panel, .topbar-lang-menu, .user-dropdown { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(29, 29, 29, .09); background: var(--panel); color: var(--text); }
.topbar .products-panel { width: min(620px, calc(100vw - 48px)); padding: 16px; }
.topbar .products-group-label, .topbar .products-link-copy small { color: var(--muted); }
.topbar .products-link:hover { background: var(--panel-alt); }
.topbar .products-icon { border: 0; background: var(--panel-alt); color: var(--muted); border-radius: 8px; }
.topbar-nav-toggle { display: none; }

/* Homepage */
.seo-home.home-gallery { display: block; min-height: 0; padding: 0; gap: 0; background: var(--panel); overflow-y: auto; scroll-behavior: smooth; scroll-padding-top: 32px; }
.home-container { width: min(var(--home-max), calc(100% - 64px)); margin: 0 auto; }
.home-intro { padding: 66px 0 42px; }
.home-eyebrow { margin: 0 0 24px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: .025em; }
.home-intro h1 { max-width: 1120px; margin: 0; font-size: clamp(38px, 4.7vw, 64px); line-height: 1.24; font-weight: 600; letter-spacing: -.035em; color: var(--text); }
.home-intro h1 > span { display: block; }
.home-intro-description { margin: 22px 0 30px; font-size: 15px; line-height: 1.8; color: var(--muted); max-width: 65ch; }
.home-search { display: flex; align-items: center; gap: 16px; min-height: 64px; width: 100%; border: 1px solid #dcdcdc; border-radius: 12px; padding: 8px 10px 8px 22px; background: var(--panel); transition: border-color .18s, box-shadow .18s; }
.home-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .09); }
.home-search-icon { display: inline-flex; color: var(--muted); flex: 0 0 22px; }
.home-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: 16px; padding: 8px 0; outline: none; box-shadow: none; }
.home-search input::placeholder { color: var(--muted); opacity: 1; }
.home-search button { border: 0; border-radius: 7px; background: var(--panel-alt); color: var(--text); display: flex; gap: 20px; align-items: center; padding: 0 20px; height: 44px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .18s; }
.home-search button:hover { background: #e4e8ed; }
.home-quick-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.home-quick-links button { display: flex; align-items: center; gap: 16px; border: 0; border-radius: 24px; padding: 8px 15px; background: var(--panel-alt); color: var(--muted); font-size: 12px; line-height: 1.4; cursor: pointer; transition: color .18s, background .18s; }
.home-quick-links button:hover { background: #e8edf2; color: var(--text); }
.home-quick-links button span { font-size: 13px; }
.home-collections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 30px 0 54px; border-top: 1px solid var(--line); }
.home-collection { display: block; min-width: 0; border: 0; padding: 0; background: transparent; text-align: start; color: var(--text); cursor: pointer; }
.home-collection-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 16px; font-weight: 550; }
.home-collection-arrow { font-size: 20px; color: var(--muted); transition: transform .2s; }
.home-collection:hover .home-collection-arrow { transform: translate(2px, -2px); }
.home-collection-image { display: block; overflow: hidden; border-radius: 12px; background: var(--panel-alt); aspect-ratio: 1.35; }
.home-collection-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.home-collection:hover img { transform: scale(1.035); }
.home-collection-collection img { object-position: center 42%; }
.home-collection-caption { display: block; padding-top: 12px; color: var(--muted); font-size: 12px; }
.home-library { padding: 38px 0 70px; border-top: 1px solid var(--line); scroll-margin-top: 30px; }
.home-section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; }
.home-gallery h2 { margin: 0; font-size: 28px; font-weight: 550; line-height: 1.45; letter-spacing: -.025em; }
.home-text-link { display: inline-flex; align-items: center; gap: 16px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
.home-text-link:hover { color: var(--accent); }
.home-text-link span { font-size: 18px; }
.home-library-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 25px 0 24px; }
.home-filter-tabs { display: flex; flex-wrap: wrap; gap: 24px; }
.home-filter-tabs button { border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 13px; border-radius: 0; min-height: 44px; padding: 10px 0 12px; cursor: pointer; }
.home-filter-tabs button:hover { color: var(--text); }
.home-filter-tabs button[aria-pressed="true"] { background: transparent; color: var(--text); font-weight: 550; }
.home-result-count { color: var(--muted); font-size: 12px; }
.home-query { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; font-size: 13px; color: var(--muted); }
.home-query button { border: 0; background: transparent; color: var(--accent); font-size: 13px; cursor: pointer; }
.home-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.home-template { display: block; min-width: 0; color: var(--text); text-decoration: none; }
.home-template-image { aspect-ratio: 1.25; overflow: hidden; border-radius: 10px; background: var(--panel-alt); }
.home-template-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.home-template:hover img { transform: scale(1.025); }
.home-template-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 13px; font-size: 13px; }
.home-template-meta > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-template-meta > span:last-child { color: var(--muted); font-size: 17px; }
.home-empty { text-align: center; padding: 55px 24px; background: var(--bg); border-radius: 12px; }
.home-empty h3 { margin: 0; font-size: 17px; font-weight: 550; }
.home-empty p { margin: 12px 0 22px; font-size: 14px; color: var(--muted); }
.home-template-skeleton > div { aspect-ratio: 1.25; border-radius: 10px; background: var(--panel-alt); }
.home-template-skeleton > span { display: block; width: 55%; height: 14px; margin-top: 16px; border-radius: 4px; background: var(--panel-alt); }
.home-craft { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; overflow: hidden; background: var(--bg); border-radius: 16px; margin: 4px 0 80px; }
.home-craft-visual { align-self: stretch; min-height: 360px; }
.home-craft-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-craft-copy { padding: 40px 44px; }
.home-craft-copy h2 > span { display: block; }
.home-craft-copy p { color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 40ch; margin: 24px 0; }
.home-editorial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-bottom: 70px; }
.home-editorial-item { min-width: 0; }
.home-editorial-visual { aspect-ratio: 1.7; overflow: hidden; border-radius: 12px; background: var(--bg); }
.home-editorial-visual img, .home-editorial-visual video { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-editorial-copy { padding: 24px 0; }
.home-editorial-copy h2 { font-size: 22px; }
.home-editorial-copy p { color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 60ch; }
.home-closing { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 40px 0 64px; border-top: 1px solid var(--line); }
.home-closing .btn { background: #282828; color: #fff; padding: 0 24px; height: 46px; gap: 20px; }
.home-closing .btn:hover { background: #484848; }
.home-gallery .marketing-footer { position: static; margin: 0; padding: 0; background: var(--panel); border-top: 1px solid var(--line); box-shadow: none; }
.home-gallery .marketing-footer-inner { width: min(var(--home-max), calc(100% - 64px)); margin: 0 auto; padding: 30px 0; }
.home-gallery .marketing-footer-copy, .home-gallery .marketing-footer-links-label { color: var(--muted); font-size: 12px; }
.home-gallery .marketing-footer-link { color: var(--text); font-size: 12px; }

body[data-ui-theme="dark"] .topbar { background: var(--panel); border-color: var(--line); }
body[data-ui-theme="dark"] .topbar-start, body[data-ui-theme="dark"] .home-closing .btn { color: #1b1b1b; background: #eaeaea; }
body[data-ui-theme="dark"] .home-search { border-color: var(--line); }
body[data-ui-theme="dark"] .home-search button:hover, body[data-ui-theme="dark"] .home-quick-links button:hover { background: #313131; }
body[data-ui-theme="dark"] .home-craft-visual img { opacity: .86; }
body[data-ui-theme="dark"] .topbar .products-group + .products-group { border-color: var(--line); }

@media (max-width: 1100px) {
  .topbar { gap: 28px; padding-inline: 28px; }
  .topbar .nav { gap: 20px; }
  .topbar-user { gap: 10px; }
  .topbar-lang-trigger { max-width: 116px; font-size: 12px; }
  .home-craft-copy { padding: 32px; }
}
@media (max-width: 800px) {
  .topbar { height: 70px; min-height: 70px; padding-inline: 24px; gap: 20px; }
  .topbar .nav { gap: 14px; }
  .topbar .brand { font-size: 23px; }
  .topbar .nav-link, .topbar .products-trigger { font-size: 13px; }
  .topbar-lang-trigger > span:first-child { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-start { padding: 0 14px; gap: 8px; }
  .home-container { width: calc(100% - 48px); }
  .home-intro { padding-top: 44px; }
  .home-intro h1 { font-size: 43px; }
  .home-collections, .home-template-grid { gap: 20px; }
  .home-craft { grid-template-columns: 1fr; }
  .home-craft-visual { min-height: 0; aspect-ratio: 1.7; }
  .home-editorial { gap: 26px; }
  .home-gallery h2 { font-size: 25px; }
}
@media (max-width: 800px) {
  .topbar { display: flex; justify-content: space-between; height: 66px; min-height: 66px; padding: 0 20px; gap: 14px; position: relative; }
  .topbar .brand { gap: 8px; font-size: 22px; }
  .topbar-user { margin-left: auto; gap: 10px; }
  .topbar .topbar-lang { display: none; }
  .topbar.mobile-nav-open .topbar-lang { display: block; position: absolute; left: 20px; top: 264px; z-index: 42; }
  .topbar.mobile-nav-open .topbar-lang-trigger > span:first-child { max-width: none; }
  .topbar.mobile-nav-open .topbar-lang-menu { top: 44px; left: 0; right: auto; max-height: 280px; overflow: auto; }
  .topbar .topbar-signin { font-size: 12px; padding: 0 2px; }
  .topbar-start { height: 36px; font-size: 12px; padding: 0 12px; gap: 8px; }
  .topbar-start span { display: none; }
  .topbar-nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 32px; height: 40px; border: 0; background: transparent; padding: 4px; cursor: pointer; }
  .topbar-nav-toggle span { width: 18px; height: 1.5px; background: var(--text); transition: transform .18s; }
  .mobile-nav-open .topbar-nav-toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .mobile-nav-open .topbar-nav-toggle span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .topbar .nav { display: none; }
  .topbar.mobile-nav-open .nav { display: flex; position: absolute; left: 0; right: 0; top: 66px; z-index: 41; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 20px 58px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px rgba(29, 29, 29, .06); }
  .topbar.mobile-nav-open .nav > .nav-link, .topbar.mobile-nav-open .products-trigger { display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 14px; }
  .topbar.mobile-nav-open .products-trigger { justify-content: space-between; width: 100%; }
  .topbar .products-panel { position: fixed; left: 12px; right: 12px; top: 172px; width: calc(100vw - 24px); max-height: calc(100dvh - 190px); overflow: auto; grid-template-columns: 1fr; z-index: 44; }
  .topbar .products-group + .products-group { border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0; }
  .home-container { width: calc(100% - 40px); }
  .home-intro { padding: 36px 0 30px; }
  .home-eyebrow { margin-bottom: 20px; font-size: 12px; }
  .home-intro h1 { font-size: clamp(30px, 7.6vw, 44px); letter-spacing: -.025em; line-height: 1.35; }
  .home-intro-description { font-size: 13px; margin: 18px 0 24px; line-height: 1.9; }
  .home-search { min-height: 56px; gap: 10px; padding-left: 14px; border-radius: 10px; }
  .home-search input { font-size: 16px; }
  .home-search input::placeholder { font-size: 13px; }
  .home-search button { height: 38px; padding: 0 13px; font-size: 12px; gap: 8px; }
  .home-search button span { display: none; }
  .home-quick-links { gap: 6px; }
  .home-quick-links button { padding: 8px 11px; font-size: 11px; gap: 8px; min-height: 34px; }
  .home-collections { grid-template-columns: 1fr; gap: 26px; padding: 25px 0 34px; }
  .home-collection-heading { font-size: 15px; margin-bottom: 12px; }
  .home-collection-image { aspect-ratio: 1.65; border-radius: 10px; }
  .home-collection-caption { padding-top: 9px; }
  .home-gallery h2 { font-size: 23px; }
  .home-section-heading { align-items: center; gap: 16px; }
  .home-section-heading h2 { font-size: 21px; }
  .home-text-link { font-size: 12px; gap: 8px; }
  .home-section-heading > .home-text-link { font-size: 11px; }
  .home-library { padding: 32px 0 46px; }
  .home-library-toolbar { margin: 20px 0; gap: 10px; }
  .home-filter-tabs { gap: 20px; }
  .home-filter-tabs button { font-size: 12px; min-height: 44px; padding: 10px 0 12px; }
  .home-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .home-template-meta { font-size: 11px; gap: 8px; }
  .home-craft { grid-template-columns: 1fr; border-radius: 12px; margin-bottom: 46px; }
  .home-craft-copy { padding: 26px 24px 32px; }
  .home-craft-copy p { font-size: 13px; margin: 18px 0; }
  .home-editorial { grid-template-columns: 1fr; gap: 22px; margin-bottom: 24px; }
  .home-editorial-copy h2 { font-size: 20px; }
  .home-editorial-copy p { font-size: 13px; }
  .home-closing { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 0 40px; }
  .home-closing h2 { font-size: 23px; max-width: 14em; }
  .home-gallery .marketing-footer-inner { width: calc(100% - 40px); flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 0; }
}
@media (max-width: 360px) {
  .topbar { padding-inline: 14px; gap: 10px; }
  .topbar-user { gap: 6px; }
  .topbar .brand { font-size: 20px; }
  .home-container { width: calc(100% - 32px); }
  .home-filter-tabs { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .seo-home.home-gallery { scroll-behavior: auto; }
  .home-gallery *, .topbar * { animation: none !important; transition: none !important; }
}
.home-search-icon { font-size: 28px; line-height: 1; }
.home-craft-visual video { display: block; width: 100%; height: 100%; object-fit: contain; }
.pricing-hero-card { border-radius: 12px; box-shadow: none; padding: 28px 0; background: transparent; }
.pricing-billing-pill { background: var(--panel-alt); border-color: var(--line); border-radius: 8px; }
.pricing-billing-pill button { border-radius: 5px; min-height: 36px; }
.pricing-billing-pill button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(29, 29, 29, .1); }
.pricing-card { border-radius: 12px; box-shadow: none; border-color: var(--line); }
.pricing-card.featured { border-color: var(--accent); box-shadow: none; }
@media (max-width: 800px) {
  .topbar-nav-toggle { width: 40px; height: 44px; }
  .topbar.topbar-static { flex-wrap: wrap; height: auto; min-height: 66px; padding-block: 14px; }
  .topbar.topbar-static .nav { display: flex; flex-basis: 100%; order: 3; justify-content: space-between; }
  .topbar.topbar-static .topbar-lang { display: none; }
}
.pricing-plan-card { border-radius: 12px; border-color: var(--line); box-shadow: none; }
.pricing-plan-card.is-current { border-color: var(--accent); box-shadow: none; }
body.seo-page { --ink: var(--text); --seo-muted: var(--muted); --seo-line: var(--line); --green: var(--accent); background: var(--panel); }
.seo-page .hero { background: var(--bg); }
.seo-page .primary-action { border-radius: 8px; }
.seo-page .workflow { background: var(--bg); }
.seo-page .feature-list article { border-color: var(--line); }
@media (min-width: 801px) and (max-width: 930px) {
  .topbar { gap: 18px; }
  .topbar .nav { gap: 16px; }
  .topbar .topbar-lang-trigger > span:first-child { display: inline-block; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
body[data-ui-theme="dark"] .btn-primary,
body[data-ui-theme="dark"] .pricing-billing-pill button.active {
  background: var(--accent); color: #161616; box-shadow: none; border-color: transparent;
}
body[data-ui-theme="dark"] .pricing-hero-card { background: transparent; border: 0; }
body[data-ui-theme="dark"] .pricing-plan-card { background: var(--panel); border-color: var(--line); box-shadow: none; }
body[data-ui-theme="dark"] .pricing-plan-card.is-current { border-color: var(--accent); }
body[data-ui-theme="dark"] .pricing-billing-pill { background: var(--panel-alt); border-color: var(--line); }
body[data-ui-theme="dark"] .pricing-plan-features,
body[data-ui-theme="dark"] .pricing-plan-description,
body[data-ui-theme="dark"] .pricing-plan-cycle,
body[data-ui-theme="dark"] .pricing-billing-pill button { color: var(--muted); }
body[data-ui-theme="dark"] .pricing-plan-title-row h3,
body[data-ui-theme="dark"] .pricing-plan-price { color: var(--text); }
body[data-ui-theme="dark"] .topbar .topbar-signin { background: transparent; border: 0; box-shadow: none; }
/* One navigation system for Dashboard, CMS and Canvas. */
.topbar{display:flex;justify-content:space-between;gap:28px;}
.topbar-primary{display:flex;align-items:center;gap:42px;min-width:0;}
.topbar-user{margin-left:auto;flex-shrink:0;}
.lucide-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;line-height:0;color:inherit;}
.lucide-icon svg{display:block;flex-shrink:0;}
.app-workbench-sidebar{width:244px;padding:0 14px 14px;background:var(--panel);border-right:1px solid var(--line);color:var(--text);}
.app-workbench-shell>.app-workbench-sidebar,.cms-shell>.app-workbench-sidebar{width:244px;}
.app-workbench-sidebar-head{height:76px;min-height:76px;margin:0 0 20px;padding:0 6px;border-bottom:1px solid var(--line);}
.app-workbench-brand,.app-workbench-brand:visited,.app-workbench-brand:hover,.app-workbench-brand:active{font-size:23px;font-weight:650;letter-spacing:-.7px;color:var(--text);gap:10px;}
.app-workbench-brand .brand-dot{width:9px;height:9px;border-radius:3px;}
.app-workbench-group-title{margin:0 12px 12px;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;}
.app-workbench-link{min-height:42px;padding:0 12px;gap:12px;border:1px solid transparent;border-radius:7px;color:var(--muted);background:transparent;transition:background .15s,color .15s;}
.app-workbench-link:hover{background:var(--bg);color:var(--text);}
.app-workbench-link.active{background:var(--panel-alt);color:var(--text);font-weight:550;border-color:var(--line);}
.app-workbench-link-icon,.app-workbench-link.active .app-workbench-link-icon{width:18px;height:18px;color:inherit;}
.app-workbench-link-text{font-size:13px;line-height:1.4;}
.app-workbench-links{gap:4px;}
.app-workbench-separator{height:1px;background:var(--line);margin:20px 8px;}
.app-workbench-sidebar-toggle,.app-workbench-theme-toggle{width:34px;height:34px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--muted);box-shadow:none;}
.app-workbench-sidebar-toggle:hover,.app-workbench-theme-toggle:hover{background:var(--panel-alt);color:var(--text);border-color:var(--line);}
.app-workbench-sidebar-footer{border-top:1px solid var(--line);padding:14px 6px 0;}
.app-workbench-sidebar.collapsed{padding-inline:10px;}
.app-workbench-sidebar.collapsed .app-workbench-link{justify-content:center;padding-inline:0;}
body[data-ui-theme="dark"] .app-workbench-sidebar{background:var(--panel);}
body[data-ui-theme="dark"] .app-workbench-link{color:var(--muted);}
body[data-ui-theme="dark"] .app-workbench-link.active,body[data-ui-theme="dark"] .app-workbench-link:hover{background:var(--panel-alt);color:var(--text);}
body[data-ui-theme="dark"] .app-workbench-group-title{color:var(--muted);}
.canvas-workbench-shell{flex:1;min-height:0;display:flex;overflow:hidden;background:var(--bg);}
.canvas-workbench-shell>.app-workbench-sidebar{flex:0 0 244px;width:244px;overflow:hidden;}
.canvas-workbench-shell>.app-workbench-sidebar.collapsed{flex-basis:72px;width:72px;}
.canvas-workbench-editor{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.canvas-workbench-editor>.canvas-shell{flex:1;min-height:0;height:100%;background:var(--bg);}
.canvas-workbench-editor .canvas-left-rail{height:100%;min-height:0;}
@media(min-width:801px) and (max-width:1100px){.topbar-primary{gap:24px;}}
@media(max-width:800px){.topbar-primary{gap:0;}.topbar-user{margin-left:auto;}.canvas-workbench-shell>.app-workbench-sidebar{flex-basis:64px;width:64px;padding-inline:8px;}.canvas-workbench-shell>.app-workbench-sidebar .app-workbench-brand,.canvas-workbench-shell>.app-workbench-sidebar .app-workbench-group-title,.canvas-workbench-shell>.app-workbench-sidebar .app-workbench-link-text{display:none;}.canvas-workbench-shell>.app-workbench-sidebar .app-workbench-link{justify-content:center;padding-inline:0;}.canvas-workbench-shell>.app-workbench-sidebar .app-workbench-sidebar-head{justify-content:center;}.canvas-workbench-shell>.app-workbench-sidebar.collapsed{flex-basis:64px;width:64px;}.topbar.topbar-static .topbar-primary{flex-wrap:wrap;flex:1;}}
.topbar .topbar-nav-toggle .lucide-icon{width:20px;height:20px;background:none;transform:none;}
.topbar-start>.lucide-icon{font-size:inherit;font-weight:inherit;}
.canvas-workbench-editor .canvas-sidebar{border-right:1px solid var(--line);box-shadow:none;background:var(--panel);}
.canvas-workbench-editor .canvas-inspector{background:var(--panel);border-color:var(--line);}
@media(max-width:800px){.topbar-start>.lucide-icon{display:none;}.mobile-nav-open .topbar-nav-toggle .lucide-icon:first-child{transform:none;}}
/* Public product links on the left; account navigation on the right. */
.topbar .topbar-primary{margin-right:auto;flex:0 1 auto;}
.topbar .topbar-user{margin-left:auto;justify-content:flex-end;}
.topbar .topbar-dashboard{color:var(--text);font-weight:500;}
@media(max-width:1100px){.topbar-user{gap:12px;}.topbar-primary{gap:26px;}.topbar .nav{gap:20px;}}
@media(max-width:800px){.topbar .topbar-dashboard{display:none;}.topbar.mobile-nav-open .topbar-dashboard{display:block;position:absolute;left:20px;top:260px;z-index:42;min-height:44px;padding:12px 0;}.topbar .topbar-primary{gap:0;}.topbar .topbar-user{gap:10px;}}
@media(max-width:800px){.topbar.mobile-nav-open .nav{padding-bottom:102px;}}
@media(min-width:801px) and (max-width:1100px){
  .topbar{height:70px;min-height:70px;position:relative;padding-inline:24px;}
  .topbar .nav{display:none;}
  .topbar-nav-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:44px;border:0;background:transparent;color:var(--text);cursor:pointer;}
  .topbar .topbar-lang,.topbar .topbar-dashboard{display:none;}
  .topbar.mobile-nav-open .nav{display:flex;position:absolute;left:0;right:0;top:70px;z-index:41;flex-direction:column;align-items:stretch;gap:0;padding:14px 24px 102px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 12px 20px rgba(29, 29, 29, .06);}
  .topbar.mobile-nav-open .nav>.nav-link,.topbar.mobile-nav-open .products-trigger{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:14px;}
  .topbar.mobile-nav-open .products-trigger{width:100%;justify-content:space-between;}
  .topbar.mobile-nav-open .topbar-dashboard{display:block;position:absolute;left:24px;top:264px;z-index:42;min-height:44px;padding:12px 0;}
  .topbar.mobile-nav-open .topbar-lang{display:block;position:absolute;left:24px;top:312px;z-index:42;}
  .topbar .topbar-lang-menu{left:0;right:auto;max-height:280px;overflow:auto;}
  .topbar .products-panel{position:fixed;left:24px;right:24px;top:220px;width:calc(100vw - 48px);max-height:calc(100dvh - 244px);overflow:auto;z-index:44;}
}

/* Separate Canvas tool navigation from the expanded library panel. */
.canvas-workbench-editor .canvas-side-nav { border-right: 1px solid var(--line); box-sizing: border-box; }

/* One neutral accent for navigation, links, checks, focus and editing controls. */
:root, body.theme-freepik:not([data-ui-theme="dark"]) {
  --accent: #272b30; --accent-dark: #41464d; --accent-warm: #b8bcc2;
  --accent-rgb: 39, 43, 48; --slider-active: #555b63;
}
body[data-ui-theme="dark"] {
  --accent: #e5e7eb; --accent-dark: #ffffff; --accent-warm: #aeb3ba;
  --accent-rgb: 229, 231, 235; --slider-active: #c4c8ce;
}
:where(input[type="checkbox"], input[type="radio"], input[type="range"]):not(.cp-hue) { accent-color: var(--accent); }
/* Editor surfaces must stay readable when the neutral dark palette is active. */
body[data-ui-theme="dark"] .canvas-shell :is(.canvas-side-nav, .canvas-history-dock, .canvas-template-save-dock, .canvas-zoom-dock, .canvas-history-panel, .canvas-toolbar, .export-format-item, .file-size-dim-row .toolbar-input-with-affix) {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
}
body[data-ui-theme="dark"] .canvas-shell :is(.file-template-item, .side-nav-item, .canvas-history-panel-item) { color: var(--text); }
body[data-ui-theme="dark"] .canvas-shell .file-size-dim-row input { background: transparent; color: var(--text); }
body[data-ui-theme="dark"] .canvas-shell :is(.side-nav-item.active, .file-template-item.active, .export-format-item.checked) { background: var(--panel-alt); color: var(--accent); }