/* Moments blue + gold visual refinement, 2 October 2026.
   Presentation only. Existing screens, Home grid, photos, data and event handlers
   remain owned by the installed app. Local SVGs reuse existing project artwork. */
:root{
  --moments-navy:#061b39;
  --moments-blue:#174a83;
  --moments-gold:#e7cc72;
  --moments-dark-gradient:radial-gradient(ellipse at 48% -20%,#215487 0%,#174a83 32%,transparent 68%),radial-gradient(ellipse at 8% 110%,#174a83 0%,transparent 55%),linear-gradient(145deg,#061b39,#020e24);
  --moments-light-gradient:linear-gradient(140deg,#FFF9EE,#FFF9EE);
  --moments-gold-gradient:linear-gradient(135deg,#f0dfa0,#d4af37);
  --moments-control-gradient:linear-gradient(135deg,#215688,#071b35);
  --moments-control-hover:linear-gradient(135deg,#2d6aa4,#102f53);
  --moments-border:#c9d6e6;
  --moments-muted:#465b73;
  --moments-focus:#a07816;
}
body,body.adaptive-owner{background:var(--moments-dark-gradient)!important}
.phone,body.adaptive-owner .phone{background:#FFF9EE!important}
.screen:not(.public){background:linear-gradient(165deg,#FFF9EE 0%,#FFF9EE 54%,#FFF9EE 100%)}
.screen.public{background:var(--moments-dark-gradient)}
.screen:not(.public) :is(.title,.section-head h3){color:#061b39}
.screen:not(.public) :is(.copy,.flow-context,.field-guidance,.helper-state,.counter){color:var(--moments-muted)}
.screen:not(.public) .kicker{color:#806014}
.screen:not(.public) :is(.card,.quick,.list-card,.manage-card,.choice,.type-card,.settings-row,.toggle,.slide,.launch-metric,.launch-reward-row){background:var(--moments-light-gradient);border-color:var(--moments-border)}
.screen:not(.public) :is(.quick,.list-card,.manage-card,.choice,.type-card,.settings-row) :is(b,strong){color:#10263f}
.screen:not(.public) :is(.quick,.list-card,.manage-card,.choice,.type-card,.settings-row) small{color:var(--moments-muted)}
.screen:not(.public) :is(.qicon,.licon,.template-builder-mark){background:linear-gradient(140deg,#f8efd0,#eee0a8);color:#5a4613;border-color:#d4bf78}
.screen:not(.public) .info{background:#F6EFD8;border-color:#ccd9e9;color:#3f5670}
.screen:not(.public) .row{border-bottom-color:#dce5ef}
#home .home-actions-card{background:var(--moments-light-gradient);border-color:var(--moments-border)}
#home .experience-idea{background:#FFF9EE;border-color:var(--moments-border)}
.screen :is(.hero,.product-head,.plan-card,.context){background:var(--moments-dark-gradient)!important}
/* Dark feature panels retain readable gold labels and light content. */
.screen:not(.public) :is(.hero,.product-head,.plan-card,.context) :is(.kicker,.field label){color:#eed792}
.screen:not(.public) :is(.hero,.product-head,.plan-card,.context) :is(.title,h2,h3){color:#fff}
.screen:not(.public) :is(.hero,.product-head,.plan-card,.context) :is(.copy,.field-guidance,.helper-state,p,small){color:#dce7f5}
.screen>.topbar{background:var(--moments-dark-gradient)!important;border-color:#567395;border-bottom-color:#d4af37}
.screen>.topbar .pill,.screen>.topbar .shop{background:var(--moments-gold-gradient)!important;color:#061b39!important;border-color:#d4af37}
/* Button geometry remains with the existing component; only surfaces/states change. */
.screen .btn.primary,.screen .btn.btn-dark{background:var(--moments-control-gradient);color:#fff;border-color:#245787}
.screen .btn.secondary,.screen .btn.btn-ghost{background:linear-gradient(135deg,#FFF9EE,#F6EFD8);color:#153d67;border-color:#a9bed7}
.screen .btn.gold,.screen .btn.btn-gold,.screen .btn.btn-light{background:var(--moments-gold-gradient);color:#061b39;border-color:#b4943f}
.screen.public .btn.primary{background:var(--moments-gold-gradient);color:#061b39;border-color:#d4af37}
.screen.public .btn.secondary{background:linear-gradient(135deg,#214d78,#0b2849);color:#fff;border-color:#7091b4}
.screen:not(.public) :is(.pill,.mini-btn,.arrow,.filter,.catalog-category-tab,.experience-filter-bar button){background:linear-gradient(135deg,#FFF9EE,#F6EFD8);color:#153d67;border-color:#a9bed7}
.screen :is(.filter.active,.catalog-category-tab.active,.catalog-category-tab[aria-selected=true],.catalog-category-tab[aria-pressed=true],.experience-filter-bar button[aria-pressed=true]){background:var(--moments-control-gradient);color:#fff;border-color:#245787}
.screen .browse-carousel-controls button{background:linear-gradient(135deg,#FFF9EE,#F6EFD8);color:#153d67;border-color:#a9bed7}
.screen:not(.public) :is(.input,.member-music-select,.catalog-field-input,.product-search input,.flow-toolbar select,.flow-toolbar input){background:#FFF9EE;border-color:#6b85a6;color:#123457}
.screen:not(.public) :is(input,textarea)::placeholder{color:#53677f;opacity:1}
.screen:not(.public) :is(.upload,.catalog-upload-details){border-color:#6b85a6;color:#4f6680}
/* Native select options must remain legible in browser/OS menus. */
.screen :is(select option,select optgroup){background:#FFF9EE;color:#123457}
/* Preserve danger/warning/success meaning; never turn destructive actions gold. */
.screen .btn.danger,.screen .btn.btn-danger{background:#803e46;color:#fff;border-color:#803e46}
.screen :is(button,input[type=button],input[type=submit]):disabled,
.screen :is(button,a)[aria-disabled=true]{background:#e0e6ee!important;color:#566575!important;border-color:#bdc9d7!important;box-shadow:none!important;cursor:not-allowed;transform:none!important}
.screen :is(input,select,textarea):disabled{background:#edf1f6;color:#607184;border-color:#c6d1df;cursor:not-allowed}
.screen :is(button,a,input,select,textarea,[tabindex]):focus-visible,
body.adaptive-owner .screen :is(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--moments-focus)!important;outline-offset:3px;box-shadow:0 0 0 2px #fff}
.screen.public :is(button,a,input,select,textarea,[tabindex]):focus-visible{outline-color:#eed792!important;box-shadow:0 0 0 2px #061b39}
.screen :is(.hero,.product-head,.plan-card,.context) :is(button,a,input,select,textarea,[tabindex]):focus-visible,
body.adaptive-owner .screen :is(.hero,.product-head,.plan-card,.context) :is(button,a,input,select,textarea,[tabindex]):focus-visible{outline-color:#eed792!important;box-shadow:0 0 0 2px #061b39}
/* Consistent Experience product picker / Create Experience control baseline.
   Do not apply this to the Home action grid or any other toolbar. */
body.adaptive-owner #moments>.flow-toolbar{align-items:center;gap:12px}
body.adaptive-owner #moments>.flow-toolbar>label{flex:0 0 auto;margin:0;line-height:1.4;color:#153d67}
body.adaptive-owner #moments>.flow-toolbar>select,
body.adaptive-owner #moments>.flow-toolbar>.btn{box-sizing:border-box;min-height:50px!important;height:50px;margin:0!important;align-self:center}
body.adaptive-owner #moments>.flow-toolbar>select{flex:1 1 280px;min-width:0;padding:10px 14px;line-height:1.4}
body.adaptive-owner #moments>.flow-toolbar>.btn{flex:0 1 280px;min-width:190px;display:flex;align-items:center;justify-content:center;padding:10px 16px}
body.adaptive-owner #moments>.flow-toolbar>[hidden]{display:none!important}
/* Keep rail width/logo geometry identical before and after a scrollbar appears. */
@media(min-width:701px){
  body.adaptive-owner #adaptiveNav{overflow-y:scroll!important;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#6e88a8 #071b35;background:var(--moments-dark-gradient)!important}
  #adaptiveNav::-webkit-scrollbar{width:8px}
  #adaptiveNav::-webkit-scrollbar-track{background:#071b35}
  #adaptiveNav::-webkit-scrollbar-thumb{background:#6e88a8;border:2px solid #071b35;border-radius:8px}
  #adaptiveNav .adaptive-brand{flex:0 0 auto;min-width:0;box-sizing:border-box}
  #adaptiveNav .adaptive-brand .moments-lockup{max-width:100%;box-sizing:border-box}
  #adaptiveNav button{min-width:0;color:#dfebf8}
  #adaptiveNav button[aria-current=page]{background:var(--moments-gold-gradient);color:#061b39;box-shadow:inset 0 0 0 1px #d7b963}
  #adaptiveNav button:focus-visible{outline:3px solid #eed792!important;outline-offset:-3px}
  body.adaptive-owner .screen:not(.public):not(.full){scrollbar-gutter:stable;scrollbar-color:#8098b4 #FFF9EE}
}
@media(min-width:701px) and (max-width:1199px){
  #adaptiveNav .adaptive-brand{display:flex;justify-content:center;padding:6px 0 20px}
  #adaptiveNav .adaptive-brand .moments-lockup{width:56px;padding:8px;flex:0 0 56px}
  #adaptiveNav .adaptive-brand .brand-symbol{width:40px}
  #adaptiveNav .adaptive-brand :is(.brand-wordmark,.brand-tagline){display:none}
  #adaptiveNav button{padding-left:6px;padding-right:6px}
}
@media(max-width:700px){
  body.adaptive-owner #moments>.flow-toolbar{gap:8px}
  body.adaptive-owner #moments>.flow-toolbar>label{flex-basis:100%;font-size:13px}
  body.adaptive-owner #moments>.flow-toolbar>select,
  body.adaptive-owner #moments>.flow-toolbar>.btn{flex:1 1 100%;width:100%;min-width:0}
}
/* Decorative icon slots have text labels on their owning buttons. SVG background
   is the compatibility fallback; CSS masks supply the inherited state color. */
#adaptiveNav [data-screen=home] .nav-symbol,#bottomNav [data-target=home] .bicon{--moments-icon:url('../assets/ui-icons/home.svg')}
#adaptiveNav [data-screen=products] .nav-symbol,#bottomNav [data-target=products] .bicon,.quick[onclick="go('products')"] .qicon{--moments-icon:url('../assets/ui-icons/bag.svg')}
#adaptiveNav [data-screen=moments] .nav-symbol,.quick[onclick="go('moments')"] .qicon{--moments-icon:url('../assets/ui-icons/spark.svg')}
#adaptiveNav [data-screen=scanActivate] .nav-symbol,#bottomNav [data-target=scanActivate] .bicon{--moments-icon:url('../assets/ui-icons/camera.svg')}
#adaptiveNav [data-screen=experienceSettings] .nav-symbol{--moments-icon:url('../assets/ui-icons/voice.svg')}
#adaptiveNav [data-screen=share] .nav-symbol,.quick[onclick="go('share')"] .qicon{--moments-icon:url('../assets/ui-icons/share.svg')}
#adaptiveNav [data-screen=shopHub] .nav-symbol,#bottomNav [onclick="openShop()"] .bicon,.quick[onclick="openShop()"] .qicon{--moments-icon:url('../assets/ui-icons/bag.svg')}
#adaptiveNav [data-screen=profile] .nav-symbol,#bottomNav [data-target=profile] .bicon{--moments-icon:url('../assets/ui-icons/user.svg')}
#adaptiveNav [data-screen=subscriptionHub] .nav-symbol,.quick[onclick="setScreen('subscriptionHub')"] .qicon{--moments-icon:url('../assets/ui-icons/spark.svg')}
#adaptiveNav [data-screen=rewardsReferrals] .nav-symbol,.quick[onclick="setScreen('rewardsReferrals')"] .qicon{--moments-icon:url('../assets/ui-icons/gift.svg')}
#adaptiveNav [data-screen=planStorage] .nav-symbol{--moments-icon:url('../assets/ui-icons/photo.svg')}
#adaptiveNav [data-screen=help] .nav-symbol{--moments-icon:url('../assets/ui-icons/chat.svg')}
#manage .manage-card[onclick="showManageDetail('activation')"] .licon{--moments-icon:url('../assets/ui-icons/check.svg')}
#manage .manage-card[onclick="showManageDetail('how')"] .licon,#manage .manage-card[onclick="showManageDetail('support')"] .licon{--moments-icon:url('../assets/ui-icons/chat.svg')}
#manage .manage-card[onclick="showManageDetail('details')"] .licon{--moments-icon:url('../assets/ui-icons/bag.svg')}
#manage .manage-card[onclick="showManageDetail('sharing')"] .licon{--moments-icon:url('../assets/ui-icons/share.svg')}
#manage .manage-card[onclick="showManageDetail('transfer')"] .licon{--moments-icon:url('../assets/ui-icons/return.svg')}
#manage .manage-card[onclick="showManageDetail('lost')"] .licon{--moments-icon:url('../assets/ui-icons/shield.svg')}
#adaptiveNav .nav-symbol,#bottomNav .bicon,#home .quick .qicon,#manage .manage-card .licon{font-size:0!important;line-height:0!important;display:grid;place-items:center;flex-shrink:0}
#adaptiveNav .nav-symbol{width:26px;height:26px}
#adaptiveNav .nav-symbol::before,#bottomNav .bicon::before,#home .quick .qicon::before,#manage .manage-card .licon::before{content:"";display:block;width:23px;height:23px;background-image:var(--moments-icon);background-position:center;background-size:contain;background-repeat:no-repeat;pointer-events:none}
#adaptiveNav .nav-symbol::before,#bottomNav .bicon::before{filter:brightness(0) invert(1)}
#adaptiveNav [aria-current=page] .nav-symbol::before,#bottomNav .active .bicon::before{filter:none}
@supports ((mask-image:url('')) or (-webkit-mask-image:url(''))){
  #adaptiveNav .nav-symbol::before,#bottomNav .bicon::before,#home .quick .qicon::before,#manage .manage-card .licon::before{background-image:none;background-color:currentColor;filter:none;-webkit-mask-image:var(--moments-icon);mask-image:var(--moments-icon);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
}
@media(hover:hover){
  .screen .btn.primary:not(:disabled):not([aria-disabled=true]):hover{background:var(--moments-control-hover);color:#fff}
  .screen .btn.secondary:not(:disabled):not([aria-disabled=true]):hover{background:linear-gradient(135deg,#F6EFD8,#F6EFD8);color:#123457;border-color:#688ab0}
  .screen.public .btn.primary:not(:disabled):not([aria-disabled=true]):hover{background:linear-gradient(135deg,#fff0bd,#e7cc72);color:#061b39}
  .screen.public .btn.secondary:not(:disabled):not([aria-disabled=true]):hover{background:linear-gradient(135deg,#2a608f,#163c65);color:#fff}
  .screen .btn.danger:not(:disabled):hover,.screen .btn.btn-danger:not(:disabled):hover{background:#652f36;color:#fff}
  .screen:not(.public) :is(.quick,.list-card,.manage-card,.choice,.type-card,.settings-row):not(:disabled):not([aria-disabled=true]):hover{border-color:#789bc0;box-shadow:0 5px 16px #0b2c5012}
  #adaptiveNav button:not([aria-current=page]):hover{background:#ffffff17;box-shadow:inset 0 0 0 1px #7493b8}
}
@media(prefers-reduced-motion:reduce){.screen :is(button,a,input,select,textarea){transition:none!important}}
@media(forced-colors:active){
  .screen :is(button,a,input,select,textarea):focus-visible,#adaptiveNav button:focus-visible{outline-color:Highlight!important}
  #adaptiveNav button[aria-current=page],#bottomNav button.active{outline:2px solid Highlight;outline-offset:-2px}
  #adaptiveNav .nav-symbol::before,#bottomNav .bicon::before,#home .quick .qicon::before,#manage .manage-card .licon::before{background-color:ButtonText;forced-color-adjust:none}
}

/* Approved cream surface revision, 3 October 2026: colors only.
   Legacy shared surfaces use these same creams; status and Experience skins retain their colors. */
.stage,.notes{background-color:#FFF9EE}
.screen:not(.public) .catalyst-otp-digit:not(:disabled){background:#FFF9EE}
#home .account-product-rail .browse-product-image{background-color:#F6EFD8}
.notes .box{background-color:#F6EFD8}
.screen:not(.public) :is(.catalog-block,.catalog-entry-actions,.experience-idea,.browse-product-card,.msg.viewer-msg,.upload){background:#FFF9EE}
.screen:not(.public) :is(.catalog-thumbnail,.catalog-detail-image,.product-thumbnail,.browse-product-image){background-color:#F6EFD8}
.screen:not(.public) .product-thumbnail img{background-color:#FFF9EE}
.screen:not(.public) .catalog-action-status:not([data-state="success"]):not([data-state="error"]):not([data-state="busy"]){background-color:#F6EFD8}
.screen:not(.public) .password-visibility:hover,.screen:not(.public) .password-visibility:focus-visible{background-color:#F6EFD8}
body #shopHub.screen:not(.public):not(.full),#shopHub .moments-store-frame,#shopHub .moments-store-loading{background:#FFF9EE}

/* Approved cream + blue action states, 3 October 2026.
   Scope is action controls only; cards, public viewers, and semantic danger colors stay intact. */
.screen:not(.public) :is(button,a,input[type="button"],input[type="submit"]):is(.btn,.pill,.mini-btn,.arrow,.shop,.filter,.catalog-category-tab,.experience-filter-bar button,.browse-carousel-controls button):not(.danger):not(.btn-danger):not(.remove):not([data-saved-remove]):not(:disabled):not([disabled]):not([aria-disabled="true"]){background:linear-gradient(135deg,#215688,#0d2e57)!important;color:#fff!important;border-color:#215688!important}
.screen:not(.public) :is(button,a,input[type="button"],input[type="submit"]):is(.btn,.pill,.mini-btn,.arrow,.shop,.filter,.catalog-category-tab,.experience-filter-bar button,.browse-carousel-controls button):not(.danger):not(.btn-danger):not(.remove):not([data-saved-remove]):not(:disabled):not([disabled]):not([aria-disabled="true"]):is(.active,[aria-pressed="true"],[aria-selected="true"]){background:linear-gradient(135deg,#12365f,#061b39)!important;border-color:#e7cc72!important;box-shadow:inset 0 0 0 2px #e7cc72!important}
@media(hover:hover){
  .screen:not(.public) :is(button,a,input[type="button"],input[type="submit"]):is(.btn,.pill,.mini-btn,.arrow,.shop,.filter,.catalog-category-tab,.experience-filter-bar button,.browse-carousel-controls button):not(.danger):not(.btn-danger):not(.remove):not([data-saved-remove]):not(:disabled):not([disabled]):not([aria-disabled="true"]):hover{background:linear-gradient(135deg,#286bb2,#1b5594)!important;color:#fff!important}
}
.screen:not(.public) :is(button,a,input[type="button"],input[type="submit"]):is(.btn,.pill,.mini-btn,.arrow,.shop,.filter,.catalog-category-tab,.experience-filter-bar button,.browse-carousel-controls button):not(.danger):not(.btn-danger):not(.remove):not([data-saved-remove]):not(:disabled):not([disabled]):not([aria-disabled="true"]):active{background:linear-gradient(135deg,#12365f,#061b39)!important;color:#fff!important;box-shadow:inset 0 0 0 2px #e7cc72!important;transform:none!important}
.screen:not(.public) :is(button,a,input[type="button"],input[type="submit"]):is(.btn,.pill,.mini-btn,.arrow,.shop,.filter,.catalog-category-tab,.experience-filter-bar button,.browse-carousel-controls button):not(.danger):not(.btn-danger):not(.remove):not([data-saved-remove]):not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible{outline:3px solid #a07816!important;outline-offset:3px;box-shadow:0 0 0 2px #fff!important}
.screen:not(.public) :is(button,a,input[type="button"],input[type="submit"]):is(.btn,.pill,.mini-btn,.arrow,.shop,.filter,.catalog-category-tab,.experience-filter-bar button,.browse-carousel-controls button):not(.danger):not(.btn-danger):not(.remove):not([data-saved-remove]):is(:disabled,[disabled],[aria-disabled="true"]){background:#dfe5ec!important;color:#4c5b6f!important;border-color:#a9b8ca!important;box-shadow:none!important;opacity:1!important;cursor:not-allowed;transform:none!important}
@media(forced-colors:active){.screen:not(.public) :is(button,a,input[type="button"],input[type="submit"]):is(.btn,.pill,.mini-btn,.arrow,.shop,.filter,.catalog-category-tab,.experience-filter-bar button,.browse-carousel-controls button):not(.danger):not(.btn-danger):not(.remove):not([data-saved-remove]):not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible{outline-color:Highlight!important}}

/* Approved Home desktop/tablet layout, 3 October 2026.
   Keep the product selector above the full-width Experience carousel.
   Card counts follow available content width, including the owner sidebar. */
@media(min-width:701px){
  #home .home-dashboard{grid-template-columns:minmax(0,1fr);gap:24px;container-type:inline-size;container-name:home-dashboard}
  #home .home-products-panel,#home .home-experiences-panel{min-width:0;width:100%}
  #home .account-product-carousel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px}
  #home .account-product-carousel>.browse-carousel-controls{display:grid;grid-template-columns:44px auto 44px;gap:8px;margin:0;justify-content:center}
  #home .account-product-carousel>.browse-carousel-controls>button:last-child{grid-column:1 / -1;justify-self:stretch;white-space:normal}
  #home .experience-idea-rail{gap:16px;align-items:stretch}
  #home .experience-idea{flex:0 0 calc((100% - 16px)/2);align-self:stretch;min-height:208px;height:auto}
  #home .experience-idea .catalog-thumbnail{box-sizing:border-box;flex:0 0 116px;height:116px}
  #home .experience-idea b{min-height:2.5em}
  @container home-dashboard (min-width:680px){
    #home .experience-idea{flex-basis:calc((100% - 32px)/3)}
  }
  @container home-dashboard (min-width:920px){
    #home .experience-idea{flex-basis:calc((100% - 48px)/4)}
  }
}


/* Approved White page / Cream cards palette, 3 October 2026.
   Color-only overrides. Owner/auth canvas follows the active non-public screen;
   public Experience skins, dark feature panels, controls and state colors retain
   their existing rules. Existing Home/card geometry above is unchanged. */
body.adaptive-owner,
body:has(.screen.active:not(.public)) {
  background:#FFFFFF!important;
}
body.adaptive-owner .stage,
body.adaptive-owner .phone,
.stage:has(.screen.active:not(.public)),
.phone:has(.screen.active:not(.public)) {
  background:#FFFFFF!important;
}
.screen:not(.public) {
  background:#FFFFFF;
}
body #shopHub.screen:not(.public):not(.full),
#shopHub .moments-store-frame,
#shopHub .moments-store-loading {
  background:#FFFFFF;
}
/* Shared neutral panels serve account, products, Experiences, editor, support,
   rewards and authentication. Home's navy selector keeps its stronger rule. */
.screen:not(.public) :is(.card,.quick,.list-card,.manage-card,.choice,.type-card,
.settings-row,.toggle,.slide,.launch-metric,.launch-reward-row,.catalog-block,
.catalog-entry-actions,.experience-idea,.msg.viewer-msg,.home-actions-card):not(.dark):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background:#FFF9EE;
}
/* White fields remain bounded by their existing blue-gray borders on cream.
   Disabled fields keep their separate inherited treatment. */
.screen:not(.public) :is(.input,.member-music-select,.catalog-field-input,
.catalyst-otp-digit,.product-search input,.flow-toolbar select,.flow-toolbar input):not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background-color:#FFFFFF;
}
.screen:not(.public) :is(.upload,.catalog-upload-details) {
  background-color:#F6EFD8;
}
/* This is the owner's design chooser, not a rendered Experience or its art. */
body:has(.screen.active:not(.public)) .moment-design-picker {
  background:#FFFFFF;
}
body:has(.screen.active:not(.public)) .moment-design-picker .birthday-design-tile {
  background:#FFF9EE;
}