:root {
  --forest-950: #082b25;
  --forest-900: #123f35;
  --forest-800: #185044;
  --forest-700: #236858;
  --forest-600: #2f7d68;
  --mint-500: #74d6ad;
  --mint-300: #afe8cf;
  --mint-200: #d5f5e7;
  --mint-100: #ebfaf3;
  --cream-100: #f7f8f3;
  --cream-50: #fbfcf8;
  --ink-950: #14211e;
  --ink-800: #293b36;
  --ink-650: #52645f;
  --ink-500: #74827e;
  --line: #dce5df;
  --line-strong: #c4d3ca;
  --white: #fff;
  --warning: #a9650b;
  --warning-soft: #fff5df;
  --danger: #a2332f;
  --danger-dark: #7f231f;
  --danger-soft: #fff0ef;
  --success: #277559;
  --shadow-sm: 0 1px 2px rgba(8, 43, 37, .06), 0 4px 14px rgba(8, 43, 37, .04);
  --shadow-md: 0 12px 30px rgba(8, 43, 37, .09);
  --shadow-lg: 0 24px 70px rgba(8, 43, 37, .14);
  --radius-sm: .65rem;
  --radius-md: 1rem;
  --radius-lg: 1.4rem;
  --radius-pill: 999px;
  --shell: 78rem;
  --header-height: 4.75rem;
  --transition: 160ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--cream-100);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 85% -10%, rgba(116, 214, 173, .14), transparent 24rem),
    var(--cream-100);
  color: var(--ink-950);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--forest-700); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--forest-900); }
p, ul, ol, dl { margin-top: 0; }
h1, h2, h3 { margin: 0; color: var(--ink-950); line-height: 1.15; letter-spacing: -.025em; }
h1 { font-size: clamp(2rem, 5vw, 3.65rem); }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
h3 { font-size: 1.08rem; }

:focus-visible {
  outline: .2rem solid #1a73e8;
  outline-offset: .18rem;
}

::selection { background: var(--mint-300); color: var(--forest-950); }

.shell { width: min(100% - 2rem, var(--shell)); margin-inline: auto; }
.page-shell { padding-block: clamp(1.25rem, 3vw, 2.6rem) 7rem; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link { position: fixed; z-index: 1000; top: .5rem; left: .5rem; transform: translateY(-150%); padding: .75rem 1rem; border-radius: .5rem; background: var(--white); box-shadow: var(--shadow-md); }
.skip-link:focus { transform: translateY(0); }
.muted { color: var(--ink-650); }
.mobile-only { display: none; }
.js-only { display: none !important; }
.js .js-only:not([hidden]) { display: inline-flex !important; }
.stack { display: grid; gap: 1rem; }

/* Header and navigation */
.app-header {
  position: sticky;
  z-index: 40;
  top: 0;
  min-height: var(--header-height);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: rgba(18, 63, 53, .96);
  color: var(--white);
  box-shadow: 0 8px 28px rgba(8, 43, 37, .12);
  backdrop-filter: blur(14px);
}
.app-header__inner { display: flex; min-height: var(--header-height); align-items: center; gap: 2rem; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .75rem; color: var(--white); text-decoration: none; }
.brand:hover { color: var(--white); }
.brand__mark { display: grid; width: 2.6rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: .82rem; background: var(--mint-500); color: var(--forest-950); font-size: 1.2rem; font-weight: 900; box-shadow: inset 0 0 0 .2rem rgba(255,255,255,.18); }
.brand__copy { display: grid; line-height: 1.05; }
.brand__copy strong { font-size: 1rem; letter-spacing: .01em; }
.brand__copy small { margin-top: .18rem; color: var(--mint-300); font-size: .72rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.desktop-nav { display: flex; align-items: stretch; align-self: stretch; gap: .25rem; }
.desktop-nav a { position: relative; display: grid; place-items: center; padding: 0 .9rem; color: rgba(255,255,255,.8); font-size: .92rem; font-weight: 650; text-decoration: none; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--white); }
.desktop-nav a[aria-current="page"]::after { position: absolute; right: .9rem; bottom: 0; left: .9rem; height: .2rem; border-radius: var(--radius-pill) var(--radius-pill) 0 0; background: var(--mint-500); content: ""; }
.header-actions { position: relative; display: flex; margin-left: auto; align-items: center; gap: .55rem; }
.icon-button { display: inline-grid; min-width: 2.65rem; min-height: 2.65rem; padding: .5rem; place-items: center; border: 1px solid var(--line); border-radius: .8rem; background: var(--white); color: var(--forest-800); cursor: pointer; text-decoration: none; transition: background var(--transition), transform var(--transition); }
.icon-button:hover { background: var(--mint-100); color: var(--forest-900); transform: translateY(-1px); }
.app-header .icon-button { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: var(--white); }
.account-menu { display: flex; align-items: center; gap: .75rem; }
.account-menu__name { max-width: 12rem; overflow: hidden; color: rgba(255,255,255,.82); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.account-menu form { margin: 0; }
.link-button { padding: .45rem 0; border: 0; background: transparent; color: var(--mint-300); cursor: pointer; font-size: .86rem; font-weight: 700; }
.bottom-nav { display: none; }

/* Feedback */
.toast-region { position: fixed; z-index: 80; top: calc(var(--header-height) + .75rem); right: 0; left: 0; display: grid; justify-items: end; gap: .5rem; pointer-events: none; }
.alert { display: flex; width: min(100%, 30rem); padding: .85rem 1rem; align-items: flex-start; gap: .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-md); pointer-events: auto; }
.alert--success { border-color: #9bd7bd; background: #eefbf5; }
.alert--error { border-color: #e7aaa6; background: var(--danger-soft); }
.alert--warning { border-color: #e7ca8f; background: var(--warning-soft); }
.alert span { flex: 1; }
.alert__close { padding: 0 .2rem; border: 0; background: none; color: var(--ink-650); cursor: pointer; font-size: 1.35rem; line-height: 1; }

/* Headings and generic components */
.page-heading { max-width: 54rem; margin-bottom: clamp(1.5rem, 4vw, 2.6rem); }
.page-heading h1 { margin-top: .3rem; }
.page-heading p { max-width: 48rem; margin: .65rem 0 0; color: var(--ink-650); font-size: clamp(1rem, 2vw, 1.1rem); }
.page-heading--split { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 1.5rem; }
.eyebrow { display: inline-block; color: var(--forest-600); font-size: .74rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.lead { color: var(--ink-650); font-size: 1.1rem; }
.card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.card__header { margin-bottom: 1.35rem; }
.card__header p { margin: .4rem 0 0; color: var(--ink-650); }
.button, button.button {
  display: inline-flex;
  min-height: 2.75rem;
  padding: .68rem 1rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid transparent;
  border-radius: .78rem;
  cursor: pointer;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.button:hover { transform: translateY(-1px); }
.button--primary { border-color: var(--forest-800); background: var(--forest-800); color: var(--white); box-shadow: 0 .3rem .9rem rgba(18,63,53,.17); }
.button--primary:hover { border-color: var(--forest-950); background: var(--forest-950); color: var(--white); }
.button--secondary { border-color: #8fc9b1; background: var(--mint-100); color: var(--forest-900); }
.button--secondary:hover { border-color: var(--mint-500); background: var(--mint-200); }
.button--quiet { border-color: var(--line-strong); background: var(--white); color: var(--forest-800); box-shadow: none; }
.button--quiet:hover { border-color: #9cb8aa; background: var(--cream-50); }
.button--danger { border-color: var(--danger); background: var(--danger); color: var(--white); }
.button--danger:hover { background: var(--danger-dark); color: var(--white); }
.button--small { min-height: 2.25rem; padding: .45rem .75rem; font-size: .88rem; }
.button--block { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.pack-view-selector { margin: 0; padding: 0; border: 0; }
.pack-view-selector legend { margin-bottom: .65rem; font-weight: 750; }
.pack-view-selector__choices { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.pack-view-selector__choices .check-row { min-width: min(18rem, 100%); }
.text-link { color: var(--forest-700); font-weight: 750; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link--danger { color: var(--danger); }
.badge-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.badge { display: inline-flex; min-height: 1.75rem; padding: .25rem .62rem; align-items: center; border-radius: var(--radius-pill); background: var(--mint-100); color: var(--forest-800); font-size: .76rem; font-weight: 780; }
.badge--status { background: var(--forest-900); color: var(--white); }
.badge--quiet { background: #eef1ef; color: var(--ink-650); }
.state { display: inline-flex; padding: .22rem .55rem; border-radius: var(--radius-pill); background: #edf0ee; color: var(--ink-650); font-size: .82rem; font-weight: 720; }
.state--ok { background: var(--mint-100); color: var(--success); }
.breadcrumbs { display: flex; margin-bottom: 1.35rem; align-items: center; gap: .5rem; overflow: hidden; color: var(--ink-650); font-size: .86rem; white-space: nowrap; }
.breadcrumbs a, .breadcrumbs span:last-child { overflow: hidden; text-overflow: ellipsis; }
.breadcrumbs a { color: var(--forest-700); font-weight: 680; text-decoration: none; }

/* Forms */
.stack-form { display: grid; gap: 1.15rem; }
.form-field { display: grid; min-width: 0; gap: .38rem; }
.form-field > label, .form-field legend { color: var(--ink-800); font-size: .9rem; font-weight: 760; }
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea,
.stack-form input:not([type="checkbox"]):not([type="radio"]),
.stack-form select,
.stack-form textarea {
  width: 100%;
  min-height: 2.85rem;
  padding: .72rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: .72rem;
  outline: none;
  background: var(--white);
  color: var(--ink-950);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field textarea, .stack-form textarea { min-height: 7rem; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus,
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus { border-color: var(--forest-600); box-shadow: 0 0 0 .22rem rgba(47,125,104,.13); }
.form-field--error input, .form-field--error select, .form-field--error textarea { border-color: var(--danger); }
.required { color: var(--danger); }
.field-help, .form-field small { color: var(--ink-650); font-size: .8rem; }
.field-help p { margin: 0; }
.field-errors, .form-errors { color: var(--danger-dark); font-size: .86rem; }
.field-errors ul, .form-errors ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.form-errors { padding: .85rem 1rem; border: 1px solid #e3aaa6; border-radius: .72rem; background: var(--danger-soft); }
.check-row { display: flex; align-items: flex-start; gap: .6rem; color: var(--ink-800); font-size: .9rem; font-weight: 650; cursor: pointer; }
.check-row input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .14rem 0 0; accent-color: var(--forest-700); }
.form-actions { display: flex; margin-top: .35rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .65rem; }
.form-card { padding: clamp(1.15rem, 3vw, 2rem); }
.form-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, .8fr); align-items: start; gap: 1.25rem; }
.form-layout--narrow { max-width: 62rem; grid-template-columns: minmax(0, 1.6fr) minmax(15rem, .75fr); }
.form-aside { display: grid; gap: .8rem; }
.tip-card { display: flex; padding: 1rem; align-items: flex-start; gap: .8rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.65); }
.tip-card > span { display: grid; flex: 0 0 2rem; aspect-ratio: 1; place-items: center; border-radius: .62rem; background: var(--mint-200); color: var(--forest-900); font-weight: 850; }
.tip-card p { margin: .22rem 0 0; color: var(--ink-650); font-size: .86rem; }
.form-section-heading { display: flex; padding-bottom: 1rem; align-items: flex-start; gap: .8rem; border-bottom: 1px solid var(--line); }
.form-section-heading > span { display: grid; flex: 0 0 2rem; aspect-ratio: 1; place-items: center; border-radius: var(--radius-pill); background: var(--forest-900); color: var(--white); font-weight: 850; }
.form-section-heading p { margin: .25rem 0 0; color: var(--ink-650); font-size: .88rem; }
.formset-block { display: grid; margin: .5rem 0 0; padding: 1.1rem; gap: .9rem; border: 1px solid var(--line); border-radius: var(--radius-md); }
.formset-block legend { padding: 0 .35rem; font-weight: 800; }
.nested-form { display: grid; padding: 1rem; gap: .85rem; border-radius: .8rem; background: var(--cream-50); }

/* Auth and onboarding */
.auth-page .app-header { position: static; background: transparent; box-shadow: none; }
.auth-page .brand { color: var(--forest-900); }
.auth-page .brand__copy small { color: var(--forest-600); }
.auth-page { background: radial-gradient(circle at 70% 20%, rgba(116,214,173,.25), transparent 28rem), linear-gradient(135deg, #f7faf5, #eef7f1); }
.auth-layout, .onboarding-layout { display: grid; min-height: calc(100vh - var(--header-height) - 5rem); grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); align-items: center; gap: clamp(2rem, 7vw, 6rem); }
.auth-intro h1, .onboarding-layout h1 { max-width: 13ch; margin-top: .45rem; }
.auth-intro > p { max-width: 37rem; margin: 1rem 0 0; color: var(--ink-650); font-size: 1.08rem; }
.auth-card { width: 100%; max-width: 28rem; padding: clamp(1.4rem, 4vw, 2.2rem); justify-self: end; box-shadow: var(--shadow-lg); }
.auth-note { margin: 1rem 0 0; color: var(--ink-650); font-size: .78rem; text-align: center; }
.feature-list { display: grid; margin: 1.5rem 0 0; padding: 0; gap: .65rem; list-style: none; }
.feature-list li { display: flex; align-items: center; gap: .65rem; color: var(--ink-800); font-weight: 650; }
.feature-list span { display: grid; width: 1.5rem; aspect-ratio: 1; place-items: center; border-radius: var(--radius-pill); background: var(--mint-200); color: var(--forest-800); }
.onboarding-layout { align-items: start; padding-top: 4vh; }
.step-list { display: grid; margin: 2rem 0 0; padding: 0; gap: .7rem; list-style: none; }
.step-list li { display: flex; padding: .85rem; align-items: center; gap: .8rem; border-radius: .9rem; color: var(--ink-650); }
.step-list li > span { display: grid; flex: 0 0 2rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-weight: 800; }
.step-list li div { display: grid; }
.step-list small { font-size: .8rem; }
.step-list .is-current { background: rgba(255,255,255,.72); color: var(--forest-900); box-shadow: var(--shadow-sm); }
.step-list .is-current > span { border-color: var(--forest-900); background: var(--forest-900); color: var(--white); }
.privacy-note { display: flex; margin: 1rem 0 0; align-items: center; gap: .55rem; color: var(--ink-650); font-size: .8rem; }

/* Dashboard */
.stat-grid { display: grid; margin-bottom: 1.3rem; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.stat-card { position: relative; display: grid; min-height: 10.5rem; padding: 1.15rem; align-content: start; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); color: var(--ink-950); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
.stat-card:hover { color: var(--ink-950); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-card--featured { border-color: var(--forest-900); background: linear-gradient(145deg, var(--forest-900), var(--forest-700)); color: var(--white); }
.stat-card--featured:hover { color: var(--white); }
.stat-card__icon { position: absolute; top: 1rem; right: 1rem; display: grid; width: 2.25rem; aspect-ratio: 1; place-items: center; border-radius: .72rem; background: var(--mint-100); color: var(--forest-800); }
.stat-card--featured .stat-card__icon { background: rgba(255,255,255,.13); color: var(--mint-300); }
.stat-card__label { padding-right: 2.5rem; color: var(--ink-650); font-size: .82rem; font-weight: 720; }
.stat-card--featured .stat-card__label { color: rgba(255,255,255,.74); }
.stat-card strong { margin-top: 1rem; font-size: 2.4rem; line-height: 1; }
.stat-card small { margin-top: auto; padding-top: .75rem; color: var(--forest-700); font-weight: 720; }
.stat-card--featured small { color: var(--mint-300); }
.dashboard-grid { display: grid; margin-bottom: 2rem; grid-template-columns: 1.1fr .9fr; gap: 1rem; }
.dashboard-grid > .card { padding: clamp(1rem, 2.4vw, 1.5rem); }
.section-heading { display: flex; margin-bottom: 1rem; align-items: end; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin-top: .22rem; }
.section-intro { margin: -.35rem 0 1rem; color: var(--ink-650); font-size: .88rem; }
.value-card { position: relative; overflow: hidden; }
.value-card::after { position: absolute; right: -3rem; bottom: -4rem; width: 12rem; aspect-ratio: 1; border-radius: 50%; background: var(--mint-100); content: ""; opacity: .8; pointer-events: none; }
.value-card > * { position: relative; z-index: 1; }
.value-card > p { margin: .8rem 0 0; color: var(--ink-650); font-size: .85rem; }
.money-disclosure { display: inline-block; }
.money-disclosure summary { color: var(--forest-700); cursor: pointer; font-size: .78rem; font-weight: 750; list-style: none; text-decoration: underline; text-underline-offset: .18em; }
.money-disclosure summary::-webkit-details-marker { display: none; }
.money-disclosure:not([open]) .money-value { display: none; }
.money-disclosure[open] summary { display: none; }
.money-disclosure--large .money-value { display: block; margin-top: .3rem; font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.04em; }
.money-visible .money-disclosure summary { display: none; }
.money-visible .money-disclosure .money-value { display: inline; }
.money-visible .money-disclosure--large .money-value { display: block; }
.distribution-list { display: grid; margin: 0; padding: 0; gap: .75rem; list-style: none; }
.distribution-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.distribution-list li > span { display: flex; min-width: 0; align-items: center; gap: .65rem; }
.distribution-list i { width: .65rem; height: 1.7rem; border-radius: var(--radius-pill); background: var(--bar-color); }
.distribution-card { margin-bottom: 2rem; padding: clamp(1rem, 2.4vw, 1.5rem); }
.status-distribution { display: flex; margin: 0; padding: 0; flex-wrap: wrap; gap: .55rem; list-style: none; }
.status-distribution li { display: inline-flex; min-height: 2.25rem; padding: .45rem .65rem; align-items: center; gap: .55rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--cream-50); color: var(--ink-650); font-size: .8rem; }
.status-distribution strong { display: grid; min-width: 1.35rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--mint-200); color: var(--forest-900); font-size: .7rem; }
.empty-inline { display: flex; min-height: 7rem; align-items: center; justify-content: center; gap: .75rem; color: var(--ink-650); text-align: center; }
.empty-inline > span { display: grid; flex: 0 0 2.5rem; aspect-ratio: 1; place-items: center; border-radius: .8rem; background: var(--mint-100); color: var(--forest-700); font-weight: 850; }
.empty-inline p { margin: 0; }
.section-block { margin-top: 2rem; }
.empty-state { display: grid; min-height: 18rem; padding: 2rem; place-items: center; align-content: center; gap: .65rem; text-align: center; }
.empty-state p { max-width: 35rem; margin: 0 0 .4rem; color: var(--ink-650); }
.empty-state__icon { display: grid; width: 3.8rem; aspect-ratio: 1; place-items: center; border-radius: 1.15rem; background: var(--mint-100); color: var(--forest-700); font-size: 1.6rem; }
.empty-state--compact { min-height: 13rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--cream-50); }

/* Search, lists and asset cards */
.filter-panel { margin-bottom: 1.4rem; padding: clamp(1rem, 2.4vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.72); box-shadow: var(--shadow-sm); }
.filter-panel__heading { display: flex; margin-bottom: 1rem; align-items: end; justify-content: space-between; gap: 1rem; }
.filter-panel__heading h2 { margin-top: .2rem; }
.filter-form { display: grid; gap: 1rem; }
.search-field { display: grid; gap: .4rem; }
.search-field > label { color: var(--ink-800); font-size: .9rem; font-weight: 760; }
.search-field > small { color: var(--ink-650); font-size: .76rem; }
.search-control { display: flex; min-height: 3rem; align-items: center; gap: .5rem; border: 1px solid var(--line-strong); border-radius: .85rem; background: var(--white); }
.search-control > span { padding-left: .85rem; color: var(--ink-500); font-size: 1.2rem; }
.search-control input { min-width: 0; flex: 1; align-self: stretch; border: 0; outline: none; background: transparent; }
.search-control .button { margin: .25rem; }
.filter-grid { display: grid; grid-template-columns: repeat(6, minmax(8rem, 1fr)); gap: .7rem; }
.filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; }
.filter-actions__spacer { flex: 1; }
.list-toolbar { display: flex; margin: .2rem 0 .8rem; align-items: center; justify-content: space-between; gap: 1rem; }
.list-toolbar p { margin: 0; color: var(--ink-650); }
.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.asset-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.asset-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); }
.asset-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.asset-card--archived { opacity: .82; }
.asset-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e8f1ec; }
.asset-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.asset-card:hover .asset-card__media img { transform: scale(1.025); }
.asset-placeholder { display: grid; width: 100%; height: 100%; min-height: 10rem; place-items: center; background: var(--mint-100); background: linear-gradient(145deg, color-mix(in srgb, var(--category-color) 28%, white), var(--mint-100)); color: var(--forest-700); }
.asset-placeholder > span:first-child { display: grid; width: 4rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(18,63,53,.12); border-radius: 1.2rem; background: rgba(255,255,255,.68); font-size: 1.7rem; font-weight: 800; }
.asset-placeholder--large { min-height: 21rem; align-content: center; gap: .7rem; }
.asset-placeholder--large > span:last-child { color: var(--ink-650); font-size: .85rem; }
.media-badge { position: absolute; top: .7rem; left: .7rem; padding: .32rem .58rem; border-radius: var(--radius-pill); background: rgba(20,33,30,.82); color: var(--white); font-size: .7rem; font-weight: 800; backdrop-filter: blur(4px); }
.media-badge--cover { background: var(--forest-900); }
.asset-card__body { display: grid; padding: 1rem; gap: .65rem; }
.asset-card__eyebrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--forest-600); font-size: .7rem; font-weight: 820; letter-spacing: .04em; text-transform: uppercase; }
.asset-card h2 { overflow: hidden; font-size: 1.12rem; text-overflow: ellipsis; white-space: nowrap; }
.asset-card h2 a { color: var(--ink-950); text-decoration: none; }
.asset-card__model { min-height: 1.35rem; margin: -.25rem 0 0; overflow: hidden; color: var(--ink-650); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.compact-facts { display: grid; margin: .2rem 0 0; gap: .3rem; }
.compact-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: .8rem; }
.compact-facts dt { color: var(--ink-500); }
.compact-facts dd { margin: 0; overflow: hidden; color: var(--ink-800); font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }
.asset-card__footer { display: flex; min-height: 2rem; padding-top: .65rem; align-items: end; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--line); }
.pagination { display: grid; margin-top: 1.4rem; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; color: var(--ink-650); font-size: .84rem; }
.pagination > :last-child { justify-self: end; }

/* Asset detail */
.archive-banner { display: flex; margin-bottom: 1rem; padding: .85rem 1rem; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid #d6c698; border-radius: var(--radius-md); background: var(--warning-soft); }
.archive-banner > div { display: flex; align-items: center; gap: .8rem; }
.archive-banner > div > span { display: grid; flex: 0 0 2rem; aspect-ratio: 1; place-items: center; border-radius: .65rem; background: #f2dfae; color: #72500f; }
.archive-banner p { margin: 0; color: #624d21; font-size: .88rem; }
.asset-hero { display: grid; margin-bottom: 1.4rem; grid-template-columns: minmax(20rem, 1.05fr) minmax(0, .95fr); overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--radius-lg) + .25rem); background: var(--white); box-shadow: var(--shadow-sm); }
.asset-hero__media { min-height: 23rem; background: var(--mint-100); }
.asset-hero__media > img { width: 100%; height: 100%; object-fit: cover; }
.asset-hero__content { display: flex; padding: clamp(1.4rem, 4vw, 2.5rem); flex-direction: column; align-items: flex-start; justify-content: center; }
.asset-hero__content h1 { margin-top: .75rem; font-size: clamp(2rem, 4vw, 3.2rem); }
.asset-hero__content > p { margin: .7rem 0 0; color: var(--ink-650); }
.asset-hero__model { font-size: 1.1rem; font-weight: 660; }
.asset-hero__actions { display: flex; margin-top: 1.4rem; flex-wrap: wrap; gap: .6rem; }
.tab-nav { position: sticky; z-index: 20; top: calc(var(--header-height) + .5rem); display: flex; margin-bottom: 1rem; padding: .38rem; gap: .25rem; overflow-x: auto; border: 1px solid var(--line); border-radius: .9rem; background: rgba(255,255,255,.93); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); }
.tab-nav a { flex: 0 0 auto; padding: .6rem .85rem; border-radius: .6rem; color: var(--ink-650); font-size: .84rem; font-weight: 720; text-decoration: none; }
.tab-nav a:hover, .tab-nav a[aria-current="page"] { background: var(--mint-100); color: var(--forest-900); }
.tab-nav span { display: inline-grid; min-width: 1.25rem; padding: 0 .25rem; place-items: center; border-radius: var(--radius-pill); background: rgba(18,63,53,.1); font-size: .68rem; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; gap: 1rem; }
.detail-main { display: grid; min-width: 0; gap: 1rem; }
.detail-section { padding: clamp(1rem, 3vw, 1.5rem); }
.fact-grid { display: grid; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fact-grid > div { min-width: 0; padding: .85rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact-grid dt { color: var(--ink-500); font-size: .72rem; font-weight: 720; letter-spacing: .04em; text-transform: uppercase; }
.fact-grid dd { margin: .28rem 0 0; overflow-wrap: anywhere; color: var(--ink-800); font-weight: 660; }
.quality-flag { display: inline-flex; margin-left: .25rem; padding: .12rem .4rem; border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--warning); font-size: .68rem; }
.progress-inline { display: flex; align-items: center; gap: .5rem; }
.progress-inline::before { width: 5rem; height: .45rem; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--mint-500) var(--progress, 0%), #e7ece9 var(--progress, 0%)); content: ""; }
.progress-inline > span { display: none; }
.note-box { margin-top: 1rem; padding: 1rem; border-left: .25rem solid var(--mint-500); border-radius: 0 .75rem .75rem 0; background: var(--cream-50); }
.note-box p { margin: .3rem 0 0; color: var(--ink-650); }
.detail-aside { position: sticky; top: calc(var(--header-height) + 4.7rem); display: grid; gap: .8rem; }
.aside-card { padding: 1rem; }
.aside-card h2 { margin-bottom: .9rem; font-size: 1rem; }
.value-list { display: grid; margin: 0; gap: .7rem; }
.value-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.value-list dt { color: var(--ink-500); font-size: .8rem; }
.value-list dd { margin: 0; color: var(--ink-800); font-size: .84rem; font-weight: 700; text-align: right; }
.danger-zone { padding: 1rem; border: 1px solid #e2b6b2; border-radius: var(--radius-md); background: var(--danger-soft); }
.danger-zone h2 { color: var(--danger-dark); font-size: 1rem; }
.danger-zone p { margin: .4rem 0 .7rem; color: #79504d; font-size: .8rem; }
.timeline { position: relative; display: grid; margin: 0; padding: 0 0 0 1.3rem; gap: 1rem; list-style: none; }
.timeline::before { position: absolute; top: .35rem; bottom: .35rem; left: .28rem; width: 1px; background: var(--line-strong); content: ""; }
.timeline li { position: relative; }
.timeline__dot { position: absolute; top: .3rem; left: -1.22rem; width: .7rem; aspect-ratio: 1; border: .15rem solid var(--white); border-radius: 50%; background: var(--forest-600); box-shadow: 0 0 0 1px var(--forest-600); }
.timeline time { display: block; margin-top: .12rem; color: var(--ink-500); font-size: .76rem; }
.timeline p { margin: .3rem 0 0; color: var(--ink-650); font-size: .88rem; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.gallery-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.gallery-item.is-dragging { opacity: .48; box-shadow: var(--shadow-md); }
.gallery-item.is-drop-target { outline: .2rem solid var(--mint-500); outline-offset: .15rem; }
.gallery-item__image { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mint-100); }
.gallery-item__image img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item__body { padding: .7rem; }
.gallery-item__body > p { min-height: 2.4em; margin: 0 0 .55rem; overflow: hidden; color: var(--ink-800); font-size: .8rem; line-height: 1.2; }
.gallery-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip-button { display: inline-flex; min-height: 2rem; padding: .34rem .55rem; align-items: center; border: 1px solid var(--line-strong); border-radius: .55rem; background: var(--white); color: var(--forest-700); cursor: pointer; font-size: .72rem; font-weight: 720; text-decoration: none; }
.chip-button:hover { background: var(--mint-100); }
.gallery-move { display: flex; margin-top: .55rem; padding-top: .5rem; align-items: center; gap: .35rem; border-top: 1px solid var(--line); }
.gallery-move button { min-height: 2rem; padding: .25rem .45rem; border: 0; border-radius: .4rem; background: var(--cream-100); color: var(--ink-650); cursor: pointer; font-size: .7rem; font-weight: 680; }
.drag-handle { margin-left: auto; color: var(--ink-500); cursor: grab; font-size: 1.25rem; }
.js .gallery-item[draggable="true"] { cursor: grab; }

/* Reference screens */
.subnav { display: flex; margin: -1rem 0 1.2rem; padding-bottom: .1rem; gap: 1.2rem; overflow-x: auto; border-bottom: 1px solid var(--line); }
.subnav a { flex: 0 0 auto; padding: .65rem .05rem; border-bottom: .18rem solid transparent; color: var(--ink-650); font-size: .86rem; font-weight: 720; text-decoration: none; }
.subnav a[aria-current="page"] { border-color: var(--forest-700); color: var(--forest-900); }
.reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.reference-card { display: flex; padding: 1rem; align-items: center; gap: .85rem; }
.reference-card__icon, .avatar { display: grid; flex: 0 0 3rem; aspect-ratio: 1; place-items: center; border-radius: .95rem; background: var(--mint-100); background: color-mix(in srgb, var(--category-color, var(--mint-500)) 28%, white); color: var(--forest-800); font-size: 1.2rem; font-weight: 850; }
.reference-card__icon--location { background: var(--mint-100); }
.avatar { border-radius: 50%; background: var(--forest-900); color: var(--mint-200); }
.reference-card__content { min-width: 0; flex: 1; }
.reference-card__title { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.reference-card__title h2 { overflow: hidden; font-size: 1.03rem; text-overflow: ellipsis; white-space: nowrap; }
.reference-card__content > p { margin: .2rem 0 .4rem; color: var(--ink-650); font-size: .8rem; }
.reference-card__meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; color: var(--ink-500); font-size: .72rem; }

/* Upload and image edit */
.upload-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.upload-choice { display: flex; min-height: 23rem; padding: clamp(1.2rem, 3vw, 2rem); flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.upload-choice__icon { display: grid; width: 4rem; aspect-ratio: 1; margin-bottom: .8rem; place-items: center; border-radius: 1.25rem; background: var(--mint-100); color: var(--forest-700); font-size: 1.7rem; }
.upload-choice p { max-width: 25rem; margin: .6rem 0 1.1rem; color: var(--ink-650); }
.upload-choice .button { max-width: 22rem; }
.upload-metadata { display: grid; width: 100%; max-width: 22rem; margin: .25rem 0 .8rem; gap: .35rem; text-align: left; }
.upload-metadata > label:not(.check-row) { color: var(--ink-800); font-size: .78rem; font-weight: 740; }
.upload-metadata input:not([type="checkbox"]), .upload-metadata select { width: 100%; min-height: 2.55rem; padding: .55rem .65rem; border: 1px solid var(--line-strong); border-radius: .65rem; background: var(--white); }
.visually-hidden-file { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.visually-hidden-file:focus + .selected-files { outline: .2rem solid #1a73e8; }
.selected-files { width: 100%; max-width: 22rem; min-height: 1.5rem; margin: .6rem 0; color: var(--ink-650); font-size: .78rem; }
.selected-files ul { margin: 0; padding-left: 1.2rem; text-align: left; }
.upload-notes { margin-top: 1rem; padding: 1.2rem; }
.upload-notes h2 { margin-bottom: .75rem; font-size: 1rem; }
.upload-notes > p { margin: .7rem 0 0; color: var(--ink-650); font-size: .8rem; }
.check-list { display: grid; margin: 0; padding: 0; gap: .45rem; list-style: none; }
.check-list li { position: relative; padding-left: 1.55rem; color: var(--ink-650); font-size: .86rem; }
.check-list li::before { position: absolute; left: 0; color: var(--success); content: "✓"; font-weight: 900; }
.image-edit-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr); align-items: start; gap: 1rem; }
.image-editor { position: relative; display: grid; min-height: 28rem; padding: 1rem; place-items: center; overflow: hidden; background: #10211d; }
.image-editor img { max-height: 70vh; object-fit: contain; }
.image-quick-actions { padding: 1rem; }
.image-quick-actions h2 { margin-bottom: .8rem; font-size: 1rem; }
.image-quick-actions .text-link { display: inline-block; margin-top: 1rem; }

/* Confirmation and errors */
.confirm-layout { display: grid; width: min(100%, 42rem); margin: clamp(1rem, 6vw, 4rem) auto; place-items: center; text-align: center; }
.confirm-layout h1 { margin: .4rem 0 .8rem; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.confirm-layout .lead { max-width: 38rem; }
.confirm-icon { display: grid; width: 4.2rem; aspect-ratio: 1; margin-bottom: 1rem; place-items: center; border-radius: 1.25rem; background: var(--mint-100); color: var(--forest-700); font-size: 1.7rem; font-weight: 850; }
.confirm-icon--danger { background: var(--danger-soft); color: var(--danger); }
.confirm-card { width: 100%; margin-top: 1rem; padding: 1.2rem; text-align: left; }
.confirm-thumbnail { width: 10rem; aspect-ratio: 4 / 3; margin-bottom: 1rem; border-radius: var(--radius-md); object-fit: cover; box-shadow: var(--shadow-md); }
.danger-copy { width: 100%; padding: 1rem; border: 1px solid #e3aaa6; border-radius: .8rem; background: var(--danger-soft); color: #714643; }
.danger-copy p { margin: 0; }
.danger-copy p + p { margin-top: .4rem; }
.error-page { display: grid; min-height: 60vh; place-items: center; align-content: center; text-align: center; }
.error-page h1 { max-width: 22ch; }
.error-page p { max-width: 39rem; margin: .8rem 0 1.2rem; color: var(--ink-650); }
.error-code { color: var(--mint-500); font-size: clamp(4rem, 14vw, 9rem); font-weight: 900; letter-spacing: -.08em; line-height: .9; }
.offline-card { width: min(100%, 38rem); margin: 8vh auto; padding: clamp(1.5rem, 5vw, 3rem); text-align: center; }
.offline-card h1 { margin: .45rem 0 .8rem; }
.offline-card p { color: var(--ink-650); }
.offline-illustration { display: grid; width: 5rem; aspect-ratio: 1; margin: 0 auto 1rem; place-items: center; border-radius: 1.5rem; background: var(--mint-100); color: var(--forest-700); font-size: 2rem; }

@media (max-width: 70rem) {
  .filter-grid { grid-template-columns: repeat(3, 1fr); }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 16rem; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 54rem) {
  :root { --header-height: 4.25rem; }
  .shell { width: min(100% - 1.25rem, var(--shell)); }
  .page-shell { padding-top: 1.1rem; }
  .desktop-nav, .account-menu { display: none; }
  .mobile-only { display: inline-grid; }
  .account-menu.is-open { position: absolute; top: calc(100% + .6rem); right: 0; display: grid; min-width: 13rem; padding: .8rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--white); box-shadow: var(--shadow-md); }
  .account-menu.is-open .account-menu__name { color: var(--ink-650); }
  .account-menu.is-open .link-button { color: var(--forest-800); }
  .no-js .header-actions > .mobile-only { display: none; }
  .no-js .account-menu { display: flex; }
  .no-js .account-menu__name { display: none; }
  .bottom-nav { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; display: grid; min-height: calc(4.1rem + env(safe-area-inset-bottom)); padding: .3rem max(.3rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(.3rem, env(safe-area-inset-left)); grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -8px 24px rgba(8,43,37,.08); backdrop-filter: blur(14px); }
  .bottom-nav a, .bottom-nav button { display: grid; min-width: 0; min-height: 3.5rem; padding: .2rem; place-items: center; align-content: center; gap: .05rem; border: 0; border-radius: .7rem; background: transparent; color: var(--ink-500); cursor: pointer; text-decoration: none; }
  .bottom-nav a > span, .bottom-nav button > span { font-size: 1.25rem; line-height: 1; }
  .bottom-nav small { max-width: 100%; overflow: hidden; font-size: .64rem; font-weight: 720; text-overflow: ellipsis; }
  .bottom-nav a[aria-current="page"] { color: var(--forest-800); }
  .bottom-nav__primary { transform: translateY(-.7rem); }
  .bottom-nav__primary > span { display: grid; width: 2.9rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--forest-800); color: var(--white); box-shadow: 0 .45rem 1rem rgba(18,63,53,.24); }
  .page-heading--split { align-items: flex-start; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .auth-layout, .onboarding-layout { min-height: auto; grid-template-columns: 1fr; gap: 1.5rem; }
  .auth-intro { padding-top: 1rem; }
  .auth-card { max-width: none; justify-self: stretch; }
  .onboarding-layout { padding-top: 1rem; }
  .form-layout, .form-layout--narrow, .image-edit-layout { grid-template-columns: 1fr; }
  .form-aside { grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-aside + form { grid-row: 2; }
  .asset-hero { grid-template-columns: 1fr; }
  .asset-hero__media { min-height: 18rem; max-height: 32rem; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .danger-zone { grid-column: 1 / -1; }
  .tab-nav { top: calc(var(--header-height) + .3rem); }
}

@media (max-width: 40rem) {
  body { font-size: .96rem; }
  .shell { width: min(100% - 1rem, var(--shell)); }
  .page-heading { margin-bottom: 1.35rem; }
  .page-heading--split { display: grid; }
  .page-heading--split > .button { width: 100%; }
  .brand__copy { display: none; }
  .stat-grid { gap: .55rem; }
  .stat-card { min-height: 8.8rem; padding: .85rem; }
  .stat-card strong { margin-top: .65rem; font-size: 2rem; }
  .stat-card small { font-size: .7rem; }
  .stat-card__icon { top: .7rem; right: .7rem; width: 1.9rem; }
  .section-heading { align-items: flex-start; }
  .asset-grid, .asset-grid--compact { grid-template-columns: 1fr; }
  .asset-card { display: grid; grid-template-columns: 7.8rem minmax(0, 1fr); }
  .asset-card__media { height: 100%; aspect-ratio: auto; }
  .asset-card__body { padding: .8rem; }
  .asset-card__model { min-height: 0; }
  .asset-card .compact-facts > div:nth-child(n+2) { display: none; }
  .asset-card__footer { min-height: 0; }
  .asset-card__footer .money-disclosure { display: none; }
  .asset-placeholder { min-height: 100%; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
  .search-control { display: grid; grid-template-columns: auto 1fr; padding-top: .2rem; }
  .search-control .button { grid-column: 1 / -1; width: calc(100% - .5rem); }
  .filter-actions { align-items: stretch; }
  .filter-actions__spacer { display: none; }
  .filter-actions .button { flex: 1; }
  .pagination { grid-template-columns: 1fr 1fr; }
  .pagination > span { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .pagination > :first-child { grid-column: 1; grid-row: 2; }
  .pagination > :last-child { grid-column: 2; grid-row: 2; }
  .asset-hero__media { min-height: 15rem; }
  .asset-hero__content { padding: 1.15rem; }
  .asset-hero__actions { width: 100%; }
  .asset-hero__actions .button { flex: 1 1 auto; }
  .fact-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .gallery-actions .chip-button { flex: 1; justify-content: center; }
  .gallery-move { display: grid; grid-template-columns: 1fr 1fr; }
  .drag-handle { display: none; }
  .detail-aside { grid-template-columns: 1fr; }
  .reference-grid { grid-template-columns: 1fr; }
  .reference-card { padding: .85rem; }
  .form-aside { grid-template-columns: 1fr; }
  .form-actions--sticky { position: sticky; z-index: 15; right: -.6rem; bottom: calc(4.1rem + env(safe-area-inset-bottom)); left: -.6rem; margin-inline: -.6rem; padding: .65rem; border-top: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(10px); }
  .form-actions--sticky .button { flex: 1; }
  .upload-choice-grid { grid-template-columns: 1fr; }
  .upload-choice { min-height: 19rem; }
  .image-editor { min-height: 18rem; }
  .archive-banner { align-items: stretch; flex-direction: column; }
  .archive-banner .button { width: 100%; }
  .confirm-card .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .confirm-card .button { width: 100%; }
  .error-page .button-row { justify-content: center; }
}

@media (max-width: 28rem) {
  .filter-grid, .gallery-grid { grid-template-columns: 1fr; }
  .asset-card { grid-template-columns: 6.8rem minmax(0, 1fr); }
  .gallery-item__body > p { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .app-header, .bottom-nav, .button, .tab-nav, .detail-aside, .toast-region { display: none !important; }
  body { background: white; color: black; }
  .page-shell { width: 100%; padding: 0; }
  .card, .asset-hero { break-inside: avoid; box-shadow: none; }
  .money-disclosure summary { display: none; }
  .money-disclosure .money-value { display: inline !important; }
}

/* Vues éclatées interactives */
.module-summary-grid { display: grid; margin-bottom: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.module-summary-grid .stat-card { min-height: 7.5rem; }
.exploded-featured { display: grid; margin-bottom: 1rem; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); overflow: hidden; }
.exploded-featured__media { min-height: 22rem; background: #edf4f0; }
.exploded-featured__media img { width: 100%; height: 100%; object-fit: contain; }
.exploded-featured__content { display: flex; padding: clamp(1.2rem, 3vw, 2rem); flex-direction: column; align-items: flex-start; justify-content: center; }
.exploded-featured__content h2 { margin: .75rem 0 .5rem; }
.exploded-featured__content p { color: var(--ink-650); }
.exploded-featured__content .button { margin-top: 1rem; }
.exploded-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.exploded-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.exploded-card__image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mint-100); }
.exploded-card__image img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--transition); }
.exploded-card__image:hover img { transform: scale(1.025); }
.exploded-card__body { padding: 1rem; }
.exploded-card__body h3 { margin: .6rem 0 .4rem; }
.exploded-card__body h3 a { color: inherit; text-decoration: none; }
.exploded-card__body p { min-height: 3em; color: var(--ink-650); font-size: .86rem; }
.exploded-card__body small { color: var(--ink-500); }
.component-table-wrap { overflow-x: auto; }
.component-table { width: 100%; border-collapse: collapse; }
.component-table th, .component-table td { padding: .72rem .8rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.component-table th { color: var(--ink-500); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.component-table td:nth-child(2) { min-width: 14rem; white-space: normal; }
.clean-list { display: grid; margin: 0; padding-left: 1.1rem; gap: .55rem; }
.asset-exploded-preview { display: grid; grid-template-columns: minmax(10rem, .45fr) minmax(0, 1fr); align-items: center; gap: 1rem; }
.asset-exploded-preview img { width: 100%; max-height: 14rem; border-radius: .8rem; background: var(--mint-100); object-fit: contain; }
.asset-exploded-preview p { margin: .35rem 0; color: var(--ink-650); }

.exploded-workspace { display: grid; gap: .75rem; }
.exploded-toolbar { display: grid; padding: .8rem; grid-template-columns: auto minmax(14rem, 1fr) repeat(2, minmax(9rem, .45fr)); align-items: end; gap: .65rem; }
.exploded-toolbar label { display: grid; gap: .25rem; color: var(--ink-650); font-size: .72rem; font-weight: 720; }
.exploded-toolbar__group { display: flex; gap: .35rem; }
.exploded-toolbar__group .icon-button { width: auto; min-width: 2.55rem; padding-inline: .65rem; border: 1px solid var(--line-strong); }
.exploded-layers { display: flex; padding: .7rem .9rem; align-items: center; flex-wrap: wrap; gap: .45rem 1rem; }
.exploded-layers strong { margin-right: .25rem; }
.exploded-layers .check-row { width: auto; margin: 0; font-size: .78rem; }
.exploded-viewer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); align-items: start; gap: .8rem; }
.exploded-stage { position: relative; min-width: 0; padding: 0; overflow: hidden; background: #dfe9e4; cursor: grab; touch-action: none; user-select: none; }
.exploded-stage.is-zoomed { cursor: grabbing; }
.exploded-canvas { position: relative; width: 100%; overflow: hidden; transform-origin: 0 0; }
.exploded-canvas > img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.exploded-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.exploded-hotspot { pointer-events: auto; cursor: pointer; }
.exploded-hotspot__shape { fill: rgba(53, 208, 161, .22); stroke: #0e6c4d; stroke-width: 3; vector-effect: non-scaling-stroke; transition: fill var(--transition), stroke var(--transition), opacity var(--transition); }
.exploded-hotspot__label { fill: white; stroke: var(--forest-900); stroke-width: 5; paint-order: stroke; font-weight: 850; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.exploded-hotspot:hover .exploded-hotspot__shape, .exploded-hotspot:focus .exploded-hotspot__shape { fill: rgba(116, 214, 173, .42); stroke: #075b40; }
.exploded-hotspot.is-selected .exploded-hotspot__shape, .exploded-hotspot[aria-pressed="true"] .exploded-hotspot__shape { fill: rgba(245, 196, 81, .45); stroke: #b26a05; stroke-width: 5; }
.exploded-hotspot--secondary .exploded-hotspot__shape { fill: rgba(62, 139, 212, .2); stroke: #276aa8; }
.exploded-hotspot--tertiary .exploded-hotspot__shape { fill: rgba(116, 130, 126, .18); stroke: #52645f; }
.exploded-hotspot--warning .exploded-hotspot__shape { fill: rgba(245, 196, 81, .28); stroke: #a9650b; }
.exploded-hotspot--danger .exploded-hotspot__shape { fill: rgba(203, 72, 66, .24); stroke: var(--danger); }
.exploded-side-panel { position: sticky; top: calc(var(--header-height) + 1rem); display: grid; max-height: calc(100vh - var(--header-height) - 2rem); gap: .8rem; }
.component-browser, .component-detail { padding: 1rem; overflow: auto; }
.component-browser { max-height: 48vh; }
.component-browser .section-heading { margin-bottom: .5rem; }
.exploded-component-list { display: grid; margin: 0; padding: 0; gap: .35rem; list-style: none; }
.exploded-component-list__button { display: grid; width: 100%; min-height: 3.25rem; padding: .55rem .65rem; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: center; column-gap: .55rem; border: 1px solid transparent; border-radius: .65rem; background: var(--cream-50); color: var(--ink-800); cursor: pointer; text-align: left; }
.exploded-component-list__button > span { grid-row: 1 / 3; display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--forest-900); color: white; font-size: .76rem; font-weight: 800; }
.exploded-component-list__button > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exploded-component-list__button > small { color: var(--ink-500); }
.exploded-component-list__button:hover, .exploded-component-list__button.is-selected, .exploded-component-list__button[aria-pressed="true"] { border-color: var(--mint-500); background: var(--mint-100); }
.component-detail { min-height: 12rem; }
.component-detail__cover { width: 100%; max-height: 12rem; margin-bottom: .8rem; border-radius: .65rem; object-fit: cover; }
.component-detail h2 { margin-bottom: .7rem; font-size: 1.1rem; }
.component-detail__facts { display: grid; margin: 0 0 .8rem; gap: .45rem; }
.component-detail__facts > div { display: grid; grid-template-columns: minmax(7rem, .7fr) minmax(0, 1fr); gap: .5rem; }
.component-detail__facts dt { color: var(--ink-500); font-size: .72rem; }
.component-detail__facts dd { margin: 0; overflow-wrap: anywhere; color: var(--ink-800); font-size: .78rem; font-weight: 680; }
.exploded-disclaimer { margin-bottom: 1rem; }

.exploded-editor-layout { display: grid; grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); align-items: start; gap: .8rem; }
.exploded-editor-tools { position: sticky; top: calc(var(--header-height) + .8rem); display: grid; max-height: calc(100vh - var(--header-height) - 1.6rem); padding: 1rem; gap: .8rem; overflow: auto; }
.exploded-editor-tools fieldset { display: grid; margin: 0; padding: .8rem; gap: .55rem; border: 1px solid var(--line); border-radius: .75rem; }
.exploded-editor-tools legend { padding: 0 .25rem; font-size: .78rem; font-weight: 800; }
.exploded-editor-tools label { display: grid; gap: .2rem; color: var(--ink-650); font-size: .72rem; font-weight: 700; }
.editor-button-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.editor-button-grid .button { width: 100%; padding-inline: .5rem; }
.editor-status { min-height: 2.5rem; padding: .65rem; border-radius: .65rem; background: var(--cream-100); color: var(--ink-650); font-size: .78rem; }
.editor-stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; }
.editor-stat { padding: .55rem; border-radius: .6rem; background: var(--mint-100); text-align: center; }
.editor-stat strong { display: block; font-size: 1.25rem; }
.geometry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.geometry-grid input { width: 100%; }
.exploded-editor-canvas .exploded-hotspot.is-editor-selected .exploded-hotspot__shape { fill: rgba(245, 196, 81, .5); stroke: #9a5b00; stroke-width: 5; }
.exploded-editor-canvas .exploded-hotspot__shape { cursor: move; }
.exploded-editor-canvas .exploded-hotspot.is-hidden-hotspot { opacity: .42; }
.exploded-editor__preview-shape { fill: rgba(62, 139, 212, .22); stroke: #276aa8; stroke-width: 3; stroke-dasharray: 10 7; vector-effect: non-scaling-stroke; }
.exploded-editor__draft-point, .exploded-editor__vertex { fill: white; stroke: #276aa8; stroke-width: 4; vector-effect: non-scaling-stroke; pointer-events: auto; cursor: grab; }
.exploded-editor__vertex:focus { fill: var(--sun-400); outline: none; }
.exploded-editor__number-field input { width: 100%; }
.exploded-editor__vertex-row { display: grid; grid-template-columns: auto repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: .35rem; }
.exploded-editor__diagnostics.has-warning, [data-editor-diagnostics].has-warning { color: #8a4f00; font-weight: 700; }
.editor-drawing { fill: rgba(62, 139, 212, .22); stroke: #276aa8; stroke-width: 3; stroke-dasharray: 10 7; vector-effect: non-scaling-stroke; }

@media (max-width: 70rem) {
  .exploded-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exploded-toolbar { grid-template-columns: auto minmax(12rem, 1fr) repeat(2, minmax(8rem, .5fr)); }
  .exploded-viewer-grid { grid-template-columns: minmax(0, 1fr) 19rem; }
}
@media (max-width: 54rem) {
  .module-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exploded-featured { grid-template-columns: 1fr; }
  .exploded-featured__media { min-height: 16rem; }
  .exploded-toolbar { grid-template-columns: auto minmax(0, 1fr); }
  .exploded-toolbar > label:not(.exploded-search) { grid-column: span 1; }
  .exploded-viewer-grid, .exploded-editor-layout { grid-template-columns: 1fr; }
  .exploded-side-panel, .exploded-editor-tools { position: static; max-height: none; }
  .exploded-side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .component-browser { max-height: 28rem; }
}
@media (max-width: 40rem) {
  .exploded-card-grid, .exploded-side-panel { grid-template-columns: 1fr; }
  .exploded-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .exploded-toolbar__group { justify-content: center; }
  .exploded-layers { align-items: flex-start; flex-direction: column; }
  .exploded-editor__vertex-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-exploded-preview { grid-template-columns: 1fr; }
  .exploded-stage { margin-inline: -.25rem; border-radius: .75rem; }
  .component-table { font-size: .82rem; }
}