/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* manrope-latin-ext-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-wght-normal */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Manrope has no U+018F glyph: use the licensed local Inter capital schwa. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+018F;
}

/* ArtSpace Market v2.0 — Creative Indigo design system.
   Breakpoints: 1200 / 960 / 768 / 520 / 375 px. */
:root {
  --color-primary: #635bff;
  --color-primary-hover: #5149e8;
  --color-bg: #f8f9fc;
  --color-surface: #fff;
  --color-ink: #171821;
  --color-muted: #606475;
  --color-soft: #eeecff;
  --color-coral: #ff806b;
  --color-border: #e7e9f0;
  --color-success: #10755f;
  --color-error: #c9333b;
  --color-warning: #8b5d16;
  --font-body: "Inter", Arial, sans-serif;
  --font-heading: "Manrope", "Inter", Arial, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 750;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --container: 1328px;
  --radius-sm: 8px;
  --radius-control: 12px;
  --radius-card: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-card: 0 6px 24px rgb(29 33 58 / 5%);
  --shadow-menu: 0 12px 40px rgb(29 33 58 / 12%);
  --shadow-modal: 0 24px 80px rgb(17 21 45 / 24%);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --transition: 200ms var(--ease);
  --transition-reveal: 400ms var(--ease);
  --z-header: 40;
  --z-dropdown: 60;
  --z-toast: 90;
  --breakpoint-lg: 1200px;
  --breakpoint-nav: 960px;
  --breakpoint-md: 768px;
  --breakpoint-sm: 520px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-ink);
  font: var(--weight-regular) var(--text-base)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
body:has(dialog[open]) { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-primary); outline-offset: 4px;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--font-heading); line-height: 1.2; font-weight: var(--weight-bold); overflow-wrap: anywhere; }
h1 { font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); letter-spacing: -.04em; }
h3 { font-size: var(--text-xl); letter-spacing: -.025em; }
p { margin: 0 0 var(--space-4); overflow-wrap: anywhere; }
strong { font-weight: 650; }
em { font-style: normal; }
::selection { background: #dcd8ff; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.container { width: calc(100% - 96px); max-width: var(--container); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 150; background: var(--color-primary); color: #fff; padding: 12px 20px; border-radius: 12px; }
.skip-link:focus { top: 12px; }
.eyebrow { display: block; font-size: var(--text-sm); font-weight: 650; color: var(--color-primary-hover); margin-bottom: var(--space-3); line-height: 1.5; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--color-soft); color: #4d43cb; font-size: var(--text-sm); font-weight: 600; }
.eyebrow-pill .icon { width: 17px; height: 17px; }
.muted { color: var(--color-muted); }
.nowrap { white-space: nowrap; }
.full-width { width: 100%; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; max-width: 100%; border: 1px solid transparent; border-radius: var(--radius-control);
  background: var(--color-primary); color: #fff; padding: 13px 22px;
  font-size: var(--text-sm); font-weight: 650; line-height: 1.5; text-align: center;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.button:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgb(99 91 255 / 14%); }
.button .icon { width: 18px; height: 18px; }
.button-small { min-height: 44px; padding: 10px 16px; font-size: 13px; }
.button-compact { min-height: 38px; padding: 7px 12px; font-size: 12px; border-radius: 10px; }
.button-secondary { color: var(--color-ink); background: #fff; border-color: var(--color-border); box-shadow: none; }
.button-secondary:hover { color: var(--color-primary); background: #f4f3ff; border-color: #d6d2ff; box-shadow: none; }
.button-white { background: #fff; color: var(--color-primary); }
.button-white:hover { background: #f1efff; color: var(--color-primary-hover); box-shadow: none; }
.button-row, .form-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: #554bdc; font-size: var(--text-sm); font-weight: 650; line-height: 1.5; padding-block: 6px; }
.text-link:hover { color: #3c31bf; text-decoration: underline; text-underline-offset: 4px; }
.text-link .icon { width: 17px; height: 17px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; color: var(--color-muted); border-radius: 12px; transition: background var(--transition), color var(--transition); }
.icon-button:hover { background: var(--color-soft); color: var(--color-primary); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; }
.badge-neutral { background: #f0f1f6; color: #5a5f70; }
.badge-indigo { background: var(--color-soft); color: #5146cc; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 0 6px; font-size: 12px; border-radius: 7px; background: var(--color-soft); color: #5146cc; }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.feature-icon, .empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 auto; background: var(--color-soft); color: #554bd8; border-radius: 14px; }
.feature-icon .icon { width: 23px; height: 23px; }
.coral { background: #fff0eb; color: #b24f3b; }
.green { background: #e7f6ef; color: var(--color-success); }
.amber { background: #fff3dc; color: var(--color-warning); }
/* Navigation */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: #fff; border-bottom: 1px solid var(--color-border); }
.header-inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; flex: 0 0 auto; }
.brandmark { width: 42px; height: 42px; border-radius: 12px; background: var(--color-primary); color: #fff; font: 800 34px/1.1 var(--font-heading); display: inline-flex; align-items: center; justify-content: center; letter-spacing: -.1em; padding: 0 3px 3px 0; }
.brandmark > span { color: #ffc6b8; font-size: 31px; }
.brand-name { font-family: var(--font-heading); font-size: 23px; font-weight: 800; letter-spacing: -.045em; line-height: 1.1; }
.brand-name small { display: block; font-family: var(--font-body); font-size: 9px; color: var(--color-muted); font-weight: 650; letter-spacing: 3.2px; margin-top: 5px; }
.desktop-nav { display: flex; align-items: stretch; align-self: stretch; gap: 28px; margin-left: auto; margin-right: auto; }
.desktop-nav a { position: relative; display: flex; align-items: center; font-size: 14px; color: var(--color-muted); font-weight: 500; white-space: nowrap; }
.desktop-nav a:hover, .desktop-nav a[aria-current] { color: var(--color-primary); }
.desktop-nav a[aria-current]::after { content: ""; height: 3px; position: absolute; left: 0; right: 0; bottom: 0; background: var(--color-primary); border-radius: 3px 3px 0 0; }
.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.header-login { padding: 10px; font-size: 14px; font-weight: 600; }
.header-login:hover { color: var(--color-primary); }
.avatar-mini { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; background: var(--color-soft); color: #5146cc; font-size: 17px; font-weight: 700; overflow: hidden; }
.avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: flex; align-items: center; gap: 9px; cursor: pointer; min-height: 44px; font-size: 14px; font-weight: 600; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary > .icon { width: 15px; color: var(--color-muted); }
.user-menu-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown { position: absolute; top: calc(100% + 14px); right: 0; width: 248px; padding: 8px; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; box-shadow: var(--shadow-menu); z-index: var(--z-dropdown); animation: dropdown-in 160ms var(--ease); }
.user-dropdown a, .user-dropdown button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; text-align: left; font-size: 14px; }
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--color-bg); color: var(--color-primary); }
.user-dropdown form { border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 6px; }
.user-dropdown button { color: var(--color-error); }
.menu-toggle { display: none; }
.mobile-nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-menu); animation: dropdown-in 180ms var(--ease); }
.mobile-nav > .container { display: flex; flex-direction: column; padding-block: 16px 24px; gap: 4px; }
.mobile-nav a { min-height: 44px; display: flex; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.mobile-nav a:hover { background: var(--color-soft); color: var(--color-primary); }
.mobile-nav a.button { color: #fff; margin-top: 12px; }
/* Homepage */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 64px; padding-block: 56px 40px; }
.hero-copy { min-width: 0; padding-bottom: 8px; }
.hero h1 { font-size: clamp(42px, 5.3vw, 76px); font-weight: 800; line-height: 1.08; letter-spacing: -.055em; margin-top: 24px; margin-bottom: 24px; }
.hero h1 > span { color: var(--color-primary); }
.hero-copy > p { color: var(--color-muted); max-width: 510px; line-height: 1.8; font-size: 16px; margin-bottom: 28px; }
.hero .button-row { gap: 12px; }
.hero-community { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.avatar-stack { display: flex; flex: 0 0 auto; padding-left: 0; }
.avatar-stack img { width: 36px; height: 36px; object-fit: cover; border: 3px solid var(--color-bg); border-radius: 50%; margin-left: -10px; }
.avatar-stack img:first-child { margin-left: 0; }
.hero-community strong { display: block; font-size: 12px; font-weight: 600; }
.hero-community small { display: block; margin-top: 2px; color: var(--color-muted); font-size: 12px; }
.hero-collage { display: grid; grid-template-columns: 1.12fr 1fr; grid-template-rows: 156px 156px 118px; gap: 16px; min-width: 0; padding-block: 12px; }
.collage-tile { position: relative; display: block; min-width: 0; overflow: hidden; border-radius: var(--radius-card); background: #e9e7f1; isolation: isolate; }
.collage-tile > img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.collage-tile:hover > img { transform: scale(1.04); }
.collage-tile > span { position: absolute; left: 12px; right: 12px; bottom: 12px; background: #fff; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; font-weight: 650; }
.collage-tile > span .icon { width: 15px; height: 15px; }
.tile-paint { grid-column: 1; grid-row: 1 / 3; }
.tile-pottery { grid-column: 2; grid-row: 1; }
.tile-pottery > img { object-position: center 66%; }
.tile-digital { grid-column: 2; grid-row: 2; }
.tile-photo { grid-column: 1; grid-row: 3; }
.tile-photo > span { padding: 7px 10px; bottom: 8px; left: 8px; right: 8px; font-size: 12px; }
.collage-note { display: grid; align-content: center; grid-template-columns: 30px 1fr; gap: 4px 10px; padding: 16px; border-radius: var(--radius-card); background: var(--color-soft); color: #4d43bd; min-width: 0; }
.collage-note > .icon { width: 27px; height: 27px; grid-row: 1 / 3; margin-top: 5px; }
.collage-note > strong { font-family: var(--font-heading); font-size: 18px; line-height: 1.35; font-weight: 750; }
.collage-note > small { font-size: 11px; margin-top: 4px; color: #67628f; }
.section { padding-block: var(--space-16); }
.section-bottom { padding-bottom: var(--space-16); }
.categories-section { padding-top: 16px; padding-bottom: 8px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-heading h2 { margin: 0; }
.section-heading p { margin: 12px 0 0; color: var(--color-muted); font-size: 15px; }
.section-heading > p { font-size: 15px; margin: 0 0 4px; }
.section-heading > a { flex: 0 0 auto; margin-bottom: 4px; }
.category-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 16px; }
.category-tile { min-width: 0; background: #fff; border-radius: 16px; padding: 8px; transition: transform var(--transition), box-shadow var(--transition); }
.category-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.category-tile > img { width: 100%; aspect-ratio: 1.65; height: auto; object-fit: cover; border-radius: 11px; }
.category-tile > span { display: flex; align-items: start; justify-content: space-between; gap: 7px; font-size: 13px; font-weight: 650; padding: 12px 3px 4px; line-height: 1.4; min-height: 52px; }
.category-tile .icon { width: 15px; height: 15px; color: var(--color-muted); margin-top: 2px; }
.why-section { background: #fff; padding-block: 48px; margin-top: 12px; }
.benefit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; }
.benefit-grid article { min-width: 0; }
.benefit-grid strong { display: block; font-family: var(--font-heading); font-size: 18px; font-weight: 750; margin: 18px 0 9px; letter-spacing: -.02em; }
.benefit-grid p { font-size: 14px; color: var(--color-muted); margin: 0; }
.artists-section { padding-top: 16px; }
.center-heading { justify-content: center; text-align: center; }
.steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.steps article { background: #fff; padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.step-number { display: inline-flex; justify-content: center; align-items: center; background: var(--color-soft); color: #5146c5; border-radius: 12px; width: 42px; height: 42px; font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.steps h3 { font-size: 21px; margin-top: 24px; margin-bottom: 12px; }
.steps p { font-size: 15px; color: var(--color-muted); margin: 0; }
.section-footnote { margin: 24px 0 0; font-size: 12px; text-align: center; color: var(--color-muted); line-height: 1.8; }
.creator-cta { display: flex; justify-content: space-between; align-items: center; gap: 48px; padding: 48px; margin-bottom: 64px; background: var(--color-primary); color: #fff; border-radius: var(--radius-lg); }
.creator-cta .eyebrow { color: #fff; font-size: 14px; }
.creator-cta h2 { font-size: 40px; line-height: 1.22; }
.creator-cta p { color: #fff; margin: 16px 0 0; font-size: 15px; }
.creator-cta > .button { flex: 0 0 auto; min-height: 54px; }
.creator-cta a:focus-visible { outline-color: white; }
/* Artwork cards and creator cards */
.art-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.art-card { min-width: 0; background: #fff; border-radius: var(--radius-card); padding: 10px; box-shadow: 0 1px 2px rgb(29 33 58 / 3%); transition: box-shadow var(--transition), transform var(--transition); }
.art-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.art-card-image { position: relative; display: block; aspect-ratio: 4 / 5; background: #eef0f5; border-radius: 14px; overflow: hidden; }
.art-card-image > img { width: 100%; height: 100%; object-fit: contain; transition: transform 400ms var(--ease); }
.art-card:hover .art-card-image > img { transform: scale(1.025); }
.card-category { position: absolute; top: 12px; left: 12px; background: #fff; color: #3e4252; border-radius: 7px; padding: 5px 9px; font-size: 12px; line-height: 1.5; }
.card-demo { position: absolute; left: 12px; bottom: 12px; color: #575d6d; background: #fff; padding: 4px 7px; font-size: 11px; border-radius: 6px; }
.card-view { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--color-primary); display: grid; place-items: center; opacity: 0; transform: translateY(4px); transition: opacity var(--transition), transform var(--transition); }
.art-card:hover .card-view, .art-card:focus-within .card-view { opacity: 1; transform: translateY(0); }
.card-info { padding: 14px 6px 0; }
.card-info h3 { font-size: 18px; font-weight: 750; line-height: 1.4; letter-spacing: -.025em; min-height: 50px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card-info h3 a:hover { color: var(--color-primary); }
.artist-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-muted); line-height: 1.55; margin-top: 6px; overflow-wrap: anywhere; }
.artist-link .icon { width: 14px; height: 14px; }
.artist-link:hover { color: var(--color-primary); }
.card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 6px 8px; margin-top: 12px; border-top: 1px solid #f0f1f6; }
.card-price { font-size: 16px; font-weight: 750; letter-spacing: -.025em; line-height: 1.5; }
.availability { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--color-success); line-height: 1.5; }
.availability > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.availability.status-reserved { color: var(--color-warning); }
.availability.status-sold { color: #676c80; }
.image-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: #8c88ad; }
.image-fallback .icon { width: 48px; height: 48px; }
.artists-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.artist-card { min-width: 0; overflow: hidden; border-radius: var(--radius-card); background: #fff; border: 1px solid var(--color-border); transition: transform var(--transition), box-shadow var(--transition); }
.artist-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.artist-cover-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 8px; background: #fafaff; height: 138px; }
.artist-cover-grid > span { min-width: 0; height: 122px; background: #e9e8f8; border-radius: 10px; overflow: hidden; display: grid; place-items: center; color: #9690c1; }
.artist-cover-grid img { width: 100%; height: 100%; object-fit: cover; }
.artist-card-body { position: relative; padding: 44px 24px 24px; }
.artist-portrait { position: absolute; top: -34px; left: 24px; display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; overflow: hidden; border: 4px solid #fff; border-radius: 50%; background: var(--color-soft); color: #594ecd; font-size: 24px; font-weight: 700; }
.artist-portrait img { width: 100%; height: 100%; object-fit: cover; }
.artist-demo-label { position: absolute; top: 12px; right: 20px; font-size: 11px; }
.artist-card h3 { font-size: 22px; line-height: 1.3; margin-bottom: 8px; }
.artist-card h3 a:hover { color: var(--color-primary); }
.artist-card-body > p { color: var(--color-muted); font-size: 14px; min-height: 44px; margin-bottom: 16px; }
.creator-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; color: var(--color-muted); font-size: 13px; }
.creator-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.creator-meta .icon { width: 15px; height: 15px; }
/* Public discovery and filters */
.page-intro { padding-block: 48px 36px; }
.page-intro h1 { margin-bottom: 18px; }
.page-intro > p { color: var(--color-muted); max-width: 680px; font-size: 16px; margin-bottom: 0; line-height: 1.8; }
.discover-intro { padding-block: 44px 28px; text-align: center; }
.discover-intro h1 { margin-bottom: 14px; }
.discover-intro > p { margin-bottom: 28px; color: var(--color-muted); }
.discovery-search { position: relative; display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid #dde0ec; padding: 7px; border-radius: 16px; box-shadow: 0 4px 20px rgb(36 34 86 / 3%); }
.discovery-search > .icon { color: #787d8f; margin-left: 12px; }
.discovery-search input:not([type=hidden]) { background: transparent; border: 0; min-height: 44px; padding: 8px 0; box-shadow: none; outline-offset: 2px; }
.discovery-search > .button { flex: 0 0 auto; min-height: 44px; padding: 10px 18px; }
.catalogue-shell { padding-bottom: 64px; }
.category-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block: 8px 24px; }
.chip { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: var(--radius-pill); background: #fff; color: #555a6c; font-size: 14px; font-weight: 500; border: 1px solid var(--color-border); white-space: nowrap; transition: background var(--transition), color var(--transition); }
.chip:hover { color: var(--color-primary); background: #f0edff; }
.chip.is-active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.catalogue-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; border-top: 1px solid var(--color-border); }
.catalogue-toolbar > p { color: var(--color-muted); font-size: 14px; margin: 0; }
.catalogue-toolbar > p strong { color: var(--color-ink); }
.catalogue-actions { display: flex; align-items: center; gap: 12px; }
.sort-control { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sort-control select { min-height: 44px; width: 208px; font-size: 13px; border-color: var(--color-border); }
.sort-submit { width: 40px; height: 44px; }
.active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.active-filter { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 10px; border-radius: 8px; background: var(--color-soft); color: #5146c5; font-size: 13px; overflow-wrap: anywhere; }
.active-filter .icon { width: 14px; height: 14px; }
.active-filter:hover { background: #dfdbff; }
.filter-panel { padding: 24px; margin-bottom: 24px; }
.filter-dialog { width: 500px; max-width: calc(100% - 32px); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 24px; background: #fff; box-shadow: var(--shadow-modal); color: var(--color-ink); }
.filter-dialog::backdrop, .image-dialog::backdrop { background: rgb(20 22 43 / 55%); }
.dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 24px 24px 20px; border-bottom: 1px solid var(--color-border); }
.dialog-header h2 { font-size: 23px; }
.dialog-header p { font-size: 14px; margin: 8px 0 0; color: var(--color-muted); }
.dialog-header .icon-button { margin-top: -6px; margin-right: -8px; }
.filter-dialog .filter-panel { padding: 24px; margin: 0; border: 0; border-radius: 0; }
.filter-footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--color-border); padding-top: 24px; margin-top: 8px; }
.filter-footer .button:first-child { flex: 1; }
.filter-footer .button:last-child { flex: 2; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; font-size: 14px; }
.pagination-current { display: grid; place-items: center; width: 42px; height: 42px; background: var(--color-primary); color: #fff; border-radius: 10px; font-weight: 650; }
.pagination > .muted { margin-right: 8px; }
.empty-state { grid-column: 1 / -1; text-align: center; width: 100%; padding: 56px 24px; background: #fff; border-radius: var(--radius-card); }
.empty-icon { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 20px; }
.empty-icon .icon { width: 30px; height: 30px; }
.empty-state h2, .empty-state h3 { font-size: 28px; margin-bottom: 12px; }
.empty-state p { color: var(--color-muted); font-size: 15px; margin: 0 auto 24px; max-width: 460px; }
/* Forms, messages and feedback */
.field { margin-bottom: 20px; min-width: 0; }
.field > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.required { color: var(--color-primary); }
input:not([type=checkbox],[type=radio],[type=hidden]), select, textarea {
  display: block; width: 100%; max-width: 100%; min-height: 50px; border: 1px solid #cdd1de; border-radius: var(--radius-control);
  color: var(--color-ink); background: #fff; padding: 12px 14px; font-size: 15px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:not([type=hidden]):focus, select:focus, textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgb(99 91 255 / 10%); }
input::placeholder, textarea::placeholder { color: #777c8b; }
textarea { resize: vertical; min-height: 140px; line-height: 1.75; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--color-primary); flex: 0 0 auto; vertical-align: middle; }
input[type=file] { padding: 10px; font-size: 13px; background: var(--color-bg); line-height: 1.7; }
input::file-selector-button { border: 0; border-radius: 8px; background: var(--color-soft); color: #5146c5; font-family: inherit; font-weight: 600; padding: 9px 12px; margin-right: 10px; cursor: pointer; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--color-error); }
.field-errors { color: #b22a35; font-size: 13px; line-height: 1.65; margin-top: 7px; }
.field-errors ul, .form-errors ul { padding: 0; margin: 0; list-style: none; }
.help-text { color: var(--color-muted); font-size: 12px; margin-top: 8px; line-height: 1.8; overflow-wrap: anywhere; }
.help-text ul { margin: 6px 0; padding-left: 18px; }
.field-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.field-triple { display: grid; grid-template-columns: 1fr 1fr .85fr; gap: 16px; }
.notice, .form-errors, .success-note { display: flex; align-items: start; gap: 12px; padding: 16px 18px; margin-bottom: 24px; border-radius: 12px; font-size: 14px; line-height: 1.8; background: var(--color-soft); color: #514b7c; overflow-wrap: anywhere; }
.notice .icon, .success-note .icon { margin-top: 3px; }
.notice-subtle { background: #f0efff; color: #5a5580; }
.form-errors { display: block; color: #a92d38; background: #fff0f0; border: 1px solid #f3c9ce; }
.filter-error-summary p { margin: 5px 0 0; font-size: 13px; }
.success-note { background: #e8f7ef; color: #17634c; }
.password-control { position: relative; }
.password-control input { padding-right: 86px; }
.password-control button { position: absolute; right: 3px; top: 3px; bottom: 3px; min-width: 74px; border: 0; background: transparent; border-radius: 9px; color: #5c538e; font-size: 13px; font-weight: 600; }
.password-control button:hover { background: var(--color-soft); }
.toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); display: grid; gap: 12px; width: 440px; max-width: calc(100% - 48px); pointer-events: none; }
.toast { display: grid; grid-template-columns: 22px minmax(0,1fr) 36px; align-items: start; gap: 10px; background: #fff; border: 1px solid #d9dcef; border-radius: 16px; padding: 16px 12px 16px 16px; box-shadow: var(--shadow-menu); pointer-events: auto; animation: toast-in 220ms var(--ease); }
.toast p { font-size: 13px; margin: 0; line-height: 1.75; }
.toast-icon { color: var(--color-success); margin-top: 2px; }
.toast.error .toast-icon { color: var(--color-error); }
.toast .icon-button { width: 32px; height: 32px; padding: 6px; margin-top: -5px; }
.is-submitting button[type=submit] { opacity: .6; pointer-events: none; }
.is-submitting button[type=submit]::after { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
/* Artwork detail */
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--color-muted); padding-block: 28px; }
.breadcrumbs a:hover { color: var(--color-primary); }
.artwork-detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; padding-bottom: 24px; align-items: start; }
.artwork-gallery { min-width: 0; }
.gallery-main { display: block; position: relative; border: 0; border-radius: var(--radius-card); background: #eef0f5; width: 100%; padding: 28px; }
.gallery-main img { width: 100%; height: 580px; object-fit: contain; }
.zoom-hint { display: inline-flex; align-items: center; gap: 8px; position: absolute; right: 16px; bottom: 16px; padding: 8px 11px; border-radius: 9px; background: #fff; color: #4b4e60; font-size: 12px; }
.zoom-hint .icon { width: 16px; height: 16px; }
.gallery-thumbnails { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.gallery-thumbnails button { width: 76px; height: 84px; border: 2px solid transparent; background: #fff; padding: 4px; border-radius: 12px; }
.gallery-thumbnails button[aria-pressed=true] { border-color: var(--color-primary); background: var(--color-soft); }
.gallery-thumbnails img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.artwork-info { min-width: 0; padding-top: 4px; }
.detail-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.artwork-info h1 { font-size: clamp(30px,3vw,44px); line-height: 1.2; margin-bottom: 22px; }
.detail-artist { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.detail-artist > span:nth-child(2) { margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
.detail-artist > .icon { color: var(--color-primary); width: 18px; }
.detail-artist small { display: flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 400; color: var(--color-muted); margin-top: 4px; }
.detail-artist small .icon { width: 14px; height: 14px; }
.detail-price-row { margin: 26px 0 22px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.detail-price-row .muted { font-size: 13px; }
.detail-price { display: block; font-family: var(--font-heading); font-size: 34px; font-weight: 800; letter-spacing: -.045em; margin-top: 4px; line-height: 1.5; }
.purchase-actions .button { min-height: 54px; font-size: 15px; }
.purchase-note { display: flex; align-items: start; gap: 8px; font-size: 12px; color: var(--color-muted); line-height: 1.75; margin: 14px 0 0; }
.purchase-note .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--color-success); }
.detail-description { border-top: 1px solid var(--color-border); margin-top: 26px; padding-top: 22px; }
.detail-description h2 { font-size: 19px; margin-bottom: 12px; }
.detail-description p { font-size: 15px; line-height: 1.85; color: var(--color-muted); }
.specs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; margin: 22px 0 0; }
.specs > div { padding: 13px 0; border-bottom: 1px solid var(--color-border); min-width: 0; }
.specs dt { font-size: 12px; color: var(--color-muted); }
.specs dd { font-size: 14px; font-weight: 550; line-height: 1.6; margin: 5px 0 0; overflow-wrap: anywhere; }
.image-dialog { border: 0; padding: 24px; max-width: 96vw; max-height: 94dvh; border-radius: 20px; background: #fff; box-shadow: var(--shadow-modal); }
.image-dialog img { width: auto; max-width: 88vw; max-height: 83dvh; object-fit: contain; margin: auto; }
.dialog-close { position: absolute; top: 8px; right: 8px; background: #fff; z-index: 1; box-shadow: var(--shadow-card); }
/* Creator portfolio */
.creator-profile { padding-top: 32px; }
.profile-cover { height: 172px; position: relative; background: var(--color-soft); border-radius: 24px 24px 0 0; overflow: hidden; }
.profile-cover::before, .profile-cover::after { content: ""; position: absolute; border: 1px solid #d6d2ff; width: 360px; height: 360px; border-radius: 50%; top: -100px; right: 10%; transform: rotate(-20deg); }
.profile-cover::after { right: -40px; top: -170px; width: 480px; height: 480px; }
.profile-cover-label { position: absolute; left: 32px; top: 28px; display: flex; align-items: center; gap: 9px; color: #5b5298; font-size: 13px; }
.profile-body { position: relative; background: #fff; border: 1px solid var(--color-border); border-top: 0; padding: 0 32px 30px; border-radius: 0 0 24px 24px; }
.profile-identity { display: flex; align-items: center; gap: 24px; padding-top: 24px; }
.artist-profile-image { width: 132px; height: 132px; flex: 0 0 auto; display: grid; place-items: center; border: 6px solid #fff; border-radius: 28px; background: var(--color-soft); margin-top: -70px; position: relative; z-index: 1; overflow: hidden; font-size: 40px; font-weight: 750; color: #6557d1; }
.artist-profile-image img { width: 100%; height: 100%; object-fit: cover; }
.creator-name-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.creator-name-row h1 { font-size: 36px; line-height: 1.2; }
.creator-specialization { color: var(--color-muted); font-size: 15px; margin: 8px 0 12px; }
.profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; color: var(--color-muted); font-size: 13px; }
.profile-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.profile-meta .icon { width: 15px; height: 15px; }
.artist-biography { max-width: 850px; margin: 24px 0 0; color: var(--color-muted); font-size: 15px; line-height: 1.9; }
/* Authentication */
.auth-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; padding-block: 48px 64px; max-width: 1180px; align-items: start; }
.auth-story { position: relative; padding: 36px; border-radius: 24px; background: #191a35; color: #fff; overflow: hidden; align-self: stretch; min-height: 690px; }
.auth-story .eyebrow-pill { background: #35345b; color: #e2deff; font-size: 12px; padding: 7px 11px; }
.auth-story h2 { font-size: 42px; letter-spacing: -.045em; margin-top: 24px; margin-bottom: 20px; line-height: 1.15; }
.auth-story > p { color: #d2d3e1; font-size: 15px; line-height: 1.8; max-width: 360px; }
.auth-art-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; align-items: start; }
.auth-art-grid img { width: 100%; height: 240px; object-fit: cover; border-radius: 16px; }
.auth-art-grid img:nth-child(2) { margin-top: 52px; }
.auth-story-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #e2dfff; margin-top: 28px; }
.auth-story-note .icon { color: #ffb29f; width: 18px; height: 18px; }
.register-story { background: #ecedff; color: var(--color-ink); }
.register-story .eyebrow-pill { background: #fff; color: #5b51c3; }
.register-story > p { color: #62617b; }
.register-story .auth-story-note { color: #5b5388; }
.register-story .auth-story-note .icon { color: var(--color-primary); }
.auth-form { padding-block: 14px; min-width: 0; max-width: 460px; }
.auth-form h1 { font-size: 36px; line-height: 1.25; letter-spacing: -.04em; margin-bottom: 14px; }
.auth-form > p { font-size: 15px; color: var(--color-muted); margin-bottom: 28px; }
.auth-form .eyebrow { font-size: 13px; }
.auth-form .field { margin-bottom: 20px; }
.auth-form form .button { margin-top: 8px; }
.auth-form .auth-switch { font-size: 14px; margin-top: 24px; text-align: center; }
.auth-switch a { color: #554bd8; font-weight: 650; text-underline-offset: 4px; }
.auth-switch a:hover { text-decoration: underline; }
.auth-benefit { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 24px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-muted); }
.auth-benefit .icon { color: var(--color-success); width: 17px; height: 17px; }
/* Creator workspace */
.dashboard-layout { max-width: 1440px; display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 32px; padding-block: 32px 64px; min-height: 700px; }
.dashboard-sidebar { background: #fff; border: 1px solid var(--color-border); border-radius: 20px; padding: 20px 12px 12px; align-self: start; min-width: 0; }
.workspace-identity { display: flex; align-items: center; gap: 10px; padding: 0 6px 20px; border-bottom: 1px solid var(--color-border); }
.workspace-identity > div { min-width: 0; }
.workspace-identity strong { display: block; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.workspace-identity small { display: block; font-size: 12px; color: var(--color-muted); margin-top: 2px; }
.sidebar-label { display: block; font-size: 12px; color: var(--color-muted); padding: 20px 10px 12px; }
.dashboard-sidebar nav { display: grid; gap: 5px; }
.dashboard-sidebar nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 11px 12px; font-size: 13px; color: #626779; border-radius: 11px; font-weight: 500; }
.dashboard-sidebar nav a .icon { width: 18px; height: 18px; }
.dashboard-sidebar nav a:hover { background: #f5f4ff; color: var(--color-primary); }
.dashboard-sidebar nav a[aria-current] { background: var(--color-soft); color: #554bd8; font-weight: 650; }
.sidebar-bottom { padding-top: 20px; }
.sidebar-note { background: #f7f6ff; border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.sidebar-note > .icon { color: #7d71e7; width: 22px; height: 22px; margin-bottom: 12px; }
.sidebar-note strong { display: block; font-size: 13px; }
.sidebar-note p { font-size: 12px; color: var(--color-muted); margin: 8px 0 12px; }
.sidebar-note a { font-size: 12px; font-weight: 650; color: #5d52ce; }
.logout-button { display: flex; align-items: center; gap: 10px; min-height: 44px; background: transparent; border: 0; color: #626779; font-size: 13px; width: 100%; border-radius: 10px; padding: 10px 12px; }
.logout-button:hover { background: #fff0f0; color: var(--color-error); }
.logout-button .icon { width: 18px; height: 18px; }
.dashboard-content { min-width: 0; padding-top: 4px; }
.dashboard-heading { margin-bottom: 28px; }
.dashboard-heading h1 { font-size: clamp(28px,2.7vw,40px); letter-spacing: -.04em; }
.dashboard-heading .eyebrow { font-size: 13px; margin-bottom: 10px; }
.dashboard-heading p { color: var(--color-muted); font-size: 14px; margin: 12px 0 0; }
.dashboard-heading > .button { margin-bottom: 4px; }
.metrics-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.metrics-grid article { position: relative; padding: 22px; min-width: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; }
.metric-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 11px; background: var(--color-soft); color: #6257d3; margin-bottom: 18px; }
.metric-icon .icon { width: 19px; height: 19px; }
.metrics-grid article > span:not(.metric-icon) { display: block; font-size: 13px; color: var(--color-muted); line-height: 1.55; }
.metrics-grid article > strong { display: block; font: 800 32px/1.4 var(--font-heading); letter-spacing: -.04em; margin-top: 9px; overflow-wrap: anywhere; }
.metrics-grid article > .metric-money { font-size: 28px; }
.metrics-grid article > small { display: block; font-size: 12px; color: var(--color-muted); margin-top: 8px; line-height: 1.6; }
.metrics-grid .metric-accent { border-color: #dbd6ff; background: #f5f3ff; }
.metrics-grid .metric-accent > strong { color: #574bd1; }
.dashboard-callout { display: flex; align-items: center; gap: 16px; margin: 24px 0 36px; padding: 22px; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; }
.dashboard-callout > div { min-width: 0; margin-right: auto; }
.dashboard-callout h2 { font-size: 19px; letter-spacing: -.025em; }
.dashboard-callout p { font-size: 13px; color: var(--color-muted); margin: 7px 0 0; }
.dashboard-callout > a { flex: 0 0 auto; }
.compact h2 { font-size: 25px; }
.compact > p { margin: 0; }
.dashboard-art-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.buyer-welcome { background: #eeecff; padding: 36px; border-radius: 22px; }
.buyer-welcome h2 { font-size: 36px; margin-top: 24px; margin-bottom: 18px; line-height: 1.25; }
.buyer-welcome p { color: #62617c; font-size: 15px; max-width: 560px; margin-bottom: 26px; }
.management-panel { overflow: hidden; }
.panel-heading { padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; }
.panel-heading h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; letter-spacing: -.02em; }
.table-wrap { width: 100%; max-width: 100%; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: 13px; table-layout: fixed; }
thead { background: #f9fafc; }
th { font-size: 12px; color: var(--color-muted); font-weight: 600; padding: 14px 16px; border-block: 1px solid var(--color-border); }
td { padding: 18px 16px; border-top: 1px solid var(--color-border); vertical-align: middle; overflow-wrap: anywhere; }
thead th:first-child, tbody td:first-child { width: 30%; }
.orders-table th:first-child, .orders-table td:first-child { width: 25%; }
.table-art { display: flex; align-items: center; gap: 12px; }
.table-art > img { width: 48px; height: 60px; object-fit: contain; background: #f0f1f6; border-radius: 8px; flex: 0 0 auto; }
.table-art > span { min-width: 0; }
.table-art strong { font-size: 13px; font-weight: 650; line-height: 1.5; display: block; }
.table-art small, .table-substatus { display: block; font-size: 12px; color: var(--color-muted); margin-top: 5px; line-height: 1.65; }
.table-actions { display: flex; align-items: start; flex-direction: column; gap: 10px; }
.text-button { border: 0; background: transparent; color: #665c96; padding: 3px 0; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--color-error); }
.publication-published { background: #e8f7ef; color: var(--color-success); }
.publication-pending, .status-pending, .status-accepted { background: #fff3dd; color: #8b5c16; }
.publication-draft, .publication-archived, .publication-inactive, .status-cancelled, .status-rejected { background: #f0f1f6; color: #64687a; }
.status-completed_demo { background: #e8f7ef; color: var(--color-success); }
.order-id { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: #5d51d0; }
.order-id .icon { width: 14px; height: 14px; }
.tabs { display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--color-border); margin-bottom: 24px; }
.tabs a { position: relative; padding: 10px 0 14px; font-size: 14px; font-weight: 500; color: var(--color-muted); }
.tabs a[aria-current] { color: var(--color-primary-hover); font-weight: 650; }
.tabs a[aria-current]::after { content: ""; position: absolute; height: 3px; bottom: -1px; left: 0; right: 0; background: var(--color-primary); border-radius: 3px 3px 0 0; }
/* Artwork creation and profile forms */
.form-progress { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 24px; }
.form-progress a { display: inline-flex; align-items: center; gap: 8px; color: #666b7d; font-size: 13px; font-weight: 500; min-height: 32px; }
.form-progress a:hover { color: var(--color-primary); }
.form-progress a span { display: grid; place-items: center; background: var(--color-soft); color: #5e53cb; border-radius: 50%; width: 26px; height: 26px; font-size: 12px; }
.form-section { min-width: 0; margin: 0 0 24px; padding: 28px; }
.form-section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.section-number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #5a4fd1; background: var(--color-soft); font-family: var(--font-heading); font-size: 16px; font-weight: 750; flex: 0 0 auto; }
.form-section-heading h2 { font-size: 22px; }
.form-section-heading p { color: var(--color-muted); font-size: 13px; margin: 6px 0 0; }
.form-actions { gap: 12px; padding-top: 8px; }
.upload-zone { padding: 28px 22px 10px; border: 1px dashed #c4bff1; border-radius: 16px; background: #faf9ff; text-align: center; transition: background var(--transition); }
.upload-zone.is-dragging { background: #eeebff; border-color: var(--color-primary); }
.upload-zone h3 { font-size: 18px; margin: 18px 0 8px; }
.upload-zone > p { color: var(--color-muted); font-size: 13px; margin-bottom: 20px; }
.upload-zone .field-uploads > label { text-align: left; }
.upload-zone .help-text { text-align: left; }
.existing-images, .upload-preview { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; margin-top: 16px; }
.existing-images figure, .upload-preview figure { margin: 0; width: 100px; }
.existing-images img, .upload-preview img { width: 100px; height: 110px; object-fit: contain; background: #f0f1f6; border-radius: 12px; }
.existing-images figcaption, .upload-preview figcaption { color: var(--color-muted); font-size: 12px; margin-top: 6px; overflow-wrap: anywhere; text-align: center; }
.field-remove_images > div { display: flex; flex-wrap: wrap; gap: 12px; }
.field-remove_images label { font-size: 13px; }
.profile-form { padding: 28px; }
.profile-form-header { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.profile-form-header h2 { font-size: 24px; }
.profile-form-header p { color: var(--color-muted); font-size: 13px; margin: 8px 0 0; }
.profile-edit-avatar { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 24px; overflow: hidden; background: var(--color-soft); color: var(--color-primary); flex: 0 0 auto; }
.profile-edit-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-edit-avatar .icon { width: 32px; height: 32px; }
/* Demo checkout and order details */
.checkout-section { padding-bottom: 64px; }
.compact-intro { padding-top: 4px; padding-bottom: 32px; }
.checkout-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.checkout-art { padding: 28px; background: #edf0f5; border-radius: 24px; }
.checkout-art img { width: 100%; max-height: 680px; object-fit: contain; }
.checkout-summary { padding: 28px; }
.checkout-summary h2 { font-size: 30px; line-height: 1.25; margin: 20px 0 10px; }
.checkout-summary .notice { margin-top: 24px; font-size: 13px; padding: 14px; }
.order-amounts { margin: 24px 0; font-size: 14px; }
.order-amounts > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.order-amounts dt { color: var(--color-muted); min-width: 0; }
.order-amounts dd { margin: 0; white-space: nowrap; font-weight: 550; }
.order-amounts .amount-total { border-bottom: 0; border-top: 1px solid var(--color-border); margin-top: 10px; padding-top: 20px; font-size: 17px; }
.order-amounts .amount-total dt { color: var(--color-ink); font-weight: 650; }
.order-amounts .amount-total dd { font-weight: 750; }
.check-label { display: flex; align-items: start; gap: 10px; font-size: 13px; color: var(--color-muted); line-height: 1.8; margin: 24px 0; }
.check-label input { margin-top: 4px; }
.back-link { margin-bottom: 20px; }
.order-timeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; list-style: none; padding: 20px 0 28px; margin: 0; }
.order-timeline li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--color-muted); line-height: 1.6; }
.order-timeline li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #e9eaf1; color: #72758a; flex: 0 0 auto; font-weight: 650; }
.order-timeline .is-done { color: #376657; }
.order-timeline .is-done > span { background: #def3e9; color: var(--color-success); }
.order-detail-panel { padding: 28px; }
.order-work-summary { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--color-border); padding-bottom: 24px; }
.order-work-summary > img { width: 120px; height: 145px; object-fit: contain; border-radius: 14px; background: #eff0f5; flex: 0 0 auto; }
.order-work-summary > div { min-width: 0; }
.order-work-summary .eyebrow { font-size: 12px; color: var(--color-muted); margin-bottom: 12px; }
.order-work-summary h2 { font-size: 27px; margin-bottom: 16px; }
.order-work-summary p { font-size: 13px; margin-bottom: 5px; }
.order-work-summary p span { color: var(--color-muted); margin-right: 8px; }
.status-explanation { display: flex; align-items: start; gap: 10px; background: var(--color-bg); border-radius: 12px; padding: 16px; color: var(--color-muted); font-size: 14px; margin: 24px 0 12px; }
.status-explanation p { margin: 0; }
.status-explanation .icon { margin-top: 3px; color: var(--color-warning); }
/* About, error and footer */
.about-intro { text-align: center; padding-block: 56px 40px; }
.about-intro > p { margin-inline: auto; max-width: 720px; }
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-block: 20px 32px; }
.about-story-image { border-radius: 24px; overflow: hidden; }
.about-story-image img { width: 100%; aspect-ratio: 1.15; object-fit: cover; }
.about-story h2 { font-size: 36px; margin-bottom: 22px; }
.about-story p { font-size: 15px; color: var(--color-muted); line-height: 1.9; }
.about-story .button { margin-top: 10px; }
.demo-explanation { display: flex; align-items: start; gap: 24px; background: #fff; border: 1px solid var(--color-border); border-radius: 24px; padding: 32px; }
.demo-explanation h2 { font-size: 27px; margin-bottom: 18px; }
.demo-explanation p { color: var(--color-muted); font-size: 14px; line-height: 1.9; }
.demo-explanation p:last-child { margin-bottom: 0; }
.faq-section { max-width: 930px; }
.faq-section details { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 20px 24px; margin-bottom: 12px; }
.faq-section summary { font-size: 15px; font-weight: 650; cursor: pointer; line-height: 1.7; }
.faq-section details p { font-size: 14px; color: var(--color-muted); line-height: 1.9; margin: 16px 0 0; }
.error-page { text-align: center; max-width: 840px; padding-block: 60px 88px; }
.error-code { display: block; color: #b3aafc; font-family: var(--font-heading); font-size: 120px; line-height: 1; font-weight: 800; letter-spacing: -.08em; margin-bottom: 26px; }
.error-page h1 { font-size: 36px; }
.error-page > p { color: var(--color-muted); font-size: 15px; margin-top: 20px; }
.error-page .button-row { justify-content: center; margin-top: 30px; }
.site-footer { background: #fff; border-top: 1px solid var(--color-border); padding-top: 48px; }
.footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1.15fr 1.2fr; gap: 48px; padding-bottom: 40px; }
.footer-brand > p { font-size: 14px; color: var(--color-muted); line-height: 1.8; margin-top: 20px; margin-bottom: 18px; }
.footer-main h2 { font-family: var(--font-body); font-size: 14px; font-weight: 650; letter-spacing: 0; margin-bottom: 16px; }
.footer-main nav { display: flex; flex-direction: column; align-items: start; gap: 2px; }
.footer-main nav a { font-size: 13px; color: var(--color-muted); padding-block: 7px; min-height: 36px; }
.footer-main nav a:hover { color: var(--color-primary); }
.footer-bottom { border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; color: var(--color-muted); font-size: 12px; }
/* Motion is an enhancement. Sections remain visible if JavaScript fails. */
[data-reveal].is-visible { animation: section-reveal var(--transition-reveal) both; }
@keyframes section-reveal { from { opacity: .75; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-in { from { opacity: .6; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dropdown-in { from { opacity: .6; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
/* Medium screens */
@media (max-width: 1200px) {
  .container { width: calc(100% - 64px); }
  .header-inner { gap: 22px; }
  .desktop-nav { gap: 18px; }
  .desktop-nav a { font-size: 13px; }
  .header-actions { gap: 6px; }
  .header-cta { font-size: 12px; padding-inline: 12px; }
  .hero { gap: 40px; }
  .hero h1 { font-size: 62px; }
  .hero .button { padding-inline: 17px; font-size: 13px; }
  .hero-collage { grid-template-rows: 145px 145px 110px; gap: 12px; }
  .collage-note { padding: 14px; grid-template-columns: 24px 1fr; gap: 4px 8px; }
  .collage-note strong { font-size: 16px; }
  .collage-note > .icon { width: 22px; height: 22px; }
  .category-grid { gap: 12px; }
  .category-tile > span { font-size: 12px; padding-inline: 1px; }
  .art-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .card-bottom { align-items: start; flex-direction: column; gap: 6px; }
  .benefit-grid { gap: 24px; }
  .benefit-grid strong { font-size: 16px; }
  .artist-card-body { padding-inline: 20px; }
  .artist-card h3 { font-size: 20px; }
  .artist-card-body > p { font-size: 13px; }
  .creator-meta { font-size: 12px; gap: 8px; }
  .dashboard-layout { grid-template-columns: 204px minmax(0,1fr); gap: 24px; }
  .dashboard-sidebar nav a { font-size: 12px; gap: 8px; padding-inline: 10px; }
  .workspace-identity { flex-direction: column; align-items: start; }
  .metrics-grid article { padding: 18px; }
  .metrics-grid article > strong { font-size: 28px; }
  .metrics-grid article > .metric-money { font-size: 24px; }
  .dashboard-callout { flex-wrap: wrap; }
  .dashboard-callout > a { margin-left: 64px; }
  table { font-size: 12px; }
  td, th { padding-inline: 12px; }
  th { font-size: 11px; }
  .table-art { gap: 8px; }
  .table-art > img { width: 40px; height: 50px; }
  .table-art strong, .table-substatus, .table-art small { font-size: 12px; }
  .auth-layout { gap: 48px; }
  .auth-story { padding: 28px; }
  .auth-story h2 { font-size: 38px; }
  .auth-art-grid img { height: 215px; }
  .artwork-detail { gap: 36px; }
  .gallery-main { padding: 24px; }
  .gallery-main img { height: 520px; }
  .checkout-layout { gap: 32px; }
  .about-story { gap: 40px; }
  .footer-main { gap: 32px; }
}
@media (max-width: 960px) {
  .header-inner { min-height: 76px; }
  .desktop-nav { display: none; }
  .header-actions { gap: 8px; }
  .menu-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .header-login { display: none; }
  .header-actions .user-menu-name { display: none; }
  .user-menu summary > .icon { display: none; }
  .hero { gap: 32px; padding-top: 40px; padding-bottom: 32px; }
  .hero h1 { font-size: 48px; letter-spacing: -.055em; }
  .hero-copy > p { font-size: 15px; }
  .hero .button-row { gap: 10px; }
  .hero .button { font-size: 12px; padding-inline: 14px; min-height: 48px; }
  .hero-community { gap: 10px; }
  .hero-community strong, .hero-community small { font-size: 11px; }
  .avatar-stack img { width: 30px; height: 30px; }
  .hero-collage { grid-template-rows: 142px 142px 102px; gap: 10px; }
  .collage-tile > span { font-size: 11px; padding: 8px; left: 8px; right: 8px; bottom: 8px; gap: 4px; }
  .collage-note { grid-template-columns: 1fr; padding: 12px; gap: 3px; }
  .collage-note > .icon { display: none; }
  .collage-note strong { font-size: 15px; }
  .collage-note small { font-size: 10px; margin-top: 2px; }
  .category-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
  .category-tile > span { font-size: 13px; min-height: 42px; }
  .benefit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
  .artists-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .steps { gap: 16px; }
  .steps article { padding: 22px; }
  .steps h3 { font-size: 19px; }
  .steps p { font-size: 14px; }
  .creator-cta { padding: 36px; gap: 32px; }
  .creator-cta h2 { font-size: 34px; }
  .creator-cta .button { padding-inline: 18px; font-size: 13px; }
  .dashboard-layout { grid-template-columns: 1fr; gap: 24px; }
  .dashboard-sidebar { padding: 16px; }
  .workspace-identity { flex-direction: row; padding: 0 0 16px; }
  .sidebar-label, .sidebar-note { display: none; }
  .dashboard-sidebar nav { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
  .dashboard-sidebar nav a { padding: 9px 12px; min-height: 40px; font-size: 13px; background: #f7f8fc; }
  .sidebar-bottom { padding-top: 10px; }
  .sidebar-bottom .logout-button { min-height: 36px; padding: 5px 8px; width: auto; font-size: 12px; }
  .metrics-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-callout { flex-wrap: nowrap; }
  .dashboard-callout > a { margin-left: 0; }
  .auth-layout { gap: 32px; }
  .auth-story { min-height: 650px; padding: 24px; }
  .auth-story h2 { font-size: 33px; }
  .auth-story > p { font-size: 14px; }
  .auth-art-grid { gap: 12px; }
  .auth-art-grid img { height: 200px; }
  .auth-form h1 { font-size: 30px; }
  .artwork-detail { gap: 28px; }
  .gallery-main img { height: 450px; }
  .artwork-info h1 { font-size: 32px; }
  .detail-price { font-size: 30px; }
  .detail-description p { font-size: 14px; }
  .checkout-summary { padding: 24px; }
  .order-amounts { font-size: 13px; }
  .order-amounts .amount-total { font-size: 15px; }
  .checkout-layout { gap: 24px; }
  .about-story { gap: 32px; }
  .about-story h2 { font-size: 30px; }
  .about-story p { font-size: 14px; }
  .footer-main { grid-template-columns: 1.4fr 1fr; gap: 32px 48px; }
  .footer-bottom { flex-wrap: wrap; gap: 12px; }
  .footer-bottom > span:nth-child(2) { order: 3; width: 100%; }
  .footer-bottom > span:last-child { margin-left: auto; }
}
/* Mobile — no sideways tables; all content stays within the viewport. */
@media (max-width: 767px) {
  html { scroll-padding-top: 96px; }
  .container { width: calc(100% - 40px); }
  .header-inner { gap: 12px; min-height: 72px; }
  .wordmark { gap: 9px; }
  .brandmark { width: 38px; height: 38px; font-size: 31px; border-radius: 11px; }
  .brandmark > span { font-size: 28px; }
  .brand-name { font-size: 21px; }
  .brand-name small { font-size: 8px; letter-spacing: 3px; margin-top: 5px; }
  .header-actions { gap: 4px; }
  .header-search, .menu-toggle { width: 40px; }
  .avatar-mini { width: 36px; height: 36px; font-size: 16px; }
  .user-dropdown { right: -36px; top: calc(100% + 18px); }
  .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; padding-bottom: 32px; }
  .hero .eyebrow-pill { font-size: 12px; padding: 7px 12px; }
  .hero h1 { font-size: 42px; line-height: 1.12; letter-spacing: -.05em; margin-top: 20px; margin-bottom: 18px; }
  .hero-copy > p { font-size: 15px; line-height: 1.75; margin-bottom: 24px; max-width: 520px; }
  .hero .button-row { gap: 10px; }
  .hero .button { min-height: 50px; font-size: 13px; padding-inline: 17px; }
  .hero-community { margin-top: 22px; gap: 12px; }
  .hero-community strong { font-size: 12px; }
  .hero-community small { font-size: 12px; }
  .avatar-stack img { width: 34px; height: 34px; }
  .hero-collage { grid-template-columns: 1.15fr 1fr; grid-template-rows: 122px 110px; max-width: 520px; gap: 12px; width: 100%; padding-block: 0; margin-inline: auto; }
  .tile-photo, .collage-note { display: none; }
  .collage-tile { border-radius: 16px; }
  .collage-tile > span { font-size: 12px; padding: 8px 10px; }
  .collage-tile > span .icon { width: 14px; height: 14px; }
  .tile-pottery > img { object-position: center 67%; }
  .categories-section { padding-top: 8px; }
  .section { padding-block: 40px; }
  .section-bottom { padding-bottom: 40px; }
  .section-heading { gap: 16px; align-items: start; flex-wrap: wrap; margin-bottom: 24px; }
  .section-heading h2 { font-size: 29px; }
  .section-heading p { font-size: 14px; margin-top: 10px; }
  .section-heading .eyebrow { font-size: 12px; margin-bottom: 10px; }
  .section-heading .text-link { font-size: 13px; }
  .category-grid { grid-auto-flow: column; grid-auto-columns: 142px; grid-template-columns: none; overflow-x: auto; overscroll-behavior-inline: contain; gap: 12px; padding-bottom: 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .category-tile { scroll-snap-align: start; }
  .category-tile > span { min-height: 44px; font-size: 13px; }
  .why-section { padding-block: 36px; margin-top: 0; }
  .benefit-grid { gap: 28px 20px; }
  .benefit-grid .feature-icon { width: 42px; height: 42px; border-radius: 12px; }
  .benefit-grid strong { font-size: 16px; margin-top: 14px; }
  .benefit-grid p { font-size: 13px; }
  .art-grid, .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 14px; }
  .art-card { padding: 7px; border-radius: 16px; }
  .art-card-image { border-radius: 11px; }
  .card-category { font-size: 11px; padding: 3px 6px; left: 7px; top: 7px; border-radius: 5px; }
  .card-demo { font-size: 10px; padding: 3px 5px; left: 7px; bottom: 7px; }
  .card-view { width: 28px; height: 28px; right: 7px; bottom: 7px; opacity: 1; transform: none; }
  .card-view .icon { width: 15px; height: 15px; }
  .card-info { padding: 12px 4px 0; }
  .card-info h3 { font-size: 16px; line-height: 1.4; min-height: 45px; letter-spacing: -.02em; }
  .artist-link { font-size: 12px; gap: 4px; }
  .artist-link .icon { width: 12px; height: 12px; }
  .card-bottom { padding: 12px 4px 5px; margin-top: 10px; gap: 7px; }
  .card-price { font-size: 15px; line-height: 1.5; }
  .availability { font-size: 11px; gap: 4px; }
  .availability > span { width: 5px; height: 5px; }
  .artists-grid { grid-template-columns: 1fr; gap: 20px; }
  .artist-cover-grid { height: 152px; }
  .artist-cover-grid > span { height: 136px; }
  .artist-card h3 { font-size: 23px; }
  .artist-card-body { padding: 44px 22px 22px; }
  .artist-card-body > p { min-height: 0; font-size: 14px; }
  .creator-meta { font-size: 13px; }
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .steps article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 0 18px; padding: 24px; }
  .steps .step-number { grid-row: 1 / 3; }
  .steps h3 { margin: 0 0 10px; font-size: 21px; }
  .steps p { grid-column: 2; font-size: 14px; }
  .center-heading { text-align: left; justify-content: start; }
  .section-footnote { font-size: 12px; text-align: left; margin-top: 20px; }
  .creator-cta { flex-direction: column; align-items: start; padding: 28px; margin-bottom: 40px; gap: 24px; border-radius: 22px; }
  .creator-cta h2 { font-size: 31px; }
  .creator-cta .eyebrow { font-size: 12px; }
  .creator-cta p { font-size: 14px; }
  .creator-cta .button { font-size: 14px; width: 100%; }
  .page-intro { padding-block: 32px 28px; }
  .page-intro h1 { font-size: 34px; margin-bottom: 16px; }
  .page-intro > p { font-size: 15px; }
  .discover-intro { padding-block: 32px 24px; text-align: left; }
  .discover-intro h1 { font-size: 36px; }
  .discover-intro .eyebrow { font-size: 12px; }
  .discover-intro > p { font-size: 15px; line-height: 1.75; margin-bottom: 24px; }
  .discovery-search { padding: 6px; gap: 8px; border-radius: 14px; }
  .discovery-search > .icon { margin-left: 6px; width: 18px; height: 18px; }
  .discovery-search input:not([type=hidden]) { font-size: 14px; min-height: 42px; padding-block: 8px; }
  .discovery-search .button { padding: 10px 12px; font-size: 12px; gap: 0; min-height: 42px; }
  .discovery-search .button .icon { display: none; }
  .catalogue-shell { padding-bottom: 40px; }
  .category-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; overscroll-behavior-inline: contain; padding-block: 0 18px; gap: 8px; scrollbar-width: thin; }
  .chip { font-size: 13px; min-height: 40px; padding: 8px 15px; }
  .catalogue-toolbar { flex-direction: column; gap: 16px; align-items: start; padding-block: 18px; }
  .catalogue-toolbar > p { font-size: 13px; }
  .catalogue-actions { width: 100%; gap: 10px; }
  .catalogue-actions > .button { padding-inline: 12px; font-size: 13px; }
  .sort-control { flex: 1; min-width: 0; gap: 2px; }
  .sort-control select { width: 100%; min-width: 0; font-size: 13px; padding-inline: 10px; }
  .sort-submit { flex: 0 0 auto; width: 32px; padding: 6px; }
  .filter-dialog { width: 100%; max-width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .dialog-header { padding: 24px 20px 18px; }
  .dialog-header h2 { font-size: 22px; }
  .dialog-header p { font-size: 13px; }
  .filter-dialog .filter-panel { padding: 20px; }
  .filter-footer { position: sticky; bottom: -20px; background: #fff; padding-bottom: calc(20px + env(safe-area-inset-bottom)); margin-bottom: -20px; z-index: 1; }
  .active-filter { font-size: 12px; }
  .active-filters > .text-link { font-size: 12px; }
  .field { margin-bottom: 20px; }
  .field > label { font-size: 14px; }
  input:not([type=checkbox],[type=radio],[type=hidden]), select, textarea { font-size: 16px; min-height: 50px; }
  input[type=file] { font-size: 13px; padding: 9px; }
  .field-pair { gap: 14px; }
  .field-triple { gap: 10px; }
  .help-text { font-size: 12px; line-height: 1.8; }
  .notice, .form-errors, .success-note { font-size: 13px; padding: 14px; gap: 10px; margin-bottom: 20px; }
  .notice .icon, .success-note .icon { width: 18px; height: 18px; }
  .toast-stack { right: 16px; left: 16px; bottom: 16px; max-width: none; width: auto; }
  .toast { padding: 14px 10px 14px 14px; gap: 8px; }
  .toast p { font-size: 13px; }
  .breadcrumbs { padding-block: 22px; font-size: 12px; gap: 8px; }
  .artwork-detail { grid-template-columns: 1fr; gap: 28px; padding-bottom: 8px; }
  .gallery-main { padding: 20px; border-radius: 18px; }
  .gallery-main img { height: auto; max-height: 520px; min-height: 260px; }
  .zoom-hint { font-size: 11px; right: 12px; bottom: 12px; }
  .gallery-thumbnails { gap: 10px; margin-top: 12px; }
  .gallery-thumbnails button { width: 65px; height: 72px; }
  .artwork-info h1 { font-size: 34px; margin-bottom: 20px; }
  .detail-topline { margin-bottom: 18px; }
  .detail-price { font-size: 32px; }
  .detail-description p { font-size: 15px; }
  .specs { gap: 0 20px; }
  .image-dialog { padding: 14px; border-radius: 16px; max-width: calc(100% - 20px); }
  .image-dialog img { max-width: 86vw; max-height: 80dvh; }
  .dialog-close { right: 6px; top: 6px; }
  .creator-profile { padding-top: 24px; }
  .profile-cover { height: 136px; border-radius: 20px 20px 0 0; }
  .profile-cover-label { left: 20px; top: 20px; font-size: 12px; max-width: calc(100% - 40px); }
  .profile-body { padding: 0 20px 24px; border-radius: 0 0 20px 20px; }
  .profile-identity { flex-direction: column; align-items: start; gap: 16px; padding-top: 0; }
  .artist-profile-image { width: 104px; height: 104px; border-radius: 24px; margin-top: -44px; }
  .creator-name-row { gap: 10px; }
  .creator-name-row h1 { font-size: 30px; }
  .creator-specialization { font-size: 14px; }
  .profile-meta { gap: 12px 16px; font-size: 12px; }
  .artist-biography { font-size: 14px; margin-top: 20px; }
  .auth-layout { grid-template-columns: 1fr; gap: 0; padding-block: 32px 40px; max-width: 520px; }
  .auth-story { display: none; }
  .auth-form { max-width: 100%; width: 100%; padding: 0; }
  .auth-form h1 { font-size: 33px; margin-bottom: 14px; }
  .auth-form > p { font-size: 15px; margin-bottom: 28px; }
  .auth-form .eyebrow { font-size: 12px; }
  .auth-form .auth-switch { font-size: 14px; }
  .dashboard-layout { padding-block: 24px 40px; gap: 26px; }
  .dashboard-sidebar { padding: 16px; border-radius: 16px; }
  .dashboard-sidebar nav { gap: 6px; }
  .dashboard-sidebar nav a { min-height: 42px; font-size: 12px; gap: 7px; padding: 8px 10px; }
  .dashboard-sidebar nav a .icon { width: 16px; height: 16px; }
  .dashboard-sidebar .workspace-identity { padding-bottom: 14px; }
  .sidebar-bottom .logout-button { min-height: 40px; }
  .dashboard-heading { gap: 18px; margin-bottom: 24px; }
  .dashboard-heading h1 { font-size: 30px; }
  .dashboard-heading p { font-size: 14px; line-height: 1.75; }
  .dashboard-heading .eyebrow { font-size: 12px; }
  .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .metrics-grid article { padding: 16px; border-radius: 16px; }
  .metric-icon { width: 34px; height: 34px; margin-bottom: 14px; }
  .metric-icon .icon { width: 18px; height: 18px; }
  .metrics-grid article > span:not(.metric-icon) { font-size: 12px; line-height: 1.6; }
  .metrics-grid article > strong { font-size: 28px; }
  .metrics-grid article > .metric-money { font-size: 22px; }
  .metrics-grid article > small { font-size: 12px; line-height: 1.65; }
  .dashboard-callout { flex-wrap: wrap; padding: 20px; gap: 14px; margin-top: 20px; margin-bottom: 28px; }
  .dashboard-callout > .feature-icon { width: 42px; height: 42px; }
  .dashboard-callout > div { flex: 1; min-width: 0; }
  .dashboard-callout > a { width: 100%; margin: 0; }
  .dashboard-callout h2 { font-size: 18px; }
  .dashboard-callout p { font-size: 13px; }
  .buyer-welcome { padding: 26px; border-radius: 18px; }
  .buyer-welcome h2 { font-size: 29px; }
  .buyer-welcome p { font-size: 14px; }
  .buyer-welcome .button-row { align-items: stretch; flex-direction: column; }
  .compact h2 { font-size: 24px; }
  .management-panel { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .panel-heading { padding: 0 0 18px; }
  .panel-heading h2 { font-size: 18px; }
  .table-wrap { overflow: visible; }
  .responsive-table { display: block; table-layout: auto; }
  .responsive-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .responsive-table tbody { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; width: 100%; }
  .responsive-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; min-width: 0; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; padding: 18px; }
  .responsive-table td, .responsive-table td:first-child { display: block; min-width: 0; width: auto; padding: 0; border: 0; font-size: 13px; }
  .responsive-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--color-muted); margin-bottom: 5px; }
  .responsive-table .mobile-table-title { grid-column: 1 / -1; border-bottom: 1px solid var(--color-border); padding-bottom: 16px; }
  .responsive-table .mobile-table-title::before { display: none; }
  .responsive-table .mobile-table-actions { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--color-border); }
  .responsive-table .mobile-table-actions::before { display: none; }
  .responsive-table .table-actions { display: flex; align-items: center; flex-direction: row; gap: 20px; }
  .responsive-table .table-art img { width: 52px; height: 64px; }
  .responsive-table .table-art strong { font-size: 15px; }
  .responsive-table .table-art small { font-size: 12px; }
  .responsive-table .button-compact { min-height: 42px; padding: 9px 14px; font-size: 13px; }
  .responsive-table .text-button { min-height: 42px; font-size: 13px; }
  .responsive-table .empty-table-row { display: block; padding: 0; }
  .responsive-table .empty-table-row td { width: 100%; }
  .responsive-table .empty-state { padding: 32px 16px; }
  .order-id { font-size: 14px; }
  .tabs { gap: 24px; }
  .tabs a { font-size: 13px; }
  .form-progress { gap: 8px 16px; margin-bottom: 20px; }
  .form-progress a { font-size: 12px; min-height: 36px; gap: 6px; }
  .form-section { padding: 22px 18px; margin-bottom: 20px; border-radius: 16px; }
  .form-section-heading { gap: 12px; margin-bottom: 24px; }
  .section-number { width: 38px; height: 38px; font-size: 14px; }
  .form-section-heading h2 { font-size: 20px; }
  .form-section-heading p { font-size: 12px; }
  .form-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .form-actions > .button, .form-actions > form, .form-actions > form .button { width: 100%; }
  .form-actions .text-link { justify-content: center; }
  .upload-zone { padding: 22px 14px 6px; }
  .upload-zone h3 { font-size: 17px; }
  .upload-zone > p { font-size: 13px; }
  .existing-images figure, .upload-preview figure { width: 80px; }
  .existing-images img, .upload-preview img { width: 80px; height: 90px; border-radius: 10px; }
  .profile-form { padding: 22px 18px; border-radius: 16px; }
  .profile-form-header { gap: 16px; margin-bottom: 24px; }
  .profile-form-header h2 { font-size: 22px; }
  .profile-form-header p { font-size: 13px; }
  .profile-edit-avatar { width: 72px; height: 72px; border-radius: 20px; }
  .checkout-section { padding-bottom: 40px; }
  .compact-intro { padding-top: 0; padding-bottom: 28px; }
  .checkout-layout { grid-template-columns: 1fr; gap: 24px; }
  .checkout-art { padding: 20px; border-radius: 20px; }
  .checkout-art img { max-height: 420px; }
  .checkout-summary { padding: 24px 20px; border-radius: 18px; }
  .checkout-summary h2 { font-size: 29px; }
  .order-amounts { font-size: 13px; }
  .order-amounts > div { gap: 12px; }
  .order-amounts .amount-total { font-size: 15px; }
  .order-amounts .amount-total dd { font-size: 16px; }
  .check-label { font-size: 13px; gap: 10px; }
  .order-timeline { grid-template-columns: 1fr; padding: 4px 0 24px; gap: 12px; }
  .order-timeline li { font-size: 13px; }
  .order-detail-panel { padding: 22px 18px; border-radius: 18px; }
  .order-work-summary { align-items: start; gap: 16px; }
  .order-work-summary > img { width: 84px; height: 110px; border-radius: 10px; }
  .order-work-summary h2 { font-size: 23px; line-height: 1.3; margin-bottom: 12px; }
  .order-work-summary .eyebrow { font-size: 11px; margin-bottom: 9px; }
  .order-work-summary p { font-size: 12px; }
  .status-explanation { font-size: 13px; padding: 14px; }
  .about-intro { text-align: left; padding-top: 36px; }
  .about-story { grid-template-columns: 1fr; gap: 28px; padding-block: 0 16px; }
  .about-story-image img { aspect-ratio: 1.4; }
  .about-story h2 { font-size: 31px; }
  .about-story p { font-size: 15px; }
  .demo-explanation { flex-direction: column; padding: 24px; gap: 20px; }
  .demo-explanation h2 { font-size: 25px; }
  .demo-explanation p { font-size: 14px; }
  .faq-section details { padding: 18px; }
  .faq-section summary { font-size: 14px; }
  .faq-section details p { font-size: 14px; }
  .error-page { padding-block: 44px 56px; }
  .error-code { font-size: 96px; }
  .error-page h1 { font-size: 29px; }
  .error-page > p { font-size: 14px; }
  .error-page .button-row { flex-direction: column; align-items: stretch; }
  .empty-state { padding: 40px 20px; }
  .empty-state h2, .empty-state h3 { font-size: 25px; }
  .empty-state p { font-size: 14px; }
  .pagination { gap: 8px; margin-top: 28px; font-size: 13px; }
  .pagination .button { min-height: 42px; padding: 9px 12px; font-size: 12px; }
  .pagination .button .icon { width: 15px; }
  .pagination-current { width: 38px; height: 40px; }
  .site-footer { padding-top: 36px; }
  .footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; padding-bottom: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand > p { font-size: 14px; margin-top: 18px; }
  .footer-main h2 { font-size: 13px; margin-bottom: 12px; }
  .footer-main nav a { font-size: 13px; min-height: 40px; padding-block: 8px; }
  .footer-bottom { padding-block: 18px; font-size: 12px; gap: 12px; }
}
@media (max-width: 519px) {
  .field-pair { grid-template-columns: 1fr; gap: 0; }
  .advanced-filter-form .field-pair { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .form-section .field-triple { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .form-section .field-triple .field-unit { grid-column: 1 / -1; }
  .dashboard-art-grid { gap: 20px 14px; }
}
@media (max-width: 374px) {
  .container { width: calc(100% - 32px); }
  .header-actions { gap: 0; }
  .brandmark { width: 35px; height: 35px; font-size: 28px; }
  .brand-name { font-size: 19px; }
  .brand-name small { font-size: 7px; }
  .header-search, .menu-toggle { width: 36px; padding: 8px; }
  .header-actions .avatar-mini { width: 30px; height: 30px; font-size: 14px; }
  .wordmark { gap: 8px; }
  .hero h1 { font-size: 37px; }
  .hero .button-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .button { font-size: 14px; }
  .hero-community { gap: 10px; }
  .hero-community strong, .hero-community small { font-size: 11px; }
  .avatar-stack img { width: 30px; height: 30px; }
  .hero-collage { grid-template-rows: 110px 104px; gap: 10px; }
  .collage-tile > span { font-size: 11px; padding: 7px; gap: 2px; }
  .collage-tile > span .icon { width: 12px; height: 12px; }
  .section-heading h2 { font-size: 27px; }
  .art-grid, .catalog-grid, .dashboard-art-grid { grid-template-columns: 1fr; gap: 20px; }
  .art-card { padding: 10px; border-radius: 18px; }
  .art-card-image { aspect-ratio: 1 / 1.12; }
  .card-info h3 { font-size: 18px; min-height: 0; }
  .card-category, .card-demo { font-size: 12px; }
  .artist-link { font-size: 13px; }
  .card-price { font-size: 17px; }
  .availability { font-size: 12px; }
  .card-bottom { flex-direction: row; align-items: center; }
  .card-view { width: 34px; height: 34px; }
  .benefit-grid { grid-template-columns: 1fr; gap: 24px; }
  .benefit-grid article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 0 14px; }
  .benefit-grid .feature-icon { grid-row: 1 / 3; }
  .benefit-grid strong { margin: 0 0 6px; }
  .benefit-grid p { grid-column: 2; }
  .hero .eyebrow-pill { font-size: 11px; }
  .discover-intro h1 { font-size: 32px; }
  .sort-control select { font-size: 12px; }
  .catalogue-actions { gap: 8px; }
  .catalogue-actions > .button { font-size: 12px; padding-inline: 10px; gap: 7px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metrics-grid article { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 0 14px; }
  .metrics-grid .metric-icon { grid-row: 1 / 4; margin: 0; }
  .metrics-grid article > strong, .metrics-grid article > small { grid-column: 2; }
  .metrics-grid article > .metric-money { font-size: 25px; }
  .profile-form-header { flex-direction: column; align-items: start; }
  .order-work-summary { flex-direction: column; gap: 18px; }
  .order-amounts .amount-total { font-size: 14px; }
  .order-amounts .amount-total dd { font-size: 14px; }
  .creator-cta { padding: 24px; }
  .creator-cta h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* v3 extends the approved Creative Indigo tokens. */
.community-shell { padding-block: 28px 64px; }
.community-nav { display:flex; flex-wrap:wrap; gap:8px; padding:12px; background:#fff; border:1px solid var(--color-border); border-radius:16px; margin-bottom:36px; }
.community-nav a { padding:8px 12px; min-height:40px; display:inline-flex; align-items:center; gap:7px; border-radius:9px; color:var(--color-muted); font-size:14px; }
.community-nav a:hover { background:var(--color-soft); color:var(--color-primary-hover); }
.social-hero { padding:32px 0 44px; max-width:760px; }
.social-hero h1 { font-size:clamp(36px,4.4vw,64px); margin-bottom:20px; }
.social-hero p { color:var(--color-muted); font-size:18px; max-width:620px; }
.social-hero .button { margin-right:18px; }
.fan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.fan-card { border:1px solid var(--color-border); background:#fff; border-radius:20px; overflow:hidden; min-width:0; }
.fan-card-head { padding:16px; }
.creator-line { display:flex; gap:12px; align-items:center; min-width:0; }
.creator-line strong { font-size:14px; }
.creator-line small { display:block; color:var(--color-muted); font-size:12px; margin-top:2px; }
.fan-image { display:block; background:#eeeff4; aspect-ratio:1 / 1.04; }
.fan-image img { width:100%; height:100%; object-fit:contain; transition:transform var(--transition); }
.fan-image:hover img { transform:scale(1.015); }
.fan-card-body { padding:18px; }
.fan-card-body p { font-size:14px; line-height:1.75; min-height:50px; }
.fan-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; color:var(--color-muted); font-size:13px; }
.fan-detail { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:start; }
.fan-gallery { display:grid; gap:20px; }
.fan-gallery img { width:100%; height:auto; max-height:760px; object-fit:contain; background:#f0f1f6; border-radius:20px; }
.fan-story { min-width:0; }
.fan-story > * { margin-bottom:24px; }
.fan-story > .creator-line { margin-bottom:12px; }
.fan-caption { font:650 26px/1.6 var(--font-heading); white-space:pre-wrap; margin:22px 0; letter-spacing:-.02em; }
.fan-reactions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.fan-reactions form { display:flex; flex-wrap:wrap; gap:8px; }
.sketch-sale { padding:24px; }
.sketch-sale h2 { font-size:32px; margin-top:18px; margin-bottom:12px; }
.comments-section { max-width:840px; margin-top:56px; }
.comments-section h2 { margin-bottom:24px; }
.comment-form { margin-block:24px 32px; }
.comment-card { padding:24px; background:#fff; border:1px solid var(--color-border); border-radius:16px; margin-bottom:16px; }
.comment-card header { display:flex; justify-content:space-between; gap:16px; margin-bottom:12px; flex-wrap:wrap; }
.comment-card small { color:var(--color-muted); font-size:12px; }
.comment-card p { white-space:normal; overflow-wrap:anywhere; }
.social-form { padding:32px; max-width:840px; margin-block:24px; }
.social-form h2 { margin-bottom:18px; }
.social-form form { min-width:0; }
.social-profile { display:flex; gap:32px; padding:36px; align-items:center; }
.social-profile h1 { margin-bottom:16px; }
.social-profile p { max-width:760px; }
.avatar-large { display:grid; place-items:center; width:120px; height:120px; flex:0 0 auto; background:var(--color-soft); color:var(--color-primary-hover); border-radius:32px; overflow:hidden; font-size:48px; }
.avatar-large img { width:100%; height:100%; object-fit:cover; }
.social-profile-actions { margin-block:24px 40px; }
.social-section-title { margin-block:36px 22px; font-size:30px; }
.trust-card { padding:40px; max-width:840px; margin-inline:auto; }
.trust-card > .badge { margin-bottom:20px; }
.trust-card h1 { margin-bottom:20px; }
.trust-card h2 { font-size:26px; margin-block:24px 12px; }
.trust-card .help-text { margin-top:24px; }
.moderation-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.moderation-metrics article { padding:20px; }
.moderation-metrics strong { display:block; font:750 32px var(--font-heading); margin-bottom:6px; }
.moderation-metrics span { font-size:13px; color:var(--color-muted); }
.review-row { display:flex; align-items:center; gap:24px; padding:24px; margin-bottom:16px; min-width:0; }
.review-row > div { flex:1; min-width:0; }
.review-row img { width:110px; height:110px; object-fit:contain; background:#f0f1f6; border-radius:12px; }
.review-row h3 { font-size:20px; margin-bottom:12px; }
.review-row p { margin-bottom:8px; font-size:14px; }
.review-row small { color:var(--color-muted); }
.review-detail { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:32px; margin-block:32px; }
.review-detail h2 { font-size:28px; margin-block:24px 16px; }
.review-detail .social-form { margin-top:0; }
.audit-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.audit-list article,.audit-entry { border:1px solid var(--color-border); background:#fff; border-radius:12px; padding:18px; margin-bottom:12px; overflow-wrap:anywhere; }
.audit-list span,.audit-list small { display:block; font-size:12px; color:var(--color-muted); margin-block:8px; }
.audit-list p,.audit-entry p { font-size:14px; }
.inbox-list { max-width:900px; }
.inbox-row { display:flex; align-items:center; gap:20px; padding:22px; margin-bottom:12px; }
.inbox-row:hover { border-color:#cbc5ff; }
.inbox-row > span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; }
.inbox-row small { display:block; color:var(--color-muted); font-size:12px; }
.chat-panel { max-width:1000px; margin:20px auto 0; overflow:hidden; }
.chat-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; border-bottom:1px solid var(--color-border); }
.chat-header h1 { font-size:27px; }
.chat-history { display:flex; flex-direction:column; gap:16px; min-height:200px; padding:28px; background:#f5f5fb; }
.message-bubble { align-self:flex-start; max-width:85%; padding:16px 20px; background:#fff; border:1px solid var(--color-border); border-radius:16px 16px 16px 4px; min-width:0; overflow-wrap:anywhere; }
.message-bubble.is-own { align-self:flex-end; background:var(--color-soft); border-color:#e1ddff; border-radius:16px 16px 4px 16px; }
.message-bubble p { margin-bottom:8px; white-space:pre-wrap; }
.message-bubble small,.message-bubble a { font-size:11px; color:var(--color-muted); }
.message-bubble a { margin-left:12px; text-decoration:underline; }
.chat-composer,.chat-pages { padding:24px; }
.chat-pages { display:flex; justify-content:space-between; gap:16px; padding-block:0; }
.chat-composer textarea { min-height:100px; }
.policy-card { padding:40px; max-width:900px; margin:auto; }
.policy-card h1 { margin-bottom:28px; }
.policy-card h2 { font-size:27px; margin-block:32px 16px; }
.policy-card li { padding-block:7px; }
blockquote { margin:20px 0; padding:20px; background:var(--color-bg); border-left:3px solid var(--color-primary); overflow-wrap:anywhere; }
@media(max-width:1199px) { .desktop-nav { display:none; } .menu-toggle { display:inline-flex; } }
@media(max-width:960px) { .fan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .fan-detail,.review-detail { grid-template-columns:1fr; } .moderation-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } .audit-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) {
 .community-shell { padding-top:20px; padding-bottom:40px; }
 .community-nav { margin-bottom:26px; padding:8px; gap:4px; }
 .community-nav a { font-size:12px; padding:7px 9px; min-height:40px; }
 .social-hero { padding:16px 0 32px; }
 .social-hero h1 { font-size:38px; }
 .social-hero p { font-size:16px; }
 .social-hero .text-link { margin-top:16px; }
 .fan-grid { grid-template-columns:1fr; gap:24px; }
 .fan-caption { font-size:22px; }
 .social-form,.trust-card,.policy-card { padding:24px 20px; border-radius:18px; }
 .social-profile { padding:24px; align-items:start; flex-direction:column; gap:22px; }
 .social-profile .avatar-large { width:90px; height:90px; border-radius:24px; }
 .social-profile h1 { font-size:32px; }
 .social-profile-actions { align-items:stretch; flex-direction:column; }
 .social-profile-actions form,.social-profile-actions .button { width:100%; }
 .social-profile-actions .text-link { justify-content:center; }
 .moderation-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .moderation-metrics article { padding:16px; }
 .review-row { flex-wrap:wrap; gap:16px; padding:20px; }
 .review-row img { width:80px; height:100px; }
 .review-row > div { flex-basis:calc(100% - 110px); }
 .review-row > .button { width:100%; }
 .review-row .button-row { flex-basis:100%; }
 .audit-list { grid-template-columns:1fr; }
 .review-detail { gap:24px; }
 .chat-header { padding:20px; flex-wrap:wrap; }
 .chat-header h1 { font-size:23px; }
 .chat-header .button { min-height:42px; font-size:12px; }
 .chat-history { padding:20px 12px; }
 .message-bubble { max-width:94%; padding:14px; font-size:14px; }
 .message-bubble a { display:block; margin-left:0; margin-top:8px; min-height:28px; padding-top:4px; }
 .chat-composer { padding:20px; }
 .chat-composer .button { width:100%; }
 .comments-section { margin-top:36px; }
}


/* v4 mobile navigation: one bounded glass layer and transform-only capsule. */
:root {
  --dock-height: 72px;
  --dock-duration: 240ms;
  --dock-glass: rgb(255 255 255 / 91%);
}
.liquid-dock { display: none; }
.notification-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
  color: var(--color-muted); transition: color var(--transition), background var(--transition);
}
.notification-bell:hover { background: var(--color-soft); color: var(--color-primary-hover); }
.notification-bell svg { width: 21px; height: 21px; }
.notification-count {
  position: absolute; top: 0; right: -2px; display: grid; place-items: center;
  min-width: 19px; min-height: 19px; padding: 0 4px; border: 2px solid #fff;
  border-radius: 20px; background: var(--color-primary-hover); color: #fff; font-size: 10px; font-weight: 700;
}
.notification-list { display: grid; gap: 14px; }
.notification-row { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 24px; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; }
.notification-row.is-unread { border-color: #cbc5ff; background: #f7f5ff; box-shadow: inset 3px 0 0 #635bff; }
.notification-row h2, .notification-row h3 { font-size: 19px; margin-bottom: 8px; }
.notification-row p { font-size: 14px; margin-bottom: 10px; }
.notification-row small { color: var(--color-muted); font-size: 12px; }
.notification-row form { flex: 0 0 auto; }
.beta-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.message-poll-status { margin: 0; padding-inline: 24px; color: var(--color-muted); font-size: 12px; }
.message-poll-status:empty { display: none; }
.message-poll-status:not(:empty) { padding-top: 14px; }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 32px; padding-block: 44px 64px; align-items: start; }
.legal-nav { padding: 22px; position: sticky; top: 108px; }
.legal-nav h2 { font-size: 19px; margin-bottom: 16px; }
.legal-nav nav { display: grid; gap: 4px; }
.legal-nav a { display: block; padding: 10px 12px; min-height: 42px; border-radius: 9px; color: var(--color-muted); font-size: 13px; }
.legal-nav a:hover, .legal-nav a[aria-current] { background: var(--color-soft); color: var(--color-primary-hover); }
.legal-document { padding: 40px; min-width: 0; }
.legal-document h1 { font-size: clamp(30px,3.3vw,46px); margin-bottom: 20px; }
.legal-summary { font-size: 18px; color: var(--color-muted); }
.legal-version { font-size: 12px; color: var(--color-muted); }
.legal-body { max-width: 780px; }
.legal-body h2 { font-size: 23px; line-height: 1.35; margin-block: 30px 12px; }
.legal-body section:first-child h2 { margin-top: 24px; }
.legal-body p { margin-bottom: 24px; font-size: 15px; line-height: 1.9; }
.operator-details { border-top: 1px solid var(--color-border); margin-top: 32px; padding-top: 28px; }
.operator-details h2 { font-size: 25px; margin-bottom: 18px; }
.operator-details > .text-link { display: flex; margin-bottom: 16px; }
@media (max-width: 960px) {
  .legal-layout { grid-template-columns: 1fr; gap: 24px; }
  .legal-nav { position: static; }
  .legal-nav nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .legal-nav a { background: var(--color-bg); }
  .beta-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--dock-height) + 28px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(var(--dock-height) + 40px + env(safe-area-inset-bottom, 0px)); }
  input, textarea, select, button, a { scroll-margin-bottom: calc(var(--dock-height) + 40px); }
  .liquid-dock {
    position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 65; isolation: isolate; display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
    width: calc(100% - 24px); max-width: 480px; height: var(--dock-height); padding: 6px;
    transform: translateX(-50%); border: 1px solid rgb(255 255 255 / 95%); border-radius: 28px;
    background: var(--dock-glass); color: #525568;
    box-shadow: 0 8px 30px rgb(23 24 49 / 14%), 0 1px 5px rgb(23 24 49 / 7%), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
  }
  .liquid-dock::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgb(99 91 255 / 8%); border-radius: inherit; pointer-events: none; }
  .dock-capsule {
    position: absolute; z-index: 0; left: 6px; top: 6px; bottom: 6px;
    width: calc((100% - 12px) / 5); border-radius: 22px; pointer-events: none;
    background: rgb(99 91 255 / 12%); border: 1px solid rgb(99 91 255 / 9%);
    transition: transform var(--dock-duration) cubic-bezier(.22,.75,.2,1);
  }
  .dock-index-0 .dock-capsule { transform: translateX(0); }
  .dock-index-1 .dock-capsule { transform: translateX(100%); }
  .dock-index-2 .dock-capsule { transform: translateX(200%); }
  .dock-index-3 .dock-capsule { transform: translateX(300%); }
  .dock-index-4 .dock-capsule { transform: translateX(400%); }
  html[data-dock-from="0"] .liquid-dock .dock-capsule { transform: translateX(0); transition: none; }
  html[data-dock-from="1"] .liquid-dock .dock-capsule { transform: translateX(100%); transition: none; }
  html[data-dock-from="2"] .liquid-dock .dock-capsule { transform: translateX(200%); transition: none; }
  html[data-dock-from="3"] .liquid-dock .dock-capsule { transform: translateX(300%); transition: none; }
  html[data-dock-from="4"] .liquid-dock .dock-capsule { transform: translateX(400%); transition: none; }
  .dock-tab {
    position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; min-width: 0; min-height: 48px; padding: 4px 1px; border-radius: 22px;
    color: #525568; font-size: 10.5px; line-height: 1.2; font-weight: 600; white-space: nowrap;
    transition: color 180ms ease;
  }
  .dock-tab[aria-current] { color: #493fd0; }
  .dock-icon { display: block; flex: 0 0 auto; width: 22px; height: 22px; }
  .dock-tab[aria-current] .dock-icon { stroke-width: 2; }
  .dock-tab:focus-visible { outline: 3px solid var(--color-primary-hover); outline-offset: -2px; }
  .dock-count { position: absolute; top: 3px; right: calc(50% - 21px); min-width: 16px; min-height: 16px; display: grid; place-items: center; padding: 1px 4px; background: #5149e8; color: #fff; border-radius: 12px; font-size: 9px; font-weight: 700; border: 1px solid #fff; }
  .dock-count[hidden] { display: none; }
  .dock-input-focus .liquid-dock, .dock-keyboard-open .liquid-dock, body:has(dialog[open]) .liquid-dock {
    opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%,12px);
  }
  .dock-low-effects .liquid-dock { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .toast-stack { bottom: calc(var(--dock-height) + 34px + env(safe-area-inset-bottom, 0px)); }
  .header-actions:has(.notification-bell) .header-search { display: none; }
  .notification-row { flex-direction: column; gap: 16px; padding: 20px; }
  .notification-row form { width: 100%; }
  .notification-row form .button { width: 100%; }
  .legal-layout { padding-block: 26px 40px; }
  .legal-nav { padding: 18px; }
  .legal-nav h2 { font-size: 17px; }
  .legal-nav a { padding: 8px 10px; min-height: 40px; font-size: 12px; }
  .legal-document { padding: 24px 20px; }
  .legal-document h1 { font-size: 30px; }
  .legal-summary { font-size: 16px; }
  .legal-body p { font-size: 14px; line-height: 1.9; }
  .operator-details h2 { font-size: 23px; }
}
@media (max-width: 374px) {
  .header-inner { gap: 12px; }
  .dock-tab { font-size: 10px; gap: 5px; }
  .liquid-dock { width: calc(100% - 16px); padding: 6px; bottom: calc(8px + env(safe-area-inset-bottom,0px)); }
  .dock-icon { width: 21px; height: 21px; }
  .beta-metrics { grid-template-columns: 1fr; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-dock { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  .liquid-dock { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-dock, .dock-capsule, .dock-tab { transition: none; }
}