/* Codex-owned Mythox app redesign overlay. Keeps app behavior intact. */
:root{
  --font-display:"Geist",system-ui,sans-serif!important;
  --font-body:"Geist",system-ui,sans-serif!important;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace!important;
  /* tokens copied verbatim from the website (mythox.ai) so the app matches it exactly */
  --bg:#0A0B0D!important; --surface:#15161A!important; --surface-2:#1C1E22!important; --surface-3:#24262B!important;
  --text:#ECEDEF!important; --muted:rgba(236,237,239,.55)!important; --border:rgba(255,255,255,.09)!important;
  --accent:#FAFAFA!important; --accent-2:#B7B8BD!important; --glow:rgba(255,255,255,.16)!important; --ink-on-accent:#0A0A0B!important;
  --radius:12px!important; --radius-lg:22px!important;
  --max:1040px!important;
}
html,body{background:var(--bg)!important;color:var(--text)!important;font-family:var(--font-body)!important;letter-spacing:-.01em!important;}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--page-glow),var(--bg)!important;}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}
.bars,.reis-sign,.kicker::before{color:var(--accent)!important;text-shadow:none!important;}
/* Left sidebar uses the website's top nav-bar recipe (copied from .nav-inner on mythox.ai). */
.sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 75%,transparent),color-mix(in srgb,var(--bg) 75%,transparent))!important;border-right:1px solid var(--border)!important;backdrop-filter:blur(14px) saturate(1.25)!important;-webkit-backdrop-filter:blur(14px) saturate(1.25)!important;box-shadow:0 14px 44px rgba(0,0,0,.4)!important;}
.sb-brand,.brand .mark{font-family:var(--mono)!important;font-weight:400!important;letter-spacing:-.02em!important;}
.nav a,.sb-settings,.btn,.btn-gold,.btn-oauth,button,input,select,textarea{font-family:var(--font-body)!important;}
.nav a{border-radius:9px!important;color:var(--muted)!important;border:1px solid transparent!important;transition:background .2s,border-color .2s,color .2s!important;transform:none!important;}
.nav a:hover,.nav a.active,.sb-settings:hover,.sb-settings.active{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.085)!important;color:var(--text)!important;transform:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;}
.nav .nav-zone,.kicker,.mono,.sb-ver,.sb-credits-lab,.sync-dot,.price-kicker{font-family:var(--mono)!important;font-weight:300!important;letter-spacing:.075em!important;text-transform:uppercase!important;}
.content{max-width:1040px!important;margin:0 auto!important;padding:clamp(18px,2.2vw,28px) clamp(18px,2.8vw,34px) 104px!important;}
.view-head h1,h1,h2,h3{font-family:var(--font-display)!important;font-weight:440!important;letter-spacing:-.045em!important;line-height:1.02!important;}
/* Page titles use the website hero recipe: Georgia serif + the chrome --h1-grad gradient
   (the "chrome white that pops"). Copied from .hero h1 + .grad on mythox.ai. */
.view-head h1{font-size:clamp(31px,3.4vw,52px)!important;font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.055em!important;line-height:1.08!important;background:var(--h1-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;filter:drop-shadow(var(--h1-shadow))!important;}
/* Boxes copied VERBATIM from the website's .card (mythox.ai): flat, a subtle token
   gradient, a thin border, NO base shadow and NO inset glow. The shadow only appears on
   hover. This is the clean website card look (not the heavy 3D visual-frame). */
.card,.panel,.metric-card,.dash-card,.module-card,.login-card,.upgrade-card,.settings-card,.sp-card,.task-card,.finance-card,.journal-card,.system-card{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 70%,transparent),transparent)!important;border:1px solid var(--border)!important;border-radius:14px!important;box-shadow:none!important;}
.card:hover,.module-card:hover,.sp-card:hover,.task-card:hover,.system-card:hover{transform:translateY(-4px)!important;border-color:color-mix(in srgb,var(--accent) 40%,var(--border))!important;box-shadow:0 18px 50px rgba(0,0,0,.3)!important;}
.btn-gold,.lead-form button,.cta-primary,.nav-cta{background:var(--accent)!important;color:var(--ink-on-accent)!important;border:0!important;border-radius:999px!important;box-shadow:none!important;}
.btn,.btn-oauth,input,textarea,select{border-radius:10px!important;border:1px solid rgba(255,255,255,.085)!important;background:rgba(255,255,255,.035)!important;color:var(--text)!important;box-shadow:none!important;}
.login-screen{background:radial-gradient(760px 420px at 50% 0%,rgba(255,255,255,.055),transparent 58%),#08090B!important;}
/* Light mode: the login background was hardcoded dark (#08090B), so light-mode dark text
   sat on a dark page = invisible. Give it the light background so it switches with the mode. */
[data-mode="light"] .login-screen{background:radial-gradient(760px 420px at 50% 0%,rgba(0,0,0,.035),transparent 58%),#FAFAF9!important;}
.login-card{max-width:420px!important;padding:30px!important;}
.appbar{background:rgba(10,11,13,.68)!important;border-bottom:1px solid rgba(255,255,255,.075)!important;backdrop-filter:blur(18px) saturate(1.1)!important;}
.app-back{border-radius:999px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.085)!important;color:var(--text)!important;}
.avatar{background:rgba(255,255,255,.055)!important;color:var(--accent)!important;border:1px solid rgba(255,255,255,.085)!important;}
.toast{background:rgba(18,19,23,.86)!important;border:1px solid rgba(255,255,255,.085)!important;backdrop-filter:blur(18px) saturate(1.1)!important;}
.table,.data-table,table{border-color:rgba(255,255,255,.075)!important;} th{font-family:var(--mono)!important;font-weight:300!important;letter-spacing:.075em!important;text-transform:uppercase!important;color:var(--dim)!important;} td{color:var(--text)!important;}
@media(max-width:820px){.sidebar{box-shadow:22px 0 70px rgba(0,0,0,.42)!important}.view-head h1{font-size:36px!important}}

/* Mythox V4 home pass: scoped to the app home screen only. */
.mythox-v4-home{max-width:min(1180px,100%)!important;margin:0 auto!important;}
.mythox-v4-home #ai-main{max-width:min(880px,100%)!important;}
.mythox-v4-home .ai-hero{padding:clamp(18px,5vh,54px) 0 0!important;text-align:center!important;}
.midas-home-shell{
  position:relative!important;
  padding:34px clamp(20px,4vw,38px) 26px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:22px!important;
  background:
    radial-gradient(520px 260px at 50% -8%,rgba(255,255,255,.10),transparent 62%),
    linear-gradient(180deg,rgba(23,24,29,.82),rgba(9,10,12,.72))!important;
  box-shadow:0 28px 92px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07)!important;
  overflow:hidden!important;
  backdrop-filter:blur(18px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
}
.midas-home-shell::before{
  content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)!important;
  transform:translateY(86px)!important;height:1px!important;
}
.midas-home-orb{
  width:74px!important;height:74px!important;margin:0 auto 16px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.14),rgba(255,255,255,.045) 52%,rgba(0,0,0,.12))!important;
  box-shadow:0 0 38px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.midas-trident-mark{
  display:block!important;width:44px!important;height:44px!important;
  background:url("trident-mark-dark.png") center/contain no-repeat!important;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.22))!important;
}
[data-mode="light"] .midas-trident-mark{background-image:url("trident-mark-light.png")!important;}
.midas-home-eyebrow{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;
  margin:0 0 18px!important;padding-bottom:13px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
  font-family:var(--mono)!important;font-size:10px!important;font-weight:300!important;letter-spacing:.075em!important;text-transform:uppercase!important;color:var(--muted)!important;
}
.midas-home-eyebrow span:first-child{color:var(--text)!important;}
.mythox-v4-home .ai-hello{
  max-width:760px!important;margin:0 auto 10px!important;
  font-family:var(--font-display)!important;font-size:clamp(36px,4.15vw,58px)!important;
  font-weight:500!important;line-height:.98!important;letter-spacing:-.058em!important;
  color:var(--accent)!important;text-wrap:balance!important;
}
.mythox-v4-home .ai-sub{
  max-width:600px!important;margin:0 auto 24px!important;
  color:rgba(236,237,239,.58)!important;font-size:15px!important;line-height:1.55!important;letter-spacing:-.012em!important;
}
.mythox-v4-home .ai-composer{
  max-width:720px!important;margin:0 auto!important;border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.032))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 46px rgba(0,0,0,.24)!important;
}
.mythox-v4-home .ai-composer.focus{border-color:rgba(255,255,255,.32)!important;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 56px rgba(0,0,0,.35),0 0 36px var(--glow)!important;}
.mythox-v4-home .ai-composer textarea{font-size:14.5px!important;padding:16px 17px 8px!important;color:var(--text)!important;}
.mythox-v4-home .ai-model,.mythox-v4-home .ai-attach-btn{
  background:rgba(255,255,255,.052)!important;border-color:rgba(255,255,255,.10)!important;border-radius:12px!important;color:var(--muted)!important;
}
.mythox-v4-home .ai-model:hover,.mythox-v4-home .ai-attach-btn:hover{border-color:rgba(255,255,255,.28)!important;color:var(--text)!important;box-shadow:0 0 24px rgba(255,255,255,.08)!important;}
.mythox-v4-home .ai-send{background:var(--accent)!important;color:var(--ink-on-accent)!important;border:0!important;border-radius:13px!important;}
.mythox-v4-home .ai-chips{justify-content:center!important;margin-top:14px!important;}
.mythox-v4-home .ai-chip{
  background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.10)!important;border-radius:13px!important;
  color:rgba(236,237,239,.76)!important;font-size:13px!important;padding:9px 13px!important;
}
.mythox-v4-home .ai-chip:hover{color:var(--text)!important;border-color:rgba(255,255,255,.26)!important;box-shadow:0 12px 34px rgba(0,0,0,.22),0 0 24px var(--glow)!important;}
.mythox-v4-home .ai-chip .ci{color:var(--text)!important;}
.mythox-v4-home .ai-dash{margin-top:28px!important;}
.mythox-v4-home .ai-dash-head{
  margin:0!important;padding:15px 18px!important;border:1px solid rgba(255,255,255,.09)!important;border-bottom:0!important;
  border-radius:18px 18px 0 0!important;
  background:linear-gradient(180deg,rgba(23,24,29,.78),rgba(13,14,17,.70))!important;
  cursor:pointer!important;
}
.mythox-v4-home .ai-dash-head h2{
  font-size:19px!important;font-weight:500!important;letter-spacing:-.035em!important;line-height:1.1!important;
}
.mythox-v4-home .ai-dash-head .toggle{
  font-family:var(--mono)!important;font-weight:300!important;font-size:9px!important;letter-spacing:.075em!important;
  border-color:rgba(255,255,255,.10)!important;background:rgba(255,255,255,.035)!important;color:var(--muted)!important;
}
.mythox-v4-home .ai-dash-body{
  padding:18px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:0 0 18px 18px!important;
  background:linear-gradient(180deg,rgba(12,13,16,.72),rgba(8,9,11,.82))!important;
  box-shadow:0 26px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.mythox-v4-home .cc-setup,.mythox-v4-home .card{
  border-radius:16px!important;background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.027))!important;
  border:1px solid rgba(255,255,255,.10)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.mythox-v4-home .cc-tiles > div{
  background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:14px!important;
  padding:15px 16px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.mythox-v4-home .link-card-ic{
  width:32px!important;height:32px!important;border-radius:50%!important;color:var(--text)!important;
  background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.12)!important;
}
[data-mode="light"] .midas-home-shell{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(250,250,249,.72))!important;border-color:rgba(0,0,0,.09)!important;box-shadow:0 28px 92px rgba(0,0,0,.09),inset 0 1px 0 rgba(255,255,255,.76)!important;}
[data-mode="light"] .midas-home-eyebrow{border-bottom-color:rgba(0,0,0,.08)!important;}
[data-mode="light"] .mythox-v4-home .ai-sub{color:rgba(10,10,11,.58)!important;}
[data-mode="light"] .mythox-v4-home .ai-composer,
[data-mode="light"] .mythox-v4-home .ai-chip,
[data-mode="light"] .mythox-v4-home .ai-model,
[data-mode="light"] .mythox-v4-home .ai-attach-btn,
[data-mode="light"] .mythox-v4-home .cc-tiles > div{background:rgba(0,0,0,.035)!important;border-color:rgba(0,0,0,.09)!important;}
@media(max-width:760px){
  .midas-home-shell{padding:24px 16px 20px!important;border-radius:18px!important;}
  .midas-home-eyebrow{font-size:9px!important;align-items:flex-start!important;}
  .midas-home-orb{width:62px!important;height:62px!important;}
  .midas-trident-mark{width:36px!important;height:36px!important;}
  .mythox-v4-home .ai-hello{font-size:clamp(31px,10vw,42px)!important;}
  .mythox-v4-home .ai-sub{font-size:13.5px!important;}
  .mythox-v4-home .ai-dash-body{padding:14px!important;}
}

/* Mythox V4 home refinement: make the copied app home match the website more closely. */
body:has(.mythox-v4-home) .sidebar{
  background:linear-gradient(180deg,rgba(13,14,17,.76),rgba(8,9,11,.82))!important;
  border-right:1px solid rgba(255,255,255,.075)!important;
  box-shadow:10px 0 46px rgba(0,0,0,.18)!important;
}
body:has(.mythox-v4-home) .sidebar .nav{gap:1px!important;}
body:has(.mythox-v4-home) .sb-brand,
body:has(.mythox-v4-home) .brand{
  gap:8px!important;
}
body:has(.mythox-v4-home) .sb-brand .bars,
body:has(.mythox-v4-home) .brand .bars{
  font-family:var(--mono)!important;
  font-size:18px!important;
  font-weight:300!important;
  letter-spacing:-.08em!important;
  color:rgba(236,237,239,.9)!important;
  text-shadow:none!important;
}
body:has(.mythox-v4-home) .sb-brand .mark,
body:has(.mythox-v4-home) .brand .mark{
  position:relative!important;
  display:inline-block!important;
  width:68px!important;
  font-size:0!important;
}
body:has(.mythox-v4-home) .sb-brand .mark::before,
body:has(.mythox-v4-home) .brand .mark::before{
  content:"Mythox"!important;
  font-family:var(--mono)!important;
  font-size:15px!important;
  font-weight:400!important;
  letter-spacing:-.02em!important;
  color:rgba(236,237,239,.92)!important;
}
body:has(.mythox-v4-home) .sb-ver{display:none!important;}
body:has(.mythox-v4-home) .nav a,
body:has(.mythox-v4-home) .sb-settings{
  min-height:34px!important;
  padding:7px 10px!important;
  border-radius:9px!important;
  font-size:13px!important;
  font-weight:400!important;
  letter-spacing:-.012em!important;
  color:rgba(236,237,239,.54)!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
body:has(.mythox-v4-home) .nav a:hover,
body:has(.mythox-v4-home) .nav a.active,
body:has(.mythox-v4-home) .sb-settings:hover,
body:has(.mythox-v4-home) .sb-settings.active{
  color:rgba(236,237,239,.88)!important;
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.085)!important;
  transform:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body:has(.mythox-v4-home) .sidebar .nav a .ic{
  width:16px!important;
  height:16px!important;
  opacity:.62!important;
  color:currentColor!important;
  stroke-width:1.45!important;
}
body:has(.mythox-v4-home) .sidebar .nav a[href="#home"] .ic{
  width:17px!important;
  height:17px!important;
  opacity:.82!important;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.08))!important;
}
body:has(.mythox-v4-home) .sidebar .nav a.active .ic,
body:has(.mythox-v4-home) .sidebar .nav a:hover .ic{opacity:.82!important;}
body:has(.mythox-v4-home) .sidebar .nav .nav-zone{
  font-size:9px!important;
  letter-spacing:.12em!important;
  padding:12px 10px 6px!important;
  color:rgba(236,237,239,.42)!important;
}
body:has(.mythox-v4-home) #reis-theme-toggle,
body:has(.mythox-v4-home) #reis-mode-toggle,
body:has(.mythox-v4-home) #reis-money-toggle,
body:has(.mythox-v4-home) #reis-credits-toggle,
body:has(.mythox-v4-home) #reis-feedback-toggle,
body:has(.mythox-v4-home) #ai-dock-fab,
body:has(.mythox-v4-home) #mythox-fb-btn{
  width:34px!important;
  height:34px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.105)!important;
  background:rgba(14,15,18,.64)!important;
  color:rgba(236,237,239,.82)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(16px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.15)!important;
  transform:none!important;
}
body:has(.mythox-v4-home) #reis-theme-toggle:hover,
body:has(.mythox-v4-home) #reis-mode-toggle:hover,
body:has(.mythox-v4-home) #reis-money-toggle:hover,
body:has(.mythox-v4-home) #reis-credits-toggle:hover,
body:has(.mythox-v4-home) #reis-feedback-toggle:hover,
body:has(.mythox-v4-home) #ai-dock-fab:hover,
body:has(.mythox-v4-home) #mythox-fb-btn:hover{
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 30px rgba(0,0,0,.22)!important;
  transform:none!important;
}
body:has(.mythox-v4-home) #reis-theme-toggle{
  font-family:var(--mono)!important;
  font-size:12px!important;
  font-weight:300!important;
  letter-spacing:-.08em!important;
  text-shadow:none!important;
}
body:has(.mythox-v4-home) #ai-dock-fab .ai-dock-fab-glyph{
  font-family:var(--mono)!important;
  font-size:13px!important;
  font-weight:300!important;
  letter-spacing:-.08em!important;
  text-shadow:none!important;
}
body:has(.mythox-v4-home) #ai-dock-fab .ai-dock-fab-spark{display:none!important;}
.mythox-v4-home #ai-main{max-width:min(940px,100%)!important;}
.mythox-v4-home .ai-hero{padding:clamp(14px,3.6vh,36px) 0 0!important;}
.mythox-v4-home .midas-home-shell{
  padding:28px clamp(18px,3.4vw,32px) 22px!important;
  border-radius:24px!important;
  border-color:var(--border)!important;
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 68%, transparent), color-mix(in srgb,var(--bg) 88%, transparent))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.025),0 34px 110px rgba(0,0,0,.28)!important;
}
.mythox-v4-home .midas-home-shell::before{opacity:.68!important;transform:translateY(78px)!important;}
.mythox-v4-home .midas-home-orb{
  width:60px!important;
  height:60px!important;
  margin-bottom:14px!important;
  border-color:rgba(255,255,255,.105)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.026))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065)!important;
}
.mythox-v4-home .midas-trident-mark{
  width:38px!important;
  height:38px!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.12))!important;
}
.mythox-v4-home .midas-home-eyebrow{
  margin-bottom:16px!important;
  padding-bottom:11px!important;
  border-bottom-color:rgba(255,255,255,.07)!important;
  font-size:9px!important;
}
.mythox-v4-home .ai-hello{
  max-width:660px!important;
  font-size:clamp(31px,3.35vw,45px)!important;
  font-weight:430!important;
  letter-spacing:-.052em!important;
  line-height:1.02!important;
}
.mythox-v4-home .ai-sub{
  max-width:560px!important;
  margin-bottom:20px!important;
  font-size:13.5px!important;
  line-height:1.5!important;
  color:rgba(236,237,239,.52)!important;
}
.mythox-v4-home .ai-composer{
  max-width:650px!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.024))!important;
  border-color:rgba(255,255,255,.095)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.052),0 12px 34px rgba(0,0,0,.18)!important;
}
.mythox-v4-home .ai-composer.focus{
  border-color:rgba(255,255,255,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 38px rgba(0,0,0,.22)!important;
}
.mythox-v4-home .ai-composer textarea{
  font-size:13.5px!important;
  min-height:76px!important;
  padding:14px 15px 6px!important;
}
.mythox-v4-home .ai-toolbar{padding:6px 8px 8px!important;}
.mythox-v4-home .ai-attach-btn,
.mythox-v4-home .ai-model{
  height:32px!important;
  min-width:32px!important;
  border-radius:10px!important;
  box-shadow:none!important;
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.085)!important;
}
.mythox-v4-home .ai-attach-btn{
  font-size:0!important;
  color:rgba(236,237,239,.72)!important;
}
.mythox-v4-home #ai-attach::before{
  content:"+"!important;
  font-family:var(--mono)!important;
  font-size:14px!important;
  font-weight:300!important;
}
/* Folder button now uses a real inline SVG folder icon (in ai-chat.js), so the
   old "//" pseudo-glyph is gone. font-size:0 on .ai-attach-btn only hides text,
   not the SVG, so the icon shows here too. */
.mythox-v4-home #ai-folder-btn .ai-folder-ic{
  width:15px!important;
  height:15px!important;
}
.mythox-v4-home .ai-model{
  padding:0 10px!important;
  font-family:var(--mono)!important;
  font-size:9px!important;
  font-weight:300!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
}
.mythox-v4-home .ai-model .mdot{
  width:4px!important;
  height:4px!important;
  background:rgba(236,237,239,.62)!important;
  box-shadow:none!important;
}
.mythox-v4-home .ai-send{
  width:32px!important;
  height:32px!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.mythox-v4-home .ai-send:hover{
  transform:none!important;
  box-shadow:none!important;
}
.mythox-v4-home .ai-chips{gap:7px!important;margin-top:12px!important;flex-wrap:nowrap!important;}
.mythox-v4-home .ai-chip{
  padding:7px 10px!important;
  border-radius:10px!important;
  font-size:12px!important;
  white-space:nowrap!important;
  color:rgba(236,237,239,.62)!important;
  background:rgba(255,255,255,.032)!important;
  border-color:rgba(255,255,255,.078)!important;
  box-shadow:none!important;
}
.mythox-v4-home .ai-chip:hover{
  transform:none!important;
  color:rgba(236,237,239,.86)!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:none!important;
}
.mythox-v4-home .ai-chip .ci{
  display:inline-grid!important;
  place-items:center!important;
  width:5px!important;
  height:5px!important;
  margin-right:7px!important;
  border-radius:50%!important;
  background:rgba(236,237,239,.72)!important;
  color:transparent!important;
  font-size:0!important;
}
.mythox-v4-home .ai-dash{margin-top:22px!important;}
.mythox-v4-home .ai-dash-head{
  padding:13px 16px!important;
  border-radius:15px 15px 0 0!important;
  background:linear-gradient(180deg,rgba(20,21,25,.66),rgba(11,12,14,.62))!important;
}
.mythox-v4-home .ai-dash-head h2{
  font-size:17px!important;
  font-weight:440!important;
  letter-spacing:-.032em!important;
}
.mythox-v4-home .ai-dash-body{
  padding:16px!important;
  border-radius:0 0 15px 15px!important;
  box-shadow:0 18px 54px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
[data-mode="light"] body:has(.mythox-v4-home) .sidebar{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(246,246,244,.86))!important;
  border-right-color:rgba(0,0,0,.07)!important;
  box-shadow:10px 0 42px rgba(0,0,0,.055)!important;
}
[data-mode="light"] body:has(.mythox-v4-home) .nav a,
[data-mode="light"] body:has(.mythox-v4-home) .sb-settings{color:rgba(15,15,16,.54)!important;}
[data-mode="light"] body:has(.mythox-v4-home) .sb-brand .bars,
[data-mode="light"] body:has(.mythox-v4-home) .brand .bars,
[data-mode="light"] body:has(.mythox-v4-home) .sb-brand .mark::before,
[data-mode="light"] body:has(.mythox-v4-home) .brand .mark::before{color:rgba(14,14,15,.9)!important;}
[data-mode="light"] body:has(.mythox-v4-home) .nav a:hover,
[data-mode="light"] body:has(.mythox-v4-home) .nav a.active,
[data-mode="light"] body:has(.mythox-v4-home) .sb-settings:hover,
[data-mode="light"] body:has(.mythox-v4-home) .sb-settings.active{
  color:rgba(15,15,16,.84)!important;
  background:rgba(0,0,0,.035)!important;
  border-color:rgba(0,0,0,.075)!important;
}
[data-mode="light"] body:has(.mythox-v4-home) #reis-theme-toggle,
[data-mode="light"] body:has(.mythox-v4-home) #reis-mode-toggle,
[data-mode="light"] body:has(.mythox-v4-home) #reis-money-toggle,
[data-mode="light"] body:has(.mythox-v4-home) #reis-credits-toggle,
[data-mode="light"] body:has(.mythox-v4-home) #reis-feedback-toggle,
[data-mode="light"] body:has(.mythox-v4-home) #ai-dock-fab,
[data-mode="light"] body:has(.mythox-v4-home) #mythox-fb-btn{
  background:rgba(255,255,255,.70)!important;
  border-color:rgba(0,0,0,.10)!important;
  color:rgba(14,14,15,.82)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 10px 24px rgba(0,0,0,.08)!important;
}
[data-mode="light"] .mythox-v4-home .midas-home-shell{
  background:#FFFFFF!important;
  border-color:rgba(0,0,0,.085)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.7)!important;
}
[data-mode="light"] .mythox-v4-home .midas-home-orb,
[data-mode="light"] .mythox-v4-home .ai-composer,
[data-mode="light"] .mythox-v4-home .ai-chip,
[data-mode="light"] .mythox-v4-home .ai-attach-btn,
[data-mode="light"] .mythox-v4-home .ai-model{
  background:rgba(0,0,0,.025)!important;
  border-color:rgba(0,0,0,.075)!important;
}
[data-mode="light"] .mythox-v4-home .ai-sub{color:rgba(12,12,13,.52)!important;}
@media(max-width:760px){
  body:has(.mythox-v4-home) #ai-dock-fab,
  body:has(.mythox-v4-home) #mythox-fb-btn,
  body:has(.mythox-v4-home) #reis-theme-toggle,
  body:has(.mythox-v4-home) #reis-mode-toggle,
  body:has(.mythox-v4-home) #reis-money-toggle,
  body:has(.mythox-v4-home) #reis-credits-toggle,
  body:has(.mythox-v4-home) #reis-feedback-toggle{width:32px!important;height:32px!important;}
  .mythox-v4-home .ai-hello{font-size:clamp(28px,8.8vw,38px)!important;}
  .mythox-v4-home .ai-sub{font-size:13px!important;}
  .mythox-v4-home .midas-home-shell{padding:22px 15px 18px!important;}
}

/* Mythox V4 app-wide pass: extend the approved home language to every copied app route. */
.app-shell{background:transparent!important;}
.content > #module-container{width:100%!important;}
.view-head,
.page-head,
.module-head,
.section-head,
.cos-head,
.sp-head,
.builder-head,
.finance-head,
.task-head,
.journal-head{
  margin-bottom:18px!important;
}
.view-head .kicker,
.page-head .kicker,
.module-head .kicker,
.eyebrow,
.label,
.muted-label,
.card-kicker,
.card-label,
.field span,
.calc-label,
.stat-label,
.appr-name,
.rv-hero .kicker,
.ai-dock-title,
.modal-kicker{
  font-family:var(--mono)!important;
  font-size:10px!important;
  font-weight:300!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  color:rgba(236,237,239,.48)!important;
}
.view-head h1,
.page-head h1,
.module-head h1,
.section-head h1,
.cos-head h1,
.sp-head h1,
.builder-head h1,
.finance-head h1,
.task-head h1,
.journal-head h1{
  max-width:900px!important;
  margin:6px 0 8px!important;
  font-size:clamp(31px,3.25vw,50px)!important;
  font-weight:430!important;
  letter-spacing:-.048em!important;
  line-height:1.02!important;
}
.view-head .sub,
.page-head .sub,
.module-head .sub,
.section-head .sub,
.cos-head .sub,
.sp-head .sub,
.builder-head .sub,
.finance-head .sub,
.task-head .sub,
.journal-head .sub,
.muted,
.card-subtitle,
.subtle,
.hint,
.desc,
.small{
  color:rgba(236,237,239,.54)!important;
  font-weight:400!important;
}
.view-head .sub,
.page-head .sub,
.module-head .sub,
.section-head .sub{
  max-width:720px!important;
  font-family:var(--font-body)!important;
  font-size:14px!important;
  line-height:1.55!important;
  letter-spacing:-.012em!important;
  text-transform:none!important;
}
.card,
.panel,
.module-card,
.settings-card,
.upgrade-card,
.metric-card,
.dash-card,
.sp-card,
.task-card,
.finance-card,
.journal-card,
.system-card,
.cc-setup,
.rv-hero,
.rv-sec,
.fos-modal,
.modal,
.dialog,
.sheet,
.drawer,
.popover,
.ai-dock-pop,
#ai-dock-panel,
#money-pop .mp-card,
.date-popover,
.tab-intro,
.onb-card,
.guided-card,
.explain-card,
.mfa-card,
.memory-card,
.bill-card,
.roadmap-card,
.notif-card,
.feedback-card,
.community-card{
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  background:linear-gradient(180deg,rgba(19,20,24,.74),rgba(8,9,11,.70))!important;
  box-shadow:0 18px 54px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045)!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
}
.card:hover,
.module-card:hover,
.settings-card:hover,
.sp-card:hover,
.task-card:hover,
.finance-card:hover,
.journal-card:hover,
.system-card:hover,
.community-card:hover{
  transform:none!important;
  border-color:rgba(255,255,255,.155)!important;
  box-shadow:0 20px 58px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.card-title,
.module-card h3,
.metric-title,
.dash-title,
.task-title,
.journal-title,
.system-title,
.sp-title,
.rv-sec h2,
.rv-hero h1,
.settings-card h2,
.upgrade-card h2,
.bill-card h2,
.modal h2,
.drawer h2{
  font-family:var(--font-display)!important;
  font-size:clamp(18px,1.7vw,25px)!important;
  font-weight:440!important;
  letter-spacing:-.04em!important;
  line-height:1.08!important;
  color:var(--text)!important;
}
.card-subtitle,
.module-card p,
.metric-sub,
.dash-sub,
.task-card p,
.journal-card p,
.system-card p,
.sp-card p,
.rv-sec p,
.settings-card p,
.upgrade-card p,
.bill-card p,
.modal p,
.drawer p{
  font-size:13.5px!important;
  line-height:1.5!important;
  letter-spacing:-.012em!important;
}
.btn,
.btn-gold,
.btn-ghost,
.btn-oauth,
.btn-sm,
.lead-form button,
.rv-start-btn,
.tab,
.pill,
.chip,
.badge,
.period-toggle button,
.view-toggle button,
.chart-type-toggle button,
.chart-opts label,
.appr-mode,
.ai-dock-send,
.ai-dock-attach,
.ai-dock-model,
.ai-dock-close,
.ai-dock-help,
.guided-btn,
.onb-btn,
.date-btn{
  border-radius:999px!important;
  font-family:var(--font-body)!important;
  font-weight:450!important;
  letter-spacing:-.012em!important;
  box-shadow:none!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease!important;
}
.btn,
.btn-ghost,
.btn-oauth,
.btn-sm,
.tab,
.pill,
.chip,
.period-toggle button,
.view-toggle button,
.chart-type-toggle button,
.chart-opts label,
.appr-mode,
.ai-dock-attach,
.ai-dock-model,
.ai-dock-close,
.ai-dock-help,
.date-btn{
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.085)!important;
  color:rgba(236,237,239,.72)!important;
}
.btn:hover,
.btn-ghost:hover,
.btn-oauth:hover,
.btn-sm:hover,
.tab:hover,
.pill:hover,
.chip:hover,
.period-toggle button:hover,
.view-toggle button:hover,
.chart-type-toggle button:hover,
.chart-opts label:hover,
.appr-mode:hover,
.ai-dock-attach:hover,
.ai-dock-model:hover,
.ai-dock-close:hover,
.ai-dock-help:hover,
.date-btn:hover{
  transform:none!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.17)!important;
  color:var(--text)!important;
}
.btn-gold,
.lead-form button,
.cta-primary,
.nav-cta,
.rv-start-btn,
.guided-btn.primary,
.onb-btn.primary,
.ai-dock-send{
  background:var(--accent)!important;
  border:1px solid var(--accent)!important;
  color:var(--ink-on-accent)!important;
  box-shadow:none!important;
}
.btn-gold:hover,
.lead-form button:hover,
.cta-primary:hover,
.nav-cta:hover,
.rv-start-btn:hover,
.guided-btn.primary:hover,
.onb-btn.primary:hover,
.ai-dock-send:hover{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--ink-on-accent)!important;   /* keep the dark ink on hover so the label never vanishes */
  filter:brightness(1.05)!important;
  box-shadow:0 10px 30px var(--glow)!important;   /* the little glow Reis wanted */
  transform:translateY(-1px)!important;
}
.badge,
.nav-tier,
.pill,
.chip{
  font-family:var(--mono)!important;
  font-size:9px!important;
  font-weight:300!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
}
input,
textarea,
select,
.field input,
.field textarea,
.calc-inp,
.filter-inp,
.rv-in,
.rv-ta,
.ai-dock-supta,
#ai-dock-input{
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  background:rgba(255,255,255,.035)!important;
  color:var(--text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  outline:none!important;
}
input:focus,
textarea:focus,
select:focus,
.field input:focus,
.field textarea:focus,
.calc-inp:focus,
.filter-inp:focus,
.rv-in:focus,
.rv-ta:focus,
#ai-dock-input:focus{
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 0 0 1px rgba(255,255,255,.08)!important;
}
input::placeholder,
textarea::placeholder{color:rgba(236,237,239,.34)!important;}
input[type="range"]{accent-color:#F5F5F5!important;}
input[type="checkbox"],
input[type="radio"]{accent-color:#F5F5F5!important;}
.tabs,
.tabbar,
.view-toggle,
.period-toggle,
.chart-type-toggle,
.segmented,
.filters-bar,
.toolbar,
.action-row{
  gap:8px!important;
}
.tab.active,
.tab.sel,
.pill.active,
.chip.active,
.period-toggle button.active,
.view-toggle button.active,
.chart-type-toggle button.active,
.appr-mode.sel,
.chart-opts label.active{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(255,255,255,.92)!important;
  color:#090A0C!important;
  box-shadow:none!important;
}
.tbl-wrap,
.table-wrap,
.data-table,
table{
  border-radius:14px!important;
  border-color:rgba(255,255,255,.075)!important;
  overflow:hidden!important;
}
table,
.data-table{
  background:rgba(255,255,255,.018)!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
thead,
thead tr,
table th{
  background:rgba(255,255,255,.032)!important;
}
th{
  font-size:9px!important;
  font-family:var(--mono)!important;
  font-weight:300!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  color:rgba(236,237,239,.44)!important;
}
td{
  font-size:13px!important;
  border-color:rgba(255,255,255,.06)!important;
}
tr:hover td{background:rgba(255,255,255,.025)!important;}
.stat-cell,
.metric,
.metric-card,
.score-card,
.month-tile,
.list-row,
.row-card,
.item-card,
.task-row,
.journal-row,
.system-row,
.rv-check,
.cig,
.form-row,
.cc-tiles > div{
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:rgba(255,255,255,.026)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.stat-value,
.metric-value,
.score-value,
.big-num,
.money,
.price{
  font-family:var(--font-display)!important;
  font-weight:430!important;
  letter-spacing:-.045em!important;
  color:var(--text)!important;
}
.progress,
.progress-bar,
.sb-credits-bar,
.bar,
.meter{
  background:rgba(255,255,255,.07)!important;
  border-radius:999px!important;
  overflow:hidden!important;
}
.progress i,
.progress-bar i,
.sb-credits-bar i,
.bar i,
.meter i,
.fill{
  background:#F5F5F5!important;
  box-shadow:none!important;
}
.modal-bg,
.overlay,
.drawer-backdrop,
.fos-modal-bg,
.guided-backdrop,
.onb-backdrop,
.prog-overlay,
#mythox-fb-overlay{
  background:rgba(4,5,6,.64)!important;
  backdrop-filter:blur(12px) saturate(1.05)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.05)!important;
}
#ai-dock-panel{
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(19,20,24,.88),rgba(8,9,11,.84))!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
#ai-dock-panel .ai-dock-head{
  border-bottom:1px solid rgba(255,255,255,.075)!important;
}
#ai-dock-panel .ai-msg,
#ai-dock-panel .ai-dock-msg,
.ai-dock-msg{
  border-radius:14px!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.075)!important;
}
/* Keep the user's OWN message text fully readable (it was reading dim against the dark bubble). */
html:not([data-mode="light"]) #ai-dock-panel .ai-dock-msg.me,
html:not([data-mode="light"]) .ai-msg.user .ai-bubble{ color:rgba(237,238,240,.96)!important; }
[data-mode="light"] #ai-dock-panel .ai-dock-msg.me,
[data-mode="light"] .ai-msg.user .ai-bubble{ color:rgba(14,14,15,.92)!important; }
#ai-dock-panel .ai-dock-row,
#ai-dock-panel .ai-dock-compose{
  border-top:1px solid rgba(255,255,255,.075)!important;
}
.app-back{
  min-height:34px!important;
  padding:0 14px!important;
  font-size:13px!important;
}
.sb-foot{
  border-top:1px solid rgba(255,255,255,.07)!important;
}
.sb-credits,
.sb-progress,
.sb-notifs,
.sb-user{
  border-radius:12px!important;
  border-color:rgba(255,255,255,.075)!important;
  background:rgba(255,255,255,.026)!important;
}
.sb-user .btn,
#logout-btn{
  min-height:30px!important;
  padding:0 12px!important;
  font-size:12px!important;
}
.ic,
svg.ic{
  stroke-width:1.45!important;
}
.empty,
.empty-state,
.placeholder,
.skeleton{
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018))!important;
  color:rgba(236,237,239,.46)!important;
}
.app-shell .sb-brand,
.app-shell .brand{
  gap:8px!important;
}
.app-shell .sb-brand .bars,
.app-shell .brand .bars{
  font-family:var(--mono)!important;
  font-size:18px!important;
  font-weight:300!important;
  letter-spacing:-.08em!important;
  color:rgba(236,237,239,.9)!important;
  text-shadow:none!important;
}
.app-shell .sb-brand .mark,
.app-shell .brand .mark{
  position:relative!important;
  display:inline-block!important;
  width:68px!important;
  font-size:0!important;
}
.app-shell .sb-brand .mark::before,
.app-shell .brand .mark::before{
  content:"Mythox"!important;
  font-family:var(--mono)!important;
  font-size:15px!important;
  font-weight:400!important;
  letter-spacing:-.02em!important;
  color:rgba(236,237,239,.92)!important;
}
.app-shell .sb-ver{display:none!important;}
#reis-theme-toggle,
#reis-mode-toggle,
#reis-money-toggle,
#reis-credits-toggle,
#reis-feedback-toggle,
#ai-dock-fab,
#mythox-fb-btn{
  width:34px!important;
  height:34px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.105)!important;
  background:rgba(14,15,18,.64)!important;
  color:rgba(236,237,239,.82)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(16px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.15)!important;
  transform:none!important;
}
#reis-theme-toggle:hover,
#reis-mode-toggle:hover,
#reis-money-toggle:hover,
#reis-credits-toggle:hover,
#reis-feedback-toggle:hover,
#ai-dock-fab:hover,
#mythox-fb-btn:hover{
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 30px rgba(0,0,0,.22)!important;
  transform:none!important;
}
#reis-theme-toggle,
#ai-dock-fab .ai-dock-fab-glyph{
  font-family:var(--mono)!important;
  font-size:13px!important;
  font-weight:300!important;
  letter-spacing:-.08em!important;
  text-shadow:none!important;
}
#ai-dock-fab .ai-dock-fab-spark{display:none!important;}
[data-mode="light"] body{
  background:#FAFAF9!important;
  color:#101113!important;
}
[data-mode="light"] body::before{
  background:radial-gradient(900px 620px at 72% 4%,rgba(0,0,0,.028),transparent 58%),radial-gradient(900px 720px at 18% 98%,rgba(0,0,0,.022),transparent 60%),#FAFAF9!important;
}
[data-mode="light"] .sidebar,
[data-mode="light"] .appbar{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(246,246,244,.86))!important;
  border-color:rgba(0,0,0,.075)!important;
  box-shadow:10px 0 42px rgba(0,0,0,.055)!important;
}
[data-mode="light"] .app-shell .sb-brand .bars,
[data-mode="light"] .app-shell .brand .bars,
[data-mode="light"] .app-shell .sb-brand .mark::before,
[data-mode="light"] .app-shell .brand .mark::before{
  color:rgba(14,14,15,.9)!important;
}
[data-mode="light"] #reis-theme-toggle,
[data-mode="light"] #reis-mode-toggle,
[data-mode="light"] #reis-money-toggle,
[data-mode="light"] #reis-credits-toggle,
[data-mode="light"] #reis-feedback-toggle,
[data-mode="light"] #ai-dock-fab,
[data-mode="light"] #mythox-fb-btn{
  background:rgba(255,255,255,.70)!important;
  border-color:rgba(0,0,0,.10)!important;
  color:rgba(14,14,15,.82)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 10px 24px rgba(0,0,0,.08)!important;
}
[data-mode="light"] .card,
[data-mode="light"] .panel,
[data-mode="light"] .module-card,
[data-mode="light"] .settings-card,
[data-mode="light"] .upgrade-card,
[data-mode="light"] .metric-card,
[data-mode="light"] .dash-card,
[data-mode="light"] .sp-card,
[data-mode="light"] .task-card,
[data-mode="light"] .finance-card,
[data-mode="light"] .journal-card,
[data-mode="light"] .system-card,
[data-mode="light"] .cc-setup,
[data-mode="light"] .rv-hero,
[data-mode="light"] .rv-sec,
[data-mode="light"] .fos-modal,
[data-mode="light"] .modal,
[data-mode="light"] .dialog,
[data-mode="light"] .sheet,
[data-mode="light"] .drawer,
[data-mode="light"] .popover,
[data-mode="light"] #ai-dock-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(250,250,249,.72))!important;
  border-color:rgba(0,0,0,.075)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.065),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
[data-mode="light"] .btn,
[data-mode="light"] .btn-ghost,
[data-mode="light"] .btn-oauth,
[data-mode="light"] .tab,
[data-mode="light"] .pill,
[data-mode="light"] .chip,
[data-mode="light"] input,
[data-mode="light"] textarea,
[data-mode="light"] select,
[data-mode="light"] .stat-cell,
[data-mode="light"] .metric,
[data-mode="light"] .score-card,
[data-mode="light"] .month-tile,
[data-mode="light"] .list-row,
[data-mode="light"] .row-card,
[data-mode="light"] .item-card,
[data-mode="light"] .task-row,
[data-mode="light"] .journal-row,
[data-mode="light"] .system-row,
[data-mode="light"] .cig{
  background:rgba(0,0,0,.025)!important;
  border-color:rgba(0,0,0,.075)!important;
  color:#101113!important;
}
[data-mode="light"] .muted,
[data-mode="light"] .card-subtitle,
[data-mode="light"] .subtle,
[data-mode="light"] .hint,
[data-mode="light"] .desc,
[data-mode="light"] .small,
[data-mode="light"] .view-head .sub,
[data-mode="light"] .page-head .sub,
[data-mode="light"] .module-head .sub{
  color:rgba(12,12,13,.55)!important;
}
[data-mode="light"] .view-head .kicker,
[data-mode="light"] .page-head .kicker,
[data-mode="light"] .module-head .kicker,
[data-mode="light"] .eyebrow,
[data-mode="light"] .label,
[data-mode="light"] .muted-label,
[data-mode="light"] .card-kicker,
[data-mode="light"] .card-label,
[data-mode="light"] .field span,
[data-mode="light"] .calc-label,
[data-mode="light"] .stat-label{
  color:rgba(12,12,13,.48)!important;
}
[data-mode="light"] .btn-gold,
[data-mode="light"] .lead-form button,
[data-mode="light"] .cta-primary,
[data-mode="light"] .nav-cta,
[data-mode="light"] .rv-start-btn,
[data-mode="light"] .ai-dock-send{
  background:#090A0C!important;
  border-color:#090A0C!important;
  color:#FAFAF9!important;
}
@media(max-width:760px){
  .view-head h1,
  .page-head h1,
  .module-head h1,
  .section-head h1{font-size:34px!important;}
  .content{padding:16px 14px 76px!important;}
  .card,
  .panel,
  .module-card,
  .settings-card,
  .sp-card,
  .task-card,
  .finance-card,
  .journal-card,
  .system-card{border-radius:14px!important;}
}

/* Mythox V4 palette lock: website-matched black/white theme for the app.
   Keep semantic colors available for money, status, warnings, and charts. */
:root,
[data-theme],
[data-theme="green"],
[data-theme="blue"],
[data-theme="mono"],
[data-theme="yellow"]{
  --font-display:"Geist",system-ui,sans-serif!important;
  --font-body:"Geist",system-ui,sans-serif!important;
  --sans:"Geist",system-ui,sans-serif!important;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace!important;
  --bg:#0A0B0D!important;
  --surface:#15161A!important;
  --surface-2:#1C1E22!important;
  --surface-3:#24262B!important;
  --border:rgba(255,255,255,.09)!important;
  --text:#ECEDEF!important;
  --muted:rgba(236,237,239,.55)!important;
  --accent:#FAFAFA!important;
  --accent-2:#B7B8BD!important;
  --glow:rgba(255,255,255,.16)!important;
  --ink-on-accent:#0A0A0B!important;
  --gold:var(--accent)!important;
  --gold-2:var(--accent-2)!important;
  --gold-ink:var(--ink-on-accent)!important;
  --gold-glow:var(--glow)!important;
  --gold-soft:rgba(255,255,255,.075)!important;
  --gold-line:rgba(255,255,255,.16)!important;
  --ink:var(--bg)!important;
  --ink-2:var(--surface)!important;
  --graphite:var(--surface-2)!important;
  --graphite-2:var(--surface-3)!important;
  --ivory:var(--text)!important;
  --ivory-soft:rgba(242,242,240,.82)!important;
  --dim:rgba(242,242,240,.42)!important;
  --line:var(--border)!important;
  --line-2:rgba(255,255,255,.13)!important;
  --topbar-bg:rgba(10,11,13,.74)!important;
  --surface-grad-2:rgba(13,14,17,.78)!important;
  --btn-bg-2:rgba(255,255,255,.035)!important;
  --btn-bg-2h:rgba(255,255,255,.055)!important;
  --bg-lift:none!important;
}

html,
body{
  background:#0A0B0D!important;
  color:var(--text)!important;
  font-family:var(--font-body)!important;
}
body::before{
  background:
    radial-gradient(900px 620px at 72% 4%,rgba(255,255,255,.034),transparent 58%),
    radial-gradient(900px 720px at 18% 98%,rgba(255,255,255,.024),transparent 60%),
    #0A0B0D!important;
}
.sidebar,
.appbar{
  background:linear-gradient(180deg,rgba(13,14,17,.78),rgba(10,11,13,.86))!important;
  border-color:rgba(255,255,255,.075)!important;
}
body:has(.mythox-v4-home) .sidebar,
body:has(.mythox-v4-home) .appbar{
  background:linear-gradient(180deg,rgba(13,14,17,.78),rgba(10,11,13,.86))!important;
  border-color:rgba(255,255,255,.075)!important;
}
.mythox-v4-home .midas-home-shell{
  background:
    radial-gradient(520px 260px at 50% -8%,rgba(255,255,255,.10),transparent 62%),
    linear-gradient(180deg,rgba(17,18,22,.82),rgba(10,11,13,.72))!important;
}
.mythox-v4-home .ai-composer,
.mythox-v4-home .ai-chip,
.mythox-v4-home .ai-model,
.mythox-v4-home .ai-attach-btn,
.mythox-v4-home .cc-tiles > div{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.10)!important;
}
.card,
.panel,
.module-card,
.login-card,
.upgrade-card,
.settings-card,
.metric-card,
.dash-card,
.sp-card,
.task-card,
.finance-card,
.journal-card,
.system-card,
.cc-setup,
.rv-hero,
.rv-sec,
.fos-modal,
.modal,
.dialog,
.sheet,
.drawer,
.popover,
#ai-dock-panel{
  background:linear-gradient(180deg,rgba(17,18,22,.76),rgba(10,11,13,.72))!important;
  border-color:rgba(255,255,255,.085)!important;
}
.btn,
.btn-ghost,
.btn-oauth,
.tab,
.pill,
.chip,
input,
textarea,
select,
.stat-cell,
.metric,
.score-card,
.month-tile,
.list-row,
.row-card,
.item-card,
.task-row,
.journal-row,
.system-row,
.cig{
  background:rgba(255,255,255,.028)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:var(--text)!important;
}
.btn-gold,
.lead-form button,
.cta-primary,
.nav-cta,
.rv-start-btn,
.ai-dock-send{
  background:#F5F5F5!important;
  border-color:#F5F5F5!important;
  color:#090A0C!important;
}
.bars,
.reis-sign,
.kicker::before,
.nav a.active .ic,
.sb-settings.active .ic{
  color:var(--text)!important;
  text-shadow:none!important;
}
.empty,
.empty-state,
.placeholder,
.skeleton{
  background:linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.016))!important;
  border-color:rgba(255,255,255,.075)!important;
  color:rgba(242,242,240,.46)!important;
}

[data-mode="light"],
[data-mode="light"][data-theme],
[data-mode="light"][data-theme="green"],
[data-mode="light"][data-theme="blue"],
[data-mode="light"][data-theme="mono"],
[data-mode="light"][data-theme="yellow"]{
  --bg:#FAFAF9!important;
  --surface:#FFFFFF!important;
  --surface-2:#F3F3F1!important;
  --surface-3:#EDEDEA!important;
  --border:rgba(0,0,0,.085)!important;
  --text:#101113!important;
  --muted:rgba(16,17,19,.56)!important;
  --accent:#090A0C!important;
  --accent-2:#6E7076!important;
  --glow:rgba(0,0,0,.12)!important;
  --ink-on-accent:#FAFAF9!important;
  --gold:var(--accent)!important;
  --gold-2:var(--accent-2)!important;
  --gold-ink:var(--ink-on-accent)!important;
  --gold-glow:var(--glow)!important;
  --gold-soft:rgba(0,0,0,.055)!important;
  --gold-line:rgba(0,0,0,.14)!important;
  --ink:var(--bg)!important;
  --ink-2:var(--surface)!important;
  --graphite:var(--surface-2)!important;
  --graphite-2:var(--surface-3)!important;
  --ivory:var(--text)!important;
  --ivory-soft:rgba(16,17,19,.78)!important;
  --dim:rgba(16,17,19,.44)!important;
  --line:var(--border)!important;
  --line-2:rgba(0,0,0,.12)!important;
  --topbar-bg:rgba(250,250,249,.74)!important;
  --surface-grad-2:rgba(255,255,255,.78)!important;
  --btn-bg-2:rgba(0,0,0,.035)!important;
  --btn-bg-2h:rgba(0,0,0,.055)!important;
  --bg-lift:none!important;
}
[data-mode="light"] html,
[data-mode="light"] body,
html[data-mode="light"],
html[data-mode="light"] body{
  background:#FAFAF9!important;
  color:var(--text)!important;
}
[data-mode="light"] body::before,
html[data-mode="light"] body::before{
  background:
    radial-gradient(900px 620px at 72% 4%,rgba(0,0,0,.028),transparent 58%),
    radial-gradient(900px 720px at 18% 98%,rgba(0,0,0,.022),transparent 60%),
    #FAFAF9!important;
}

/* Preserve meaningful finance/status colors after the monochrome app lock. */
#finance-root .pos,
#finance-root .txn-amount-neg,
#finance-root .rev-col,
#finance-root .stat-value[style*="var(--green)"],
#finance-root [style*="color:var(--green)"],
#finance-root [style*="color: var(--green)"],
.stat-value[style*="var(--green)"],
[style*="color:var(--green)"],
[style*="color: var(--green)"],
.success,
.positive,
.ok{
  color:var(--green)!important;
}
#finance-root .neg,
#finance-root .txn-amount-pos,
#finance-root .exp-col,
#finance-root .stat-value[style*="var(--red)"],
#finance-root [style*="color:var(--red)"],
#finance-root [style*="color: var(--red)"],
.stat-value[style*="var(--red)"],
[style*="color:var(--red)"],
[style*="color: var(--red)"],
.danger,
.negative,
.bad{
  color:var(--red)!important;
}
#finance-root .stat-value[style*="var(--blue)"],
#finance-root [style*="color:var(--blue)"],
#finance-root [style*="color: var(--blue)"],
.stat-value[style*="var(--blue)"],
[style*="color:var(--blue)"],
[style*="color: var(--blue)"]{
  color:var(--blue)!important;
}
#finance-root .stat-value[style*="var(--gold)"],
#finance-root [style*="color:var(--gold)"],
#finance-root [style*="color: var(--gold)"],
#finance-root .gld{
  color:var(--text)!important;
}

/* Sollo-inspired flat app pass: remove exaggerated 3D depth while keeping
   Mythox V4 black/white glass and semantic money/status colors intact. */
:root{
  --flat-surface:rgba(255,255,255,.028)!important;
  --flat-surface-strong:rgba(255,255,255,.045)!important;
  --flat-border:rgba(255,255,255,.09)!important;
  --flat-border-hover:rgba(255,255,255,.16)!important;
  --flat-inset:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html,
body{
  background:#0A0B0D!important;
}
body::before{
  background:#0A0B0D!important;
}
body::after{
  opacity:.014!important;
}
.sidebar,
.appbar,
body:has(.mythox-v4-home) .sidebar,
body:has(.mythox-v4-home) .appbar{
  background:rgba(10,11,13,.86)!important;
  box-shadow:none!important;
  backdrop-filter:blur(14px) saturate(1.04)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.04)!important;
}
.card,
.panel,
.module-card,
.login-card,
.upgrade-card,
.settings-card,
.metric-card,
.dash-card,
.sp-card,
.task-card,
.finance-card,
.journal-card,
.system-card,
.cc-setup,
.rv-hero,
.rv-sec,
.fos-modal,
.modal,
.dialog,
.sheet,
.drawer,
.popover,
#ai-dock-panel,
.toast,
.stat-cell,
.metric,
.score-card,
.month-tile,
.list-row,
.row-card,
.item-card,
.task-row,
.journal-row,
.system-row,
.cig,
.form-row,
.cc-tiles > div,
.empty,
.empty-state,
.placeholder,
.skeleton{
  background:var(--flat-surface)!important;
  background-image:none!important;
  border-color:var(--flat-border)!important;
  box-shadow:var(--flat-inset)!important;
  filter:none!important;
  transform:none!important;
}
.card:hover,
.panel:hover,
.module-card:hover,
.settings-card:hover,
.upgrade-card:hover,
.metric-card:hover,
.dash-card:hover,
.sp-card:hover,
.task-card:hover,
.finance-card:hover,
.journal-card:hover,
.system-card:hover,
.stat-cell:hover,
.metric:hover,
.score-card:hover,
.month-tile:hover,
.list-row:hover,
.row-card:hover,
.item-card:hover,
.task-row:hover,
.journal-row:hover,
.system-row:hover{
  background:var(--flat-surface-strong)!important;
  border-color:var(--flat-border-hover)!important;
  box-shadow:var(--flat-inset)!important;
  transform:none!important;
}
.btn,
.btn-ghost,
.btn-oauth,
.tab,
.pill,
.chip,
input,
textarea,
select,
.nav a,
.sb-settings,
#reis-theme-toggle,
#reis-mode-toggle,
#reis-money-toggle,
#reis-credits-toggle,
#reis-feedback-toggle,
#ai-dock-fab,
#mythox-fb-btn,
.app-back,
.avatar{
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
.btn:hover,
.btn-ghost:hover,
.btn-oauth:hover,
.tab:hover,
.pill:hover,
.chip:hover,
.nav a:hover,
.nav a.active,
.sb-settings:hover,
.sb-settings.active,
#reis-theme-toggle:hover,
#reis-mode-toggle:hover,
#reis-money-toggle:hover,
#ai-dock-fab:hover,
#mythox-fb-btn:hover{
  box-shadow:none!important;
  transform:none!important;
}
.midas-home-shell,
.mythox-v4-home .midas-home-shell{
  background:rgba(255,255,255,.025)!important;
  background-image:none!important;
  box-shadow:var(--flat-inset)!important;
  border-color:var(--flat-border)!important;
  backdrop-filter:blur(12px) saturate(1.04)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.04)!important;
}
.midas-home-shell::before,
.mythox-v4-home .midas-home-shell::before{
  background:rgba(255,255,255,.07)!important;
  transform:none!important;
  opacity:.7!important;
}
.midas-home-orb,
.mythox-v4-home .midas-home-orb{
  background:rgba(255,255,255,.035)!important;
  background-image:none!important;
  box-shadow:none!important;
  border-color:rgba(255,255,255,.11)!important;
}
.midas-trident-mark,
.mythox-v4-home .midas-trident-mark,
.nav .ic,
.sb-settings .ic,
svg.ic{
  filter:none!important;
  text-shadow:none!important;
}
.mythox-v4-home .ai-composer,
.mythox-v4-home .ai-composer.focus,
.mythox-v4-home .ai-chip,
.mythox-v4-home .ai-model,
.mythox-v4-home .ai-attach-btn,
.mythox-v4-home .ai-dash-head,
.mythox-v4-home .ai-dash-body,
.mythox-v4-home .cc-card,
.mythox-v4-home .cc-tiles > div,
.mythox-v4-home .ai-empty{
  background:var(--flat-surface)!important;
  background-image:none!important;
  box-shadow:var(--flat-inset)!important;
  border-color:var(--flat-border)!important;
  transform:none!important;
  filter:none!important;
}
.mythox-v4-home .ai-chip:hover,
.mythox-v4-home .ai-model:hover,
.mythox-v4-home .ai-attach-btn:hover,
.mythox-v4-home .cc-card:hover,
.mythox-v4-home .cc-tiles > div:hover{
  background:var(--flat-surface-strong)!important;
  border-color:var(--flat-border-hover)!important;
  box-shadow:var(--flat-inset)!important;
  transform:none!important;
}
.progress,
.progress-bar,
.sb-credits-bar,
.bar,
.meter{
  box-shadow:none!important;
}
.progress i,
.progress-bar i,
.sb-credits-bar i,
.bar i,
.meter i,
.fill{
  box-shadow:none!important;
  filter:none!important;
}
.modal-bg,
.overlay,
.drawer-backdrop,
.fos-modal-bg,
.guided-backdrop,
.onb-backdrop,
.prog-overlay{
  backdrop-filter:blur(10px) saturate(1.02)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.02)!important;
}
[data-mode="light"]{
  --flat-surface:rgba(0,0,0,.022)!important;
  --flat-surface-strong:rgba(0,0,0,.036)!important;
  --flat-border:rgba(0,0,0,.085)!important;
  --flat-border-hover:rgba(0,0,0,.15)!important;
  --flat-inset:inset 0 1px 0 rgba(255,255,255,.56)!important;
}
[data-mode="light"] html,
[data-mode="light"] body,
html[data-mode="light"],
html[data-mode="light"] body{
  background:#FAFAF9!important;
}
[data-mode="light"] body::before,
html[data-mode="light"] body::before{
  background:#FAFAF9!important;
}
[data-mode="light"] .sidebar,
[data-mode="light"] .appbar,
[data-mode="light"] body:has(.mythox-v4-home) .sidebar,
[data-mode="light"] body:has(.mythox-v4-home) .appbar{
  background:rgba(250,250,249,.86)!important;
  box-shadow:none!important;
}

/* Sollo sidebar + flat depth refinement.
   Keep the Mythox black/white language, but remove the remaining faux-3D lift
   and make the rail behave like a quiet product sidebar instead of clipping. */
:root{
  --app-sidebar-w:272px;
  --app-rail-bg:rgba(10,11,13,.94);
  --app-rail-line:rgba(255,255,255,.085);
  --app-control-bg:rgba(255,255,255,.026);
  --app-control-bg-hover:rgba(255,255,255,.048);
}

#reis-bgfx,
.viz-particles{
  display:none!important;
}

.app-shell{
  align-items:stretch!important;
}

.sidebar{
  width:var(--app-sidebar-w)!important;
  flex:0 0 var(--app-sidebar-w)!important;
  height:100svh!important;
  min-height:0!important;
  padding:18px 12px 14px!important;
  overflow:hidden!important;
  background:var(--app-rail-bg)!important;
  border-right:1px solid var(--app-rail-line)!important;
  box-shadow:none!important;
  backdrop-filter:blur(12px) saturate(1.02)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.02)!important;
}

.content{
  min-width:0!important;
  width:100%!important;
  max-width:1040px!important;
  margin:0 auto!important;
  padding:30px clamp(22px,3vw,34px) 80px!important;
}

.sb-brand{
  flex:0 0 auto!important;
  height:38px!important;
  margin:0 4px 10px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
}

.sb-brand .mark,
.brand .mark{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.sidebar .nav{
  flex:1 1 auto!important;
  min-height:0!important;
  gap:2px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 4px 0 0!important;
  margin:0 -4px 0 0!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(255,255,255,.18) transparent!important;
}

.sidebar .nav::-webkit-scrollbar{width:4px!important;}
.sidebar .nav::-webkit-scrollbar-track{background:transparent!important;}
.sidebar .nav::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18)!important;
  border-radius:999px!important;
}

.sidebar .nav .nav-zone{
  min-height:30px!important;
  padding:8px 8px 6px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer!important;
}

.sidebar .nav .nav-zone span{
  font-family:var(--mono)!important;
  font-size:9.5px!important;
  font-weight:300!important;
  letter-spacing:.095em!important;
  color:rgba(242,242,240,.42)!important;
}

.sidebar .nav .nav-zone:hover span{
  color:rgba(242,242,240,.66)!important;
}

.sidebar .nav .nav-chev{
  opacity:.42!important;
  width:12px!important;
  height:12px!important;
}

.sidebar .nav a,
.sb-settings{
  min-height:36px!important;
  padding:8px 9px!important;
  gap:10px!important;
  border-radius:8px!important;
  background:transparent!important;
  border:1px solid transparent!important;
  color:rgba(242,242,240,.56)!important;
  box-shadow:none!important;
  transform:none!important;
}

.sidebar .nav a:hover,
.sidebar .nav a.active,
.sb-settings:hover,
.sb-settings.active{
  background:var(--app-control-bg-hover)!important;
  border-color:rgba(255,255,255,.075)!important;
  color:rgba(242,242,240,.9)!important;
  box-shadow:none!important;
  transform:none!important;
}

.sidebar .nav a .ic,
.sb-settings .ic{
  width:17px!important;
  height:17px!important;
  opacity:.62!important;
  filter:none!important;
}

.sidebar .nav a:hover .ic,
.sidebar .nav a.active .ic,
.sb-settings:hover .ic,
.sb-settings.active .ic{
  opacity:.88!important;
}

.sidebar .nav a .nav-label{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:13px!important;
  line-height:1.1!important;
}

.sidebar .nav a .nav-tier{
  flex:0 0 auto!important;
  margin-left:6px!important;
  padding:3px 6px!important;
  border-radius:999px!important;
  font-size:8px!important;
  font-weight:500!important;
  letter-spacing:.085em!important;
}

.sb-foot{
  flex:0 0 auto!important;
  gap:8px!important;
  margin:10px 0 0!important;
  padding:10px 4px 0!important;
  border-top:1px solid rgba(255,255,255,.075)!important;
  min-width:0!important;
}

.sb-settings,
.sb-notifs,
.sb-progress,
.sb-credits{
  width:100%!important;
  min-width:0!important;
  border-radius:8px!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

.sb-notifs,
.sb-progress,
.sb-credits{
  padding:8px 9px!important;
}

.sb-credits-top,
.sb-progress-sub,
.sb-notifs-sub{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Account row: avatar, status dot, then the gear + Log out pushed to the right, one line. */
.sb-user{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:10px!important;
  background:var(--app-control-bg)!important;
  min-width:0!important;
}

.sb-user .avatar{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  flex:0 0 auto!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.075)!important;
}

.sb-user .sync-dot{ flex:0 0 auto!important; }

.sb-user .sb-gear{ margin-left:auto!important; flex:0 0 auto!important; }

.sb-user .btn{
  flex:0 0 auto!important;
  width:auto!important;
  justify-content:center!important;
  min-height:30px!important;
  margin:0!important;
  padding:0 12px!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:none!important;
}

.card,
.panel,
.module-card,
.settings-card,
.upgrade-card,
.metric-card,
.dash-card,
.sp-card,
.task-card,
.finance-card,
.journal-card,
.system-card,
.cc-setup,
.rv-hero,
.rv-sec,
.fos-modal,
.modal,
.dialog,
.sheet,
.drawer,
.popover,
#ai-dock-panel,
.prog-panel,
.tab-intro,
.onb-card,
.guided-card,
.explain-card,
.mfa-card,
.memory-card,
.bill-card,
.roadmap-card,
.notif-card,
.feedback-card,
.community-card{
  background:rgba(255,255,255,.026)!important;
  background-image:none!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.024)!important;
  filter:none!important;
  transform:none!important;
}

.card:hover,
.panel:hover,
.module-card:hover,
.settings-card:hover,
.upgrade-card:hover,
.metric-card:hover,
.dash-card:hover,
.sp-card:hover,
.task-card:hover,
.finance-card:hover,
.journal-card:hover,
.system-card:hover{
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.026)!important;
  transform:none!important;
}

.btn,
.btn-gold,
.btn-ghost,
.btn-oauth,
.btn-sm,
.tab,
.pill,
.chip,
.badge,
.period-toggle button,
.view-toggle button,
.chart-type-toggle button,
.appr-mode,
.appbar-burger,
.app-back,
#reis-theme-toggle,
#reis-mode-toggle,
#reis-money-toggle,
#reis-credits-toggle,
#reis-feedback-toggle,
#ai-dock-fab,
#mythox-fb-btn{
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}

[data-mode="light"]{
  --app-rail-bg:rgba(250,250,249,.94);
  --app-rail-line:rgba(0,0,0,.085);
  --app-control-bg:rgba(0,0,0,.024);
  --app-control-bg-hover:rgba(0,0,0,.045);
}

[data-mode="light"] .sidebar{
  background:var(--app-rail-bg)!important;
  border-right-color:var(--app-rail-line)!important;
}

[data-mode="light"] .sidebar .nav .nav-zone span{
  color:rgba(16,17,19,.44)!important;
}

[data-mode="light"] .sidebar .nav a,
[data-mode="light"] .sb-settings{
  color:rgba(16,17,19,.58)!important;
}

[data-mode="light"] .sidebar .nav a:hover,
[data-mode="light"] .sidebar .nav a.active,
[data-mode="light"] .sb-settings:hover,
[data-mode="light"] .sb-settings.active{
  background:var(--app-control-bg-hover)!important;
  border-color:rgba(0,0,0,.075)!important;
  color:rgba(16,17,19,.9)!important;
}

[data-mode="light"] .sb-user{
  background:var(--app-control-bg)!important;
  border-color:rgba(0,0,0,.075)!important;
}

[data-mode="light"] .card,
[data-mode="light"] .panel,
[data-mode="light"] .module-card,
[data-mode="light"] .settings-card,
[data-mode="light"] .upgrade-card,
[data-mode="light"] .metric-card,
[data-mode="light"] .dash-card,
[data-mode="light"] .sp-card,
[data-mode="light"] .task-card,
[data-mode="light"] .finance-card,
[data-mode="light"] .journal-card,
[data-mode="light"] .system-card,
[data-mode="light"] .cc-setup,
[data-mode="light"] .rv-hero,
[data-mode="light"] .rv-sec,
[data-mode="light"] .fos-modal,
[data-mode="light"] .modal,
[data-mode="light"] .dialog,
[data-mode="light"] .sheet,
[data-mode="light"] .drawer,
[data-mode="light"] .popover,
[data-mode="light"] #ai-dock-panel{
  background:rgba(0,0,0,.022)!important;
  border-color:rgba(0,0,0,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.56)!important;
}

@media (max-width:900px){
  .app-shell{flex-direction:column!important;}
  .content{
    max-width:100%!important;
    padding:16px 12px 150px!important;
  }
  .sidebar{
    width:min(86vw,312px)!important;
    flex:0 0 auto!important;
    padding:18px 12px 14px!important;
    overflow:hidden!important;
  }
  .sidebar.open{
    box-shadow:none!important;
  }
  .nav-backdrop{
    background:rgba(0,0,0,.48)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
  }
}

/* Mobile QA pass: keep the app on the same 1040px rail as the website and make
   touch surfaces readable in both premium dark and light modes. */
html[data-mode="light"] .mythox-v4-home .ai-chip{
  color:rgba(10,10,11,.76)!important;
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(0,0,0,.12)!important;
}
html[data-mode="light"] .mythox-v4-home .ai-chip .ci{
  color:rgba(10,10,11,.82)!important;
}
html[data-mode="light"] .mythox-v4-home .ai-chip:hover{
  color:rgba(10,10,11,.92)!important;
  border-color:rgba(0,0,0,.18)!important;
}
html[data-mode="light"] .mythox-v4-home .ai-attach-btn,
html[data-mode="light"] .mythox-v4-home .ai-model{
  color:rgba(10,10,11,.74)!important;
  background:rgba(255,255,255,.62)!important;
  border-color:rgba(0,0,0,.12)!important;
}
html[data-mode="light"] .mythox-v4-home .ai-attach-btn::before,
html[data-mode="light"] .mythox-v4-home .ai-model .caret{
  color:rgba(10,10,11,.78)!important;
}
@media (max-width:760px){
  .content{padding-inline:12px!important;}
  .view-head,.page-head,.module-head{margin-bottom:14px!important;}
  .mythox-v4-home{max-width:100%!important;}
  .mythox-v4-home #ai-main{max-width:100%!important;}
  .mythox-v4-home .ai-hero{padding-top:8px!important;}
  .mythox-v4-home .ai-hello{font-size:clamp(25px,8vw,32px)!important;line-height:1.02!important;}
  .mythox-v4-home .ai-sub{max-width:32ch!important;}
}

/* Sidebar clipping fix: scroll the rail as one Sollo-like surface instead of
   trapping only the nav list and hiding the lower account/status controls. */
.sidebar{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(255,255,255,.18) transparent!important;
}
.sidebar::-webkit-scrollbar{width:4px!important;}
.sidebar::-webkit-scrollbar-track{background:transparent!important;}
.sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18)!important;
  border-radius:999px!important;
}
.sidebar .nav{
  flex:0 0 auto!important;
  overflow:visible!important;
  min-height:auto!important;
  padding-right:0!important;
  margin-right:0!important;
}
.sb-foot{
  gap:6px!important;
}
.sb-progress,
.sb-credits,
.sb-notifs{
  padding:7px 8px!important;
}
.sb-user{
  padding:7px!important;
}

.link-card,
.card.link-card,
.mythox-v4-home .card.link-card,
.mythox-v4-home .link-card,
.cc-card,
.cc-setup,
.mythox-v4-home .cc-card,
.mythox-v4-home .cc-setup{
  background:rgba(255,255,255,.026)!important;
  background-image:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.024)!important;
  transform:none!important;
  filter:none!important;
}

/* Dark-mode hard flattening pass.
   The copied app still had 3D from older module-specific CSS loaded before this
   file: route heroes, builder cards, finance stats, task rows, onboarding, menus,
   and the animated background mesh. This layer intentionally removes that depth
   in dark mode only while leaving semantic red/green/blue value colors intact. */
html:not([data-mode="light"]),
html:not([data-mode="light"]).reis-bgfx-css{
  background:#0A0B0D!important;
  background-image:none!important;
  animation:none!important;
}

html:not([data-mode="light"]) body,
html:not([data-mode="light"]) body::before,
html:not([data-mode="light"]) body::after{
  background:#0A0B0D!important;
  background-image:none!important;
  animation:none!important;
}

html:not([data-mode="light"]) #reis-bgfx,
html:not([data-mode="light"]) .viz-particles,
html:not([data-mode="light"]) .midas-home-shell::after,
html:not([data-mode="light"]) .ai-dock-fab-spark{
  display:none!important;
}

html:not([data-mode="light"]) #app-shell *,
html:not([data-mode="light"]) #mobile-bottom-nav *,
html:not([data-mode="light"]) .appbar *,
html:not([data-mode="light"]) .sidebar *{
  box-shadow:none!important;
  text-shadow:none!important;
}

html:not([data-mode="light"]) .card,
html:not([data-mode="light"]) a.card,
html:not([data-mode="light"]) .panel,
html:not([data-mode="light"]) .module-card,
html:not([data-mode="light"]) .settings-card,
html:not([data-mode="light"]) .upgrade-card,
html:not([data-mode="light"]) .metric-card,
html:not([data-mode="light"]) .dash-card,
html:not([data-mode="light"]) .sp-card,
html:not([data-mode="light"]) .task-card,
html:not([data-mode="light"]) .finance-card,
html:not([data-mode="light"]) .journal-card,
html:not([data-mode="light"]) .system-card,
html:not([data-mode="light"]) .community-card,
html:not([data-mode="light"]) .roadmap-card,
html:not([data-mode="light"]) .memory-card,
html:not([data-mode="light"]) .bill-card,
html:not([data-mode="light"]) .mfa-card,
html:not([data-mode="light"]) .onb-card,
html:not([data-mode="light"]) .guided-card,
html:not([data-mode="light"]) .explain-card,
html:not([data-mode="light"]) .feedback-card,
html:not([data-mode="light"]) .notif-card,
html:not([data-mode="light"]) .rv-hero,
html:not([data-mode="light"]) .rv-sec,
html:not([data-mode="light"]) .rt-hero,
html:not([data-mode="light"]) .rt-card,
html:not([data-mode="light"]) .rt-test,
html:not([data-mode="light"]) .rt-template,
html:not([data-mode="light"]) .j-hero,
html:not([data-mode="light"]) .j-block,
html:not([data-mode="light"]) .j-entry,
html:not([data-mode="light"]) .j-tool,
html:not([data-mode="light"]) .j-syscard,
html:not([data-mode="light"]) .bk-card,
html:not([data-mode="light"]) .bk-stat,
html:not([data-mode="light"]) .bk-pill,
html:not([data-mode="light"]) .bk-confirm,
html:not([data-mode="light"]) .tk-hero,
html:not([data-mode="light"]) .tk-stat,
html:not([data-mode="light"]) .tk-item,
html:not([data-mode="light"]) .tk-pj-card,
html:not([data-mode="light"]) .tk-hub-row,
html:not([data-mode="light"]) .bld-hero,
html:not([data-mode="light"]) .bld-type,
html:not([data-mode="light"]) .bld-idea,
html:not([data-mode="light"]) .bld-panel,
html:not([data-mode="light"]) .bld-output,
html:not([data-mode="light"]) .bld-step,
html:not([data-mode="light"]) #finance-root .card,
html:not([data-mode="light"]) #finance-root .ov-stat,
html:not([data-mode="light"]) #finance-root .fos-modal,
html:not([data-mode="light"]) #finance-root .dropdown-menu,
html:not([data-mode="light"]) #finance-root .info-tip::before,
html:not([data-mode="light"]) .modal,
html:not([data-mode="light"]) .dialog,
html:not([data-mode="light"]) .drawer,
html:not([data-mode="light"]) .sheet,
html:not([data-mode="light"]) .popover,
html:not([data-mode="light"]) .dropdown-menu,
html:not([data-mode="light"]) .toast,
html:not([data-mode="light"]) #money-pop .mp-card,
html:not([data-mode="light"]) #cos-pop,
html:not([data-mode="light"]) #ai-dock-panel,
html:not([data-mode="light"]) .midas-home-shell,
html:not([data-mode="light"]) .midas-home-orb,
html:not([data-mode="light"]) .ai-composer,
html:not([data-mode="light"]) .ai-chip,
html:not([data-mode="light"]) .ai-model,
html:not([data-mode="light"]) .ai-attach-btn,
html:not([data-mode="light"]) .ai-dash-head,
html:not([data-mode="light"]) .ai-dash-body,
html:not([data-mode="light"]) .cc-setup,
html:not([data-mode="light"]) .cc-card,
html:not([data-mode="light"]) .link-card{
  background:rgba(255,255,255,.026)!important;
  background-image:none!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transform:none!important;
}
/* The block above zeroes border/shadow on .bld-type with !important, which was hiding the
   SELECTED state. Re-assert the gold highlight for the chosen build type / model / idea. */
html:not([data-mode="light"]) .bld-type.on,
html:not([data-mode="light"]) .bld-idea.on,
html[data-mode="light"] .bld-type.on,
html[data-mode="light"] .bld-idea.on{
  border-color:var(--gold)!important;
  box-shadow:0 0 0 1px var(--gold) inset!important;
}
/* Plan page "Recommended improvements": force a clean checkbox + text row (was rendering with a
   big gap and a staircase indent). Checkbox column then full-width text, top-aligned, left. */
.bld-notes{ display:flex!important; flex-direction:column!important; gap:10px!important; align-items:stretch!important; }
.bld-check{ display:grid!important; grid-template-columns:18px 1fr!important; gap:10px!important; align-items:start!important; text-align:left!important; margin:0!important; padding:0!important; }
.bld-check input[type="checkbox"]{ width:16px!important; height:16px!important; margin:2px 0 0!important; flex:none!important; accent-color:var(--gold)!important; }
.bld-check > span{ min-width:0!important; }

html:not([data-mode="light"]) .card:hover,
html:not([data-mode="light"]) a.card:hover,
html:not([data-mode="light"]) .panel:hover,
html:not([data-mode="light"]) .module-card:hover,
html:not([data-mode="light"]) .settings-card:hover,
html:not([data-mode="light"]) .metric-card:hover,
html:not([data-mode="light"]) .dash-card:hover,
html:not([data-mode="light"]) .sp-card:hover,
html:not([data-mode="light"]) .task-card:hover,
html:not([data-mode="light"]) .finance-card:hover,
html:not([data-mode="light"]) .journal-card:hover,
html:not([data-mode="light"]) .system-card:hover,
html:not([data-mode="light"]) .rt-template:hover,
html:not([data-mode="light"]) .bld-type:hover,
html:not([data-mode="light"]) .bld-idea:hover,
html:not([data-mode="light"]) .tk-item:hover,
html:not([data-mode="light"]) .tk-pj-card:hover,
html:not([data-mode="light"]) .tk-hub-row:hover,
html:not([data-mode="light"]) #finance-root .ov-stat:hover,
html:not([data-mode="light"]) #finance-root .card:hover{
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:none!important;
  transform:none!important;
}

html:not([data-mode="light"]) .btn,
html:not([data-mode="light"]) .btn-gold,
html:not([data-mode="light"]) .btn-ghost,
html:not([data-mode="light"]) .btn-oauth,
html:not([data-mode="light"]) .btn-sm,
html:not([data-mode="light"]) button,
html:not([data-mode="light"]) input,
html:not([data-mode="light"]) textarea,
html:not([data-mode="light"]) select,
html:not([data-mode="light"]) .tab,
html:not([data-mode="light"]) .pill,
html:not([data-mode="light"]) .chip,
html:not([data-mode="light"]) .badge,
html:not([data-mode="light"]) .period-toggle button,
html:not([data-mode="light"]) .view-toggle button,
html:not([data-mode="light"]) .chart-type-toggle button,
html:not([data-mode="light"]) .chart-opts label,
html:not([data-mode="light"]) .appr-mode,
html:not([data-mode="light"]) .cos-hbtn,
html:not([data-mode="light"]) .date-btn,
html:not([data-mode="light"]) .ai-dock-send,
html:not([data-mode="light"]) .ai-dock-attach,
html:not([data-mode="light"]) .ai-dock-model,
html:not([data-mode="light"]) #reis-theme-toggle,
html:not([data-mode="light"]) #reis-mode-toggle,
html:not([data-mode="light"]) #reis-money-toggle,
html:not([data-mode="light"]) #ai-dock-fab,
html:not([data-mode="light"]) #mythox-fb-btn{
  background-image:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transform:none!important;
  filter:none!important;
}

html:not([data-mode="light"]) input:focus,
html:not([data-mode="light"]) textarea:focus,
html:not([data-mode="light"]) select:focus,
html:not([data-mode="light"]) .rv-in:focus,
html:not([data-mode="light"]) .rt-in:focus,
html:not([data-mode="light"]) .fin-guided-input:focus,
html:not([data-mode="light"]) .bk-field select:focus,
html:not([data-mode="light"]) .bk-field input:focus,
html:not([data-mode="light"]) .tk-add input:focus,
html:not([data-mode="light"]) .tk-note-text:focus{
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:none!important;
}

html:not([data-mode="light"]) .progress i,
html:not([data-mode="light"]) .progress-bar i,
html:not([data-mode="light"]) .sb-credits-bar i,
html:not([data-mode="light"]) .bar i,
html:not([data-mode="light"]) .meter i,
html:not([data-mode="light"]) .fill,
html:not([data-mode="light"]) .tk-bar > span{
  background:#F5F5F5!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Put the finance/status colors back after the hard flattening. */
html:not([data-mode="light"]) #finance-root .pos,
html:not([data-mode="light"]) #finance-root .txn-amount-neg,
html:not([data-mode="light"]) #finance-root .rev-col,
html:not([data-mode="light"]) #finance-root [style*="var(--green)"],
html:not([data-mode="light"]) .success,
html:not([data-mode="light"]) .positive,
html:not([data-mode="light"]) .ok{
  color:var(--green)!important;
}
html:not([data-mode="light"]) #finance-root .neg,
html:not([data-mode="light"]) #finance-root .txn-amount-pos,
html:not([data-mode="light"]) #finance-root .exp-col,
html:not([data-mode="light"]) #finance-root [style*="var(--red)"],
html:not([data-mode="light"]) .danger,
html:not([data-mode="light"]) .negative,
html:not([data-mode="light"]) .bad{
  color:var(--red)!important;
}
html:not([data-mode="light"]) #finance-root [style*="var(--blue)"]{
  color:var(--blue)!important;
}

/* Light-mode Midas + popup flattening pass.
   This mirrors the dark-mode cleanup above. The remaining 3D was coming from
   Midas chat/guide, modal, menu, and dock styles that predate the V4 skin. */
html[data-mode="light"],
html[data-mode="light"].reis-bgfx-css,
html[data-mode="light"] body,
html[data-mode="light"] body::before,
html[data-mode="light"] body::after{
  background:#FAFAF9!important;
  background-image:none!important;
  animation:none!important;
}

html[data-mode="light"] #reis-bgfx,
html[data-mode="light"] #reis-bglift,
html[data-mode="light"] .viz-particles,
html[data-mode="light"] .midas-home-shell::after,
html[data-mode="light"] .ai-dock-fab-spark{
  display:none!important;
}

html[data-mode="light"] #app-shell *,
html[data-mode="light"] #mobile-bottom-nav *,
html[data-mode="light"] .appbar *,
html[data-mode="light"] .sidebar *{
  box-shadow:none!important;
  text-shadow:none!important;
}

html[data-mode="light"] .sidebar,
html[data-mode="light"] .appbar,
html[data-mode="light"] #mobile-bottom-nav{
  background:rgba(250,250,249,.90)!important;
  background-image:none!important;
  border-color:rgba(0,0,0,.075)!important;
  box-shadow:none!important;
}

html[data-mode="light"] .card,
html[data-mode="light"] a.card,
html[data-mode="light"] .panel,
html[data-mode="light"] .module-card,
html[data-mode="light"] .settings-card,
html[data-mode="light"] .upgrade-card,
html[data-mode="light"] .metric-card,
html[data-mode="light"] .dash-card,
html[data-mode="light"] .sp-card,
html[data-mode="light"] .task-card,
html[data-mode="light"] .finance-card,
html[data-mode="light"] .journal-card,
html[data-mode="light"] .system-card,
html[data-mode="light"] .community-card,
html[data-mode="light"] .roadmap-card,
html[data-mode="light"] .memory-card,
html[data-mode="light"] .bill-card,
html[data-mode="light"] .mfa-card,
html[data-mode="light"] .onb-card,
html[data-mode="light"] .guided-card,
html[data-mode="light"] .explain-card,
html[data-mode="light"] .feedback-card,
html[data-mode="light"] .notif-card,
html[data-mode="light"] .rv-hero,
html[data-mode="light"] .rv-sec,
html[data-mode="light"] .rt-hero,
html[data-mode="light"] .rt-card,
html[data-mode="light"] .rt-test,
html[data-mode="light"] .rt-template,
html[data-mode="light"] .j-hero,
html[data-mode="light"] .j-block,
html[data-mode="light"] .j-entry,
html[data-mode="light"] .j-tool,
html[data-mode="light"] .j-syscard,
html[data-mode="light"] .bk-card,
html[data-mode="light"] .bk-stat,
html[data-mode="light"] .bk-pill,
html[data-mode="light"] .bk-confirm,
html[data-mode="light"] .tk-hero,
html[data-mode="light"] .tk-stat,
html[data-mode="light"] .tk-item,
html[data-mode="light"] .tk-pj-card,
html[data-mode="light"] .tk-hub-row,
html[data-mode="light"] .bld-hero,
html[data-mode="light"] .bld-type,
html[data-mode="light"] .bld-idea,
html[data-mode="light"] .bld-panel,
html[data-mode="light"] .bld-output,
html[data-mode="light"] .bld-step,
html[data-mode="light"] #finance-root .card,
html[data-mode="light"] #finance-root .ov-stat,
html[data-mode="light"] #finance-root .fos-modal,
html[data-mode="light"] #finance-root .dropdown-menu,
html[data-mode="light"] #finance-root .info-tip::before,
html[data-mode="light"] .modal,
html[data-mode="light"] .dialog,
html[data-mode="light"] .drawer,
html[data-mode="light"] .sheet,
html[data-mode="light"] .popover,
html[data-mode="light"] .dropdown-menu,
html[data-mode="light"] .toast,
html[data-mode="light"] #money-pop .mp-card,
html[data-mode="light"] #cos-pop,
html[data-mode="light"] #ai-dock-panel,
html[data-mode="light"] #ai-dock-panel .ai-dock-suppop,
html[data-mode="light"] #ai-dock-model-menu,
html[data-mode="light"] #ai-main.chatting,
html[data-mode="light"] #ai-main.chatting .ai-thread,
html[data-mode="light"] #ai-main.chatting .ai-bubble,
html[data-mode="light"] #ai-main.chatting .ai-composer,
html[data-mode="light"] .midas-home-shell,
html[data-mode="light"] .midas-home-orb,
html[data-mode="light"] .ai-composer,
html[data-mode="light"] .ai-chip,
html[data-mode="light"] .ai-model,
html[data-mode="light"] .ai-model-menu,
html[data-mode="light"] .ai-attach-btn,
html[data-mode="light"] .ai-dash-head,
html[data-mode="light"] .ai-dash-body,
html[data-mode="light"] .cc-setup,
html[data-mode="light"] .cc-card,
html[data-mode="light"] .link-card{
  background:rgba(0,0,0,.022)!important;
  background-image:none!important;
  border-color:rgba(0,0,0,.085)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transform:none!important;
}

html[data-mode="light"] .midas-home-shell,
html[data-mode="light"] .mythox-v4-home .midas-home-shell,
html[data-mode="light"] #ai-main.chatting{
  background:rgba(255,255,255,.42)!important;
  background-image:none!important;
  border:1px solid rgba(0,0,0,.085)!important;
  box-shadow:none!important;
}

html[data-mode="light"] .midas-home-shell::before,
html[data-mode="light"] .mythox-v4-home .midas-home-shell::before{
  background:rgba(0,0,0,.045)!important;
  opacity:.45!important;
  transform:none!important;
}

html[data-mode="light"] #ai-main.chatting .ai-composer,
html[data-mode="light"] .mythox-v4-home .ai-composer,
html[data-mode="light"] .mythox-v4-home .ai-composer.focus{
  background:rgba(0,0,0,.024)!important;
  background-image:none!important;
  border:1px solid rgba(0,0,0,.085)!important;
  box-shadow:none!important;
}

html[data-mode="light"] .btn,
html[data-mode="light"] .btn-gold,
html[data-mode="light"] .btn-ghost,
html[data-mode="light"] .btn-oauth,
html[data-mode="light"] .btn-sm,
html[data-mode="light"] button,
html[data-mode="light"] input,
html[data-mode="light"] textarea,
html[data-mode="light"] select,
html[data-mode="light"] .tab,
html[data-mode="light"] .pill,
html[data-mode="light"] .chip,
html[data-mode="light"] .badge,
html[data-mode="light"] .period-toggle button,
html[data-mode="light"] .view-toggle button,
html[data-mode="light"] .chart-type-toggle button,
html[data-mode="light"] .chart-opts label,
html[data-mode="light"] .appr-mode,
html[data-mode="light"] .cos-hbtn,
html[data-mode="light"] .date-btn,
html[data-mode="light"] .ai-dock-send,
html[data-mode="light"] .ai-dock-attach,
html[data-mode="light"] .ai-dock-model,
html[data-mode="light"] #reis-theme-toggle,
html[data-mode="light"] #reis-mode-toggle,
html[data-mode="light"] #reis-money-toggle,
html[data-mode="light"] #ai-dock-fab,
html[data-mode="light"] #mythox-fb-btn{
  background-image:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transform:none!important;
}

html[data-mode="light"] .card:hover,
html[data-mode="light"] a.card:hover,
html[data-mode="light"] .panel:hover,
html[data-mode="light"] .module-card:hover,
html[data-mode="light"] .settings-card:hover,
html[data-mode="light"] .metric-card:hover,
html[data-mode="light"] .dash-card:hover,
html[data-mode="light"] .sp-card:hover,
html[data-mode="light"] .task-card:hover,
html[data-mode="light"] .finance-card:hover,
html[data-mode="light"] .journal-card:hover,
html[data-mode="light"] .system-card:hover,
html[data-mode="light"] .ai-chip:hover,
html[data-mode="light"] .ai-model:hover,
html[data-mode="light"] .ai-attach-btn:hover,
html[data-mode="light"] .bld-type:hover,
html[data-mode="light"] .bld-idea:hover,
html[data-mode="light"] .tk-item:hover,
html[data-mode="light"] .tk-pj-card:hover,
html[data-mode="light"] .tk-hub-row:hover,
html[data-mode="light"] #finance-root .ov-stat:hover,
html[data-mode="light"] #finance-root .card:hover{
  background:rgba(0,0,0,.036)!important;
  border-color:rgba(0,0,0,.14)!important;
  box-shadow:none!important;
  transform:none!important;
}

html[data-mode="light"] input:focus,
html[data-mode="light"] textarea:focus,
html[data-mode="light"] select:focus,
html[data-mode="light"] .rv-in:focus,
html[data-mode="light"] .rt-in:focus,
html[data-mode="light"] .fin-guided-input:focus,
html[data-mode="light"] .bk-field select:focus,
html[data-mode="light"] .bk-field input:focus,
html[data-mode="light"] .tk-add input:focus,
html[data-mode="light"] .tk-note-text:focus{
  border-color:rgba(0,0,0,.18)!important;
  box-shadow:none!important;
}

html[data-mode="light"] .modal-bg,
html[data-mode="light"] .overlay,
html[data-mode="light"] .drawer-backdrop,
html[data-mode="light"] .fos-modal-bg,
html[data-mode="light"] .guided-backdrop,
html[data-mode="light"] .onb-backdrop,
html[data-mode="light"] .prog-overlay{
  background:rgba(250,250,249,.58)!important;
  backdrop-filter:blur(8px) saturate(1.02)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.02)!important;
}

html[data-mode="light"] .progress i,
html[data-mode="light"] .progress-bar i,
html[data-mode="light"] .sb-credits-bar i,
html[data-mode="light"] .bar i,
html[data-mode="light"] .meter i,
html[data-mode="light"] .fill,
html[data-mode="light"] .tk-bar > span{
  background:#111214!important;
  background-image:none!important;
  box-shadow:none!important;
}

html[data-mode="light"] .midas-trident-mark,
html[data-mode="light"] .mythox-v4-home .midas-trident-mark,
html[data-mode="light"] .nav .ic,
html[data-mode="light"] .sb-settings .ic,
html[data-mode="light"] svg.ic{
  filter:none!important;
  text-shadow:none!important;
}

/* Keep finance/status colors meaningful after light-mode flattening. */
html[data-mode="light"] #finance-root .pos,
html[data-mode="light"] #finance-root .txn-amount-neg,
html[data-mode="light"] #finance-root .rev-col,
html[data-mode="light"] #finance-root [style*="var(--green)"],
html[data-mode="light"] .success,
html[data-mode="light"] .positive,
html[data-mode="light"] .ok{
  color:var(--green)!important;
}
html[data-mode="light"] #finance-root .neg,
html[data-mode="light"] #finance-root .txn-amount-pos,
html[data-mode="light"] #finance-root .exp-col,
html[data-mode="light"] #finance-root [style*="var(--red)"],
html[data-mode="light"] .danger,
html[data-mode="light"] .negative,
html[data-mode="light"] .bad{
  color:var(--red)!important;
}
html[data-mode="light"] #finance-root [style*="var(--blue)"]{
  color:var(--blue)!important;
}

html:not([data-mode="light"]) #ai-main.chatting,
html:not([data-mode="light"]) #ai-main.chatting .ai-thread,
html:not([data-mode="light"]) #ai-main.chatting .ai-bubble,
html:not([data-mode="light"]) #ai-main.chatting .ai-composer{
  background:rgba(255,255,255,.026)!important;
  background-image:none!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transform:none!important;
}

/* Route-specific dark surfaces caught by the visual crawl. */
html:not([data-mode="light"]) .td-hero,
html:not([data-mode="light"]) #bk-hero,
html:not([data-mode="light"]) .bk-hero,
html:not([data-mode="light"]) #gt-hero,
html:not([data-mode="light"]) .gt-hero,
html:not([data-mode="light"]) .lr-pblock,
html:not([data-mode="light"]) .lr-sec,
html:not([data-mode="light"]) .gt-tenx-ceiling,
html:not([data-mode="light"]) .gt-tenx-tiers,
html:not([data-mode="light"]) .wm-band,
html:not([data-mode="light"]) .wm-kpi-row,
html:not([data-mode="light"]) .sp-deepdive,
html:not([data-mode="light"]) .sp-panel,
html:not([data-mode="light"]) .sp-empty,
html:not([data-mode="light"]) .sa-node,
html:not([data-mode="light"]) .gt-pillar,
html:not([data-mode="light"]) .gt-money{
  background:rgba(255,255,255,.026)!important;
  background-image:none!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

html:not([data-mode="light"]) .cos-dot{
  background:rgba(245,245,245,.80)!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Route-specific light surfaces caught by the visual crawl. These were the last
   old gradient panels still reading as 3D in the copied app. */
html[data-mode="light"] .td-hero,
html[data-mode="light"] #bk-hero,
html[data-mode="light"] .bk-hero,
html[data-mode="light"] #gt-hero,
html[data-mode="light"] .gt-hero,
html[data-mode="light"] .lr-pblock,
html[data-mode="light"] .lr-sec,
html[data-mode="light"] .gt-tenx-ceiling,
html[data-mode="light"] .gt-tenx-tiers,
html[data-mode="light"] .wm-band,
html[data-mode="light"] .wm-kpi-row,
html[data-mode="light"] .sp-deepdive,
html[data-mode="light"] .sp-panel,
html[data-mode="light"] .sp-empty,
html[data-mode="light"] .sa-node,
html[data-mode="light"] .gt-pillar,
html[data-mode="light"] .gt-money{
  background:rgba(0,0,0,.022)!important;
  background-image:none!important;
  border-color:rgba(0,0,0,.085)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

html[data-mode="light"] .cos-dot{
  background:rgba(17,18,20,.78)!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Palette cycle repair.
   Keep the V4 black/white app shell, but let the // palette control drive a
   restrained accent system across every route in light and dark mode. */
html:not([data-mode="light"])[data-theme="green"]{
  --accent:#B7F35C!important;
  --accent-2:#7FCB32!important;
  --glow:rgba(183,243,92,.18)!important;
  --ink-on-accent:#08090B!important;
  --gold:var(--accent)!important;
  --gold-2:var(--accent-2)!important;
  --gold-ink:var(--ink-on-accent)!important;
  --gold-glow:var(--glow)!important;
  --gold-soft:color-mix(in srgb,var(--accent) 10%,transparent)!important;
  --gold-line:color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.08))!important;
}

html:not([data-mode="light"])[data-theme="blue"]{
  --accent:#83CFFF!important;
  --accent-2:#4AADE8!important;
  --glow:rgba(131,207,255,.18)!important;
  --ink-on-accent:#061017!important;
  --gold:var(--accent)!important;
  --gold-2:var(--accent-2)!important;
  --gold-ink:var(--ink-on-accent)!important;
  --gold-glow:var(--glow)!important;
  --gold-soft:color-mix(in srgb,var(--accent) 10%,transparent)!important;
  --gold-line:color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.08))!important;
}

html:not([data-mode="light"])[data-theme="mono"]{
  --accent:#F5F5F5!important;
  --accent-2:#B9BBC2!important;
  --glow:rgba(255,255,255,.16)!important;
  --ink-on-accent:#090A0C!important;
  --gold:var(--accent)!important;
  --gold-2:var(--accent-2)!important;
  --gold-ink:var(--ink-on-accent)!important;
  --gold-glow:var(--glow)!important;
  --gold-soft:rgba(255,255,255,.075)!important;
  --gold-line:rgba(255,255,255,.16)!important;
}

html:not([data-mode="light"])[data-theme="yellow"]{
  --accent:#D4B45C!important;
  --accent-2:#B8902E!important;
  --glow:rgba(212,180,92,.16)!important;
  --ink-on-accent:#090A0C!important;
  --gold:var(--accent)!important;
  --gold-2:var(--accent-2)!important;
  --gold-ink:var(--ink-on-accent)!important;
  --gold-glow:var(--glow)!important;
  --gold-soft:color-mix(in srgb,var(--accent) 10%,transparent)!important;
  --gold-line:color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.08))!important;
}

html[data-mode="light"][data-theme="green"]{
  --accent:#3F8F1D!important;
  --accent-2:#2F6F12!important;
  --glow:rgba(63,143,29,.16)!important;
  --ink-on-accent:#FAFAF9!important;
  --gold:var(--accent)!important;
  --gold-2:var(--accent-2)!important;
  --gold-ink:var(--ink-on-accent)!important;
  --gold-glow:var(--glow)!important;
  --gold-soft:color-mix(in srgb,var(--accent) 8%,transparent)!important;
  --gold-line:color-mix(in srgb,var(--accent) 22%,rgba(0,0,0,.08))!important;
}

html[data-mode="light"][data-theme="blue"]{
  --accent:#126FAE!important;
  --accent-2:#0A548B!important;
  --glow:rgba(18,111,174,.16)!important;
  --ink-on-accent:#FAFAF9!important;
  --gold:var(--accent)!important;
  --gold-2:var(--accent-2)!important;
  --gold-ink:var(--ink-on-accent)!important;
  --gold-glow:var(--glow)!important;
  --gold-soft:color-mix(in srgb,var(--accent) 8%,transparent)!important;
  --gold-line:color-mix(in srgb,var(--accent) 22%,rgba(0,0,0,.08))!important;
}

html[data-mode="light"][data-theme="mono"]{
  --accent:#090A0C!important;
  --accent-2:#6E7076!important;
  --glow:rgba(0,0,0,.12)!important;
  --ink-on-accent:#FAFAF9!important;
  --gold:var(--accent)!important;
  --gold-2:var(--accent-2)!important;
  --gold-ink:var(--ink-on-accent)!important;
  --gold-glow:var(--glow)!important;
  --gold-soft:rgba(0,0,0,.055)!important;
  --gold-line:rgba(0,0,0,.14)!important;
}

html[data-mode="light"][data-theme="yellow"]{
  --accent:#8A6A12!important;
  --accent-2:#6D520C!important;
  --glow:rgba(138,106,18,.15)!important;
  --ink-on-accent:#FAFAF9!important;
  --gold:var(--accent)!important;
  --gold-2:var(--accent-2)!important;
  --gold-ink:var(--ink-on-accent)!important;
  --gold-glow:var(--glow)!important;
  --gold-soft:color-mix(in srgb,var(--accent) 8%,transparent)!important;
  --gold-line:color-mix(in srgb,var(--accent) 22%,rgba(0,0,0,.08))!important;
}

#reis-theme-toggle{
  color:var(--accent)!important;
  border-color:var(--gold-line)!important;
  background:color-mix(in srgb,var(--surface) 82%,transparent)!important;
  position:fixed!important;
}

html body:has(.mythox-v4-home) #reis-theme-toggle,
html #reis-theme-toggle{
  color:var(--accent)!important;
  border-color:var(--gold-line)!important;
  background:color-mix(in srgb,var(--surface) 82%,transparent)!important;
  box-shadow:none!important;
}

html[data-mode="light"] body:has(.mythox-v4-home) #reis-theme-toggle,
html[data-mode="light"] #reis-theme-toggle{
  color:var(--accent)!important;
  border-color:var(--gold-line)!important;
  background:rgba(255,255,255,.70)!important;
  box-shadow:none!important;
}

#reis-theme-toggle::after{
  content:"";
  position:absolute;
  right:8px;
  bottom:8px;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--accent)!important;
  box-shadow:0 0 0 1px var(--bg)!important;
}

#reis-theme-toggle:hover,
#reis-theme-toggle:focus-visible{
  color:var(--accent)!important;
  border-color:var(--accent)!important;
  outline:none!important;
}

.bars,
.reis-sign,
.kicker::before,
.nav a.active .ic,
.sidebar .nav a.active .ic,
.sb-settings.active .ic,
.ai-model .caret,
.ai-dock-model::after,
.mo-check,
.cx-slash{
  color:var(--accent)!important;
  text-shadow:none!important;
}

html body:has(.mythox-v4-home) .bars,
html body:has(.mythox-v4-home) .reis-sign,
html body:has(.mythox-v4-home) .kicker::before,
html body:has(.mythox-v4-home) .nav a.active .ic,
html body:has(.mythox-v4-home) .sidebar .nav a.active .ic,
html body:has(.mythox-v4-home) .sb-settings.active .ic{
  color:var(--accent)!important;
  text-shadow:none!important;
}

html[data-mode="light"] body:has(.mythox-v4-home) .nav a.active,
html[data-mode="light"] body:has(.mythox-v4-home) .sb-settings.active{
  background:var(--gold-soft)!important;
  border-color:var(--gold-line)!important;
}

.nav a.active,
.sb-settings.active,
.appr-sw.sel,
.appr-mode.sel,
.tab.active,
.pill.active,
.chip.active,
.cos-hbtn.active,
.date-btn.active,
.ai-model[aria-expanded="true"],
.ai-dock-model[aria-expanded="true"]{
  background:var(--gold-soft)!important;
  border-color:var(--gold-line)!important;
  color:var(--accent)!important;
  box-shadow:none!important;
}

.btn-gold,
.lead-form button,
.cta-primary,
.nav-cta,
.rv-start-btn,
.ai-send,
.ai-dock-send,
.sb-notifs-dot,
.bill-badge,
.ai-bubble .ai-cta{
  background:var(--accent)!important;
  background-image:none!important;
  border-color:var(--accent)!important;
  color:var(--ink-on-accent)!important;
  box-shadow:none!important;
}

html[data-mode="light"] .btn-gold,
html[data-mode="light"] .lead-form button,
html[data-mode="light"] .cta-primary,
html[data-mode="light"] .nav-cta,
html[data-mode="light"] .rv-start-btn,
html[data-mode="light"] .ai-send,
html[data-mode="light"] .ai-dock-send,
html[data-mode="light"] .sb-notifs-dot,
html[data-mode="light"] .bill-badge,
html[data-mode="light"] .ai-bubble .ai-cta{
  background:var(--accent)!important;
  background-image:none!important;
  border-color:var(--accent)!important;
  color:var(--ink-on-accent)!important;
  box-shadow:none!important;
}

input:focus,
textarea:focus,
select:focus,
.ai-composer.focus,
.ai-dock-composer textarea:focus{
  border-color:var(--gold-line)!important;
  box-shadow:none!important;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"]{
  accent-color:var(--accent)!important;
}

.progress i,
.progress-bar i,
.sb-credits-bar i,
.bar i,
.meter i,
.fill,
.tk-bar > span,
html:not([data-mode="light"]) .progress i,
html:not([data-mode="light"]) .progress-bar i,
html:not([data-mode="light"]) .sb-credits-bar i,
html:not([data-mode="light"]) .bar i,
html:not([data-mode="light"]) .meter i,
html:not([data-mode="light"]) .fill,
html:not([data-mode="light"]) .tk-bar > span,
html[data-mode="light"] .progress i,
html[data-mode="light"] .progress-bar i,
html[data-mode="light"] .sb-credits-bar i,
html[data-mode="light"] .bar i,
html[data-mode="light"] .meter i,
html[data-mode="light"] .fill,
html[data-mode="light"] .tk-bar > span{
  background:var(--accent)!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Semantic money/status colors must stay independent from the palette switcher. */
#finance-root .stat-value[style*="var(--green)"],
#finance-root [style*="color:var(--green)"],
#finance-root [style*="color: var(--green)"],
.stat-value[style*="var(--green)"],
[style*="color:var(--green)"],
[style*="color: var(--green)"],
.success,
.positive{
  color:var(--green)!important;
}

#finance-root .stat-value[style*="var(--red)"],
#finance-root [style*="color:var(--red)"],
#finance-root [style*="color: var(--red)"],
.stat-value[style*="var(--red)"],
[style*="color:var(--red)"],
[style*="color: var(--red)"],
.danger,
.negative{
  color:var(--red)!important;
}

.sb-credits.low .sb-credits-bar i{
  background:var(--bad)!important;
}

/* Mobile polish pass - 2026-06-24.
   Keep the V4 look, but remove the remaining phone-specific friction:
   overly wide gutters, long Midas hero text, unreadable light-mode chips, and
   bulky controls inside compact app pages. */
@media (max-width:900px){
  .content{
    max-width:100%!important;
    padding:14px 10px 138px!important;
  }
  .appbar{
    min-height:54px!important;
    padding:9px 12px!important;
  }
  .sidebar{
    width:min(84vw,304px)!important;
    max-width:304px!important;
    padding:15px 10px 14px!important;
  }
}

@media (max-width:760px){
  .view-head h1,
  .page-head h1,
  .module-head h1,
  .section-head h1{
    font-size:clamp(24px,7.2vw,31px)!important;
    line-height:1.04!important;
  }

  .view-head .sub,
  .page-head .sub,
  .module-head .sub,
  .section-head .sub{
    font-size:13px!important;
    line-height:1.45!important;
  }

  .card,
  .panel,
  .module-card,
  .settings-card,
  .upgrade-card,
  .metric-card,
  .dash-card,
  .sp-card,
  .task-card,
  .finance-card,
  .journal-card,
  .system-card,
  .cc-setup,
  .rv-hero,
  .rv-sec{
    border-radius:13px!important;
  }

  .card,
  .panel,
  .module-card,
  .settings-card,
  .upgrade-card,
  .metric-card,
  .dash-card,
  .sp-card,
  .task-card,
  .finance-card,
  .journal-card,
  .system-card{
    padding:14px!important;
  }

  .mythox-v4-home .midas-home-shell{
    padding:18px 12px 15px!important;
    border-radius:16px!important;
  }

  .mythox-v4-home .ai-hero{
    padding-top:4px!important;
  }

  .mythox-v4-home .ai-hello{
    font-size:0!important;
    line-height:1!important;
    margin-bottom:9px!important;
  }

  .mythox-v4-home .ai-hello::before{
    content:"Next move?";
    display:block;
    font-family:var(--font-display)!important;
    font-size:clamp(27px,8.8vw,35px)!important;
    line-height:1.03!important;
    letter-spacing:-.045em!important;
    color:var(--text)!important;
  }

  .mythox-v4-home .ai-sub{
    max-width:29ch!important;
    font-size:12.75px!important;
    line-height:1.45!important;
    margin-bottom:13px!important;
  }

  .mythox-v4-home .ai-composer textarea{
    min-height:68px!important;
    font-size:14px!important;
    padding:14px 14px 8px!important;
  }

  .mythox-v4-home .ai-composer-bar{
    gap:7px!important;
    padding:7px 9px 10px!important;
  }

  .mythox-v4-home .ai-chips{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    margin-top:11px!important;
  }

  .mythox-v4-home .ai-chip{
    width:100%!important;
    min-height:38px!important;
    justify-content:flex-start!important;
    padding:9px 11px!important;
    font-size:13px!important;
    border-radius:10px!important;
  }
}

html[data-mode="light"] .mythox-v4-home .ai-chip,
html[data-mode="light"] .mythox-v4-home .ai-model,
html[data-mode="light"] .mythox-v4-home .ai-attach-btn{
  color:rgba(10,10,11,.76)!important;
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(0,0,0,.13)!important;
}

html[data-mode="light"] .mythox-v4-home .ai-chip .ci,
html[data-mode="light"] .mythox-v4-home .ai-model .caret{
  color:rgba(10,10,11,.84)!important;
}

html[data-mode="light"] .mythox-v4-home .ai-chip:hover,
html[data-mode="light"] .mythox-v4-home .ai-model:hover,
html[data-mode="light"] .mythox-v4-home .ai-attach-btn:hover{
  color:rgba(10,10,11,.94)!important;
  border-color:rgba(0,0,0,.20)!important;
}

/* Midas model picker visibility fix.
   The menu lives inside the model button, so these wrappers must not clip it. */
.mythox-v4-home .midas-home-shell,
.mythox-v4-home #ai-main,
.mythox-v4-home #ai-main.chatting,
.mythox-v4-home .ai-composer,
.mythox-v4-home .ai-composer-bar,
.mythox-v4-home .ai-model{
  overflow:visible!important;
}

.mythox-v4-home .ai-model{
  position:relative!important;
  z-index:80!important;
}

.mythox-v4-home .ai-model[aria-expanded="true"]{
  z-index:10000!important;
}

/* The .ai-hero entrance animation (aiIn animates opacity + transform with fill:both)
   forms a PERSISTENT stacking context that traps the model dropdown's z-index inside
   the hero. The "Operating dashboard" is a LATER sibling, so it painted OVER the open
   dropdown (most obvious when the dashboard is collapsed). Lift the hero above the
   dashboard so the dropdown paints over it. They never overlap except here, so this
   changes nothing else. */
.mythox-v4-home .ai-hero{position:relative!important;z-index:3!important;}
.mythox-v4-home .ai-dash{position:relative!important;z-index:1!important;}

/* .ai-model-menu is now a body-mounted singleton (ai-chat.js ensureModelMenu(), 2026-07-04
   fix for the small-window picker cutoff), NOT nested inside .mythox-v4-home any more, so
   every rule below that used to read ".mythox-v4-home .ai-model-menu"/".ai-model-opt" is
   un-scoped to match it in its new location. .ai-model-menu only ever exists on the Home
   page, so dropping the prefix changes nothing about WHEN these rules apply. */
.ai-model-menu{
  z-index:9999!important;
  min-width:min(286px,calc(100vw - 32px))!important;
  max-height:min(330px,54vh)!important;
  overflow-y:auto!important;
  padding:6px!important;
  border-radius:13px!important;
  opacity:1!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:auto!important;
}

.ai-model-menu.open{
  display:block!important;
}

/* (the old "#ai-main.chatting .ai-model-menu{top/bottom}" flip that lived here is gone -
   positionModelMenu() in ai-chat.js now sets top/max-height from the real measured space
   every time it opens, in both hero and chat mode, via setProperty(...,'important') so it
   still wins over the max-height!important rule above. ) */

.ai-model-opt{
  min-height:52px!important;
  border-radius:10px!important;
  color:inherit!important;
}

.ai-model-opt .mo-name,
.ai-model-opt .mo-check{
  color:inherit!important;
}

html[data-mode="light"] .ai-model-menu{
  background:#fff!important;
  border-color:rgba(0,0,0,.14)!important;
  color:#101113!important;
  box-shadow:0 18px 44px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.88)!important;
}

html[data-mode="light"] .ai-model-opt{
  color:#101113!important;
}

html[data-mode="light"] .ai-model-opt .mo-d{
  color:rgba(16,17,19,.58)!important;
}

html[data-mode="light"] .ai-model-opt:hover,
html[data-mode="light"] .ai-model-opt.sel{
  background:rgba(0,0,0,.055)!important;
}

html:not([data-mode="light"]) .ai-model-menu{
  background:#111216!important;
  border-color:rgba(255,255,255,.14)!important;
  color:#f2f2f0!important;
  box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)!important;
}

html:not([data-mode="light"]) .ai-model-opt{
  color:#f2f2f0!important;
}

html:not([data-mode="light"]) .ai-model-opt .mo-d{
  color:rgba(242,242,240,.58)!important;
}

html:not([data-mode="light"]) .ai-model-opt:hover,
html:not([data-mode="light"]) .ai-model-opt.sel{
  background:rgba(255,255,255,.075)!important;
}

@media (max-width:760px){
  /* left/transform centering is intentionally left alone by positionModelMenu() (it skips
     the horizontal axis below 760px) so this deliberate mobile-centered look is preserved. */
  .ai-model-menu{
    left:50%!important;
    transform:translateX(-50%)!important;
    min-width:min(300px,calc(100vw - 28px))!important;
  }

  html[data-mode="light"] .ai-model-menu,
  html:not([data-mode="light"]) .ai-model-menu{
    left:50%!important;
    transform:translateX(-50%)!important;
  }

  .ai-model-menu.open{
    animation:none!important;
  }
}

/* ============================================================
   Squared controls (Reis 2026-06-24): buttons/chips/inputs read
   more square, less pill. Avatars, status dots, progress bars,
   and rounded toggles intentionally keep their own radius.
   ============================================================ */
.btn,
.btn-oauth,
.btn-gold,
.lead-form button,
.cta-primary,
.nav-cta,
input,
textarea,
select,
.ai-chip,
.cm-chip,
.cm-tab,
.gt-btn,
.gt-sec-actions .gt-btn,
.chip,
.cm-input,
.pill-btn,
button.appr-mode{
  border-radius:8px!important;
}
.nav a,
.sb-settings,
.app-back,
.card,
.panel,
.ai-composer,
.ai-model,
.midas-home-shell,
.cc-tiles > div,
.sb-credits,
.sb-progress,
.sb-notifs,
.sb-user{
  border-radius:10px!important;
}
/* keep round things round */
.avatar,
.cm-avatar,
.sync-dot i,
.sb-credits-bar,
.sb-credits-bar i,
#reis-theme-toggle,
#reis-mode-toggle,
#reis-money-toggle,
#ai-dock-fab,
#mythox-fb-btn{
  border-radius:50%!important;
}
.sb-credits-bar,
.sb-credits-bar i{
  border-radius:99px!important;
}

/* Pin the sidebar foot (Your status panel + account row) to the very bottom and keep it
   there. The nav fills the space above and scrolls, so when the status panel expands it
   grows UPWARD (pushing the nav up) while the account row never moves. Overrides earlier
   codex rules that set the nav to flex:0 0 auto and the foot margin-top to 10px. */
.sidebar .nav{ flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; }
.sb-foot{ margin-top:auto!important; }

/* ============================================================ DESIGN PORT — STAGE 2 (2026-06-25)
   Website (mythox.ai) liquid-glass nav material on the app sidebar + mobile appbar, the
   website's floating rounded mode/palette toggles, and the flat light-mode treatment.
   SELF-CONTAINED: delete this whole block to revert Stage 2 (e.g. flatten the sidebar). */

/* ---- sidebar + mobile appbar: the website .nav-inner glass recipe ---- */
.sidebar{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 75%, transparent),
    color-mix(in srgb, var(--bg) 75%, transparent))!important;
  border-right:1px solid var(--border)!important;
  backdrop-filter:blur(14px) saturate(1.25)!important; -webkit-backdrop-filter:blur(14px) saturate(1.25)!important;
  box-shadow:0 14px 44px rgba(0,0,0,.4), inset 1px 0 0 rgba(255,255,255,.07)!important;
}
[data-mode="light"] .sidebar{ box-shadow:1px 0 0 var(--border)!important; }
.appbar{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 75%, transparent),
    color-mix(in srgb, var(--bg) 75%, transparent))!important;
  border-bottom:1px solid var(--border)!important;
  backdrop-filter:blur(14px) saturate(1.25)!important; -webkit-backdrop-filter:blur(14px) saturate(1.25)!important;
}

/* (bottom-right toggles removed: the app uses its existing TOP-RIGHT toggles -
   #reis-theme-toggle / #reis-mode-toggle / #reis-money-toggle - which already work and
   persist and recolor with the tokens. Bottom-right is reserved for the Midas chat button.) */

/* ---- flat light mode (match the website: no card depth, no hover lift) ---- */
[data-mode="light"] .card,[data-mode="light"] .panel,[data-mode="light"] .metric-card,[data-mode="light"] .dash-card,
[data-mode="light"] .module-card,[data-mode="light"] .sp-card,[data-mode="light"] .task-card,
[data-mode="light"] .finance-card,[data-mode="light"] .journal-card,[data-mode="light"] .system-card{ box-shadow:none!important; }
[data-mode="light"] .card:hover,[data-mode="light"] .module-card:hover,[data-mode="light"] .sp-card:hover,
[data-mode="light"] .task-card:hover,[data-mode="light"] .system-card:hover{
  transform:none!important; box-shadow:none!important; border-color:color-mix(in srgb,var(--accent) 30%, var(--border))!important; }

/* ---- page-title heroes sit flat on the page (no faint panel box behind the title),
        matching the website. Same specificity as the route-surface rule above so this wins. ---- */
html:not([data-mode="light"]) .td-hero, html[data-mode="light"] .td-hero,
html:not([data-mode="light"]) .bk-hero, html[data-mode="light"] .bk-hero,
html:not([data-mode="light"]) #bk-hero, html[data-mode="light"] #bk-hero,
html:not([data-mode="light"]) .gt-hero, html[data-mode="light"] .gt-hero,
html:not([data-mode="light"]) #gt-hero, html[data-mode="light"] #gt-hero{
  background:transparent!important; background-image:none!important; border-color:transparent!important; box-shadow:none!important;
}

/* ---- Reis: palette change should color the LABELS and HEADINGS too, not just the
        accent bits. Small mono labels/kickers + page and card headings take the accent. ---- */
.kicker, .view-head .kicker, .td-hero .kicker,
.ui-label, .card-kicker, .card-label, .price-kicker, .sb-credits-lab{ color:var(--accent)!important; }
.view-head h1, .td-hero h1, .page-head h1, .module-head h1, .section-head h1,
.view-head h2, .card h2, .card h3, .panel h2, .panel h3{ color:var(--accent)!important; }
/* sidebar text follows the palette too: brand wordmark, section headings, nav items */
/* Sidebar: only the brand wordmark and the SECTION HEADINGS take the palette color.
   The nav items (Today, Builder, Vault, ...) keep their original muted/active colors. */
body .sidebar .sb-brand .mark,
body .sidebar .nav .nav-zone, body .sidebar .nav .nav-zone span{
  color:var(--accent)!important;
}
/* section headings get a soft bordered container (like the "Your status" panel) so they
   read as section labels, not clickable items */
body .sidebar .nav .nav-zone{
  border:1px solid var(--border)!important; border-radius:9px!important;
  background:color-mix(in srgb, var(--surface) 42%, transparent)!important;
  margin:8px 0 5px!important;
  cursor:default!important;   /* it's a label, not a clickable button */
}
/* no hover color shift on the section labels (beats the .nav-zone:hover span rule) */
body .sidebar .nav .nav-zone:hover span{ color:var(--accent)!important; }
/* primary button hover: a clear palette-colored glow + lift (wins over the later reset rule) */
/* smooth transition on the primary button so the hover lift + light-up never snap */
html body .btn-gold, html body .btn.btn-gold, html body .lead-form button, html body .cta-primary,
html body .nav-cta, html body .rv-start-btn, html body .guided-btn.primary,
html body .onb-btn.primary, html body .ai-dock-send{
  transition:transform .22s cubic-bezier(.23,1,.32,1), filter .22s ease!important;
}
/* hover: light up (brighten) + a soft lift, like the secondary button's feel */
html body .btn-gold:hover, html body .btn.btn-gold:hover,
html body .lead-form button:hover, html body .cta-primary:hover, html body .nav-cta:hover,
html body .rv-start-btn:hover, html body .guided-btn.primary:hover,
html body .onb-btn.primary:hover, html body .ai-dock-send:hover{
  filter:brightness(1.12)!important;
  transform:translateY(-2px)!important;
}
/* text selection uses the active theme color, like the website */
::selection{ background:var(--accent)!important; color:var(--ink-on-accent)!important; }
::-moz-selection{ background:var(--accent)!important; color:var(--ink-on-accent)!important; }

/* LIGHT MODE consistency: the app has separate [data-mode="light"] color rules that
   were keeping the section headings, kickers, and labels neutral. These beat them so the
   accent coloring is identical in light and dark. */
html[data-mode="light"] .sidebar .nav .nav-zone span,
html[data-mode="light"] .sidebar .sb-brand .mark{ color:var(--accent)!important; }
html[data-mode="light"] .kicker,
html[data-mode="light"] .view-head .kicker, html[data-mode="light"] .td-hero .kicker,
html[data-mode="light"] .ui-label, html[data-mode="light"] .card-kicker, html[data-mode="light"] .card-label{ color:var(--accent)!important; }
html[data-mode="light"] .view-head h1, html[data-mode="light"] .td-hero h1,
html[data-mode="light"] .page-head h1, html[data-mode="light"] .module-head h1,
html[data-mode="light"] .card h2, html[data-mode="light"] .card h3{ color:var(--accent)!important; }

/* login screen gets the same accent treatment (heading + field labels), both modes */
html body .login-card h1{ color:var(--accent)!important; }
html body .login-card .field > span{ color:var(--accent)!important; }

/* stat numbers sit FLAT on the page - remove the faint box behind them (Super Projects,
   Books, and any shared stat strip), matching the website's clean stat rows */
html body .stats-bar{ background:transparent!important; border:0!important; gap:22px!important; }
/* mode-prefixed so these BEAT the html:not([data-mode=light]) route-surface rule (0,2,2) that
   was painting the faint box behind stat numbers */
html:not([data-mode="light"]) .tk-stat, html[data-mode="light"] .tk-stat,
html:not([data-mode="light"]) .tk-stat b, html[data-mode="light"] .tk-stat b,
html:not([data-mode="light"]) .bk-stat, html[data-mode="light"] .bk-stat,
html:not([data-mode="light"]) .bk-stat b, html[data-mode="light"] .bk-stat b,
html:not([data-mode="light"]) .stat-cell, html[data-mode="light"] .stat-cell,
html:not([data-mode="light"]) .metric, html[data-mode="light"] .metric,
html body .metric-strip, html body .metric-strip div, html body .tk-stats, html body .bk-stats{
  background:transparent!important; background-image:none!important;
  border-color:transparent!important; box-shadow:none!important;
}

/* ---- Lenis smooth scroll support (same as the website). Nested scrollers carry
        data-lenis-prevent (set in smooth-scroll.js) so their native scroll is untouched. ---- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---- Midas FAB visibility (2026-06-25). The bottom-right Midas chat button was a
        faint 34px dark glass circle, easy to miss on the dark home. Make it bigger and
        give it an on-brand accent ring + accent glyph + accent glow. Targets ONLY
        #ai-dock-fab (NOT the feedback button it was grouped with) and comes after the
        grouped home rules so it wins. Mobile size re-asserted so the 760px shrink holds. ---- */
body:has(.mythox-v4-home) #ai-dock-fab{
  width:48px!important;
  height:48px!important;
  background:rgba(16,18,22,.88)!important;
  border:1.5px solid var(--accent)!important;
  color:var(--accent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.34),0 0 22px var(--glow)!important;
}
body:has(.mythox-v4-home) #ai-dock-fab:hover{
  border-color:var(--accent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 36px rgba(0,0,0,.4),0 0 32px var(--glow)!important;
}
body:has(.mythox-v4-home) #ai-dock-fab .ai-dock-fab-glyph{
  color:var(--accent)!important;
  font-size:17px!important;
  font-weight:400!important;
}
[data-mode="light"] body:has(.mythox-v4-home) #ai-dock-fab{
  background:rgba(255,255,255,.86)!important;
  border:1.5px solid var(--accent)!important;
  color:var(--accent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 26px rgba(0,0,0,.10),0 0 20px var(--glow)!important;
}
@media(max-width:760px){
  body:has(.mythox-v4-home) #ai-dock-fab{width:44px!important;height:44px!important;}
}

/* Floating controls clearance: this file loads after brand.css/ai-dock.css, so keep
   the bottom-right Midas FAB from covering the last visible cards and chart actions. */
.content{padding-bottom:max(156px, calc(104px + env(safe-area-inset-bottom)))!important;}
@media(max-width:900px){
  .content{padding-bottom:calc(184px + env(safe-area-inset-bottom))!important;}
}

/* ---- Midas isolated (2026-06-25). The Midas page is ONLY the chat; the operating
        dashboard moved to its own Dashboard route. Left/right stays symmetric via the
        centered max-widths. ---- */

/* BOTTOM-ANCHORED CHAT PAGE (Reis, verbatim, 2026-08-05):
   "The chat box should start from the bottom. Here on Codex it already starts at the
   bottom... It's a proper chat page. This is how I want Midas to behave on the web app."

   What used to happen: the content column was a full-viewport flex box with
   `align-items:center`, and the chat was a fixed-height card (`height:min(74vh,640px)`).
   A 74vh card centred in 100vh leaves ~13vh of empty page UNDER the message box, so the
   box floated in the middle of the screen instead of sitting on the bottom edge. That
   centring is the whole defect - the card height was only how far off the bottom it
   floated.

   What happens now: the column STRETCHES to the viewport instead of centring in it, and
   the chat fills it. The message box is the last item in a full-height flex column, so
   it lands on the bottom edge at every window size, and only the thread scrolls. The
   same rule anchors the new-chat state (`justify-content:flex-end`), so going from a new
   chat to a live one never makes the box jump from the middle to the bottom.

   Deliberately CSS-only and measurement-free: the height comes from the viewport unit,
   not from a number JavaScript measured, so it survives a resize, a sidebar collapse and
   the back button appearing without anything having to re-run. */
@media(min-width:901px){
  .content:has(.ai-home.mythox-v4-home){
    display:flex!important;
    align-items:stretch!important;   /* was `center` - see above, this is the fix */
    justify-content:center!important;
    height:100dvh!important;
    min-height:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    overflow:hidden!important;       /* the thread scrolls, the page never does */
  }
}
/* Phone/tablet: same page, minus the sticky top bar and the fixed bottom nav bar, so the
   message box sits on the last free pixel above the nav rather than under it. */
@media(max-width:900px){
  .content:has(.ai-home.mythox-v4-home){
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
    height:calc(100dvh - var(--topbar-h,60px) - 64px - env(safe-area-inset-bottom))!important;
    min-height:0!important;
    padding-bottom:0!important;
    overflow:hidden!important;
  }
}
.ai-home.mythox-v4-home{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;   /* a new chat opens with the box AT THE BOTTOM */
  min-height:0!important;
}
.mythox-v4-home .ai-hero{padding:0!important;width:100%!important;}

/* ===== Midas chat: Gemini-style thread + slide-over history + luxe expand (2026-06-25) =====
   Keeps the Mythox aesthetic (colours/fonts/glass), borrows only Gemini's general shape:
   a clean full-height reading column, borderless assistant text, right-aligned user pills,
   a bottom composer, plus a slide-over panel of past conversations. ===== */

/* anchor for the top-left history button */
.content:has(.ai-home.mythox-v4-home){position:relative!important;}

/* The page renders into #module-container, so the stretch has to reach through it for
   .ai-home to be a full-height column. Scoped to the Midas page; every other route keeps
   the plain block container it has always had. */
.content:has(.ai-home.mythox-v4-home) > #module-container{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-height:0!important;
}
.ai-home.mythox-v4-home{flex:1 1 auto!important;}

/* When a conversation is OPEN, Midas is a rounded glass column that FILLS the page: the
   thread scrolls inside it and the composer rides its bottom edge, which is the bottom of
   the viewport. It no longer has a height of its own - `flex:1` takes whatever the
   full-height column above gives it, which is what keeps the box on the bottom edge at
   every window size instead of at a fixed 74vh. */
.mythox-v4-home #ai-main.chatting{
  width:100%!important;
  max-width:940px!important;
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 auto!important;
  border:1px solid var(--border)!important;
  border-radius:24px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05)!important;
  padding:12px 18px 16px!important;
  display:flex!important;
  flex-direction:column!important;
}
/* slim, quiet top bar spanning the card; history button sits at the card's top-left */
.mythox-v4-home #ai-main.chatting .ai-thread-head{
  flex:0 0 auto!important;
  padding:2px 4px 10px!important;
  margin-bottom:2px!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
}
.mythox-v4-home #ai-main.chatting .ai-thread-head .th-left{display:flex!important;align-items:center!important;gap:10px!important;}
.mythox-v4-home #ai-main.chatting .ai-thread-head .t{opacity:.62!important;}
[data-mode="light"] .mythox-v4-home #ai-main.chatting .ai-thread-head{border-bottom-color:rgba(0,0,0,.07)!important;}
/* thread scrolls inside the card as a centered reading column (Gemini feel) */
.mythox-v4-home #ai-main.chatting .ai-thread{
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  max-width:720px!important;
  margin:0 auto!important;
  overflow-y:auto!important;
  gap:22px!important;
  padding:16px 4px 22px!important;
}
/* assistant: borderless, just the spark + text */
.mythox-v4-home #ai-main.chatting .ai-msg{max-width:none!important;width:100%!important;}
.mythox-v4-home #ai-main.chatting .ai-msg.assistant{align-items:flex-start!important;}
.mythox-v4-home #ai-main.chatting .ai-msg.assistant .ai-bubble{
  background:transparent!important;
  border:none!important;
  padding:1px 0!important;
  font-size:15.5px!important;
  line-height:1.62!important;
}
.mythox-v4-home #ai-main.chatting .ai-msg.assistant .ai-avatar{
  background:transparent!important;
  border:none!important;
  color:var(--accent)!important;
  box-shadow:none!important;
}
/* user: right-aligned soft pill, no avatar */
.mythox-v4-home #ai-main.chatting .ai-msg.user{align-self:flex-end!important;max-width:82%!important;}
.mythox-v4-home #ai-main.chatting .ai-msg.user .ai-avatar{display:none!important;}
.mythox-v4-home #ai-main.chatting .ai-msg.user .ai-bubble{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:18px!important;
  padding:11px 16px!important;
}
/* composer pinned at the bottom, clean rounded bar, centered to the column */
.mythox-v4-home #ai-main.chatting .ai-composer{
  flex:0 0 auto!important;
  width:100%!important;
  max-width:720px!important;
  margin:6px auto 0!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:18px!important;
  box-shadow:none!important;
}
/* light-mode chat variants */
[data-mode="light"] .mythox-v4-home #ai-main.chatting .ai-msg.user .ai-bubble{background:rgba(0,0,0,.05)!important;border-color:rgba(0,0,0,.08)!important;}
[data-mode="light"] .mythox-v4-home #ai-main.chatting .ai-thread-head{border-bottom-color:rgba(0,0,0,.07)!important;}
[data-mode="light"] .mythox-v4-home #ai-main.chatting .ai-composer{background:rgba(0,0,0,.03)!important;border-color:rgba(0,0,0,.10)!important;}

/* ---- slow, luxe expand on the first message ---- */
@keyframes midas-expand{0%{opacity:0;transform:translateY(16px) scale(.985);}100%{opacity:1;transform:none;}}
@keyframes midas-rise{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:none;}}
.mythox-v4-home #ai-main.ai-expand-in{animation:midas-expand .9s cubic-bezier(.16,1,.3,1) both;}
.mythox-v4-home #ai-main.ai-expand-in .ai-thread{animation:midas-rise 1.05s cubic-bezier(.16,1,.3,1) both;}
@media(prefers-reduced-motion:reduce){
  .mythox-v4-home #ai-main.ai-expand-in,
  .mythox-v4-home #ai-main.ai-expand-in .ai-thread{animation:none!important;}
}

/* ---- history toggle button: lives INSIDE the Midas card (not floating on the page) ---- */
.midas-hist-btn{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  color:rgba(236,237,239,.74);
  transition:.16s ease;
}
.midas-hist-btn:hover{border-color:var(--accent);color:var(--accent);}
/* home card: float it at the card's top-left corner */
.midas-home-shell{position:relative!important;}
.midas-hist-btn.in-shell{position:absolute!important;top:14px;left:14px;z-index:5;}
[data-mode="light"] .midas-hist-btn{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.10);color:rgba(14,14,15,.66);}

/* ---- slide-over panel + scrim (fixed over the viewport, Gemini-style) ---- */
.midas-hist-scrim{
  position:fixed!important;inset:0;z-index:140;
  background:rgba(0,0,0,.42);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.midas-hist-scrim.open{opacity:1;pointer-events:auto;}
.midas-hist{
  position:fixed!important;top:0;left:0;bottom:0;z-index:150;
  width:min(320px,86vw);
  transform:translateX(-104%);
  transition:transform .42s cubic-bezier(.16,1,.3,1);
  background:linear-gradient(180deg,rgba(20,21,25,.97),rgba(12,13,15,.97));
  border-right:1px solid rgba(255,255,255,.09);
  box-shadow:24px 0 60px rgba(0,0,0,.4);
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
}
.midas-hist.open{transform:none!important;}
[data-mode="light"] .midas-hist{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,249,.98));border-right-color:rgba(0,0,0,.08);box-shadow:24px 0 60px rgba(0,0,0,.14);}
.mh-inner{display:flex;flex-direction:column;height:100%;padding:16px 12px;box-sizing:border-box;}
.mh-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 14px;}
.mh-h{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--accent);}
.mh-close{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;background:transparent;border:1px solid transparent;color:rgba(236,237,239,.6);}
.mh-close:hover{border-color:rgba(255,255,255,.14);color:var(--text);}
.mh-new{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border-radius:11px;cursor:pointer;margin-bottom:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);color:rgba(236,237,239,.9);font-size:13.5px;}
.mh-new:hover{border-color:var(--accent);color:var(--accent);}
.mh-list{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.mh-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;cursor:pointer;color:rgba(236,237,239,.76);transition:background .14s,color .14s;}
.mh-item:hover{background:rgba(255,255,255,.05);}
.mh-item.active{background:rgba(255,255,255,.08);color:var(--text);}
.mh-item-title{flex:1 1 auto;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Always visible: at opacity 0 the delete button could not be found or tapped on a
   touch screen (there is no hover there), which read as "delete does nothing". */
.mh-del{flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;cursor:pointer;background:transparent;border:none;color:rgba(236,237,239,.4);opacity:.55;transition:.14s;}
.mh-item:hover .mh-del{opacity:1;}
.mh-del:hover,.mh-del:focus-visible{color:#ff6b6b;background:rgba(255,107,107,.10);opacity:1;}
.mh-note{margin:0 4px 10px;padding:8px 10px;border-radius:9px;background:rgba(255,107,107,.10);border:1px solid rgba(255,107,107,.28);color:#ff9c9c;font-size:12.5px;line-height:1.45;}
.mh-empty{padding:22px 10px;color:rgba(236,237,239,.5);font-size:13px;text-align:center;}
.mh-clear{margin-top:10px;width:100%;padding:9px;border-radius:10px;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,.10);color:rgba(236,237,239,.58);font-size:12.5px;}
.mh-clear:hover{border-color:#ff6b6b;color:#ff6b6b;}
[data-mode="light"] .mh-item{color:rgba(14,14,15,.72);}
[data-mode="light"] .mh-item:hover{background:rgba(0,0,0,.04);}
[data-mode="light"] .mh-item.active{background:rgba(0,0,0,.06);}
[data-mode="light"] .mh-new{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.10);color:#111;}
[data-mode="light"] .mh-close{color:rgba(14,14,15,.55);}
[data-mode="light"] .mh-empty,[data-mode="light"] .mh-clear{color:rgba(14,14,15,.55);}

/* ---- Midas chat on mobile: the card fills the space between the top appbar and the
        bottom nav, full width, tighter radius; thread + composer span the card ---- */
@media(max-width:760px){
  .mythox-v4-home #ai-main.chatting{
    width:100%!important;
    max-width:100%!important;
    height:calc(100dvh - 150px)!important;
    min-height:340px!important;
    max-height:none!important;
    border-radius:18px!important;
    padding:8px 10px 12px!important;
  }
  .mythox-v4-home #ai-main.chatting .ai-thread,
  .mythox-v4-home #ai-main.chatting .ai-composer{max-width:100%!important;}
  .mythox-v4-home #ai-main.chatting .ai-thread{padding:12px 2px 18px!important;gap:18px!important;}
  .mythox-v4-home #ai-main.chatting .ai-msg.user{max-width:88%!important;}
  /* opening card: tighter radius + full width on phones */
  .mythox-v4-home .midas-home-shell{border-radius:18px!important;}
  /* history slide-over comfortable on phones */
  .midas-hist{width:min(300px,88vw)!important;}
}

/* The floating Midas chat FAB is redundant ON the Midas page itself (and on mobile it
   overlapped the send button), so hide it here. It still shows on every other page. */
body:has(.mythox-v4-home) #ai-dock-fab{display:none!important;}

/* ===== Midas card colour = the website's interactive-visual look (the .visual-frame on
        mythox.ai): a subtle surface->bg gradient with a top sheen, theme-aware (dark + light).
        BEATS the earlier faint white-surface override (~line 2692) that made the card read
        brownish, and makes the inner thread transparent so the card is ONE clean colour. */
html:not([data-mode="light"]) .mythox-v4-home .midas-home-shell,
html:not([data-mode="light"]) .mythox-v4-home #ai-main.chatting{
  background:#0E0F12!important; /* fallback if color-mix unsupported */
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 62%, var(--bg)), var(--bg))!important;
  border:1px solid rgba(255,255,255,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 80px rgba(0,0,0,.34)!important;
}
html[data-mode="light"] .mythox-v4-home .midas-home-shell,
html[data-mode="light"] .mythox-v4-home #ai-main.chatting{
  background:#FCFCFB!important;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, var(--bg)), var(--bg))!important;
  border:1px solid rgba(0,0,0,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 26px 70px rgba(0,0,0,.10)!important;
}
/* inner surfaces transparent so the card shows ONE uniform colour (kills the brown inner panel) */
html .mythox-v4-home #ai-main.chatting .ai-thread,
html .mythox-v4-home #ai-main.chatting .ai-msg.assistant .ai-bubble{
  background:transparent!important;background-image:none!important;
}

/* ===== Midas chat FAB: clearly visible on EVERY page (it was tiny off the Midas page,
        because the visible styling had been scoped to the Midas page, which now hides it). ===== */
html:not([data-mode="light"]) #ai-dock-fab{
  width:50px!important;height:50px!important;border-radius:999px!important;
  background:rgba(16,18,22,.92)!important;
  border:1.5px solid var(--accent)!important;
  color:var(--accent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 32px rgba(0,0,0,.44),0 0 26px var(--glow)!important;
}
html[data-mode="light"] #ai-dock-fab{
  width:50px!important;height:50px!important;border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  border:1.5px solid var(--accent)!important;
  color:var(--accent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 30px rgba(0,0,0,.12),0 0 22px var(--glow)!important;
}
html #ai-dock-fab .ai-dock-fab-glyph{color:var(--accent)!important;font-size:18px!important;font-weight:400!important;}

/* WO-LIGHT: late light-mode legibility fixes for the fixed header controls and
   sidebar foot. Dark mode keeps the existing visual recipe above. */
html[data-mode="light"] #reis-theme-toggle,
html[data-mode="light"] #reis-mode-toggle,
html[data-mode="light"] #reis-money-toggle,
html[data-mode="light"] #reis-credits-toggle,
html[data-mode="light"] #reis-feedback-toggle{
  background:var(--surface)!important;
  border-color:color-mix(in srgb, var(--text) 22%, transparent)!important;
  color:var(--text)!important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent)!important;
}
html[data-mode="light"] #reis-theme-toggle,
html[data-mode="light"] #reis-money-toggle,
html[data-mode="light"] #reis-credits-toggle{
  color:var(--accent)!important;
}
html[data-mode="light"] #reis-theme-toggle:hover,
html[data-mode="light"] #reis-theme-toggle:focus-visible,
html[data-mode="light"] #reis-mode-toggle:hover,
html[data-mode="light"] #reis-mode-toggle:focus-visible,
html[data-mode="light"] #reis-money-toggle:hover,
html[data-mode="light"] #reis-money-toggle:focus-visible,
html[data-mode="light"] #reis-credits-toggle:hover,
html[data-mode="light"] #reis-credits-toggle:focus-visible,
html[data-mode="light"] #reis-feedback-toggle:hover,
html[data-mode="light"] #reis-feedback-toggle:focus-visible{
  background:var(--surface-2)!important;
  border-color:var(--accent)!important;
  color:var(--accent)!important;
}
html[data-mode="light"] .sb-panel,
html[data-mode="light"] .sb-user{
  background:var(--surface)!important;
  border-color:var(--border)!important;
}
html[data-mode="light"] .sb-panel-head{
  color:var(--text)!important;
}
html[data-mode="light"] .sb-panel-title,
html[data-mode="light"] .sb-panel-bell,
html[data-mode="light"] .sb-panel-chev,
html[data-mode="light"] .sb-progress-sub,
html[data-mode="light"] .sb-notifs-sub{
  color:var(--muted)!important;
}
html[data-mode="light"] .sb-panel-head:hover .sb-panel-title,
html[data-mode="light"] .sb-panel-head:focus-visible .sb-panel-title{
  color:var(--text)!important;
}
html[data-mode="light"] .sb-panel .sb-notifs,
html[data-mode="light"] .sb-panel .sb-progress,
html[data-mode="light"] .sb-panel .sb-credits{
  border-top-color:var(--border)!important;
}
html[data-mode="light"] .sb-user .avatar{
  background:var(--surface-2)!important;
  border-color:var(--border)!important;
  color:var(--accent)!important;
}
html[data-mode="light"] .sb-user .btn{
  background:var(--surface-2)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
html[data-mode="light"] .sb-user .btn:hover,
html[data-mode="light"] .sb-user .btn:focus-visible{
  background:var(--gold-soft)!important;
  border-color:var(--gold-line)!important;
  color:var(--accent)!important;
}

/* WO-MIDAS-LIGHT: dock-scoped light-mode legibility gaps. */
html[data-mode="light"] #ai-dock-panel{
  background:var(--surface)!important;
  border-color:color-mix(in srgb, var(--text) 14%, transparent)!important;
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-head{
  border-bottom-color:color-mix(in srgb, var(--text) 12%, transparent)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-title{
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-dot{
  background:var(--accent)!important;
  box-shadow:0 0 0 3px var(--gold-soft)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-model{
  background:var(--surface-2)!important;
  border-color:var(--gold-line)!important;
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-model::after{
  color:var(--accent)!important;
}
html[data-mode="light"] #ai-dock-model-menu{
  background:var(--surface)!important;
  border-color:color-mix(in srgb, var(--text) 16%, transparent)!important;
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-model-menu .ai-dock-model-opt{
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-model-menu .ai-dock-model-opt .mo-d{
  color:var(--muted)!important;
}
html[data-mode="light"] #ai-dock-model-menu .ai-dock-model-opt .mo-check{
  color:var(--accent)!important;
}
html[data-mode="light"] #ai-dock-model-menu .ai-dock-model-opt:hover,
html[data-mode="light"] #ai-dock-model-menu .ai-dock-model-opt.sel{
  background:var(--surface-2)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-help,
html[data-mode="light"] #ai-dock-panel .ai-dock-x{
  background:var(--surface-2)!important;
  border:1px solid color-mix(in srgb, var(--text) 12%, transparent)!important;
  color:var(--muted)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-help:hover,
html[data-mode="light"] #ai-dock-panel .ai-dock-help:focus-visible,
html[data-mode="light"] #ai-dock-panel .ai-dock-help[aria-expanded="true"],
html[data-mode="light"] #ai-dock-panel .ai-dock-x:hover,
html[data-mode="light"] #ai-dock-panel .ai-dock-x:focus-visible{
  background:var(--gold-soft)!important;
  border-color:var(--gold-line)!important;
  color:var(--accent)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-msgs{
  background:transparent!important;
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-msg,
html[data-mode="light"] #ai-dock-panel .ai-dock-msg.ai{
  background:var(--surface-2)!important;
  border-color:color-mix(in srgb, var(--text) 10%, transparent)!important;
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-msg.me{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--ink-on-accent)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-msg.ai p,
html[data-mode="light"] #ai-dock-panel .ai-dock-msg.ai li,
html[data-mode="light"] #ai-dock-panel .ai-dock-msg.ai .ai-md-h{
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-msg.ai a,
html[data-mode="light"] #ai-dock-panel .ai-dock-msg.ai .ai-cta{
  color:var(--accent)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-msg.ai code{
  background:var(--surface)!important;
  border-color:color-mix(in srgb, var(--text) 12%, transparent)!important;
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-typing i{
  background:var(--muted)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-composer{
  background:var(--surface-2)!important;
  border-top-color:color-mix(in srgb, var(--text) 12%, transparent)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-composer textarea{
  background:var(--surface)!important;
  border-color:color-mix(in srgb, var(--text) 14%, transparent)!important;
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-composer textarea::placeholder{
  color:var(--muted)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-composer textarea:focus{
  border-color:var(--gold-line)!important;
  box-shadow:0 0 0 3px var(--gold-soft)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-attach{
  background:var(--surface)!important;
  border-color:color-mix(in srgb, var(--text) 14%, transparent)!important;
  color:var(--muted)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-attach:hover,
html[data-mode="light"] #ai-dock-panel .ai-dock-attach:focus-visible{
  background:var(--gold-soft)!important;
  border-color:var(--gold-line)!important;
  color:var(--accent)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-chip{
  background:var(--surface)!important;
  border-color:color-mix(in srgb, var(--text) 12%, transparent)!important;
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-chip button{
  color:var(--muted)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-send{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--ink-on-accent)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-send:disabled{
  opacity:.48!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-suppop{
  background:var(--surface)!important;
  border-color:color-mix(in srgb, var(--text) 14%, transparent)!important;
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-suppop-head{
  color:var(--muted)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-supq{
  background:var(--surface-2)!important;
  border-color:color-mix(in srgb, var(--text) 12%, transparent)!important;
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-supq:hover,
html[data-mode="light"] #ai-dock-panel .ai-dock-supq:focus-visible{
  background:var(--gold-soft)!important;
  border-color:var(--gold-line)!important;
  color:var(--accent)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-supta{
  background:var(--surface)!important;
  border-color:color-mix(in srgb, var(--text) 14%, transparent)!important;
  color:var(--text)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-supta::placeholder{
  color:var(--muted)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-suphuman,
html[data-mode="light"] #ai-dock-panel .ai-dock-supsend{
  background:var(--accent)!important;
  border:1px solid var(--accent)!important;
  color:var(--ink-on-accent)!important;
}
html[data-mode="light"] #ai-dock-panel .ai-dock-supok{
  color:var(--accent)!important;
}

/* iOS Safari: keep mobile text-entry controls above the focus auto-zoom threshold. */
@media (max-width:900px){
  input,
  select,
  textarea,
  .mythox-v4-home .ai-composer textarea,
  #ai-dock-panel .ai-dock-composer textarea,
  #ai-dock-panel .ai-dock-supta{
    font-size:16px!important;
  }
}