/* Hazırlıklı Mobile App UX Layer — v2.0.4
   Shared responsive/native-web hardening for mobile Safari, Android WebView,
   PWA standalone mode and future Capacitor shells. */
:root{
  --hz-safe-top:max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px));
  --hz-safe-right:max(env(safe-area-inset-right,0px),var(--safe-area-inset-right,0px));
  --hz-safe-bottom:max(env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px));
  --hz-safe-left:max(env(safe-area-inset-left,0px),var(--safe-area-inset-left,0px));
  --hz-vvh:100dvh;
  --hz-touch-min:44px;
}

html{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(76px + var(--hz-safe-top));
  scroll-padding-bottom:calc(20px + var(--hz-safe-bottom));
}
body{
  width:100%;
  max-width:100%;
  min-height:100vh;
  min-height:var(--hz-vvh);
  overflow-x:clip;
  overscroll-behavior-x:none;
  padding-left:var(--hz-safe-left);
  padding-right:var(--hz-safe-right);
  -webkit-tap-highlight-color:transparent;
}
body.hz-overlay-open{overflow:hidden}

img,svg,video,canvas,iframe{max-width:100%;height:auto}
pre,code,.ai-output,.whitespace-pre-wrap{overflow-wrap:anywhere;word-break:break-word}
pre{white-space:pre-wrap}
main,section,article,aside,header,footer,nav,form,.app,.card,.setting-card{min-width:0;max-width:100%}
.flex>*{min-width:0}
.overflow-x-auto{max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

button,
[role="button"],
summary,
select,
input,
textarea,
a[class*="btn"],
a[class*="button"],
.nav-item,
.sidebar-link,
.filter-btn,
.plan-option,
.refine-btn{
  touch-action:manipulation;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--accent-strong)!important;
  outline-offset:2px!important;
}

/* Safe-area aware app chrome. */
.topbar,
.top-shell,
body>header.sticky,
body>header[class*="sticky"]{
  padding-top:var(--hz-safe-top);
}
.sidebar,
#mobileSidebar,
#desktopSidebar{
  padding-top:var(--hz-safe-top);
  padding-bottom:var(--hz-safe-bottom);
}
.toast,
#toast{
  bottom:calc(14px + var(--hz-safe-bottom))!important;
  max-width:calc(100vw - var(--hz-safe-left) - var(--hz-safe-right) - 28px)!important;
}
.modal,
.modal-backdrop,
#commandModal,
#mobileSidebarBackdrop,
.mobile-overlay{
  padding-left:max(0px,var(--hz-safe-left));
  padding-right:max(0px,var(--hz-safe-right));
}
.modal-card,
[role="dialog"]{
  max-width:calc(100vw - var(--hz-safe-left) - var(--hz-safe-right) - 24px);
  max-height:calc(var(--hz-vvh) - var(--hz-safe-top) - var(--hz-safe-bottom) - 24px);
}
.modal-scroll,
.sidebar-category-scroll,
#mobileSidebar{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* i18n host must never become inaccessible on a phone. */
.hz-language-select{
  min-width:64px;
  min-height:var(--hz-touch-min)!important;
}
.hz-mobile-language-dock{
  position:fixed;
  z-index:360;
  right:calc(12px + var(--hz-safe-right));
  bottom:calc(12px + var(--hz-safe-bottom));
  padding:4px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(16px);
}

@media (max-width:900px){
  :root{--hz-vvh:100dvh}
  html{scroll-padding-top:calc(68px + var(--hz-safe-top))}

  /* Fix the v2.0.0 dashboard/tool bug: Tailwind hid the only switcher. */
  [data-language-switcher].hidden{display:block!important}
  .hz-language-select{min-width:62px;min-height:44px!important;padding:8px 27px 8px 10px!important}

  /* Prevent iOS form-focus zoom while keeping pinch zoom available. */
  input,select,textarea{font-size:16px!important}

  button,
  [role="button"],
  summary,
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  a[class*="btn"],
  a[class*="button"],
  .nav-item,
  .sidebar-link,
  .filter-btn,
  .plan-option,
  .refine-btn{
    min-height:var(--hz-touch-min);
  }

  /* Roomier, app-like mobile shells without breaking desktop layouts. */
  main[class*="px-5"],header [class*="px-5"]{padding-left:16px!important;padding-right:16px!important}
  .card,.setting-card{max-width:100%}
  .toast,#toast{right:14px!important;left:14px!important;width:auto!important}

  /* Dashboard: keep language persistent and make the profile control finger-safe. */
  body.hz-page-dashboard .topbar>div{gap:8px!important;padding-left:12px!important;padding-right:12px!important}
  body.hz-page-dashboard .topbar>div>div{gap:8px!important}
  body.hz-page-dashboard #profileBtn{width:48px;min-width:48px;min-height:48px;padding:2px!important;justify-content:center}
  body.hz-page-dashboard .favorite-btn,
  body.hz-page-dashboard .filter-btn{min-height:44px}
  body.hz-page-dashboard .sidebar{width:min(88vw,340px)}

  /* Tool header: the dashboard remains reachable from the mobile drawer,
     so very small phones prioritize menu + brand + language + favorite. */
  body.hz-page-tool header>div{gap:8px!important;padding-left:12px!important;padding-right:12px!important}
  body.hz-page-tool header>div>div{gap:8px!important}
  body.hz-page-tool #mobileSidebar{width:min(88vw,330px)!important;max-width:330px!important}

  /* Settings navigation becomes a horizontal, swipeable app tab rail instead of a tall side column. */
  body.hz-page-settings .settings-menu nav{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto;
    padding-bottom:4px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  body.hz-page-settings .settings-menu nav .nav-item{
    flex:0 0 auto;
    width:auto!important;
    white-space:nowrap;
    scroll-snap-align:start;
  }

  /* Native bottom-sheet behavior for modal-heavy screens. */
  .modal{align-items:flex-end!important;padding:0!important;padding-top:calc(12px + var(--hz-safe-top))!important}
  .modal-card{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(var(--hz-vvh) - var(--hz-safe-top) - 8px)!important;
    border-radius:22px 22px 0 0!important;
    border-bottom:0!important;
    padding-bottom:var(--hz-safe-bottom);
  }
  .modal-scroll{min-height:0;overflow-y:auto!important}
}

@media (max-width:480px){
  /* Compact return control prevents header overflow on 320–390 px devices. */
  body:not(.hz-page-dashboard):not(.hz-page-tool) header a[href="dashboard.html"].secondary-btn,
  body:not(.hz-page-dashboard):not(.hz-page-tool) header a[href="dashboard.html"].btn-secondary{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    padding:0!important;
    overflow:hidden!important;
    color:transparent!important;
    position:relative;
    white-space:nowrap;
  }
  body:not(.hz-page-dashboard):not(.hz-page-tool) header a[href="dashboard.html"].secondary-btn::after,
  body:not(.hz-page-dashboard):not(.hz-page-tool) header a[href="dashboard.html"].btn-secondary::after{
    content:"←";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--text-primary);
    font-size:20px;
  }
  body.hz-page-tool header a[href="dashboard.html"]{display:none!important}
  body.hz-page-tool header a.xl\\:hidden{font-size:17px!important}
  body.hz-page-premium .price-card{min-height:0!important;padding:22px!important}
  body.hz-page-workspace .topbar{height:calc(68px + var(--hz-safe-top))!important;min-height:calc(68px + var(--hz-safe-top))!important}
  body.hz-page-workspace .mobile-tabs{top:calc(68px + var(--hz-safe-top))!important}
  body.hz-page-workspace .editor-head{align-items:flex-start!important;flex-wrap:wrap}
  body.hz-page-workspace .title-input{flex-basis:100%;font-size:18px!important}
}

@media (pointer:coarse){
  :root{--hz-touch-min:48px}
  button,
  [role="button"],
  summary,
  select,
  a[class*="btn"],
  a[class*="button"],
  .nav-item,
  .sidebar-link,
  .filter-btn,
  .plan-option,
  .refine-btn{min-height:48px!important}
  .hz-language-select{min-height:48px!important}
}

@media (display-mode:standalone){
  a,button{-webkit-touch-callout:none}
}

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

/* ============================================================
   Hazırlıklı Mobile Native Layout — v2.0.4
   Real phone-width layout hardening (320 / 375 / 400 / 430 px).
   This layer intentionally fixes intrinsic grid sizing, action clusters,
   tool controls, compact app chrome and mobile-only overflow sources.
============================================================ */

/* Grid items can otherwise keep their intrinsic min-content width and push
   an entire mobile page wider than its viewport (notably tool controls). */
.grid > *,
[class*="grid-cols"] > *{
  min-width:0;
}

@media (max-width:900px){
  body{
    min-width:0;
    max-width:100%;
    min-height:100svh;
    min-height:var(--hz-vvh);
  }

  header,main,footer,nav,section,article,aside,form,
  .app,.card,.setting-card,.plan-control-card,
  #resultSection,#refinePanel{
    min-width:0;
    max-width:100%;
  }

  button,[role="button"],select,input,textarea,
  a[class*="btn"],a[class*="button"],
  .plan-option,.refine-btn{
    max-width:100%;
  }

  /* Keep long translated labels from becoming intrinsic-width overflow. */
  button,a,.plan-option,.refine-btn,.nav-item,.sidebar-link{
    overflow-wrap:anywhere;
  }

  /* Native-like app chrome remains usable with notches and narrow phones. */
  .topbar,.top-shell,body>header.sticky,body>header[class*="sticky"]{
    min-width:0;
  }

  /* All scrollable rows scroll inside themselves, never the document root. */
  .table-wrap,.overflow-x-auto,.settings-menu nav{
    max-width:100%;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }

  /* Workspace uses real dynamic viewport height when the software keyboard opens. */
  body.hz-page-workspace .app,
  body.hz-page-workspace .pane.mobile-active,
  body.hz-page-workspace .editor.mobile-active,
  body.hz-page-workspace .welcome{
    min-height:calc(var(--hz-vvh) - 122px - var(--hz-safe-top));
  }

  /* Dashboard header: language stays visible without making 320 px chrome overflow. */
  body.hz-page-dashboard .topbar{
    min-height:calc(68px + var(--hz-safe-top))!important;
  }
  body.hz-page-dashboard .topbar>div{
    min-width:0;
  }
  body.hz-page-dashboard [data-language-switcher]{
    flex:0 0 auto;
  }

  /* Tool page: true single-column app shell. */
  body.hz-page-tool .xl\:ml-80{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.hz-page-tool header>div{
    width:100%!important;
    max-width:100%!important;
    min-height:calc(68px + var(--hz-safe-top));
    height:auto!important;
    padding-top:var(--hz-safe-top)!important;
  }
  body.hz-page-tool header>div>div:first-child,
  body.hz-page-tool header>div>div:last-child{
    min-width:0;
  }
  body.hz-page-tool main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body.hz-page-tool main>.grid,
  body.hz-page-tool main>.grid>div,
  body.hz-page-tool main>.grid>aside{
    min-width:0!important;
    max-width:100%!important;
    width:100%!important;
  }
  body.hz-page-tool .plan-control-card{
    width:100%;
    min-width:0;
    overflow:hidden;
  }

  /* Three variations are a segmented control, never a horizontally clipped row. */
  body.hz-page-tool #variantButtons{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px!important;
    width:100%;
    min-width:0;
  }
  body.hz-page-tool #variantButtons .plan-option{
    width:100%;
    min-width:0!important;
    min-height:48px!important;
    padding:8px 5px!important;
    justify-content:center;
    text-align:center;
    white-space:normal;
    line-height:1.2;
    font-size:12px;
  }

  /* Standard / Pro occupy the available row evenly. */
  body.hz-page-tool #standardModeButton,
  body.hz-page-tool #proModeButton{
    flex:1 1 0;
    min-width:0!important;
    justify-content:center;
    white-space:normal;
    text-align:center;
  }

  /* Result actions use a deterministic 2-column touch grid. */
  body.hz-page-tool #resultActions{
    width:100%;
    min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px!important;
  }
  body.hz-page-tool #resultActions:not(.hidden){
    display:grid!important;
  }
  body.hz-page-tool #resultActions>button{
    width:100%;
    min-width:0!important;
    min-height:48px!important;
    padding:10px 8px!important;
    white-space:normal;
    line-height:1.25;
    text-align:center;
  }

  /* Refine actions wrap as real 2-column app buttons instead of clipping. */
  body.hz-page-tool #refinePanel .refine-btn{
    flex:1 1 calc(50% - 4px);
    min-width:0!important;
    min-height:48px!important;
    padding:9px 7px!important;
    white-space:normal;
    line-height:1.2;
    text-align:center;
  }

  body.hz-page-tool #exampleList>button{
    min-width:0!important;
    max-width:100%;
    white-space:normal;
    text-align:left;
    line-height:1.35;
  }

  body.hz-page-tool .ai-output,
  body.hz-page-tool #result,
  body.hz-page-tool #result *{
    max-width:100%;
  }
  body.hz-page-tool .ai-output{
    overflow-wrap:anywhere;
    word-break:normal;
  }
  body.hz-page-tool .ai-output table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.hz-page-tool .ai-output a{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Modal cards are bottom sheets on phones and their content owns its scroll. */
  body.hz-page-tool .modal-backdrop,
  body.hz-page-tool #commandModal{
    max-width:100vw;
    overflow:hidden;
  }
  body.hz-page-tool .modal-backdrop>div,
  body.hz-page-tool #commandModal>div{
    min-width:0;
    max-width:100%;
  }

  /* Tables are intentionally scrollable locally, never root-level overflow. */
  body.hz-page-admin .table-wrap,
  body.hz-page-premium .overflow-x-auto{
    width:100%;
    max-width:100%;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  /* Settings tabs and card contents stay within the app viewport. */
  body.hz-page-settings .settings-layout,
  body.hz-page-settings .setting-card,
  body.hz-page-settings .setting-body,
  body.hz-page-settings .setting-header{
    min-width:0;
    max-width:100%;
  }

  /* Authentication/onboarding inputs remain comfortable above the keyboard. */
  body.hz-page-login form,
  body.hz-page-signup form,
  body.hz-page-forgot-password form,
  body.hz-page-reset-password form,
  body.hz-page-onboarding form{
    width:100%;
    min-width:0;
    max-width:100%;
  }
}

@media (max-width:640px){
  /* Phone spacing: save horizontal pixels for content, not desktop gutters. */
  body.hz-page-tool main{
    padding:18px 14px calc(28px + var(--hz-safe-bottom))!important;
  }
  body.hz-page-tool main>section,
  body.hz-page-tool main>.grid>div>section{
    border-radius:20px!important;
    padding:16px!important;
  }
  body.hz-page-tool main>.grid{
    gap:18px!important;
  }
  body.hz-page-tool .plan-control-card{
    padding:12px!important;
    border-radius:16px!important;
  }
  body.hz-page-tool #resultSection{
    margin-top:18px!important;
  }
  body.hz-page-tool #refinePanel{
    padding:12px!important;
    border-radius:16px!important;
  }
  body.hz-page-tool #resultSection>div:first-child{
    margin-bottom:18px!important;
  }
  body.hz-page-tool #toolInput{
    min-height:190px;
    height:190px!important;
    padding:16px 16px 42px!important;
  }
  body.hz-page-tool #characterCounter{
    right:14px!important;
    bottom:12px!important;
  }

  /* Tool hero behaves like an app title bar/card rather than a desktop hero. */
  body.hz-page-tool main>section:first-of-type>div.relative{
    gap:18px!important;
  }
  body.hz-page-tool main>section:first-of-type>div.relative>div:first-child{
    gap:12px!important;
    min-width:0;
  }
  body.hz-page-tool #toolIcon{
    width:52px!important;
    height:52px!important;
    border-radius:15px!important;
    font-size:24px!important;
  }
  body.hz-page-tool #toolName{
    font-size:25px!important;
    line-height:1.12!important;
    overflow-wrap:anywhere;
  }
  body.hz-page-tool #toolDescription{
    font-size:14px!important;
    line-height:1.6!important;
  }
  body.hz-page-tool main>section:first-of-type>div.relative>div:last-child{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
  body.hz-page-tool main>section:first-of-type>div.relative>div:last-child>button{
    width:100%;
    min-width:0;
    min-height:48px;
    padding:10px 8px!important;
  }

  body.hz-page-tool #generateButton,
  body.hz-page-tool #generateButton + button{
    width:100%;
    min-height:52px!important;
  }

  /* Workspace mobile toolbar doesn't sacrifice editor width. */
  body.hz-page-workspace .topbar{
    gap:8px!important;
    padding-left:max(10px,var(--hz-safe-left))!important;
    padding-right:max(10px,var(--hz-safe-right))!important;
  }
  body.hz-page-workspace .top-actions{
    gap:6px!important;
    min-width:0;
  }
  body.hz-page-workspace .language-slot{
    min-width:64px!important;
  }
  body.hz-page-workspace .mobile-tabs{
    padding-left:max(8px,var(--hz-safe-left))!important;
    padding-right:max(8px,var(--hz-safe-right))!important;
  }
  body.hz-page-workspace .mobile-tabs button{
    min-width:0;
    min-height:48px!important;
    padding:7px 4px;
    line-height:1.15;
  }

  /* Forms and account cards use compact but finger-safe phone spacing. */
  body.hz-page-login main,
  body.hz-page-signup main,
  body.hz-page-forgot-password main,
  body.hz-page-reset-password main,
  body.hz-page-onboarding main{
    max-width:100%;
  }
}

@media (max-width:430px){
  /* Avoid horizontal page chrome on common Android/iPhone widths. */
  .shell{
    padding-left:max(14px,var(--hz-safe-left))!important;
    padding-right:max(14px,var(--hz-safe-right))!important;
  }
  body.hz-page-dashboard main,
  body.hz-page-settings main,
  body.hz-page-history main,
  body.hz-page-premium main,
  body.hz-page-admin main{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  body.hz-page-dashboard .topbar>div{
    padding-left:10px!important;
    padding-right:10px!important;
    gap:6px!important;
  }
  body.hz-page-dashboard .topbar>div>div{
    gap:6px!important;
  }
  body.hz-page-dashboard #menuBtn{
    min-width:46px!important;
    width:46px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body.hz-page-dashboard #profileBtn{
    width:46px!important;
    min-width:46px!important;
    min-height:46px!important;
  }
  body.hz-page-dashboard .hz-language-select{
    min-width:60px!important;
    width:60px;
    padding-left:8px!important;
    padding-right:22px!important;
  }

  body.hz-page-tool header>div{
    padding-left:max(10px,var(--hz-safe-left))!important;
    padding-right:max(10px,var(--hz-safe-right))!important;
  }
  body.hz-page-tool header button{
    flex:0 0 auto;
  }
  body.hz-page-tool .hz-language-select{
    min-width:62px!important;
    width:62px;
  }

  body.hz-page-tool #resultActions>button,
  body.hz-page-tool #refinePanel .refine-btn{
    font-size:12px!important;
  }

  /* Header action clusters on secondary screens wrap within the header itself. */
  body.hz-page-brand-profiles .top-shell .shell,
  body.hz-page-billing .top-shell .shell{
    gap:8px!important;
  }
  body.hz-page-brand-profiles .top-shell .shell>a:first-child,
  body.hz-page-billing .top-shell .shell>a:first-child{
    min-width:0;
  }
}

@media (max-width:360px){
  /* 320/360 px phones: remove nonessential dashboard status copy, retain menu/language/profile. */
  body.hz-page-dashboard #menuBtn + div{
    display:none!important;
  }

  body.hz-page-tool main{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body.hz-page-tool main>section,
  body.hz-page-tool main>.grid>div>section{
    padding:13px!important;
    border-radius:18px!important;
  }
  body.hz-page-tool .plan-control-card,
  body.hz-page-tool #refinePanel{
    padding:10px!important;
  }
  body.hz-page-tool #variantButtons{
    gap:6px!important;
  }
  body.hz-page-tool #variantButtons .plan-option{
    padding:7px 3px!important;
    font-size:11px!important;
  }
  body.hz-page-tool #resultActions,
  body.hz-page-tool #refinePanel>div>div:last-child{
    gap:6px!important;
  }

  body.hz-page-workspace .brand small{
    display:none;
  }
  body.hz-page-workspace .brand{
    gap:8px!important;
  }
}

/* Critical tool controls do not depend on the runtime body marker. */
@media (max-width:900px){
  #variantButtons{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px!important;
    width:100%;
    min-width:0;
  }
  #variantButtons .plan-option{
    width:100%;
    min-width:0!important;
    min-height:48px!important;
    padding:8px 5px!important;
    justify-content:center;
    text-align:center;
    white-space:normal;
    line-height:1.2;
    font-size:12px;
  }
  #standardModeButton,#proModeButton{
    flex:1 1 0;
    min-width:0!important;
    justify-content:center;
    white-space:normal;
    text-align:center;
  }
  #resultActions{
    width:100%;
    min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px!important;
  }
  #resultActions:not(.hidden){display:grid!important}
  #resultActions>button{
    width:100%;
    min-width:0!important;
    min-height:48px!important;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  #refinePanel .refine-btn{
    flex:1 1 calc(50% - 4px);
    min-width:0!important;
    min-height:48px!important;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

/* ============================================================
   v2.0.4 production mobile language + touch hardening
   Replaces narrow native <select> language controls with a stable
   two-button segmented control so locale labels can never collapse
   to a single glyph on Chrome mobile emulation / WebView.
============================================================ */
.hz-language-label{display:block;min-width:0}
.hz-language-toggle{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:104px;
  min-width:104px;
  padding:3px;
  gap:2px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
.hz-language-toggle>button{
  appearance:none;
  -webkit-appearance:none;
  display:grid;
  place-items:center;
  width:100%;
  min-width:0!important;
  min-height:44px!important;
  padding:0 6px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--text-secondary);
  font:800 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  letter-spacing:.02em;
  white-space:nowrap!important;
  overflow:visible!important;
}
.hz-language-toggle>button.is-active{
  background:var(--surface);
  color:var(--accent-strong);
  box-shadow:var(--shadow-soft);
}

@media (max-width:430px){
  body.hz-page-dashboard .hz-language-toggle,
  body.hz-page-tool .hz-language-toggle{
    width:104px;
    min-width:104px;
  }
  body.hz-page-dashboard .topbar>div,
  body.hz-page-tool header>div{
    overflow:visible!important;
  }
  body.hz-page-dashboard #menuBtn + div{
    min-width:0!important;
  }
}

@media (max-width:360px){
  body.hz-page-dashboard .hz-language-toggle,
  body.hz-page-tool .hz-language-toggle{
    width:100px;
    min-width:100px;
  }
  .hz-language-toggle>button{
    min-height:44px!important;
    font-size:11px!important;
    padding:0 4px!important;
  }
}


/* ============================================================
   v2.0.4 final 320px chrome contract
============================================================ */
@media (max-width:360px){
  /* Secondary/account headers: preserve H mark + language + back action without overflow. */
  body:not(.hz-page-dashboard):not(.hz-page-tool):not(.hz-page-index) header>div,
  body:not(.hz-page-dashboard):not(.hz-page-tool):not(.hz-page-index) .top-shell>.shell{
    padding-left:max(10px,var(--hz-safe-left))!important;
    padding-right:max(10px,var(--hz-safe-right))!important;
    gap:6px!important;
  }
  body:not(.hz-page-dashboard):not(.hz-page-tool):not(.hz-page-index) header a[href="dashboard.html"]{
    min-width:0!important;
    gap:8px!important;
  }
  body:not(.hz-page-dashboard):not(.hz-page-tool):not(.hz-page-index) header a[href="dashboard.html"]>div:first-child{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
  }
  body:not(.hz-page-dashboard):not(.hz-page-tool):not(.hz-page-index) header a[href="dashboard.html"]>div:last-child .text-\[10px\]{
    display:none!important;
  }
  body:not(.hz-page-dashboard):not(.hz-page-tool):not(.hz-page-index) header a[href="dashboard.html"]>div:last-child .text-xl{
    font-size:18px!important;
    line-height:1.1!important;
  }

  /* Landing header: 320px gets compact branding while TR/EN + login remain first-class targets. */
  body.hz-page-index .top-shell>.shell{
    padding-left:max(10px,var(--hz-safe-left))!important;
    padding-right:max(10px,var(--hz-safe-right))!important;
    gap:6px!important;
  }
  body.hz-page-index .top-shell a[aria-label="Hazırlıklı ana sayfa"]{gap:8px!important;min-width:0!important}
  body.hz-page-index .top-shell a[aria-label="Hazırlıklı ana sayfa"]>div:first-child{width:40px!important;height:40px!important;min-width:40px!important}
  body.hz-page-index .top-shell .logo-subtitle{display:none!important}
  body.hz-page-index .top-shell a[aria-label="Hazırlıklı ana sayfa"] .text-xl{font-size:18px!important}
  body.hz-page-index .top-shell .btn-secondary{padding-left:10px!important;padding-right:10px!important;min-width:48px!important}
}

/* Language segmented control is itself a touch surface contract. */
.hz-language-toggle>button{min-width:44px!important;min-height:44px!important}
@media (pointer:coarse){.hz-language-toggle>button{min-width:44px!important;min-height:48px!important}}


/* ============================================================
   v2.0.5 Native App Shell — mobile only (<768px)
   Desktop/tablet md+ remains untouched.
============================================================ */
:root{
  --hz-app-tabbar-h:72px;
  --hz-app-shell-header-h:72px;
}

.hz-app-tabbar{display:none}

@media (max-width:767px){
  body.hz-native-shell{
    height:var(--hz-vvh,100dvh)!important;
    min-height:0!important;
    overflow:hidden!important;
    overscroll-behavior:none;
    padding-bottom:0!important;
    background:var(--surface);
  }
  body.hz-native-shell>.grid-bg{position:fixed!important;inset:0!important;pointer-events:none}

  body.hz-native-shell .hz-app-shell-header{
    position:relative!important;
    top:auto!important;
    z-index:70!important;
    min-height:var(--hz-app-shell-header-h)!important;
    height:var(--hz-app-shell-header-h)!important;
    padding-top:max(0px,var(--hz-safe-top))!important;
    flex:0 0 auto;
  }

  body.hz-native-shell .hz-app-shell-scroll{
    height:calc(var(--hz-vvh,100dvh) - var(--hz-app-shell-header-h) - var(--hz-app-tabbar-h) - max(0px,var(--hz-safe-bottom)))!important;
    max-height:calc(var(--hz-vvh,100dvh) - var(--hz-app-shell-header-h) - var(--hz-app-tabbar-h) - max(0px,var(--hz-safe-bottom)))!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:24px!important;
  }
  body.hz-native-shell .hz-app-shell-scroll::-webkit-scrollbar{display:none}

  .hz-app-tabbar{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:100;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    height:calc(var(--hz-app-tabbar-h) + max(0px,var(--hz-safe-bottom)));
    padding:8px max(8px,var(--hz-safe-right)) max(8px,var(--hz-safe-bottom)) max(8px,var(--hz-safe-left));
    gap:4px;
    border-top:1px solid var(--border);
    background:var(--surface);
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }
  .hz-app-tab{
    min-width:0!important;
    min-height:56px!important;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border-radius:14px;
    color:var(--text-secondary);
    text-decoration:none!important;
    font:800 10px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
    letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .hz-app-tab-icon{font-size:20px;line-height:1;color:inherit}
  .hz-app-tab-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hz-app-tab.is-active{
    color:var(--accent-strong);
    background:var(--surface);
    box-shadow:var(--shadow-soft);
  }

  /* Native shell replaces legacy mobile side drawers with the bottom tab bar. */
  body.hz-native-shell #sidebar,
  body.hz-native-shell #mobileSidebar{display:none!important;transform:none!important}
  body.hz-native-shell #menuBtn,
  body.hz-native-shell button[onclick="openMobileSidebar()"]{display:none!important}

  /* Dashboard: Home and AI Tools become real mobile tabs instead of one endless page. */
  body.hz-native-shell.hz-page-dashboard>.app{
    height:var(--hz-vvh,100dvh)!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.hz-native-shell.hz-page-dashboard main#home{width:100%;padding:18px 14px 24px!important}
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] main#home>#allTools,
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="tools"] main#home>section:not(#allTools),
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="tools"] main#home>footer{display:none!important}
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] main#home>#favorites,
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] main#home>#recents,
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] main#home>section:nth-last-of-type(1),
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] main#home>footer{display:none!important}
  body.hz-native-shell.hz-page-dashboard main#home>section:first-of-type{margin-top:0!important}
  body.hz-native-shell.hz-page-dashboard main#home>section:nth-of-type(2){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:18px!important}
  body.hz-native-shell.hz-page-dashboard main#home>section:nth-of-type(2)>.card{padding:14px!important;min-height:104px}
  body.hz-native-shell.hz-page-dashboard main#home>section:nth-of-type(4){margin-top:22px!important}
  body.hz-native-shell.hz-page-dashboard #featuredTools{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.hz-native-shell.hz-page-dashboard #allTools{margin-top:0!important;padding-top:2px}
  body.hz-native-shell.hz-page-dashboard #toolGrid{grid-template-columns:1fr!important;gap:12px!important;margin-top:16px!important}
  body.hz-native-shell.hz-page-dashboard .topbar .w-full{padding-left:14px!important;padding-right:14px!important}

  /* Tool: one contained work surface; no drawer/back duplication in native shell. */
  body.hz-native-shell.hz-page-tool>div.xl\:ml-80{
    height:var(--hz-vvh,100dvh)!important;
    min-height:0!important;
    margin-left:0!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.hz-native-shell.hz-page-tool header a[href="dashboard.html"]:last-child{display:none!important}
  body.hz-native-shell.hz-page-tool main{width:100%;padding:14px 12px 24px!important}
  body.hz-native-shell.hz-page-tool main>section{margin-bottom:14px!important}

  /* History is a compact list tab; its intro collapses to essentials. */
  body.hz-native-shell.hz-page-history main{padding:18px 14px 24px!important}
  body.hz-native-shell.hz-page-history header a.secondary-btn{display:none!important}
  body.hz-native-shell.hz-page-history main>section:first-child p{display:none!important}
  body.hz-native-shell.hz-page-history main>section:first-child{gap:12px!important}
  body.hz-native-shell.hz-page-history main>section:first-child h1{font-size:28px!important;margin-top:8px!important}
  body.hz-native-shell.hz-page-history main>section.card{margin-top:16px!important;padding:14px!important}
  body.hz-native-shell.hz-page-history #historyGrid{grid-template-columns:1fr!important;gap:12px!important;margin-top:14px!important}

  /* Settings: horizontal section rail + one visible panel, matching native settings apps. */
  body.hz-native-shell.hz-page-settings>.app{
    height:var(--hz-vvh,100dvh)!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.hz-native-shell.hz-page-settings header a.secondary-btn{display:none!important}
  body.hz-native-shell.hz-page-settings main{padding:14px 12px 24px!important}
  body.hz-native-shell.hz-page-settings main>section:first-child{display:none!important}
  body.hz-native-shell.hz-page-settings .settings-layout{display:block!important;margin-top:0!important}
  body.hz-native-shell.hz-page-settings .settings-menu{
    position:sticky!important;top:0!important;z-index:20!important;
    margin:0 0 12px!important;padding:6px!important;border-radius:16px!important;
    overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;
    background:var(--surface);
  }
  body.hz-native-shell.hz-page-settings .settings-menu::-webkit-scrollbar{display:none}
  body.hz-native-shell.hz-page-settings .settings-menu>div:first-child,
  body.hz-native-shell.hz-page-settings .settings-menu>div:last-child{display:none!important}
  body.hz-native-shell.hz-page-settings .settings-menu nav{display:flex!important;gap:6px!important;margin:0!important;min-width:max-content}
  body.hz-native-shell.hz-page-settings .settings-menu .nav-item{
    width:auto!important;min-width:max-content!important;min-height:44px!important;padding:10px 12px!important;border-radius:12px!important
  }
  body.hz-native-shell.hz-page-settings .setting-card{display:none!important;margin:0!important;border-radius:18px!important}
  body.hz-native-shell.hz-page-settings .setting-card.hz-settings-active{display:block!important}
  body.hz-native-shell.hz-page-settings .setting-header,
  body.hz-native-shell.hz-page-settings .setting-body{padding:16px!important}

  /* Workspace keeps its own project/document/editor tabs inside the global shell. */
  body.hz-native-shell.hz-page-workspace{display:flex!important;flex-direction:column!important}
  body.hz-native-shell.hz-page-workspace .topbar .top-actions>a{display:none!important}
  body.hz-native-shell.hz-page-workspace .mobile-tabs{flex:0 0 auto;top:auto!important}
  body.hz-native-shell.hz-page-workspace main.app{
    height:calc(var(--hz-vvh,100dvh) - var(--hz-app-shell-header-h) - var(--hz-app-tabbar-h) - 54px - max(0px,var(--hz-safe-bottom)))!important;
    max-height:none!important;
    overflow:hidden!important;
    padding-bottom:0!important;
  }

  /* Safe content edge above the tabbar for modals/toasts. */
  body.hz-native-shell .toast{bottom:calc(var(--hz-app-tabbar-h) + max(12px,var(--hz-safe-bottom)))!important}
}

@media (max-width:360px){
  :root{--hz-app-tabbar-h:68px;--hz-app-shell-header-h:68px}
  .hz-app-tabbar{padding-left:max(4px,var(--hz-safe-left));padding-right:max(4px,var(--hz-safe-right));gap:2px}
  .hz-app-tab{min-height:52px!important;font-size:9px!important;border-radius:12px}
  .hz-app-tab-icon{font-size:18px}
  body.hz-native-shell.hz-page-dashboard #featuredTools{grid-template-columns:1fr!important}
}

@media (min-width:768px){
  body.hz-native-shell{height:auto!important;overflow:auto!important}
  .hz-app-tabbar{display:none!important}
}

/* ============================================================
   v2.0.6 Native UX Hotfix — deterministic mobile app viewport
============================================================ */
@media (max-width:767px){
  :root{
    --hz-native-header-h:64px;
    --hz-native-tabbar-h:68px;
  }
  html,body{height:100%;max-height:100%;overflow:hidden!important}
  body.hz-native-shell{
    display:grid!important;
    grid-template-rows:calc(var(--hz-native-header-h) + var(--hz-safe-top)) minmax(0,1fr) calc(var(--hz-native-tabbar-h) + var(--hz-safe-bottom));
    grid-template-columns:minmax(0,1fr);
    width:100%!important;
    height:var(--hz-vvh,100dvh)!important;
    max-height:var(--hz-vvh,100dvh)!important;
    min-height:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.hz-native-shell > .grid-bg{position:fixed!important;inset:0!important;z-index:0!important}

  .hz-native-header{
    grid-row:1;grid-column:1;position:relative;z-index:120;
    min-width:0;width:100%;height:calc(var(--hz-native-header-h) + var(--hz-safe-top));
    padding:var(--hz-safe-top) max(12px,var(--hz-safe-right)) 0 max(12px,var(--hz-safe-left));
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    border-bottom:1px solid var(--border);
    background:var(--surface);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  }
  .hz-native-brand{min-width:0;display:flex;align-items:center;gap:10px;color:var(--text-primary);text-decoration:none!important}
  .hz-native-brand-mark{width:42px;height:42px;min-width:42px;display:grid;place-items:center;border-radius:13px;background:var(--accent);color:var(--text-primary);font:950 15px/1 system-ui}
  .hz-native-page-title{min-width:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 15px/1.15 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.01em}
  .hz-native-header-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-width:0}
  .hz-native-language{display:flex;align-items:center;min-width:0}
  .hz-native-language .hz-language-toggle{min-width:96px!important;max-width:108px!important}
  .hz-native-language .hz-language-toggle>button{min-width:44px!important;padding-inline:10px!important}

  /* Original web headers are replaced by exactly one native header on phones. */
  body.hz-native-shell.hz-page-dashboard .topbar,
  body.hz-native-shell.hz-page-tool .hz-native-content-root > header,
  body.hz-native-shell.hz-page-history > header:not(.hz-native-header),
  body.hz-native-shell.hz-page-settings .app > header,
  body.hz-native-shell.hz-page-workspace > .topbar{display:none!important}

  body.hz-native-shell > .hz-native-content-root{
    grid-row:2;grid-column:1;position:relative!important;z-index:10!important;
    width:100%!important;height:100%!important;max-height:100%!important;min-height:0!important;
    margin:0!important;overflow:hidden!important;
  }
  body.hz-native-shell.hz-page-dashboard > .hz-native-content-root,
  body.hz-native-shell.hz-page-settings > .hz-native-content-root,
  body.hz-native-shell.hz-page-tool > .hz-native-content-root{
    display:flex!important;flex-direction:column!important;
  }
  body.hz-native-shell .hz-app-shell-scroll{
    flex:1 1 auto!important;
    width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    padding-bottom:18px!important;
    overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  }
  body.hz-native-shell.hz-page-history > main.hz-native-content-root{
    overflow-x:hidden!important;overflow-y:auto!important;padding-bottom:18px!important;
  }

  .hz-app-tabbar{
    grid-row:3;grid-column:1;position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
    z-index:120!important;width:100%!important;height:calc(var(--hz-native-tabbar-h) + var(--hz-safe-bottom))!important;
    padding:6px max(6px,var(--hz-safe-right)) max(6px,var(--hz-safe-bottom)) max(6px,var(--hz-safe-left))!important;
    background:var(--surface);
  }
  .hz-app-tab{min-height:56px!important}

  /* Dashboard root must not reserve the now-hidden web header. */
  body.hz-native-shell.hz-page-dashboard>.app,
  body.hz-native-shell.hz-page-settings>.app,
  body.hz-native-shell.hz-page-tool>div.xl\:ml-80{height:100%!important;max-height:100%!important;min-height:0!important}

  /* Settings: no clipped horizontal rail. Five sections become a stable 2-col native control grid. */
  body.hz-native-shell.hz-page-settings .settings-menu{
    position:relative!important;top:auto!important;z-index:20!important;
    width:100%!important;max-width:100%!important;margin:0 0 12px!important;padding:6px!important;
    overflow:hidden!important;border-radius:16px!important;background:var(--surface);
  }
  body.hz-native-shell.hz-page-settings .settings-menu nav{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;width:100%!important;min-width:0!important;margin:0!important;overflow:visible!important;
  }
  body.hz-native-shell.hz-page-settings .settings-menu .nav-item{
    width:100%!important;min-width:0!important;max-width:100%!important;min-height:44px!important;
    padding:9px 8px!important;justify-content:flex-start!important;white-space:normal!important;line-height:1.15!important;
    overflow:hidden!important;text-overflow:ellipsis!important;
  }
  body.hz-native-shell.hz-page-settings .settings-menu .nav-item:last-child:nth-child(odd){grid-column:1/-1}
  body.hz-native-shell.hz-page-settings .settings-layout{height:auto!important;min-height:0!important}
  body.hz-native-shell.hz-page-settings .settings-layout>div{min-height:0!important}
  body.hz-native-shell.hz-page-settings .setting-card{min-height:0!important;height:auto!important}
  body.hz-native-shell.hz-page-settings .setting-header,
  body.hz-native-shell.hz-page-settings .setting-body{padding:14px!important}

  /* Workspace owns row 2; its local tabs stay inside that row, never the global viewport. */
  body.hz-native-shell.hz-page-workspace .mobile-tabs{
    position:absolute!important;top:0!important;left:0!important;right:0!important;z-index:30!important;height:54px!important;
  }
  body.hz-native-shell.hz-page-workspace > main.app.hz-native-content-root{
    padding-top:54px!important;height:100%!important;max-height:100%!important;min-height:0!important;overflow:hidden!important;
  }
  body.hz-native-shell.hz-page-workspace .pane.mobile-active,
  body.hz-native-shell.hz-page-workspace .editor.mobile-active,
  body.hz-native-shell.hz-page-workspace .welcome{min-height:0!important;height:100%!important;max-height:100%!important}

  /* Tool/result surfaces never inherit intrinsic width from translated labels. */
  body.hz-native-shell.hz-page-tool main,
  body.hz-native-shell.hz-page-tool main *{min-width:0}
  body.hz-native-shell.hz-page-tool #variantButtons{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.hz-native-shell.hz-page-tool #resultActions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.hz-native-shell.hz-page-tool #refinePanel>div{max-width:100%!important}

  /* The root never scrolls sideways; local data tables may scroll inside themselves. */
  body.hz-native-shell,body.hz-native-shell *{box-sizing:border-box}
  body.hz-native-shell [class*="min-w-"]{min-width:0!important}
  body.hz-native-shell .overflow-x-auto,body.hz-native-shell .table-wrap{overflow-x:auto!important;max-width:100%!important}
}

@media (max-width:360px){
  :root{--hz-native-header-h:60px;--hz-native-tabbar-h:64px}
  .hz-native-header{padding-left:max(8px,var(--hz-safe-left));padding-right:max(8px,var(--hz-safe-right));gap:6px}
  .hz-native-brand-mark{width:38px;height:38px;min-width:38px;border-radius:12px}
  .hz-native-page-title{max-width:112px;font-size:13px}
  .hz-native-language .hz-language-toggle{min-width:92px!important}
  .hz-app-tab{min-height:52px!important}
  body.hz-native-shell.hz-page-settings .settings-menu .nav-item{font-size:12px!important;padding:8px 6px!important}
}


/* ============================================================
   v2.0.8 Production Recovery — runtime-proven mobile surfaces
============================================================ */
@media (max-width:767px){
  /* Public landing header must fit the 320 px baseline without wrapping. */
  body.hz-page-index .top-shell .shell{
    min-height:62px!important;
    padding-left:10px!important;
    padding-right:10px!important;
    gap:6px!important;
  }
  body.hz-page-index .top-shell .shell>a{
    flex:1 1 auto!important;
    min-width:0!important;
    gap:7px!important;
  }
  body.hz-page-index .top-shell .shell>a>div:first-child{
    width:38px!important;height:38px!important;min-width:38px!important;border-radius:11px!important;
  }
  body.hz-page-index .top-shell .shell>a>div:last-child{min-width:0!important}
  body.hz-page-index .top-shell .shell>a .text-xl{
    font-size:16px!important;line-height:1!important;white-space:nowrap!important;
  }
  body.hz-page-index .top-shell .logo-subtitle{display:none!important}
  body.hz-page-index .top-shell .shell>div:last-child{flex:0 0 auto!important;gap:4px!important;min-width:0!important}
  body.hz-page-index .top-shell [data-language-switcher] .hz-language-toggle{
    min-width:82px!important;max-width:82px!important;padding:2px!important;
  }
  body.hz-page-index .top-shell [data-language-switcher] .hz-language-toggle>button{
    min-width:38px!important;min-height:40px!important;padding:0 6px!important;
  }
  body.hz-page-index .top-shell a[href="login.html"]{
    flex:0 0 auto!important;min-width:48px!important;max-width:58px!important;min-height:44px!important;
    padding:0 8px!important;font-size:12px!important;line-height:1!important;white-space:nowrap!important;
  }

  /* Premium and Brand Memory are app surfaces too, not desktop pages inside a phone. */
  body.hz-native-shell.hz-page-premium > header:not(.hz-native-header),
  body.hz-native-shell.hz-page-premium > footer,
  body.hz-native-shell.hz-page-brand-profiles > header:not(.hz-native-header){display:none!important}
  body.hz-native-shell.hz-page-premium > main.hz-native-content-root,
  body.hz-native-shell.hz-page-brand-profiles > main.hz-native-content-root{
    grid-row:2;grid-column:1;position:relative!important;z-index:10!important;
    width:100%!important;height:100%!important;max-height:100%!important;min-height:0!important;
    margin:0!important;overflow-x:hidden!important;overflow-y:auto!important;
    padding:16px 12px 22px!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  }
  body.hz-native-shell.hz-page-premium > main section:first-child,
  body.hz-native-shell.hz-page-brand-profiles > main section:first-child{
    margin-top:0!important;
  }
  body.hz-native-shell.hz-page-premium > main h1,
  body.hz-native-shell.hz-page-brand-profiles > main h1{
    font-size:28px!important;line-height:1.08!important;margin-top:12px!important;
  }
  body.hz-native-shell.hz-page-premium .price-grid,
  body.hz-native-shell.hz-page-premium [class*="grid-cols-3"],
  body.hz-native-shell.hz-page-premium [class*="lg:grid-cols-3"],
  body.hz-native-shell.hz-page-premium [class*="xl:grid-cols-3"]{
    grid-template-columns:1fr!important;
  }
  body.hz-native-shell.hz-page-premium .price-card,
  body.hz-native-shell.hz-page-premium article.card{
    min-height:0!important;padding:16px!important;
  }
  body.hz-native-shell.hz-page-brand-profiles > main > section.grid{
    display:block!important;margin-top:14px!important;
  }
  body.hz-native-shell.hz-page-brand-profiles > main > section.grid > aside,
  body.hz-native-shell.hz-page-brand-profiles > main > section.grid > article{
    width:100%!important;max-width:100%!important;margin:0 0 12px!important;padding:14px!important;
  }
  body.hz-native-shell.hz-page-brand-profiles #pageNotice{margin-top:14px!important}
  body.hz-native-shell.hz-page-brand-profiles #brandForm .grid{grid-template-columns:1fr!important;gap:12px!important}
  body.hz-native-shell.hz-page-brand-profiles #brandForm textarea{min-height:96px!important}
  body.hz-native-shell.hz-page-brand-profiles #brandForm .flex.flex-wrap.gap-3.mt-7{
    display:grid!important;grid-template-columns:1fr!important;gap:8px!important;
  }
  body.hz-native-shell.hz-page-brand-profiles #brandForm .flex.flex-wrap.gap-3.mt-7>*{width:100%!important}

  /* Do not create floating language controls on app surfaces that already have native header language. */
  body.hz-native-shell .hz-mobile-language-dock,
  body.hz-native-shell .hz-language-floating{display:none!important}
}

@media (max-width:360px){
  body.hz-page-index .top-shell .shell>a .text-xl{font-size:15px!important}
  body.hz-page-index .top-shell [data-language-switcher] .hz-language-toggle{min-width:78px!important;max-width:78px!important}
  body.hz-page-index .top-shell [data-language-switcher] .hz-language-toggle>button{min-width:36px!important;padding:0 4px!important}
  body.hz-page-index .top-shell a[href="login.html"]{min-width:46px!important;max-width:52px!important;padding:0 6px!important;font-size:11px!important}
}

/* ============================================================
   v2.0.9 Mobile Production Fix — plans, billing, reachable actions
============================================================ */
.hz-mobile-plan-comparison{display:none}

@media (max-width:767px){
  /* Plans: never expose the desktop 850px comparison table inside a phone. */
  body.hz-native-shell.hz-page-premium .hz-desktop-plan-comparison{
    display:none!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-comparison{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-card{
    width:100%!important;
    min-width:0!important;
    padding:14px!important;
    border:1px solid var(--border)!important;
    border-radius:16px!important;
    background:var(--surface);
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-card-plus{
    border-color:var(--border)!important;
    background:var(--surface);
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-head,
  body.hz-native-shell.hz-page-premium .hz-mobile-feature-row{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    min-width:0!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-head{
    padding-bottom:10px!important;
    margin-bottom:4px!important;
    border-bottom:1px solid var(--border)!important;
    font-size:16px!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-head>span{
    color:var(--accent-strong);
    font-weight:900!important;
    white-space:nowrap!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-feature-row{
    min-height:40px!important;
    padding:8px 0!important;
    border-bottom:1px solid var(--border)!important;
    color:var(--text-secondary);
    font-size:12px!important;
    line-height:1.35!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-feature-row:last-child{border-bottom:0!important}
  body.hz-native-shell.hz-page-premium .hz-mobile-feature-row>span{min-width:0!important;overflow-wrap:anywhere!important}
  body.hz-native-shell.hz-page-premium .hz-mobile-feature-row>b{flex:0 0 auto!important;color:var(--text-primary)}
  body.hz-native-shell.hz-page-premium > main.hz-native-content-root{
    scroll-padding-top:0!important;
    padding-bottom:28px!important;
  }
  body.hz-native-shell.hz-page-premium > main > section.card{
    padding:14px!important;
    margin-top:16px!important;
  }
  body.hz-native-shell.hz-page-premium > main > section.card h2{
    font-size:22px!important;
    line-height:1.15!important;
  }

  /* Billing is a first-class app screen, not a desktop billing page squeezed into 320px. */
  body.hz-native-shell.hz-page-billing > header:not(.hz-native-header){display:none!important}
  body.hz-native-shell.hz-page-billing > main.hz-native-content-root{
    grid-row:2;grid-column:1;position:relative!important;z-index:10!important;
    width:100%!important;height:100%!important;max-height:100%!important;min-height:0!important;
    margin:0!important;overflow-x:hidden!important;overflow-y:auto!important;
    padding:16px 12px 28px!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  }
  body.hz-native-shell.hz-page-billing > main > .max-w-3xl{max-width:none!important}
  body.hz-native-shell.hz-page-billing > main h1{font-size:28px!important;line-height:1.08!important;margin-top:12px!important}
  body.hz-native-shell.hz-page-billing > main .grid.xl\:grid-cols-\[1fr_420px\]{
    display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-top:14px!important;
  }
  body.hz-native-shell.hz-page-billing > main article,
  body.hz-native-shell.hz-page-billing > main aside{min-width:0!important;width:100%!important}
  body.hz-native-shell.hz-page-billing > main .card{padding:14px!important;border-radius:18px!important}
  body.hz-native-shell.hz-page-billing #checkoutForm,
  body.hz-native-shell.hz-page-billing #checkoutCard .grid{grid-template-columns:1fr!important;gap:12px!important}
  body.hz-native-shell.hz-page-billing #subscriptionActions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  body.hz-native-shell.hz-page-billing #subscriptionActions.hidden{display:none!important}
  body.hz-native-shell.hz-page-billing #subscriptionActions>*{width:100%!important;min-height:46px!important}
  body.hz-native-shell.hz-page-billing .btn-secondary,
  body.hz-native-shell.hz-page-billing .btn-primary,
  body.hz-native-shell.hz-page-billing .btn-danger{max-width:100%!important}
  body.hz-native-shell.hz-page-billing .footer-links{display:flex!important;flex-wrap:wrap!important;gap:12px!important}
}


/* ============================================================
   v2.0.10 Final Mobile Stabilization Candidate
   Release contract: public touch scroll, native header geometry,
   contained app scrolling, no public-root lock.
============================================================ */
@media (max-width:767px){
  /* Public pages must use the browser's native vertical scroll. The old
     global html/body lock is reserved only for native app-shell pages. */
  html:not(.hz-native-shell-root){
    height:auto!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
  }
  body:not(.hz-native-shell){
    height:auto!important;
    max-height:none!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y!important;
  }
  body.hz-page-index main,
  body.hz-page-index footer,
  body.hz-page-login > .relative{
    touch-action:pan-y!important;
  }
  body.hz-page-index,
  body.hz-page-login{
    -webkit-user-drag:none;
  }

  /* Native app pages keep one contained viewport and one scroll owner. */
  html.hz-native-shell-root{
    height:100%!important;
    max-height:100%!important;
    overflow:hidden!important;
  }

  /* Tool header: same geometry as every other native app screen. */
  body.hz-native-shell.hz-page-tool > .hz-native-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
  }
  body.hz-native-shell.hz-page-tool > .hz-native-header .hz-native-brand{
    min-width:0!important;
    max-width:100%!important;
  }
  body.hz-native-shell.hz-page-tool > .hz-native-header .hz-native-header-actions{
    justify-self:end!important;
    min-width:0!important;
  }
  body.hz-native-shell.hz-page-tool > .hz-native-header .hz-native-language,
  body.hz-native-shell.hz-page-tool > .hz-native-header .hz-language-toggle{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
  }
  body.hz-native-shell.hz-page-tool .hz-mobile-language-dock,
  body.hz-native-shell.hz-page-tool .hz-language-floating{
    display:none!important;
  }
}


/* =========================================================
   V2.1.0 — MEMORY-FIRST MOBILE UX
   5-tab create action · create sheet · theme system
========================================================= */

@media (max-width:767px){
  .hz-app-tabbar{grid-template-columns:repeat(5,minmax(0,1fr))!important;overflow:visible!important}
  .hz-app-tab{padding:4px 2px!important;font-size:9px!important}
  .hz-app-tab-create{
    position:relative!important;
    overflow:visible!important;
    color:var(--text-primary);
    background:transparent!important;
    box-shadow:none!important;
  }
  .hz-app-tab-create .hz-app-tab-icon{
    width:50px;height:50px;margin-top:-20px;border-radius:17px;
    display:grid;place-items:center;background:var(--accent);
    color:var(--text-primary);font-size:28px!important;font-weight:950!important;
    border:1px solid var(--border);
    box-shadow:var(--shadow-soft);
  }
  .hz-app-tab-create .hz-app-tab-label{color:var(--accent-strong);font-weight:950!important;margin-top:-1px}

  .hz-create-sheet{position:fixed;inset:0;z-index:900;display:none;pointer-events:none}
  .hz-create-sheet.is-open{display:block;pointer-events:auto}
  .hz-create-backdrop{position:absolute;inset:0;background:var(--surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .hz-create-panel{
    position:absolute;left:max(10px,var(--hz-safe-left));right:max(10px,var(--hz-safe-right));bottom:max(10px,var(--hz-safe-bottom));
    max-height:min(620px,calc(var(--hz-vvh,100dvh) - 24px));overflow-y:auto;overscroll-behavior:contain;
    padding:10px 14px 16px;border-radius:28px;border:1px solid var(--border);
    background:var(--surface);
    box-shadow:var(--shadow-soft);-webkit-overflow-scrolling:touch;
    animation:hzCreateIn .2s ease-out both;
  }
  @keyframes hzCreateIn{from{transform:translateY(24px);opacity:.5}to{transform:none;opacity:1}}
  .hz-create-handle{width:46px;height:5px;border-radius:999px;background:var(--surface);margin:0 auto 12px}
  .hz-create-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:4px 4px 12px}
  .hz-create-kicker{font:950 10px/1.2 system-ui;letter-spacing:.16em;color:var(--accent-strong)}
  .hz-create-heading h2{margin:6px 0 0;color:var(--text-primary);font:950 26px/1.08 system-ui}
  .hz-create-subtitle{margin:8px 0 0;color:var(--text-secondary);font:500 13px/1.55 system-ui;max-width:440px}
  .hz-create-close{width:42px;height:42px;min-width:42px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text-primary);font-size:25px;line-height:1}
  .hz-create-memory,.hz-create-all{
    width:100%;min-height:52px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;
    text-decoration:none!important;color:var(--text-primary);background:var(--surface);border:1px solid var(--border)
  }
  .hz-create-memory strong,.hz-create-all strong{flex:1;min-width:0;font:900 14px/1.25 system-ui}
  .hz-create-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
  .hz-create-grid>a{
    min-height:82px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;
    padding:14px;border-radius:17px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);text-decoration:none!important
  }
  .hz-create-grid>a span{font-size:22px}.hz-create-grid>a b{font:900 14px/1.2 system-ui}
  .hz-create-all{color:var(--text-primary);background:var(--surface);border-color:var(--border)}
  body.hz-create-open{overflow:hidden!important}
}

/* Light theme is app-wide and preference-driven. */
html[data-hz-theme="light"] body{
  color:var(--text-primary);
  background:var(--surface);
}
html[data-hz-theme="light"] .grid-bg{opacity:.30!important}
html[data-hz-theme="light"] .hz-native-header,
html[data-hz-theme="light"] .hz-app-tabbar,
html[data-hz-theme="light"] .top-shell,
html[data-hz-theme="light"] header.bg-slate-950\/90,
html[data-hz-theme="light"] header.bg-slate-950\/80{
  background:var(--surface);border-color:var(--border)!important;box-shadow:none!important
}
html[data-hz-theme="light"] .hz-native-brand,
html[data-hz-theme="light"] .hz-native-page-title{color:var(--text-primary)}
html[data-hz-theme="light"] .hz-app-tabbar{box-shadow:var(--shadow-soft)}
html[data-hz-theme="light"] .hz-app-tab{color:var(--text-secondary)}
html[data-hz-theme="light"] .hz-app-tab.is-active{color:var(--accent-strong);background:var(--surface)}
html[data-hz-theme="light"] .hz-app-tab-create .hz-app-tab-icon{box-shadow:var(--shadow-soft)}
html[data-hz-theme="light"] .card,
html[data-hz-theme="light"] .setting-card,
html[data-hz-theme="light"] .mini-card,
html[data-hz-theme="light"] .stat-card,
html[data-hz-theme="light"] .tool-card,
html[data-hz-theme="light"] .price-card,
html[data-hz-theme="light"] .notice,
html[data-hz-theme="light"] .settings-menu,
html[data-hz-theme="light"] article[class*="bg-slate"],
html[data-hz-theme="light"] section[class*="bg-slate"]{
  background:var(--surface);border-color:var(--border)!important;color:var(--text-primary);box-shadow:var(--shadow-soft)}
html[data-hz-theme="light"] .price-card.plus{background:var(--surface);border-color:var(--border)!important}
html[data-hz-theme="light"] .bg-slate-950,
html[data-hz-theme="light"] .bg-slate-900,
html[data-hz-theme="light"] .bg-slate-950\/90,
html[data-hz-theme="light"] .bg-slate-950\/80,
html[data-hz-theme="light"] .bg-slate-950\/70{background:var(--surface)}
html[data-hz-theme="light"] .bg-slate-800{background:var(--surface)}
html[data-hz-theme="light"] .text-white,
html[data-hz-theme="light"] .text-slate-50,
html[data-hz-theme="light"] h1,
html[data-hz-theme="light"] h2,
html[data-hz-theme="light"] h3,
html[data-hz-theme="light"] strong{color:var(--text-primary)}
html[data-hz-theme="light"] .text-slate-300{color:var(--text-primary)}
html[data-hz-theme="light"] .text-slate-400{color:var(--text-secondary)}
html[data-hz-theme="light"] .text-slate-500{color:var(--text-secondary)}
html[data-hz-theme="light"] .text-slate-600{color:var(--text-secondary)}
html[data-hz-theme="light"] .border-slate-900,
html[data-hz-theme="light"] .border-slate-800,
html[data-hz-theme="light"] .border-slate-700{border-color:var(--border)!important}
html[data-hz-theme="light"] input,
html[data-hz-theme="light"] textarea,
html[data-hz-theme="light"] select,
html[data-hz-theme="light"] .input,
html[data-hz-theme="light"] .search-input{
  background:var(--surface);color:var(--text-primary);border-color:var(--border)!important
}
html[data-hz-theme="light"] input::placeholder,
html[data-hz-theme="light"] textarea::placeholder{color:var(--text-secondary)}
html[data-hz-theme="light"] .secondary-btn,
html[data-hz-theme="light"] .nav-item,
html[data-hz-theme="light"] .choice,
html[data-hz-theme="light"] .filter-btn{
  background:var(--surface);color:var(--text-primary);border-color:var(--border)!important
}
html[data-hz-theme="light"] .hz-create-backdrop{background:var(--surface)}
html[data-hz-theme="light"] .hz-create-panel{background:var(--surface);border-color:var(--border)!important}
html[data-hz-theme="light"] .hz-create-heading h2{color:var(--text-primary)}
html[data-hz-theme="light"] .hz-create-subtitle{color:var(--text-secondary)}
html[data-hz-theme="light"] .hz-create-close,
html[data-hz-theme="light"] .hz-create-grid>a{background:var(--surface);border-color:var(--border)!important;color:var(--text-primary)}

@media (max-width:767px){
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"].hz-show-recents main#home>#recents{display:block!important}
  body.hz-native-shell.hz-page-dashboard #memorySpotlight{margin-top:16px!important;padding:18px!important;border-radius:18px!important}
  body.hz-native-shell.hz-page-dashboard #memorySpotlight h2{font-size:21px!important;line-height:1.15!important}
  body.hz-native-shell.hz-page-dashboard #memorySpotlight p{font-size:13px!important;line-height:1.55!important}
  body.hz-native-shell.hz-page-dashboard #memorySpotlightAction{width:100%!important;min-height:46px!important}
  body.hz-native-shell.hz-page-dashboard.hz-density-compact #toolGrid{gap:9px!important}
  body.hz-native-shell.hz-page-dashboard.hz-density-compact #toolGrid .hz-compact-tool-card{padding:12px!important}
  body.hz-native-shell.hz-page-dashboard.hz-density-compact #toolGrid .hz-compact-tool-card .w-12.h-12{width:40px!important;height:40px!important}
  body.hz-native-shell.hz-page-dashboard.hz-density-compact #toolGrid .hz-compact-tool-card .secondary-btn{min-height:40px!important;margin-top:12px!important}
}


/* V2.1.1 — complete light-theme coverage for onboarding and native surfaces. */
html[data-hz-theme="light"] body.hz-page-onboarding .glass{
  background:var(--surface);
  border-color:var(--border)!important;
  color:var(--text-primary);
}
html[data-hz-theme="light"] body.hz-page-onboarding .choice{
  background:var(--surface);
  color:var(--text-primary);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] body.hz-page-onboarding .choice.active{
  background:var(--surface);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] body.hz-page-onboarding .progress{
  background:var(--surface);
}
html[data-hz-theme="light"] body.hz-page-onboarding #onboardingActions{
  background:var(--surface);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] body.hz-page-onboarding .error-box{
  background:var(--danger-soft);
  color:var(--danger);
  border-color:var(--danger)!important;
}
html[data-hz-theme="light"] .hz-language-toggle{
  background:var(--surface);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .hz-language-toggle button{
  color:var(--text-secondary);
}
html[data-hz-theme="light"] .hz-language-toggle button.is-active{
  background:var(--surface);
  color:var(--accent-strong);
}

/* ============================================================
   V2.2.1 — LIGHT THEME PURITY CONTRACT
   No dark-theme surface may leak into Light mode. These rules
   intentionally sit at the end of the cascade and cover states
   that were previously missed by generic theme overrides.
============================================================ */
html[data-hz-theme="light"]{
  --bg:var(--background);
  --panel:var(--surface);
  
  --border2:var(--border);
  --text:var(--text-primary);
  --muted:var(--text-secondary);
  --hz-light-surface:var(--surface);
  --hz-light-surface-soft:var(--surface);
  --hz-light-surface-cyan:var(--accent);
  --hz-light-surface-cyan-strong:var(--accent);
  --hz-light-border:var(--border);
  --hz-light-border-strong:var(--border);
  --hz-light-ink:var(--text-primary);
  --hz-light-muted:var(--text-secondary);
  --hz-light-accent:var(--accent);
}
html[data-hz-theme="light"] body{color-scheme:light!important}
html[data-hz-theme="light"] ::selection{background:var(--surface);color:var(--text-primary)}
html[data-hz-theme="light"] ::-webkit-scrollbar-track{background:var(--surface)}
html[data-hz-theme="light"] ::-webkit-scrollbar-thumb{background:var(--surface)}

/* Loaders / skeleton-like blocking states */
html[data-hz-theme="light"] .loading,
html[data-hz-theme="light"] #loadingScreen{
  background:var(--surface);
  color:var(--text-primary);
}
html[data-hz-theme="light"] .spinner{
  border-color:var(--border)!important;
  border-top-color:var(--accent-border)!important;
}

/* Small controls that previously kept dark navy surfaces. */
html[data-hz-theme="light"] .favorite-btn,
html[data-hz-theme="light"] button.favorite-btn,
html[data-hz-theme="light"] #favoriteButton{
  background:var(--surface);
  color:var(--text-secondary);
  border-color:var(--border)!important;
  box-shadow:none!important;
}
html[data-hz-theme="light"] .favorite-btn:hover,
html[data-hz-theme="light"] .favorite-btn.active,
html[data-hz-theme="light"] #favoriteButton.active{
  background:var(--warning-soft);
  color:var(--warning);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .choice-chip,
html[data-hz-theme="light"] .category-chip{
  background:var(--surface);
  color:var(--text-secondary);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .choice-chip:hover,
html[data-hz-theme="light"] .category-chip:hover{
  background:var(--surface);
  color:var(--accent-strong);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .choice-chip.selected,
html[data-hz-theme="light"] .category-chip.selected{
  background:var(--surface);
  color:var(--accent-strong);
  border-color:var(--border)!important;
}

/* Switches: calm light rail + cyan active, never navy. */
html[data-hz-theme="light"] .toggle-slider{
  background:var(--surface);
  border:1px solid var(--border)!important;
}
html[data-hz-theme="light"] .toggle-slider:before{
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
html[data-hz-theme="light"] .toggle input:checked + .toggle-slider{
  background:var(--accent);
  border-color:var(--accent-border)!important;
}
html[data-hz-theme="light"] .toggle input:checked + .toggle-slider:before{
  background:var(--surface);
}

/* Progress / empty / toast states */
html[data-hz-theme="light"] .progress{background:var(--surface)}
html[data-hz-theme="light"] .empty{
  background:var(--surface);
  color:var(--text-secondary);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .toast{
  background:var(--surface);
  color:var(--text-primary);
  border-color:var(--border)!important;
  box-shadow:var(--shadow-soft);
}

/* Tool production controls */
html[data-hz-theme="light"] .plan-control-card,
html[data-hz-theme="light"] .plan-option,
html[data-hz-theme="light"] .refine-btn{
  background:var(--surface);
  color:var(--text-primary);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .plan-option:hover,
html[data-hz-theme="light"] .refine-btn:hover{
  background:var(--surface);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .plan-option.active,
html[data-hz-theme="light"] .refine-btn.active{
  background:var(--surface);
  color:var(--text-primary);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .plan-option.locked,
html[data-hz-theme="light"] .refine-btn:disabled{
  background:var(--surface);
  color:var(--text-secondary);
  border-color:var(--border)!important;
}

/* Mobile plan comparison: three related LIGHT surfaces. */
@media (max-width:767px){
  html[data-hz-theme="light"] body.hz-native-shell.hz-page-premium .hz-mobile-plan-card{
    background:var(--surface);
    color:var(--text-primary);
    border-color:var(--border)!important;
    box-shadow:var(--shadow-soft);
  }
  html[data-hz-theme="light"] body.hz-native-shell.hz-page-premium .hz-mobile-plan-card-free{
    background:var(--surface);
  }
  html[data-hz-theme="light"] body.hz-native-shell.hz-page-premium .hz-mobile-plan-card-pro{
    background:var(--surface);
    border-color:var(--border)!important;
  }
  html[data-hz-theme="light"] body.hz-native-shell.hz-page-premium .hz-mobile-plan-card-plus{
    background:var(--surface);
    border-color:var(--border)!important;
    box-shadow:var(--shadow-soft);
  }
  html[data-hz-theme="light"] body.hz-native-shell.hz-page-premium .hz-mobile-plan-head{
    border-color:var(--border)!important;
    color:var(--text-primary);
  }
  html[data-hz-theme="light"] body.hz-native-shell.hz-page-premium .hz-mobile-plan-head>span{
    color:var(--accent-strong);
  }
  html[data-hz-theme="light"] body.hz-native-shell.hz-page-premium .hz-mobile-feature-row{
    color:var(--text-secondary);
    border-color:var(--border)!important;
  }
  html[data-hz-theme="light"] body.hz-native-shell.hz-page-premium .hz-mobile-feature-row>b{
    color:var(--text-primary);
  }
}

/* Desktop plan cards match the same visual family. */
html[data-hz-theme="light"] body.hz-page-premium #card-free{
  background:var(--surface);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] body.hz-page-premium #card-pro{
  background:var(--surface);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] body.hz-page-premium #card-plus{
  background:var(--surface);
  border-color:var(--border)!important;
  box-shadow:var(--shadow-soft);
}

/* Generic overlays and generated result surfaces. */
html[data-hz-theme="light"] [class*="bg-black/"],
html[data-hz-theme="light"] .bg-black\/75,
html[data-hz-theme="light"] .bg-black\/80{
  background:var(--surface);
}
html[data-hz-theme="light"] .bg-slate-700{background:var(--surface)}
html[data-hz-theme="light"] .hover\:bg-slate-700:hover,
html[data-hz-theme="light"] .hover\:bg-slate-800:hover{background:var(--surface)}
html[data-hz-theme="light"] .text-slate-700{color:var(--text-secondary)}
html[data-hz-theme="light"] .text-slate-800,
html[data-hz-theme="light"] .text-slate-900,
html[data-hz-theme="light"] .text-slate-950{color:var(--text-primary)}
html[data-hz-theme="light"] .border-slate-600{border-color:var(--border)!important}

/* Keep selected/brand accents vivid but comfortable in light mode. */
html[data-hz-theme="light"] .badge{
  background:var(--surface);
  color:var(--text-primary);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .hz-create-memory{
  background:var(--surface);
  color:var(--text-primary);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .hz-create-all{
  background:var(--surface);
  color:var(--accent-strong);
  border-color:var(--border)!important;
}

/* V2.2.1 public/account + history purity — closes non-Tailwind hardcoded surfaces. */
html[data-hz-theme="light"] .glass{
  background:var(--surface);
  border-color:var(--border)!important;
  color:var(--text-primary);
}
html[data-hz-theme="light"] .input,
html[data-hz-theme="light"] .field{
  background:var(--surface);
  color:var(--text-primary);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .choice{
  background:var(--surface);
  color:var(--text-primary);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .choice:hover{background:var(--surface);border-color:var(--border)!important}
html[data-hz-theme="light"] .choice.active{background:var(--surface);color:var(--text-primary);border-color:var(--border)!important}
html[data-hz-theme="light"] .error-box{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)!important}
html[data-hz-theme="light"] .success-box{background:var(--surface);color:var(--text-primary);border-color:var(--border)!important}
html[data-hz-theme="light"] .modal-card{
  background:var(--surface);
  color:var(--text-primary);
  border-color:var(--border)!important;
  box-shadow:var(--shadow-soft);
}
html[data-hz-theme="light"] .ai-output{color:var(--text-primary)}
html[data-hz-theme="light"] .ai-output h2,
html[data-hz-theme="light"] .ai-output h4,
html[data-hz-theme="light"] .ai-output strong{color:var(--text-primary)}
html[data-hz-theme="light"] .ai-output h3{color:var(--text-primary)}
html[data-hz-theme="light"] .ai-output code{background:var(--surface);color:var(--accent-strong);border-color:var(--border)!important}
html[data-hz-theme="light"] .hz-mobile-language-dock{
  background:var(--surface);
  border-color:var(--border)!important;
  box-shadow:var(--shadow-soft);
}

/* ============================================================
   V2.2.2 — MOBILE SHELL CANDIDATE
   Mineral Cyan identity · native first-paint mask · Solutions tab
   · hydration skeleton · contextual back · calm light surfaces
============================================================ */
:root{
  --hz-mineral-50:var(--surface);
  --hz-mineral-100:var(--surface);
  --hz-mineral-200:var(--surface);
  --hz-mineral-300:var(--surface);
  --hz-mineral-400:var(--surface);
  --hz-mineral-500:var(--surface);
  --hz-mineral-600:var(--surface);
  --hz-mineral-700:var(--surface);
  --hz-graphite-950:var(--surface);
  --hz-graphite-900:var(--surface);
  --hz-porcelain:var(--surface);
  --hz-porcelain-soft:var(--surface);
  --hz-ink:var(--text-primary);
}

/* Brand accent: lower-neon, more mineral, trustworthy across both modes. */
.text-cyan-400{color:var(--hz-mineral-500)!important}
.bg-cyan-400{background-color:var(--hz-mineral-500)!important}
.hover\:bg-cyan-300:hover{background-color:var(--hz-mineral-400)!important}
.border-cyan-400{border-color:var(--hz-mineral-500)!important}

/* Dashboard catalogue hydration: never show a fake business number (0/0). */
.hz-stat-loading{min-width:54px;min-height:36px;display:flex;align-items:center}
.hz-stat-skeleton{
  display:block;width:48px;height:26px;border-radius:9px;
  background:var(--surface);
  background-size:220% 100%;animation:hzStatPulse 1.05s ease-in-out infinite;
}
@keyframes hzStatPulse{0%{background-position:200% 0}100%{background-position:-20% 0}}

/* V3 bridge: outcome discovery, not a 50-card directory. Desktop remains unchanged. */
.hz-solutions-section{display:none}
.hz-solutions-hero{
  padding:18px;border:1px solid var(--border);border-radius:22px;
  background:var(--surface);
}
.hz-solution-grid{display:grid;gap:10px;margin-top:12px}
.hz-solution-card{
  min-height:82px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:14px;border-radius:18px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-primary);text-decoration:none!important;
  box-shadow:var(--shadow-soft);-webkit-tap-highlight-color:transparent;
}
.hz-solution-card:active{transform:scale(.992)}
.hz-solution-icon{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  color:var(--text-primary);background:var(--surface);border:1px solid var(--border);font-size:18px;font-weight:900;
}
.hz-solution-card div{min-width:0}
.hz-solution-card strong{display:block;font:900 14px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;color:inherit}
.hz-solution-card small{display:block;margin-top:4px;color:var(--text-secondary);font:600 11px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.hz-solutions-expert-link{
  min-height:58px;margin-top:12px;padding:13px 14px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-decoration:none!important;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);
}
.hz-solutions-expert-link span{font-size:11px;color:var(--text-secondary)}.hz-solutions-expert-link strong{font-size:12px;color:inherit}

/* Smart return lives inside the scroll surface so it feels native and preserves context. */
.hz-context-back{
  display:none;min-height:44px;align-items:center;width:max-content;max-width:100%;padding:10px 13px;margin:0 0 12px;
  border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);text-decoration:none!important;
  font:850 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
}

@media (max-width:767px){
  /* DOM/FOUC shield. A correct blank branded surface is better than one frame of desktop chrome. */
  html.hz-native-shell-boot body::before{
    content:"";position:fixed;inset:0;z-index:2147483646;pointer-events:none;
    background:var(--surface);
  }
  html[data-hz-theme="light"].hz-native-shell-boot body::before{
    background:var(--surface);
  }

  .hz-context-back{display:inline-flex}

  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] main#home>#solutions{display:none!important}
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="solutions"] main#home>section:not(#solutions),
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="solutions"] main#home>footer{display:none!important}
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="solutions"] main#home>#solutions{display:block!important;margin:0!important;padding:0!important}

  .hz-app-tab.is-active{
    color:var(--hz-mineral-300)!important;
    background:var(--surface);
    box-shadow:var(--shadow-soft);
  }
  .hz-app-tab-create .hz-app-tab-icon{
    background:var(--surface);
    box-shadow:var(--shadow-soft);
  }
  .hz-app-tab-create .hz-app-tab-label{color:var(--hz-mineral-400)!important}
}

/* Calm / light workspace: porcelain + mineral instead of cold blue SaaS surfaces. */
html[data-hz-theme="light"]{
  --bg:var(--hz-porcelain)!important;
  --panel:var(--surface);
  
  --border2:var(--border);
  --text:var(--hz-ink)!important;
  --muted:var(--text-secondary);
  --hz-light-surface:var(--surface);
  --hz-light-surface-soft:var(--surface);
  --hz-light-surface-cyan:var(--accent);
  --hz-light-surface-cyan-strong:var(--accent);
  --hz-light-border:var(--border);
  --hz-light-border-strong:var(--border);
  --hz-light-ink:var(--hz-ink);
  --hz-light-muted:var(--text-secondary);
  --hz-light-accent:var(--hz-mineral-500);
}
html[data-hz-theme="light"] body{
  background:var(--surface);
}
html[data-hz-theme="light"] .hz-native-header,
html[data-hz-theme="light"] .hz-app-tabbar,
html[data-hz-theme="light"] .top-shell,
html[data-hz-theme="light"] header.bg-slate-950\/90,
html[data-hz-theme="light"] header.bg-slate-950\/80{
  background:var(--surface);border-color:var(--border)!important;
}
html[data-hz-theme="light"] .hz-app-tab.is-active{color:var(--hz-mineral-700)!important;background:var(--surface)}
html[data-hz-theme="light"] .hz-app-tab-create .hz-app-tab-icon{
  box-shadow:var(--shadow-soft);
}
html[data-hz-theme="light"] .hz-stat-skeleton{
  background:var(--surface);background-size:220% 100%!important;
}
html[data-hz-theme="light"] .hz-solutions-hero{
  background:var(--surface);border-color:var(--border)!important;
  box-shadow:var(--shadow-soft);
}
html[data-hz-theme="light"] .hz-solution-card{
  background:var(--surface);color:var(--hz-ink)!important;border-color:var(--border)!important;
  box-shadow:var(--shadow-soft);
}
html[data-hz-theme="light"] .hz-solution-card small{color:var(--text-primary)}
html[data-hz-theme="light"] .hz-solution-icon{background:var(--surface);color:var(--hz-mineral-700)!important;border-color:var(--border)!important}
html[data-hz-theme="light"] .hz-solutions-expert-link{
  background:var(--surface);color:var(--hz-mineral-700)!important;border-color:var(--border)!important;
}
html[data-hz-theme="light"] .hz-solutions-expert-link span{color:var(--text-primary)}
html[data-hz-theme="light"] .hz-context-back{
  background:var(--surface);color:var(--text-primary);border-color:var(--border)!important;box-shadow:var(--shadow-soft);
}

/* Refine every major light-mode accent to one brand mineral family. */
html[data-hz-theme="light"] .bg-cyan-400{background-color:var(--hz-mineral-500)!important}
html[data-hz-theme="light"] .text-cyan-400{color:var(--hz-mineral-600)!important}
html[data-hz-theme="light"] .badge{background:var(--surface);color:var(--hz-mineral-700)!important;border-color:var(--border)!important}
html[data-hz-theme="light"] .toggle input:checked + .toggle-slider{background:var(--surface);border-color:var(--border)!important}
html[data-hz-theme="light"] .choice-chip.selected,
html[data-hz-theme="light"] .category-chip.selected,
html[data-hz-theme="light"] .plan-option.active,
html[data-hz-theme="light"] .refine-btn.active{
  background:var(--surface);color:var(--hz-mineral-700)!important;border-color:var(--border)!important;
}
html[data-hz-theme="light"] body.hz-page-premium #card-pro{
  background:var(--surface);border-color:var(--border)!important;
}
html[data-hz-theme="light"] body.hz-page-premium #card-plus{
  background:var(--surface);
  border-color:var(--border)!important;box-shadow:var(--shadow-soft);
}
@media (max-width:767px){
  html[data-hz-theme="light"] body.hz-native-shell.hz-page-premium .hz-mobile-plan-card-pro{
    background:var(--surface);border-color:var(--border)!important;
  }
  html[data-hz-theme="light"] body.hz-native-shell.hz-page-premium .hz-mobile-plan-card-plus{
    background:var(--surface);
    border-color:var(--border)!important;box-shadow:var(--shadow-soft);
  }
}

/* ============================================================
   V2.2.3 — FERAH PURITY QUARANTINE · V3 READINESS
   One semantic light palette owns every app surface. Legacy navy/slate
   backgrounds may remain in dark/Odak mode, but they are not allowed to
   paint in Ferah mode. This block intentionally comes last in the cascade.
============================================================ */
html[data-hz-theme="light"]{
  --hz-ferah-canvas:var(--surface);
  --hz-ferah-surface:var(--surface);
  --hz-ferah-surface-soft:var(--surface);
  --hz-ferah-surface-accent:var(--accent);
  --hz-ferah-surface-accent-strong:var(--accent);
  --hz-ferah-border:var(--border);
  --hz-ferah-border-strong:var(--border);
  --hz-ferah-ink:var(--text-primary);
  --hz-ferah-muted:var(--text-secondary);
  --hz-ferah-muted-soft:var(--text-secondary);
  --hz-ferah-accent:var(--hz-mineral-500);
  --hz-ferah-accent-deep:var(--hz-mineral-700);
  --hz-ferah-shadow:var(--surface);
}

html[data-hz-theme="light"] body,
html[data-hz-theme="light"] body.hz-native-shell{
  background:var(--surface);
  color:var(--hz-ferah-ink)!important;
}

/* Hard quarantine for legacy Tailwind/slate surfaces. */
html[data-hz-theme="light"] [class*="bg-slate-950"],
html[data-hz-theme="light"] [class*="bg-slate-900"],
html[data-hz-theme="light"] [class*="bg-slate-800"],
html[data-hz-theme="light"] [class*="bg-slate-700"]{
  background:var(--hz-ferah-surface)!important;
  background-color:var(--hz-ferah-surface)!important;
}
html[data-hz-theme="light"] [class*="border-slate-900"],
html[data-hz-theme="light"] [class*="border-slate-800"],
html[data-hz-theme="light"] [class*="border-slate-700"],
html[data-hz-theme="light"] [class*="border-slate-600"]{
  border-color:var(--hz-ferah-border)!important;
}
html[data-hz-theme="light"] .text-slate-300{color:var(--text-secondary)}
html[data-hz-theme="light"] .text-slate-400{color:var(--text-primary)}
html[data-hz-theme="light"] .text-slate-500,
html[data-hz-theme="light"] .text-slate-600{color:var(--hz-ferah-muted)!important}

/* Native shell: no duplicate logo/home affordance, only page identity + language. */
@media (max-width:767px){
  body.hz-native-shell .hz-native-brand-static{
    pointer-events:none!important;
    gap:0!important;
    min-width:0!important;
  }
  body.hz-native-shell .hz-native-brand-static .hz-native-page-title{
    font-weight:900!important;
    letter-spacing:-.015em!important;
  }
}

/* App surfaces that historically carried hardcoded navy. */
html[data-hz-theme="light"] .card,
html[data-hz-theme="light"] .setting-card,
html[data-hz-theme="light"] .mini-card,
html[data-hz-theme="light"] .stat-card,
html[data-hz-theme="light"] .tool-card,
html[data-hz-theme="light"] .plan-control-card,
html[data-hz-theme="light"] .price-card,
html[data-hz-theme="light"] .notice,
html[data-hz-theme="light"] .modal-card,
html[data-hz-theme="light"] .glass,
html[data-hz-theme="light"] .result-enter,
html[data-hz-theme="light"] .tool-list-item,
html[data-hz-theme="light"] .settings-menu,
html[data-hz-theme="light"] .hz-create-panel,
html[data-hz-theme="light"] .hz-create-grid>a,
html[data-hz-theme="light"] .hz-context-back{
  background:var(--hz-ferah-surface)!important;
  color:var(--hz-ferah-ink)!important;
  border-color:var(--hz-ferah-border)!important;
  box-shadow:var(--hz-ferah-shadow)!important;
}
html[data-hz-theme="light"] .tool-list-item:hover,
html[data-hz-theme="light"] .tool-list-item.active,
html[data-hz-theme="light"] .plan-option:hover,
html[data-hz-theme="light"] .refine-btn:hover,
html[data-hz-theme="light"] .choice:hover{
  background:var(--hz-ferah-surface-accent)!important;
  color:var(--hz-ferah-ink)!important;
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] .plan-option.active,
html[data-hz-theme="light"] .refine-btn.active,
html[data-hz-theme="light"] .choice.active,
html[data-hz-theme="light"] .theme-choice button.active{
  background:var(--hz-ferah-surface-accent-strong)!important;
  color:var(--hz-ferah-accent-deep)!important;
  border-color:var(--border)!important;
}

/* Tool result/refinement surfaces:var(--text-primary)/porcelain, never dark navy in Ferah. */
html[data-hz-theme="light"] body.hz-page-tool #result,
html[data-hz-theme="light"] body.hz-page-tool #resultSection,
html[data-hz-theme="light"] body.hz-page-tool #refinePanel,
html[data-hz-theme="light"] body.hz-page-tool #historyList,
html[data-hz-theme="light"] body.hz-page-tool .result-meta,
html[data-hz-theme="light"] body.hz-page-tool .result-quality-note{
  color:var(--hz-ferah-ink)!important;
}
html[data-hz-theme="light"] body.hz-page-tool #refinePanel,
html[data-hz-theme="light"] body.hz-page-tool .plan-control-card{
  background:var(--hz-ferah-surface-soft)!important;
  border-color:var(--hz-ferah-border)!important;
}
html[data-hz-theme="light"] body.hz-page-tool .refine-btn,
html[data-hz-theme="light"] body.hz-page-tool .plan-option{
  background:var(--hz-ferah-surface)!important;
  color:var(--text-secondary);
  border-color:var(--hz-ferah-border)!important;
}

/* Settings controls: calm rails and one Mineral accent family. */
html[data-hz-theme="light"] body.hz-page-settings .theme-choice,
html[data-hz-theme="light"] body.hz-page-settings .settings-menu{
  background:var(--hz-ferah-surface-soft)!important;
  border-color:var(--hz-ferah-border)!important;
}
html[data-hz-theme="light"] body.hz-page-settings .toggle-slider{
  background:var(--surface);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] body.hz-page-settings .toggle input:checked + .toggle-slider{
  background:var(--surface);
  border-color:var(--border)!important;
}

/* Pricing hierarchy: Free neutral, Pro porcelain, Plus mineral premium. */
html[data-hz-theme="light"] body.hz-page-premium #card-free,
html[data-hz-theme="light"] body.hz-page-premium .hz-mobile-plan-card-free{
  background:var(--surface);
  border-color:var(--hz-ferah-border)!important;
}
html[data-hz-theme="light"] body.hz-page-premium #card-pro,
html[data-hz-theme="light"] body.hz-page-premium .hz-mobile-plan-card-pro{
  background:var(--surface);
  border-color:var(--border)!important;
}
html[data-hz-theme="light"] body.hz-page-premium #card-plus,
html[data-hz-theme="light"] body.hz-page-premium .hz-mobile-plan-card-plus{
  background:var(--surface);
  border-color:var(--border)!important;
  box-shadow:var(--shadow-soft);
}

/* Load/empty states must never flash the Odak palette while Ferah is active. */
html[data-hz-theme="light"] #loadingScreen,
html[data-hz-theme="light"] .loading,
html[data-hz-theme="light"] .empty{
  background:var(--hz-ferah-canvas)!important;
  color:var(--hz-ferah-muted)!important;
  border-color:var(--hz-ferah-border)!important;
}
html[data-hz-theme="light"] .hz-create-handle{background:var(--surface)}
html[data-hz-theme="light"] .hz-create-close{
  background:var(--hz-ferah-surface)!important;
  color:var(--text-secondary);
  border-color:var(--hz-ferah-border)!important;
}

/* V3-ready mobile home: Memory + Outcomes are the product; inventory cards stay backstage. */
@media (max-width:767px){
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] #dashboardIntro,
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] #dashboardStats,
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] #legacyFeatured,
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] #favorites,
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] #recents{
    display:none!important;
  }
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] main#home>#solutions{
    display:block!important;
    margin-top:12px!important;
    padding:0!important;
  }
  body.hz-native-shell.hz-page-dashboard[data-hz-dashboard-view="home"] #memorySpotlight{
    margin-top:0!important;
  }
}


/* ============================================================
   V2.2.4 — V3 FOUNDATION FINAL · CTA SAFE ZONE
   Every native scroll surface can lift its final action fully above
   the app tab bar, even on short Android/Safari viewports.
============================================================ */
@media (max-width:767px){
  body.hz-native-shell .hz-app-shell-scroll,
  body.hz-native-shell.hz-page-history > main.hz-native-content-root{
    scroll-padding-bottom:calc(var(--hz-native-tabbar-h,68px) + 28px + var(--hz-safe-bottom))!important;
  }

  body.hz-native-shell.hz-page-tool .hz-app-shell-scroll,
  body.hz-native-shell.hz-page-settings main.hz-app-shell-scroll,
  body.hz-native-shell.hz-page-workspace .hz-app-shell-scroll,
  body.hz-native-shell.hz-page-premium > main.hz-native-content-root,
  body.hz-native-shell.hz-page-billing > main.hz-native-content-root,
  body.hz-native-shell.hz-page-brand-profiles > main.hz-native-content-root{
    padding-bottom:calc(var(--hz-native-tabbar-h,68px) + 36px + var(--hz-safe-bottom))!important;
  }

  body.hz-native-shell #generateButton,
  body.hz-native-shell #saveProfileButton,
  body.hz-native-shell #saveWorkspaceButton,
  body.hz-native-shell #savePreferencesButton,
  body.hz-native-shell .primary-btn,
  body.hz-native-shell .secondary-btn{
    scroll-margin-bottom:calc(var(--hz-native-tabbar-h,68px) + 28px + var(--hz-safe-bottom))!important;
  }
}

/* ============================================================
   V2.2.5 — V3 PREFLIGHT LOCK · MOBILE SINGLE-PLAN DECISION
============================================================ */
@media (max-width:767px){
  body.hz-native-shell.hz-page-premium main>section.grid.lg\:grid-cols-3{
    display:none!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-comparison{
    display:block!important;
    margin-top:18px!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-tabs{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:4px!important;
    padding:4px!important;
    border:1px solid var(--hz-border,var(--border))!important;
    border-radius:15px!important;
    background:var(--surface);
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-tabs button{
    min-height:44px!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:var(--text-secondary);
    font-weight:900!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-tabs button.active{
    background:var(--surface);
    color:var(--accent-strong);
    box-shadow:var(--shadow-soft);
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-swipe-hint{
    margin:10px 4px 14px!important;
    text-align:center!important;
    color:var(--text-secondary);
    font-size:11px!important;
    line-height:1.45!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-card{
    display:none!important;
    padding:20px!important;
    min-height:0!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-card.active{
    display:block!important;
    animation:hz-plan-in .18s ease-out both!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-kicker{
    color:var(--accent-strong);
    font-size:10px!important;
    font-weight:950!important;
    letter-spacing:.14em!important;
    margin-bottom:8px!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-promise{
    color:var(--text-secondary);
    font-size:13px!important;
    line-height:1.55!important;
    margin:12px 0 10px!important;
  }
  body.hz-native-shell.hz-page-premium .hz-mobile-plan-cta{
    margin-top:16px!important;
    min-height:50px!important;
  }
  body.hz-native-shell.hz-page-premium section.card:has(#mobilePlanComparison){
    padding:16px!important;
    margin-top:20px!important;
  }
  body.hz-native-shell.hz-page-premium section.card:has(#mobilePlanComparison)>div.text-center h2{
    font-size:24px!important;
  }
}
@keyframes hz-plan-in{
  from{opacity:.55;transform:translateX(8px)}
  to{opacity:1;transform:translateX(0)}
}