* {
  box-sizing: border-box;
}

/* Self-hosted SF Pro (subset to Latin + Cyrillic + basic punctuation, ~70-80KB
   per weight) — a system font stack alone only renders SF Pro on Apple
   devices and silently falls back to Arial/Roboto/DejaVu everywhere else,
   which doesn't match this site's typography. Text is the optical size for
   body copy, Display for the large case-study titles. */
@font-face {
  font-family: "SF Pro Text";
  src: url("/fonts/sf-pro-text-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("/fonts/sf-pro-text-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("/fonts/sf-pro-text-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/fonts/sf-pro-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/fonts/sf-pro-display-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/fonts/sf-pro-display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #86868b;
  --panel: #f5f5f7;
  --panel-2: #f2f2f4;
  --panel-glass: rgba(245, 245, 247, 0.88);
  --border: #e5e5e7;
  --container: 900px;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid #d2d2d5;
  transition: border-color 150ms ease, color 150ms ease;
}

a:hover {
  border-color: var(--faint);
}

h1, h2, p {
  margin: 0;
}

img {
  max-width: 100%;
}

/* ===== Layout ===== */

.page {
  min-height: 100vh;
  padding-bottom: 40px;
}

.page-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 24px 120px;
}

.section {
  padding: 88px 0 8px;
}

.section-narrow {
  max-width: 620px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.04em;
}

/* Work/Experience use 8px in the source design; About and Contact use 20px. */
.section-title-lg {
  margin-bottom: 20px;
}

/* ===== Hero ===== */

.hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 8px;
}

/* Reserves room for the fixed ProfileCard (top offset + open height + a
   breathing gap) so page content never starts underneath it. */
.profile-spacer {
  height: 190px;
}

.hero-text {
  max-width: 620px;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.04em;
  margin-top: 8px;
}

/* ===== Profile card ===== */

.profile-shell {
  overflow: hidden;
  cursor: pointer;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  /* Deliberately no background and no filter/backdrop-filter here — see the
     comment in ProfileCard.jsx. This element only ever animates its box. */
  transition:
    width 520ms cubic-bezier(0.32, 0.72, 0, 1),
    height 520ms cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 520ms cubic-bezier(0.32, 0.72, 0, 1),
    top 520ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Collapsed-pill background: a plain glass layer that exactly fills the
   shrunk shell, independent from (a sibling of, not an ancestor of) the
   expanded content below — so it never blocks that content's own blur. */
.profile-pill-bg {
  position: absolute;
  inset: 0;
  background: var(--panel-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 16px;
  transition: opacity 280ms ease, filter 280ms ease;
}

.profile-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: 340px;
  flex-shrink: 0;
  /* filter transitions to the literal keyword "none" (set inline), not
     blur(0px) — see the comment in ProfileCard.jsx for why that distinction
     matters for the glass panels nested inside (profile-card-inner,
     profile-link-btn). */
  transition: opacity 320ms ease, filter 320ms ease;
}

.profile-card-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  /* Blurs its own backdrop — .profile-shell (the ancestor) settles to zero
     blur once open, precisely so it never blurs the gap between this panel
     and the link buttons below; only actual panel surfaces should. */
  background: var(--panel-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 14px;
  padding: 16px;
  width: 340px;
  box-sizing: border-box;
}

.profile-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.profile-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.profile-meta {
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
}

.profile-avatar {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
}

.profile-links-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  width: 340px;
  box-sizing: border-box;
}

.profile-link-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: var(--panel-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 14px;
  border-bottom: none;
  color: var(--faint);
  font-size: 16px;
  transition: background-color 180ms ease, color 180ms ease;
}

.profile-link-btn:hover {
  background-color: #f5f5f7;
  color: var(--text);
}

/* ===== Work / Experience rows ===== */

.row-list {
  display: flex;
  flex-direction: column;
}

.row-item {
  border-top: 1px solid var(--border);
  padding: 32px 0;
}

/* Work cards are <Link>s — the whole card is clickable, so undo the base
   anchor styling (inline display, underline-as-border-bottom) it'd
   otherwise inherit. */
.work-item {
  display: block;
  color: inherit;
  border-bottom: none;
}

/* The base a:hover rule sets `border-color` (all four sides) to a darker
   shade — meant for the underline-as-border-bottom link style elsewhere,
   but it also brightens this card's own border-top divider as a side
   effect. Pin it back to the resting divider color on hover. */
.work-item:hover {
  border-top-color: var(--border);
}

.row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}

/* Experience rows: year column pinned left, company/role next to it,
   toggle pushed all the way to the right — matches the source design. */
.exp-head {
  display: grid;
  grid-template-columns: 115px 1fr auto;
  justify-content: normal;
  margin-bottom: 0;
}

#experience .row-item {
  padding: 20px 0;
}

#experience .section-title {
  margin-bottom: 24px;
}

.exp-years {
  white-space: nowrap;
}

.row-head-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.row-head-right {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-shrink: 0;
}

.row-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

/* Underline via text-decoration, not border-bottom: border-bottom on an
   inline-block box draws exactly one line under the box's bottom edge —
   as wide as its widest wrapped line — which looks wrong once a title
   wraps to 2+ lines (a line under the block, not under each line of
   text). text-decoration is line-aware natively and underlines every
   wrapped line on its own. */
.work-item .row-title {
  text-decoration: underline;
  text-decoration-color: #d2d2d5;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 150ms ease;
}

.work-item:hover .row-title {
  text-decoration-color: var(--faint);
}

.row-title-sm {
  font-size: 16px;
}

.row-sub {
  font-size: 14px;
  color: var(--muted);
}

.row-faint {
  font-size: 13px;
  color: var(--faint);
  flex-shrink: 0;
}

.row-toggle {
  border: none;
  background: none;
  font: inherit;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.row-description {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 560px;
}

.row-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  max-width: 560px;
}

.row-detail-line {
  display: flex;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.work-image {
  width: 100%;
  border-radius: 12px;
}

/* ===== Skeleton image (loading placeholder, no layout shift) ===== */
/* The wrapper's own aspect-ratio/fixed size reserves the box before the
   image loads (set via className/style by whoever renders it, e.g.
   .work-image, .case-image); a shimmering placeholder shows until the real
   image fades in, so nothing pops in or shifts the layout around it. */

.skeleton-image {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--panel);
}

.image-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.09) 50%, rgba(0, 0, 0, 0.04) 100%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

.skeleton-image-element {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.skeleton-image-element.is-loaded {
  opacity: 1;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ===== Skills ===== */

.skills-title {
  margin-bottom: 28px;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.skills-group-name {
  font-size: 13px;
  color: var(--faint);
  display: block;
  margin-bottom: 12px;
}

.skills-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  color: var(--text);
}

/* ===== About ===== */

.about-text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 16px;
}

.about-text:last-child {
  margin-bottom: 0;
}

/* ===== Contact / footer ===== */

.contact-links {
  display: flex;
  gap: 24px;
  font-size: 16px;
  flex-wrap: wrap;
}

.page-footer {
  padding: 24px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--faint);
  flex-wrap: wrap;
  gap: 8px;
}

/* ===== Pill nav ===== */

.pill-nav {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  background: var(--panel-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 999px;
  padding: 6px;
  font-size: 13px;
  z-index: 20;
}

.pill-nav-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: left 320ms cubic-bezier(0.32, 0.72, 0, 1), width 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.pill-nav-btn {
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  font: inherit;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
  transition: color 200ms ease, font-weight 200ms ease;
}

.pill-nav-btn.is-active {
  color: var(--text);
  font-weight: 600;
}

/* ===== Project page ===== */

.project-back-row {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 24px 0;
}

.back-link {
  font-size: 13px;
  color: var(--faint);
  border-bottom: none;
}

/* Cases append one after another as you scroll (infinite feed) — mark
   where one ends and the next begins with a divider and real breathing
   room, same visual language as the dividers elsewhere on the site. The
   very first case needs neither (it already sits right below the back
   link with its own spacing). */
.case + .case {
  margin-top: 64px;
  border-top: 1px solid var(--border);
}

.case-header {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px 24px 0;
}

.case-title {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
}

.case-category {
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 12px;
  max-width: 640px;
}

.case-description {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  margin-top: 12px;
  max-width: 640px;
}

.case-year {
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 12px;
}

.case-facts {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 56px;
  max-width: 640px;
}

.case-fact-label {
  font-size: 13px;
  color: var(--faint);
  margin: 0 0 8px;
}

.case-fact-text {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
}

.case-images {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-image {
  width: 100%;
  border-radius: 12px;
}

/* A "seamless" group stitches several uploaded parts (e.g. a long landing
   page sliced into pieces) into one uninterrupted image — no gap or
   rounding between the parts themselves, just the group's outer corners. */
.case-seamless-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.case-seamless-part {
  width: 100%;
}

.case-sentinel {
  height: 1px;
}

/* ===== Responsive ===== */

@media (max-width: 720px) {
  .skills-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-text {
    font-size: 19px;
  }
  .case-title {
    font-size: 28px;
  }
  .pill-nav {
    font-size: 12px;
  }
  .pill-nav-btn {
    padding: 8px 12px;
  }
  .exp-head {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 6px;
  }
  .exp-years {
    grid-column: 1 / -1;
  }
}
.admin-root {
  --a-bg: #0b0b0c;
  --a-panel: #17171a;
  --a-border: rgba(255, 255, 255, 0.12);
  --a-text: #f2f2f3;
  --a-muted: rgba(242, 242, 243, 0.55);
  --a-accent: #3b82f6;
  --a-danger: #f87171;

  min-height: 100vh;
  background: var(--a-bg);
  color: var(--a-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", sans-serif;
  padding: 32px 40px 120px;
  box-sizing: border-box;
}

.admin-root * {
  box-sizing: border-box;
}

.admin-container {
  max-width: 1040px;
  margin: 0 auto;
}

.admin-error {
  max-width: 560px;
  margin: 0 auto;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.admin-header h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-status {
  font-size: 13px;
  color: var(--a-muted);
}

.admin-root button {
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--a-border);
  background: var(--a-panel);
  color: var(--a-text);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}

.admin-root button:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.admin-root button:disabled {
  opacity: 0.5;
  cursor: default;
}

.admin-primary {
  background: var(--a-accent) !important;
  border-color: var(--a-accent) !important;
  color: #fff !important;
}

.admin-danger {
  color: var(--a-danger) !important;
  border-color: var(--a-danger) !important;
}

.admin-danger-link {
  background: none !important;
  border: none !important;
  color: var(--a-danger) !important;
  padding: 4px 6px !important;
}

.admin-muted {
  color: var(--a-muted);
  font-size: 12px;
}

/* ---- project list ---- */

.admin-project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-project-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--a-panel);
  border: 1px solid var(--a-border);
  border-radius: 12px;
  padding: 10px 14px;
}

.admin-drag-handle {
  cursor: grab;
  color: var(--a-muted);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px !important;
  touch-action: none;
}

.admin-project-thumb {
  width: 64px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-project-thumb span {
  font-size: 9px;
  color: var(--a-muted);
  text-align: center;
}

.admin-project-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.admin-project-info strong {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-project-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- editor ---- */

.admin-editor {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-editor-head h2 {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}

.admin-editor-head-actions {
  display: flex;
  gap: 10px;
}

.admin-field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.admin-inline-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-field-label {
  font-size: 12px;
  color: var(--a-muted);
  font-weight: 500;
}

.admin-inline-field span {
  font-size: 12px;
  color: var(--a-muted);
  font-weight: 500;
}

.admin-inline-field input,
.admin-inline-field textarea {
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--a-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--a-panel);
  color: var(--a-text);
  resize: vertical;
}

.admin-inline-field input:focus,
.admin-inline-field textarea:focus {
  outline: 2px solid var(--a-accent);
  outline-offset: -1px;
}

.admin-locale-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding-top: 8px;
  border-top: 1px solid var(--a-border);
}

.admin-locale-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-locale-column h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--a-muted);
  margin: 0;
}

.admin-list-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-list-field-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.admin-list-field-row input {
  flex: 1;
}

/* ---- cover / image pickers ---- */

.admin-toggle-row {
  display: flex;
  gap: 6px;
}

.admin-toggle-row button.is-active {
  background: var(--a-accent);
  border-color: var(--a-accent);
  color: #fff;
}

.admin-cover-editor,
.admin-stack-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-image-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-image-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-image-preview {
  width: 96px;
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--a-border);
}

.admin-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-image-empty {
  font-size: 10px;
  color: var(--a-muted);
}

.admin-image-picker-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-image-browser {
  border: 1px solid var(--a-border);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.admin-image-browser-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--a-muted);
  margin-bottom: 8px;
}

.admin-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.admin-image-grid-item {
  padding: 0 !important;
  border-radius: 6px !important;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.admin-image-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-multi-image-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-multi-image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-multi-image-item {
  width: 110px;
  border: 1px solid var(--a-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--a-panel);
}

.admin-multi-image-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.admin-multi-image-item-controls {
  display: flex;
  gap: 2px;
  padding: 4px;
}

.admin-multi-image-item-controls button {
  flex: 1;
  padding: 4px !important;
  font-size: 11px;
}

/* ---- slides ---- */

.admin-slides-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-slide-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--a-panel);
  border: 1px solid var(--a-border);
  border-radius: 12px;
  padding: 14px;
}

.admin-slide-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.admin-slide-remove {
  flex-shrink: 0;
}

/* ---- background field ---- */

.admin-background-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-background-field input[type="text"] {
  flex: 1;
}

.admin-background-field input[type="color"] {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--a-border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

/* ---- image groups (v2) ---- */

.admin-image-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-image-group {
  border: 1px solid var(--a-border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-image-group-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.admin-image-group-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.admin-inline-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--a-muted);
}

.admin-inline-checkbox input {
  width: auto;
}