/* Shared vNext materials. Themes supply colour; selectors and geometry stay fixed. */
:root{--frame-radius:20px;--frame-width:1px;--button-radius:14px;--field-radius:12px;--dialog-radius:24px;--page-margin:16px;--spacing:8px;--touch-target:48px}
body{isolation:isolate;background:transparent}
#living-background{position:fixed;inset:-40px;z-index:-1;pointer-events:none;overflow:hidden;background:linear-gradient(155deg,var(--bg),var(--bg-secondary))}
#living-background>i{position:absolute;inset:0;--depth:.35;--wave-angle:0deg;transform:translate3d(calc(var(--parallax-x,0px)*var(--depth)),calc(var(--parallax-y,0px)*var(--depth)),0) rotate(var(--wave-angle))}
#living-background>i:nth-child(1){inset:10% auto auto -16%;width:135%;height:44%;--wave-angle:-12deg;border-radius:48% 64% 38% 70%;background:linear-gradient(150deg,transparent,color-mix(in srgb,var(--accent) 28%,transparent),color-mix(in srgb,var(--accent-secondary) 8%,transparent));border-top:2px solid color-mix(in srgb,var(--accent) 30%,transparent);box-shadow:inset 0 12px 30px color-mix(in srgb,var(--accent) 8%,transparent)}
#living-background>i:nth-child(2){inset:48% auto auto -25%;width:155%;height:48%;--depth:.8;--wave-angle:14deg;border-radius:50% 38% 62% 44%;background:linear-gradient(175deg,transparent,color-mix(in srgb,var(--accent-secondary) 25%,transparent),color-mix(in srgb,var(--accent) 7%,transparent));border-top:2px solid color-mix(in srgb,var(--accent-secondary) 24%,transparent)}
#living-background>i:nth-child(3){--depth:1.05;opacity:.14;background:radial-gradient(ellipse at 58% 35%,var(--accent),transparent 55%)}
#living-background>i:nth-child(4){--depth:1.35;opacity:.06;background:repeating-linear-gradient(125deg,transparent 0 180px,var(--accent) 182px,transparent 185px 360px)}
/* Only decorative backgrounds vary. Each mask is generated from ThemeMotifs.kt. */
html[data-theme=GOLDEN_HEART] #living-background>i:nth-child(3),html[data-theme=GOLDEN_HEART] #living-background>i:nth-child(4),
html[data-theme=FOUR_TWENTY] #living-background>i:nth-child(4),html[data-theme=BAR_BEE] #living-background>i:nth-child(4),
html[data-theme=ALL_BANANAS] #living-background>i:nth-child(4){background:var(--accent);opacity:.065;-webkit-mask:var(--motif) 7% 30%/160px 160px repeat;mask:var(--motif) 7% 30%/160px 160px repeat}
html[data-theme=GOLDEN_HEART] #living-background>i:nth-child(3){--motif:url('/theme-motifs/dolphin.svg');mask-size:160px 160px;-webkit-mask-size:160px 160px;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:10% 30%;-webkit-mask-position:10% 30%;opacity:.045}
html[data-theme=GOLDEN_HEART] #living-background>i:nth-child(4){--motif:url('/theme-motifs/flowerpot.svg');mask-size:120px 120px;-webkit-mask-size:120px 120px;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:90% 80%;-webkit-mask-position:90% 80%;opacity:.05}
html[data-theme=FOUR_TWENTY] #living-background>i:nth-child(4){--motif:url('/theme-motifs/botanical.svg');mask-size:380px 380px;-webkit-mask-size:380px 380px}
html[data-theme=BAR_BEE] #living-background>i:nth-child(4){--motif:url('/theme-motifs/star.svg');mask-size:100px 100px;-webkit-mask-size:100px 100px;opacity:.035}
html[data-theme=ALL_BANANAS] #living-background>i:nth-child(4){--motif:url('/theme-motifs/banana.svg');mask-size:400px 400px;-webkit-mask-size:400px 400px}
html[data-theme=GOLDEN_HEART] #living-background::after{position:absolute;inset-inline-start:32px;bottom:12%;font-size:12px;letter-spacing:.12em;color:var(--muted);opacity:.13}
html[data-background-motion=running] #living-background>i{animation:glass-drift 48s ease-in-out infinite alternate;will-change:transform}
html[data-background-motion=running] #living-background>i:nth-child(even){animation-direction:alternate-reverse;animation-duration:64s}
@keyframes glass-drift{from{transform:translate3d(calc(var(--parallax-x,0px)*var(--depth) - 12px),calc(var(--parallax-y,0px)*var(--depth) - 8px),0) rotate(var(--wave-angle))}to{transform:translate3d(calc(var(--parallax-x,0px)*var(--depth) + 12px),calc(var(--parallax-y,0px)*var(--depth) + 8px),0) rotate(calc(var(--wave-angle) + 2deg))}}
main{padding-inline:var(--page-margin)}
.card,details,.message,.composer,.record-window,.record-discard,.page-heading,header,#nav,footer{
 border-width:var(--frame-width);border-color:color-mix(in srgb,var(--line) 55%,transparent);
 border-radius:var(--frame-radius);background:var(--panel);
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--shine) 38%,transparent),0 8px 28px #00000016;
}
header,footer{border-radius:0}
/* Blur creates a stacking context. Lift the menu's enclosing surfaces above later
   cards/folds so pointer input reaches the same actions as keyboard input. */
:is(.record-card,details):has(.record-overflow[open]){position:relative;z-index:5;overflow:visible}
dialog,.record-window,.record-discard{border-radius:var(--dialog-radius);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--shine) 40%,transparent),0 18px 60px #00000045}
button{border-radius:var(--button-radius);border-width:var(--frame-width);min-height:var(--touch-target)}
input:not([type=checkbox]),select,textarea{border-radius:var(--field-radius);min-height:var(--touch-target)}
.record-heading,.record-footer{background:var(--panel);border-color:color-mix(in srgb,var(--line) 55%,transparent)}
.field-label{background:var(--panel)}
/* One material contract for all surfaces, including overflow and field controls. */
:root,:is(.card,details,.message,.composer,.record-window,.record-discard,.page-heading,header,#nav,footer,.shell-overflow,#subnavigation,.record-heading,.record-footer,dialog,input,select,textarea,button){--glass-fill:linear-gradient(155deg,color-mix(in srgb,var(--panel-raised) calc((var(--glass-opacity,.46) + .08)*100%),transparent),color-mix(in srgb,var(--panel) calc(var(--glass-opacity,.46)*100%),transparent));--glass-edge:color-mix(in srgb,var(--shine) 62%,transparent)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
 :root :is(.card,details,.message,.composer,.record-window,.record-discard,.page-heading,header,#nav,footer,.shell-overflow,#subnavigation,.record-heading,.record-footer,dialog){
  background:var(--glass-fill);border-top-color:var(--glass-edge);border-bottom-color:color-mix(in srgb,var(--shade) 46%,var(--line));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--shine) 42%,transparent),inset 0 -1px 0 #0003,0 10px 28px #0003;
  -webkit-backdrop-filter:blur(16px) saturate(1.18);backdrop-filter:blur(16px) saturate(1.18);
 }
 :root :is(input:not([type=checkbox]),select,textarea,button:not(:is(.primary-destination,.brand,.record-open,.record-thumbnail-button,.vehicle-photo-edit-button))){
  background:var(--glass-fill);border-top-color:var(--glass-edge);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--shine) 32%,transparent),inset 0 -1px 0 #0003;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
 }
 :root button:is(.primary,[aria-current=page],[aria-pressed=true]){border-color:var(--accent);box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 24px color-mix(in srgb,var(--accent) 12%,transparent),0 2px 12px #0002}
 :root button.danger{border-color:var(--error)}
}
/* Shared popup material in both apps. Keep text fully opaque; only the glass tint changes. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
 :root body :is(dialog,.record-window,.record-discard,.il-store-options,.il-suggestions,.il-action-menu>div,.record-form-overflow>.record-actions,.shell-overflow>div,.il-radius-popover>div){
  --glass-opacity:.34;--glass-fill:linear-gradient(155deg,color-mix(in srgb,var(--panel-raised) 42%,transparent),color-mix(in srgb,var(--panel) 34%,transparent));background:var(--glass-fill)!important;-webkit-backdrop-filter:blur(24px) saturate(1.18);backdrop-filter:blur(24px) saturate(1.18);
 }
 .il-store-options>button,.il-suggestions>button{background:transparent!important}
}
@media(prefers-reduced-transparency:reduce){:root body :is(dialog,.record-window,.record-discard,.il-store-options,.il-suggestions,.il-action-menu>div,.record-form-overflow>.record-actions,.shell-overflow>div,.il-radius-popover>div){background:var(--panel)!important;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){html[data-background-motion] #living-background>i{animation:none;transform:none;will-change:auto}}
@media(prefers-reduced-transparency:reduce){:root :is(.card,details,.message,.composer,.record-window,.record-discard,.page-heading,header,#nav,footer,.shell-overflow,#subnavigation,.record-heading,.record-footer,dialog,input,select,textarea,button){background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* A preview can have dark ink/surface on a light page, or vice versa. Keep its own readable tint. */
.theme-choice{--glass-opacity:.84!important}
/* A shared, bounded dismissal target. Existing cancel/dirty guards own its action. */
.popup-close-row{display:flex;justify-content:flex-end;flex:none;position:sticky;top:0;z-index:2}
:root body button.popup-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;font-size:26px;line-height:1;border:0;background:transparent;box-shadow:none}
body :is(.il-profile-card,.own-profile-card) .own-profile-field{display:flex;flex-direction:column;align-items:flex-start;text-align:start;width:100%;padding:10px 0;border:0;border-bottom:1px solid #ffffff25;border-radius:0;background:transparent;box-shadow:none;white-space:pre-wrap;overflow-wrap:anywhere}
.own-profile-field small{opacity:.7;font-size:.78rem}
body :is(.il-profile-card,.own-profile-card) .own-profile-field:disabled{opacity:1}
.own-profile-username{margin:0 0 18px!important;padding-inline-start:112px;min-height:42px;overflow-wrap:anywhere;font-size:1.4rem!important}
.own-profile-card .profile-image-pair,.il-profile-card .il-profile-pictures{margin-bottom:-34px}
body .own-profile-card{border:0;background:transparent;box-shadow:none}
body .own-profile-card .profile-image-pair{position:relative;height:200px}
body .own-profile-card .vehicle-cover-image{height:165px;width:100%}
body .own-profile-card .vehicle-profile-image{position:absolute;width:90px;height:90px;left:12px;bottom:0;top:auto;border-radius:50%}