/* Mobbin reference study: a shared rhythm for the existing Studio, not a new flow.
   Component owners still control visibility, authentication, payment and rendering. */
html.approved-studio {
  --ui-white: #fff;
  --ui-gray-50: #f7f8fa;
  --ui-gray-100: #eef1f5;
  --ui-gray-200: #d9dfe7;
  --ui-gray-500: #596579;
  --ui-gray-900: #182230;
  --ui-blue-50: #edf3ff;
  --ui-blue-600: #1a56db;
  --ui-blue-700: #1448b8;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-control-radius: 12px;
  --ui-card-radius: 20px;
  --ui-sheet-radius: 24px;
  --ui-control-height: 48px;
  --ui-motion-fast: 150ms;
  --ui-motion-enter: 200ms;
  --ui-ease: cubic-bezier(.2,.7,.2,1);
  --ui-surface: var(--ui-white);
  --ui-canvas: var(--ui-gray-50);
  --ui-border: var(--ui-gray-200);
  --ui-text: var(--ui-gray-900);
  --ui-secondary: var(--ui-gray-500);
  --ui-accent: var(--ui-blue-600);
  --ui-selected: var(--ui-blue-50);
  --paper: var(--ui-canvas);
  --ink: var(--ui-text);
  --muted: var(--ui-secondary);
  --hair: var(--ui-border);
  --hair-soft: var(--ui-gray-100);
  --tint: var(--ui-selected);
  --cobalt: var(--ui-accent);
  --cobalt-dark: var(--ui-blue-700);
  --studio-action-height: var(--ui-control-height);
  --studio-action-radius: var(--ui-control-radius);
}
.approved-studio body { color:var(--ui-text); background:var(--ui-canvas); }
.approved-studio :is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid var(--ui-accent); outline-offset:3px; }
.approved-studio :is(button,a,input,select,textarea,summary) { -webkit-tap-highlight-color:transparent; }
.approved-studio :is(button,.btn) { transition:background-color var(--ui-motion-fast),border-color var(--ui-motion-fast),box-shadow var(--ui-motion-fast),color var(--ui-motion-fast); }
.approved-studio :is(.wiz-go,.native-primary,.reno-continue,#decorPresetContinue,#styleContinueFloating,#editGo,#drawerSignIn) {
  min-height:var(--ui-control-height); border-radius:var(--ui-control-radius); padding:12px 16px;
  background:var(--ui-accent); color:var(--ui-white); font:600 15px/1.4 Inter,system-ui,sans-serif; letter-spacing:0; box-shadow:none;
}
.approved-studio :is(.wiz-go,.native-primary,.reno-continue,#decorPresetContinue,#styleContinueFloating,#editGo):disabled {
  background:var(--ui-gray-100)!important; color:var(--ui-secondary)!important; opacity:1!important; cursor:not-allowed;
}
.approved-studio :is(#wizBack,.example-view-controls button,.image-view-tabs button,.design-image-actions>button,.settings-header button,.settings-actions .btn,.reno-back) {
  min-height:44px; border-radius:var(--ui-control-radius); border:1px solid var(--ui-border); font-size:14px; font-weight:600;
}
.approved-studio :is(#wiz input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),#wiz textarea,#wiz select,.settings-card input:not([type=checkbox]),.settings-card select,.settings-card textarea,#ylSearch) {
  min-height:var(--ui-control-height); border:1px solid var(--ui-border); border-radius:var(--ui-control-radius);
  padding:12px; background:var(--ui-surface); color:var(--ui-text); font:400 16px/1.4 Inter,system-ui,sans-serif; box-shadow:none;
}
.approved-studio :is(#wiz input,#wiz textarea,.settings-card input)::placeholder { color:var(--ui-secondary); opacity:1; }
.approved-studio .top { background:var(--ui-surface); border-bottom:1px solid var(--ui-border); backdrop-filter:none; }
.approved-studio .top :is(.native-account,#acctBtn,#signInBtn) { min-width:44px; min-height:44px; border-radius:var(--ui-control-radius)!important; }
.approved-studio #planPill { min-height:44px; border:0; background:var(--ui-canvas); border-radius:var(--ui-control-radius); padding:10px 12px; }
.approved-studio #planPill .cd { display:none; }
.approved-studio #appSide { background:var(--ui-surface); border-color:var(--ui-border); }
.approved-studio #appSide .side-a { min-height:44px; padding:10px 12px; border-radius:var(--ui-control-radius); }
.approved-studio #appSide .side-h { letter-spacing:.02em; }
.approved-studio #wiz { background:var(--ui-surface); border-color:var(--ui-border); box-shadow:none; }
.approved-studio #wiz .wiz-head { background:var(--ui-surface); border-bottom:1px solid var(--ui-gray-100); }
.approved-studio #wiz .wiz-meta { font-size:12px; font-weight:600; color:var(--ui-secondary); letter-spacing:.02em; }
.approved-studio #wiz[data-step=photo] .wiz-head { padding-block:var(--ui-space-4); border-bottom:0; }
.approved-studio #wiz[data-step=photo] #wizBack[hidden] { display:none!important; }
.approved-studio #wiz[data-step=photo] .wiz-meta { flex-direction:row; justify-content:flex-start; }
.approved-studio #wiz .wiz-step h2 { font:700 28px/1.2 Inter,system-ui,sans-serif; letter-spacing:-.7px; margin:0 0 var(--ui-space-2); }
.approved-studio #wiz :is(.wiz-sub,.wiz-hint) { color:var(--ui-secondary); font-size:15px; line-height:1.55; }
.approved-studio #wiz .wiz-sub { margin-bottom:var(--ui-space-6); }
.approved-studio #wiz .wiz-body { padding-top:var(--ui-space-4); }
.approved-studio #wiz .studio-listing { min-height:48px; margin:0 0 var(--ui-space-4); padding:10px 12px; border-radius:var(--ui-control-radius); background:var(--ui-canvas); font-size:14px; }
.approved-studio #wizDrop { border:1.5px dashed var(--ui-border)!important; border-radius:var(--ui-card-radius)!important; background:var(--ui-canvas)!important; }
.approved-studio #wizDrop b { font-size:17px; font-weight:600; color:var(--ui-accent); }
.approved-studio #wizDrop span { color:var(--ui-secondary); }
.approved-studio #wizPhotoContext:not([hidden]) { align-items:center; gap:0; }
.approved-studio #wizPhotoContextImage { border-radius:var(--ui-card-radius); object-position:center; }
.approved-studio #wizPhotoContext>span { font-size:12px; color:var(--ui-secondary); margin-top:var(--ui-space-2); }
.approved-studio .studio-space-row { gap:var(--ui-space-3); margin:0 0 var(--ui-space-4); align-items:stretch; }
.approved-studio :is(.studio-scope,#studioChoiceBar .structure-choices) { padding:var(--ui-space-1); gap:var(--ui-space-1); border-radius:var(--ui-control-radius); background:var(--ui-gray-100); }
.approved-studio :is(.studio-scope,#studioChoiceBar .structure-choices) button { min-height:44px; border-radius:8px; font-size:14px; font-weight:600; color:var(--ui-secondary); }
.approved-studio :is(.studio-scope,#studioChoiceBar .structure-choices) button[aria-pressed=true] { border-color:transparent; background:var(--ui-surface); color:var(--ui-text); box-shadow:0 1px 3px #18223012; }
.approved-studio #wiz #studioContextSelect { height:100%; padding-inline:12px; font-size:16px; }
.approved-studio #studioChoiceBar .structure-choices { margin-bottom:var(--ui-space-3); }
.approved-studio #studioChoiceContinue { width:100%; margin:0 0 16px; }
.approved-studio :is(#studioChoiceContinue,#studioChoiceError,#authNoCard)[hidden] { display:none!important; }
.approved-studio #studioChoiceBar .structure-choices.choice-invalid { outline:2px solid #c62828; outline-offset:2px; background:#fff1f1; }
.approved-studio #wiz #studioContextSelect[aria-invalid=true] { border-color:#c62828; box-shadow:0 0 0 1px #c62828; }
.approved-studio #wiz #studioChoiceError { color:#a51d1d; font-size:14px; margin:-8px 0 16px; }
.approved-studio #actionCards { gap:var(--ui-space-3); }
.approved-studio #actionCards .visual-card { border-color:var(--ui-border); border-radius:var(--ui-card-radius); gap:0; }
.approved-studio #actionCards .action-copy { padding:var(--ui-space-3); min-height:0; flex:none; }
.approved-studio #actionCards .action-copy small { font-size:13px; line-height:1.5; color:var(--ui-secondary); }
.approved-studio :is(.studio-look>.visual-card,.reno-option,.native-tool) { border-radius:var(--ui-card-radius); overflow:hidden; border-color:var(--ui-border); background:var(--ui-surface); box-shadow:none; }
.approved-studio :is(.visual-card,.reno-option-button)[aria-pressed=true] { border-color:var(--ui-accent)!important; box-shadow:0 0 0 2px var(--ui-accent); background:var(--ui-selected); }
.approved-studio .studio-save { display:grid; place-items:center; padding:0; width:44px; height:44px; background:var(--ui-surface); border:1px solid var(--ui-border); box-shadow:0 2px 8px #18223014; }
.approved-studio .studio-save[aria-pressed=true] { color:var(--ui-accent); background:var(--ui-selected); }
.approved-studio #wiz #studioStyleSearch { min-height:48px; margin-bottom:var(--ui-space-3); }
.approved-studio .style-group-filters { gap:var(--ui-space-2); margin-bottom:var(--ui-space-3); }
.approved-studio .style-group-filters button { min-height:44px; padding:10px 14px; border:1px solid var(--ui-border); border-radius:999px; color:var(--ui-secondary); background:var(--ui-surface); font-size:13px; }
.approved-studio .style-group-filters button[aria-pressed=true] { color:var(--ui-accent); background:var(--ui-selected); border-color:var(--ui-accent); }
.approved-studio #styleGroupStatus { margin:var(--ui-space-3) 0; color:var(--ui-secondary); font-size:12px; }
.approved-studio :is(.direct-tool-entry-bar,.molding-entry-bar) { padding:var(--ui-space-4) var(--ui-space-6); column-gap:var(--ui-space-3); row-gap:var(--ui-space-2); background:var(--ui-surface); }
.approved-studio :is(.direct-tool-entry-bar,.molding-entry-bar) strong { font:700 20px/1.3 Inter,system-ui,sans-serif; letter-spacing:-.4px; }
.approved-studio :is(.direct-tool-entry-bar,.molding-entry-bar) button { min-height:44px; border:1px solid var(--ui-border); border-radius:var(--ui-control-radius); background:var(--ui-canvas); color:var(--ui-text); font-size:13px; font-weight:600; }
.approved-studio .image-view-tabs { background:var(--ui-gray-100)!important; }
.approved-studio .image-view-tabs button[aria-pressed=true] { color:var(--ui-accent); border-color:var(--ui-accent); background:var(--ui-selected); }
.approved-studio :is(.design-card,.settings-card) { border:1px solid var(--ui-border); border-radius:var(--ui-card-radius); box-shadow:none; background:var(--ui-surface); }
.approved-studio :is(.yl-head h2,.design-card-heading h3,.settings-nav h1,.settings-content h2,.native-tools h1,.inspo-head h2) { font-family:Inter,system-ui,sans-serif!important; font-weight:700; letter-spacing:-.6px; color:var(--ui-text); }
.approved-studio #drawer { background:var(--ui-canvas); }
.approved-studio .settings-header { background:var(--ui-surface); border-color:var(--ui-border); }
.approved-studio .settings-nav button { min-height:44px; border-radius:var(--ui-control-radius); color:var(--ui-secondary); }
.approved-studio .settings-nav button[aria-current] { color:var(--ui-accent); background:var(--ui-selected); }
.approved-studio #settingsSignedOut { padding:var(--ui-space-6); border:1px solid var(--ui-border); border-radius:var(--ui-card-radius); background:var(--ui-surface); }
.approved-studio #settingsSignedOut p { margin-bottom:var(--ui-space-4); color:var(--ui-secondary); }
.approved-studio #drawerSignIn { display:inline-flex; align-items:center; justify-content:center; min-width:120px; }
.approved-studio #emailGate { background:#18223099; backdrop-filter:blur(4px); }
.approved-studio #emailGate .gen-card { background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:var(--ui-sheet-radius); box-shadow:0 24px 80px #18223029; padding:var(--ui-space-8); }
.approved-studio #authTitle { font:700 28px/1.2 Inter,system-ui,sans-serif; letter-spacing:-.7px; }
.approved-studio #authSub { color:var(--ui-secondary); line-height:1.5; }
.approved-studio #authNoCard { color:var(--ui-secondary); font-size:13px; margin:8px 0 16px; }
.approved-studio #emailGate :is(input[type=email],input[type=password],input[type=text]) { min-height:48px; border-radius:var(--ui-control-radius); border:1px solid var(--ui-border); font-size:16px; }
.approved-studio #emailGate :is(.authbtn,#authBack) { min-height:48px; border-radius:var(--ui-control-radius); font-size:15px; }
.approved-studio #emailGate #pwToggle { width:44px; height:44px; min-width:44px; min-height:44px; }
.approved-studio #emailGate .auth-password input { padding-right:56px; }
.approved-studio #emailGate .authswitch a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:6px 2px; }
.approved-studio #pwSubmit { background:var(--ui-accent); color:var(--ui-white); }
.approved-studio #inspirationBrowser { background:var(--ui-canvas); color:var(--ui-text); border-color:var(--ui-border); }
.approved-studio #inspirationBrowser .inspo-head { background:var(--ui-surface); border-color:var(--ui-border); }
.approved-studio #inspirationBrowser :is(.inspo-close,.inspo-back,.inspo-secondary,.inspo-sort-label select) { border:1px solid var(--ui-border); border-radius:var(--ui-control-radius); background:var(--ui-surface); color:var(--ui-text); min-height:44px; }
.approved-studio #inspirationBrowser .inspo-search input { border-color:var(--ui-border); border-radius:var(--ui-control-radius); color:var(--ui-text); }
.approved-studio #inspirationBrowser :is(.inspo-intro,.inspo-count,.inspo-note) { color:var(--ui-secondary); }
.approved-studio #inspirationBrowser .inspo-card { border-radius:var(--ui-card-radius); box-shadow:none; }
.approved-studio #inspirationBrowser .inspo-card-copy { padding:var(--ui-space-4); gap:var(--ui-space-1); }
.approved-studio #inspirationBrowser .inspo-try { background:var(--ui-accent); border-radius:var(--ui-control-radius); min-height:48px; }
.approved-studio #inspirationBrowser .inspo-toolbar { gap:var(--ui-space-2); align-items:center; }
.approved-studio #inspirationBrowser .inspo-sort-label { flex:1; min-width:0; gap:var(--ui-space-2); }
.approved-studio #inspirationBrowser .inspo-sort-label select { min-width:0; width:100%; font-size:16px; }
.approved-studio #inspirationBrowser .native-room-section>header { min-height:44px; gap:var(--ui-space-3); }
.approved-studio #inspirationBrowser .native-room-section>header button { padding:8px 0 8px 12px; font-size:14px; font-weight:600; }
.approved-studio .native-room-row { gap:var(--ui-space-4); }
.approved-studio .native-tabs { background:var(--ui-surface); border-color:var(--ui-border); }
.approved-studio .native-tabs button { font-weight:600; border-radius:var(--ui-control-radius); color:var(--ui-secondary); }
.approved-studio .native-tabs button[aria-current] { color:var(--ui-accent); background:var(--ui-selected); }
@media (hover:hover) {
  .approved-studio :is(.wiz-go,.native-primary,.reno-continue,#decorPresetContinue,#editGo,#drawerSignIn):not(:disabled):hover { background:var(--ui-blue-700); }
  .approved-studio :is(.studio-save,#wizBack,.settings-header button,.native-account):hover { background:var(--ui-selected); border-color:var(--ui-accent); }
  .approved-studio :is(.studio-look,.native-tool,.inspo-tile):hover { box-shadow:0 6px 20px #1822300a; }
}
@media (max-width:899px) {
  .approved-studio .top .top-in { padding:8px 16px!important; gap:4px 8px; }
  .approved-studio.app-layout .top .brand { min-height:40px; font-size:16px; letter-spacing:-.3px; }
  .approved-studio .top .native-account { width:44px; height:44px; }
  .approved-studio #planPill { font-size:12px; }
  .approved-studio.app-layout .top #planPill { padding:8px 12px; }
  /* A resized desktop session keeps its existing navigation; avoid a five-row header. */
  .approved-studio:not(.app-layout) .top .top-in { grid-template-columns:44px minmax(0,1fr) auto; }
  .approved-studio:not(.app-layout) .top .brand { font-size:15px; }
  .approved-studio:not(.app-layout) .top #signInBtn { padding:10px!important; font-size:13px!important; }
  .approved-studio:not(.app-layout) .top #planPill { grid-column:1/3; justify-self:start; max-width:100%; }
  .approved-studio:not(.app-layout) .top .header-language { grid-column:3; grid-row:2; margin:0; }
  .approved-studio:not(.app-layout) #headerLanguage { width:108px; min-height:44px; font-size:16px; }
  .approved-studio:not(.app-layout) .simple-nav { display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding:8px 16px; scrollbar-width:thin; }
  .approved-studio:not(.app-layout) .simple-nav button { flex:0 0 auto!important; min-height:44px; padding:10px 14px; border-radius:var(--ui-control-radius); white-space:nowrap; }
  html.approved-studio.app-layout #wiz { padding:0 12px!important; }
  .approved-studio #wiz .wiz-head { padding:8px 0; }
  .approved-studio #wiz[data-step=photo] .wiz-head { padding:16px 0 4px; }
  .approved-studio #wiz .wiz-body { padding-top:16px; }
  .approved-studio #wiz .wiz-step { padding:0!important; }
  .approved-studio #wiz .wiz-step h2 { font-size:28px; }
  .approved-studio #wiz .studio-listing { margin-bottom:16px; }
  .approved-studio.app-layout #wizDrop { min-height:160px!important; padding:24px!important; }
  .approved-studio.app-layout #wiz[data-step=photo]:has(#wizPhotoContext:not([hidden])) #wizDrop { min-height:48px!important; padding:12px!important; }
  .approved-studio #wizPhotoContext:not([hidden]) { padding:16px 0 8px; }
  .approved-studio .studio-space-row { grid-template-columns:1fr; gap:12px; }
  .approved-studio .studio-scope { width:100%; }
  .approved-studio #wiz #studioContextSelect { min-height:48px; }
  .approved-studio #wiz .visual-step { padding:0; border:0; }
  .approved-studio #lookCards { gap:8px; }
  .approved-studio :is(.direct-tool-entry-bar,.molding-entry-bar) { padding:16px 0; }
  .approved-studio :is(.direct-tool-entry-bar,.molding-entry-bar) span { order:3; flex-basis:100%; font-size:12px; }
  .approved-studio :is(.direct-tool-entry-bar,.molding-entry-bar) strong { font-size:19px; }
  .approved-studio .native-tabs { padding:8px 16px calc(8px + env(safe-area-inset-bottom)); gap:8px; }
  .approved-studio .native-tabs button { min-height:52px; font-size:11px; gap:4px; padding:5px 4px; }
  .approved-studio.app-layout .mobile-primary-action { width:calc(100% - 40px)!important; min-height:48px!important; border-radius:var(--ui-control-radius)!important; box-shadow:0 0 0 10px var(--ui-surface),0 8px 24px #1822300a; }
  .approved-studio.app-layout .mobile-primary-action:disabled { box-shadow:0 0 0 10px var(--ui-surface),0 8px 24px #1822300a; }
  .approved-studio.app-layout body:has(#wizGo.mobile-primary-action) #designImageCount { background:var(--ui-surface); }
  .approved-studio #inspirationBrowser .inspo-head { padding:calc(16px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 16px max(20px,env(safe-area-inset-left,0px)); }
  .approved-studio.app-layout #inspirationBrowser .inspo-head { padding-top:16px; }
  .approved-studio #inspirationBrowser .inspo-head h2 { font-size:24px; }
  .approved-studio #inspirationBrowser .inspo-content { padding:20px; }
  .approved-studio #inspirationBrowser .inspo-toolbar { display:grid; grid-template-columns:auto minmax(0,1fr); }
  .approved-studio #inspirationBrowser .inspo-toolbar>.inspo-secondary:last-child:not(:first-child) { grid-column:1/-1; justify-self:start; }
  .approved-studio #inspirationBrowser .native-room-section { margin:20px 0 28px; }
  .approved-studio #inspirationBrowser .native-room-section h3 { font-size:20px; letter-spacing:-.3px; }
  .approved-studio .settings-header { padding:calc(12px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 12px max(20px,env(safe-area-inset-left,0px)); }
  .approved-studio .settings-layout { display:block; padding:24px 20px; }
  .approved-studio .settings-nav { display:grid; grid-template-columns:repeat(7,max-content); gap:8px; overflow-x:auto; max-width:100%; padding-bottom:8px; margin-bottom:24px; scrollbar-width:thin; }
  .approved-studio .settings-nav h1 { grid-column:1/-1; font-size:28px; margin-bottom:8px; }
  .approved-studio .settings-nav button { grid-row:2; width:auto; margin:0; padding:10px 14px; font-size:13px; white-space:nowrap; }
  .approved-studio .settings-nav #drawerSignOut { margin:0; border:0; border-radius:var(--ui-control-radius); }
  .approved-studio .settings-content h2 { font-size:24px; }
  .approved-studio .settings-card { padding:20px; }
  .approved-studio #emailGate .gen-card { padding:24px; border-radius:var(--ui-sheet-radius); }
}
@media (max-width:360px) {
  html.approved-studio.app-layout #wiz { padding-inline:12px!important; }
  .approved-studio #inspirationBrowser .inspo-head { padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px)); }
  .approved-studio #inspirationBrowser .inspo-content { padding-inline:16px; }
  .approved-studio #wiz .wiz-step h2 { font-size:26px; }
  .approved-studio :is(.direct-tool-entry-bar,.molding-entry-bar) strong { font-size:17px; }
  .approved-studio .settings-layout { padding-inline:16px; }
}
@media (prefers-reduced-motion:no-preference) {
  /* Keep wizard ancestors untransformed: Create is fixed to the phone viewport. */
  .approved-studio #wiz .wiz-step:not([hidden]) { animation:studio-fade var(--ui-motion-enter) var(--ui-ease); }
  .approved-studio #emailGate.on .gen-card,.approved-studio .settings-content>[data-settings-panel]:not([hidden]) { animation:studio-enter var(--ui-motion-enter) var(--ui-ease); }
  .approved-studio #inspirationBrowser[open] { animation:studio-fade var(--ui-motion-enter) var(--ui-ease); }
  @keyframes studio-enter { from { opacity:0; translate:0 4px; } to { opacity:1; translate:0 0; } }
  @keyframes studio-fade { from { opacity:0; } to { opacity:1; } }
}
@media (prefers-reduced-motion:reduce) {
  .approved-studio :is(button,a,input,select,textarea,summary) { transition:none!important; }
  .approved-studio #wiz .wiz-step,.approved-studio #emailGate .gen-card,.approved-studio #inspirationBrowser,.approved-studio .settings-content>[data-settings-panel] { animation:none!important; scroll-behavior:auto!important; }
}