/* =========================================================
   C&C Sphere Preview - Mobile Luxury Layer
   Loaded AFTER cc-sphere-app.css.
   Scope: mobile only. Does not touch desktop.
   ========================================================= */

@media (max-width:820px) and (orientation: portrait){

  :root{
    --spm-gold:#d99a21;
    --spm-gold-2:#ffc456;
    --spm-navy:#061426;
    --spm-navy-2:#07111f;
    --spm-ink:#101828;
    --spm-muted:#667085;
    --spm-bg:#fff8ed;
    --spm-card:#ffffff;
    --spm-line:rgba(12,31,55,.11);
    --spm-shadow:0 18px 42px rgba(8,24,45,.12);
  }

  html,
  body.sphere-app-body{
    overflow-x:hidden !important;
  }

  body.sphere-app-body{
    background:
      radial-gradient(circle at 50% -12%,rgba(217,154,33,.18),transparent 19rem),
      linear-gradient(180deg,#fff8ed 0%,#fffaf5 45%,#ffffff 100%) !important;
    padding-bottom:92px !important;
  }

  .sp-page{
    width:min(100%,480px) !important;
    margin:0 auto !important;
    min-height:100vh !important;
    background:linear-gradient(180deg,#fff8ed 0%,#ffffff 100%) !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.08) !important;
  }

  /* Header as real mobile app header */
  .sp-top{
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
    background:
      radial-gradient(circle at 8% 0%,rgba(217,154,33,.18),transparent 13rem),
      linear-gradient(180deg,#061426 0%,#07111f 100%) !important;
    border-bottom:1px solid rgba(217,154,33,.40) !important;
    box-shadow:0 14px 34px rgba(3,10,20,.24) !important;
  }

  .sp-top::after{
    display:none !important;
  }

  .sp-top-inner{
    width:100% !important;
    min-height:74px !important;
    padding:12px 14px !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:10px !important;
  }

  .sp-logo{
    min-width:0 !important;
    min-height:48px !important;
    gap:10px !important;
  }

  .sp-logo-mark,
  .sp-logo-img{
    width:44px !important;
    height:44px !important;
    border-radius:16px !important;
  }

  .sp-logo-copy strong{
    font-size:17px !important;
    letter-spacing:-.04em !important;
    line-height:1 !important;
  }

  .sp-logo-copy small{
    display:block !important;
    color:#ffd37d !important;
    max-width:180px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:10px !important;
    font-weight:850 !important;
  }

  .sp-search{
    display:none !important;
  }

  .sp-actions{
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:7px !important;
  }

  .sp-actions .sp-create-btn,
  .sp-user-pill,
  .sp-actions .sp-chip[href]{
    display:none !important;
  }

  .sp-icon-btn,
  .sp-theme-toggle,
  .sp-lang-menu .sp-chip{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .sp-theme-toggle [data-sp-theme-label],
  .sp-lang-menu summary.sp-chip .sp-i{
    display:none !important;
  }

  .sp-lang-menu summary.sp-chip span:last-child{
    display:inline !important;
    color:#ffd37d !important;
    font-size:11px !important;
    font-weight:950 !important;
  }

  .sp-icon-btn .sp-i,
  .sp-theme-toggle .sp-i{
    color:#ffd37d !important;
  }

  .sp-icon-btn .dot{
    top:-6px !important;
    right:-6px !important;
    min-width:20px !important;
    height:20px !important;
    border:2px solid #061426 !important;
  }

  .sp-lang-dropdown{
    right:0 !important;
    left:auto !important;
    min-width:82px !important;
    border-color:rgba(217,154,33,.45) !important;
    background:#061426 !important;
    z-index:1200 !important;
  }

  /* Top horizontal app nav */
  .sp-nav{
    background:#061426 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    border-bottom:1px solid rgba(217,154,33,.55) !important;
  }

  .sp-nav-inner{
    width:100% !important;
    min-height:58px !important;
    justify-content:flex-start !important;
    gap:8px !important;
    padding:0 12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
  }

  .sp-nav-inner::-webkit-scrollbar{
    display:none !important;
  }

  .sp-nav a{
    flex:0 0 auto !important;
    height:54px !important;
    padding:0 12px !important;
    border-radius:16px !important;
    color:rgba(255,255,255,.90) !important;
  }

  .sp-nav a::before{
    inset:8px 4px 7px !important;
    border-radius:15px !important;
    background:rgba(217,154,33,.13) !important;
    border:1px solid rgba(217,154,33,.25) !important;
  }

  .sp-nav a.is-active::before,
  .sp-nav a:hover::before{
    opacity:1 !important;
  }

  .sp-nav a .sp-i{
    width:16px !important;
    height:16px !important;
    padding:4px !important;
    color:#ffd37d !important;
    background:rgba(217,154,33,.12) !important;
    border-color:rgba(217,154,33,.30) !important;
  }

  .sp-nav a span:last-child{
    font-size:12px !important;
    font-weight:950 !important;
  }

  /* Page width and flow */
  .sp-main{
    width:100% !important;
    padding:12px 10px 0 !important;
  }

  .sp-dashboard{
    display:block !important;
    width:100% !important;
  }

  .sp-left,
  .sp-right{
    display:none !important;
  }

  /* Hero as app card */
  .sp-hero{
    min-height:560px !important;
    border-radius:26px !important;
    overflow:hidden !important;
    border:1px solid rgba(217,154,33,.22) !important;
    box-shadow:0 18px 46px rgba(8,24,45,.18) !important;
    background:#061426 !important;
  }

  .sp-hero-bg-stack{
    inset:0 !important;
    border-radius:inherit !important;
  }

  .sp-hero-bg-slide{
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    filter:none !important;
    opacity:0 !important;
    transform:none !important;
    transition:opacity .9s ease !important;
  }

  .sp-hero-bg-slide.is-active{
    opacity:1 !important;
  }

  .sp-hero::before,
  .sp-hero::after{
    display:none !important;
    content:none !important;
  }

  .sp-hero-inner{
    z-index:4 !important;
    padding:24px 18px 116px !important;
    min-height:448px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .sp-kicker{
    margin:0 0 14px !important;
    max-width:100% !important;
    padding:7px 11px !important;
    border-radius:999px !important;
    background:rgba(3,10,20,.54) !important;
    border:1px solid rgba(255,196,86,.38) !important;
    color:#ffe1a0 !important;
    backdrop-filter:blur(8px) !important;
    font-size:10.5px !important;
  }

  .sp-hero h1{
    display:block !important;
    width:fit-content !important;
    max-width:320px !important;
    margin:0 !important;
    padding:10px 12px !important;
    border-radius:18px !important;
    background:rgba(3,10,20,.50) !important;
    color:#fff !important;
    backdrop-filter:blur(7px) !important;
    font-size:31px !important;
    line-height:1.02 !important;
    letter-spacing:-.055em !important;
    text-shadow:none !important;
  }

  .sp-hero h1 span{
    color:#ffc456 !important;
  }

  .sp-hero p{
    max-width:340px !important;
    margin:14px 0 0 !important;
    padding:11px 12px !important;
    border-radius:16px !important;
    background:rgba(3,10,20,.47) !important;
    color:#fff !important;
    backdrop-filter:blur(7px) !important;
    font-size:13px !important;
    line-height:1.48 !important;
    font-weight:700 !important;
    text-shadow:none !important;
  }

  .sp-hero-actions{
    margin-top:18px !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:9px !important;
  }

  .sp-hero-actions .sp-btn{
    width:auto !important;
    min-width:0 !important;
    min-height:42px !important;
    padding:10px 14px !important;
    border-radius:999px !important;
    font-size:11.5px !important;
    white-space:nowrap !important;
  }

  .sp-hero-actions .sp-btn.gold{
    background:linear-gradient(135deg,#d99a21,#ffc456) !important;
    color:#071426 !important;
    box-shadow:0 12px 26px rgba(217,154,33,.25) !important;
  }

  .sp-hero-actions .sp-btn.dark{
    background:rgba(3,10,20,.56) !important;
    color:#fff !important;
    border-color:rgba(217,154,33,.50) !important;
    backdrop-filter:blur(8px) !important;
  }

  .sp-hero-search{
    display:none !important;
  }

  .sp-stats{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:5 !important;
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    min-height:92px !important;
    background:rgba(2,8,16,.82) !important;
    backdrop-filter:blur(10px) !important;
    border-top:1px solid rgba(255,255,255,.16) !important;
  }

  .sp-stat{
    min-height:92px !important;
    padding:14px 5px !important;
    text-align:center !important;
    background:rgba(2,8,16,.34) !important;
    border-left:1px solid rgba(255,255,255,.10) !important;
  }

  .sp-stat:first-child{
    border-left:0 !important;
  }

  .sp-stat b{
    font-size:20px !important;
    line-height:1.05 !important;
    color:#fff !important;
  }

  .sp-stat span{
    margin-top:3px !important;
    font-size:8.8px !important;
    line-height:1.12 !important;
    color:rgba(255,255,255,.86) !important;
    font-weight:900 !important;
  }

  /* Section cards */
  .sp-section{
    margin-top:22px !important;
  }

  .sp-section-head{
    padding:0 2px !important;
    margin-bottom:12px !important;
    align-items:flex-end !important;
  }

  .sp-section-head h2{
    font-size:22px !important;
    line-height:1.1 !important;
    letter-spacing:-.04em !important;
  }

  .sp-section-head p{
    font-size:12.5px !important;
  }

  .sp-section-head a{
    color:#071426 !important;
    font-size:11.5px !important;
    font-weight:950 !important;
  }

  .sp-listing-grid,
  .sp-opportunity-grid,
  .sp-opportunity-grid-ref{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .sp-listing-card,
  .sp-opportunity,
  .sp-opportunity-ref,
  .sp-opportunity-photo-card{
    border-radius:22px !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1px solid rgba(12,31,55,.10) !important;
    box-shadow:0 13px 30px rgba(8,24,45,.09) !important;
  }

  .sp-listing-media,
  .sp-opportunity-media{
    height:132px !important;
  }

  .sp-listing-body,
  .sp-opportunity-content{
    padding:13px !important;
  }

  .sp-listing-body strong,
  .sp-opportunity-content h3,
  .sp-opportunity-content strong{
    font-size:14px !important;
    line-height:1.25 !important;
  }

  .sp-listing-body small,
  .sp-opportunity-content p{
    font-size:11px !important;
    line-height:1.35 !important;
  }

  .sp-price{
    font-size:14px !important;
  }

  .sp-feature-strip{
    display:grid !important;
    grid-template-columns:1fr !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }

  .sp-feature{
    padding:18px !important;
  }

  .sp-connect-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .sp-connect-card{
    min-height:auto !important;
    border-radius:22px !important;
    padding:18px !important;
    box-shadow:0 13px 30px rgba(8,24,45,.08) !important;
  }

  .sp-footer-trust{
    width:calc(100% - 20px) !important;
    margin:24px auto 96px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    border-radius:24px !important;
  }

  .sp-footer-trust div{
    padding:18px !important;
    border-left:0 !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
  }

  .sp-footer-trust div:first-child{
    border-top:0 !important;
  }

  /* Bottom app nav */
  .sp-mobile-bottom{
    position:fixed !important;
    z-index:1300 !important;
    left:50% !important;
    right:auto !important;
    bottom:10px !important;
    transform:translateX(-50%) !important;
    width:min(440px,calc(100% - 24px)) !important;
    height:70px !important;
    padding:6px 8px !important;
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    border-radius:25px !important;
    background:
      radial-gradient(circle at 50% 0%,rgba(217,154,33,.13),transparent 12rem),
      linear-gradient(180deg,#061426 0%,#07111f 100%) !important;
    border:1px solid rgba(217,154,33,.55) !important;
    box-shadow:
      0 18px 44px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .sp-mobile-bottom a{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    height:58px !important;
    min-width:0 !important;
    border-radius:18px !important;
    color:rgba(255,255,255,.92) !important;
    text-decoration:none !important;
    background:transparent !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }

  .sp-mobile-bottom a::before{
    content:"" !important;
    position:absolute !important;
    inset:4px !important;
    border-radius:17px !important;
    background:rgba(217,154,33,.12) !important;
    border:1px solid rgba(217,154,33,.22) !important;
    opacity:0 !important;
  }

  .sp-mobile-bottom a.is-active::before,
  .sp-mobile-bottom a:hover::before{
    opacity:1 !important;
  }

  .sp-mobile-bottom a .sp-i,
  .sp-mobile-bottom a svg{
    position:relative !important;
    z-index:2 !important;
    width:18px !important;
    height:18px !important;
    color:currentColor !important;
    stroke:currentColor !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .sp-mobile-bottom a small{
    position:relative !important;
    z-index:2 !important;
    display:block !important;
    max-width:64px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    color:currentColor !important;
    font-size:8.8px !important;
    line-height:1.05 !important;
    font-weight:900 !important;
    opacity:1 !important;
  }

  .sp-mobile-bottom a.is-active{
    color:#ffd37d !important;
  }

  .sp-mobile-bottom a.sp-mobile-publish,
  .sp-mobile-bottom a:nth-child(3){
    transform:translateY(-11px) !important;
    height:72px !important;
    color:#ffd37d !important;
    z-index:4 !important;
  }

  .sp-mobile-bottom a.sp-mobile-publish::before,
  .sp-mobile-bottom a:nth-child(3)::before{
    display:none !important;
  }

  .sp-mobile-bottom a.sp-mobile-publish .sp-i,
  .sp-mobile-bottom a:nth-child(3) .sp-i,
  .sp-mobile-bottom a.sp-mobile-publish svg,
  .sp-mobile-bottom a:nth-child(3) svg{
    width:21px !important;
    height:21px !important;
    padding:10px !important;
    box-sizing:content-box !important;
    border-radius:999px !important;
    color:#071426 !important;
    stroke:#071426 !important;
    background:linear-gradient(135deg,#d99a21 0%,#ffc456 100%) !important;
    border:1px solid rgba(255,255,255,.32) !important;
    box-shadow:
      0 12px 26px rgba(217,154,33,.30),
      0 8px 18px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.32) !important;
  }

  .sp-mobile-bottom a.sp-mobile-publish small,
  .sp-mobile-bottom a:nth-child(3) small{
    color:#ffd37d !important;
    font-size:9px !important;
    font-weight:950 !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  /* Remove old residue forever */
  .sp-mobile-lang,
  [data-sp-mobile-lang]{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

@media (max-width:390px){
  .sp-hero{
    min-height:585px !important;
  }

  .sp-hero h1{
    max-width:294px !important;
    font-size:29px !important;
  }

  .sp-hero p{
    max-width:300px !important;
  }

  .sp-hero-actions{
    gap:7px !important;
  }

  .sp-hero-actions .sp-btn{
    padding:9px 11px !important;
    font-size:11px !important;
  }

  .sp-listing-grid,
  .sp-opportunity-grid,
  .sp-opportunity-grid-ref{
    gap:10px !important;
  }

  .sp-mobile-bottom a small{
    font-size:8.3px !important;
    max-width:58px !important;
  }
}

/* =========================================================
   Fix mobile dark/light toggle button
   ========================================================= */
@media (max-width:820px) and (orientation: portrait){

  .sp-theme-toggle{
    position:relative !important;
    z-index:1305 !important;
    display:inline-grid !important;
    place-items:center !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:16px !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    user-select:none !important;
    background:
      radial-gradient(circle at 35% 20%,rgba(255,255,255,.14),transparent 55%),
      rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    color:#ffd37d !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 10px 24px rgba(0,0,0,.18) !important;
  }

  .sp-theme-toggle:hover,
  .sp-theme-toggle:focus{
    outline:none !important;
    border-color:rgba(255,196,86,.55) !important;
    background:
      radial-gradient(circle at 35% 20%,rgba(255,196,86,.18),transparent 55%),
      rgba(255,255,255,.12) !important;
  }

  .sp-theme-toggle span[data-sp-theme-icon],
  .sp-theme-toggle span:first-child{
    display:grid !important;
    place-items:center !important;
    width:22px !important;
    height:22px !important;
    font-size:17px !important;
    line-height:1 !important;
    color:#ffd37d !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
  }

  .sp-theme-toggle [data-sp-theme-label]{
    display:none !important;
  }

  html[data-theme="dark"] .sp-theme-toggle,
  body[data-theme="dark"] .sp-theme-toggle{
    background:
      radial-gradient(circle at 35% 20%,rgba(255,196,86,.24),transparent 55%),
      rgba(217,154,33,.16) !important;
    border-color:rgba(255,196,86,.52) !important;
    color:#ffc456 !important;
  }

  html[data-theme="dark"] .sp-theme-toggle span[data-sp-theme-icon],
  body[data-theme="dark"] .sp-theme-toggle span[data-sp-theme-icon],
  html[data-theme="dark"] .sp-theme-toggle span:first-child,
  body[data-theme="dark"] .sp-theme-toggle span:first-child{
    color:#ffc456 !important;
  }

  /* Make sure nav/header layers do not block the button */
  .sp-top,
  .sp-top-inner,
  .sp-actions,
  .sp-lang-menu,
  .sp-icon-btn{
    pointer-events:auto !important;
  }

  .sp-top::before,
  .sp-top::after{
    pointer-events:none !important;
  }
}

/* Mobile restore for theme toggle */
@media (max-width:820px) and (orientation: portrait){
  .sp-theme-toggle{
    position:relative !important;
    z-index:1400 !important;
    display:inline-grid !important;
    place-items:center !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:16px !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    cursor:pointer !important;
  }

  .sp-theme-toggle [data-sp-theme-label]{
    display:none !important;
  }

  .sp-theme-toggle .sp-theme-icon,
  .sp-theme-toggle [data-sp-theme-icon]{
    display:grid !important;
    place-items:center !important;
    width:22px !important;
    height:22px !important;
    color:#ffd37d !important;
    font-size:18px !important;
    line-height:1 !important;
  }

  .sp-top,
  .sp-top-inner,
  .sp-actions{
    pointer-events:auto !important;
  }

  .sp-top::before,
  .sp-top::after{
    pointer-events:none !important;
  }
}

/* Final mobile clean theme toggle */
@media (max-width:820px){
  .sp-theme-toggle{
    position:relative !important;
    z-index:1500 !important;
    display:inline-grid !important;
    place-items:center !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:16px !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    cursor:pointer !important;
  }

  .sp-theme-toggle [data-sp-theme-label]{
    display:none !important;
  }

  .sp-theme-toggle .sp-theme-icon,
  .sp-theme-toggle [data-sp-theme-icon]{
    display:grid !important;
    place-items:center !important;
    width:22px !important;
    height:22px !important;
    color:#ffd37d !important;
    font-size:18px !important;
    line-height:1 !important;
  }

  .sp-top,
  .sp-top-inner,
  .sp-actions{
    pointer-events:auto !important;
  }

  .sp-top::before,
  .sp-top::after{
    pointer-events:none !important;
  }
}

/* =========================================================
   MOBILE DARK MODE REAL BACKGROUND
   Fix: mobile luxury layer was forcing light backgrounds.
   Scope: /sphere-preview mobile only through existing layout CSS.
   ========================================================= */
@media (max-width:820px){

  html[data-theme="dark"],
  html[data-theme="dark"] body.sphere-app-body,
  body.sphere-app-body[data-theme="dark"]{
    background:
      radial-gradient(circle at 50% -10%, rgba(217,154,33,.14), transparent 18rem),
      radial-gradient(circle at 100% 18%, rgba(54,94,140,.14), transparent 20rem),
      linear-gradient(180deg,#030812 0%,#061426 42%,#08111d 100%) !important;
    color:#f8fafc !important;
  }

  html[data-theme="dark"] .sp-page,
  body[data-theme="dark"] .sp-page{
    background:
      radial-gradient(circle at 50% -10%, rgba(217,154,33,.12), transparent 17rem),
      linear-gradient(180deg,#030812 0%,#061426 48%,#08111d 100%) !important;
    color:#f8fafc !important;
    box-shadow:none !important;
  }

  html[data-theme="dark"] .sp-main,
  body[data-theme="dark"] .sp-main{
    background:transparent !important;
    color:#f8fafc !important;
  }

  html[data-theme="dark"] .sp-top,
  body[data-theme="dark"] .sp-top{
    background:
      radial-gradient(circle at 8% 0%,rgba(217,154,33,.18),transparent 13rem),
      linear-gradient(180deg,#020712 0%,#061426 100%) !important;
    border-bottom-color:rgba(217,154,33,.46) !important;
  }

  html[data-theme="dark"] .sp-nav,
  body[data-theme="dark"] .sp-nav{
    background:#030812 !important;
    border-bottom-color:rgba(217,154,33,.45) !important;
  }

  html[data-theme="dark"] .sp-card,
  html[data-theme="dark"] .sp-listing-card,
  html[data-theme="dark"] .sp-opportunity,
  html[data-theme="dark"] .sp-opportunity-ref,
  html[data-theme="dark"] .sp-opportunity-photo-card,
  html[data-theme="dark"] .sp-connect-card,
  html[data-theme="dark"] .sp-feature,
  body[data-theme="dark"] .sp-card,
  body[data-theme="dark"] .sp-listing-card,
  body[data-theme="dark"] .sp-opportunity,
  body[data-theme="dark"] .sp-opportunity-ref,
  body[data-theme="dark"] .sp-opportunity-photo-card,
  body[data-theme="dark"] .sp-connect-card,
  body[data-theme="dark"] .sp-feature{
    background:
      radial-gradient(circle at 92% 8%, rgba(217,154,33,.10), transparent 6rem),
      linear-gradient(180deg,rgba(12,27,45,.98),rgba(7,18,32,.98)) !important;
    border-color:rgba(255,255,255,.10) !important;
    color:#f8fafc !important;
    box-shadow:0 16px 38px rgba(0,0,0,.32) !important;
  }

  html[data-theme="dark"] .sp-section-head h2,
  html[data-theme="dark"] .sp-listing-body strong,
  html[data-theme="dark"] .sp-opportunity-content h3,
  html[data-theme="dark"] .sp-opportunity-content strong,
  html[data-theme="dark"] .sp-connect-card strong,
  body[data-theme="dark"] .sp-section-head h2,
  body[data-theme="dark"] .sp-listing-body strong,
  body[data-theme="dark"] .sp-opportunity-content h3,
  body[data-theme="dark"] .sp-opportunity-content strong,
  body[data-theme="dark"] .sp-connect-card strong{
    color:#f8fafc !important;
  }

  html[data-theme="dark"] .sp-section-head p,
  html[data-theme="dark"] .sp-listing-body small,
  html[data-theme="dark"] .sp-opportunity-content p,
  html[data-theme="dark"] .sp-connect-card p,
  body[data-theme="dark"] .sp-section-head p,
  body[data-theme="dark"] .sp-listing-body small,
  body[data-theme="dark"] .sp-opportunity-content p,
  body[data-theme="dark"] .sp-connect-card p{
    color:rgba(248,250,252,.70) !important;
  }

  html[data-theme="dark"] .sp-price,
  body[data-theme="dark"] .sp-price{
    color:#ffd37d !important;
  }

  html[data-theme="dark"] .sp-listing-media,
  html[data-theme="dark"] .sp-opportunity-media,
  body[data-theme="dark"] .sp-listing-media,
  body[data-theme="dark"] .sp-opportunity-media{
    background:linear-gradient(135deg,#0b2037,#102a44) !important;
  }

  html[data-theme="dark"] .sp-feature-strip,
  html[data-theme="dark"] .sp-footer-trust,
  body[data-theme="dark"] .sp-feature-strip,
  body[data-theme="dark"] .sp-footer-trust{
    background:#061426 !important;
    border-color:rgba(255,255,255,.10) !important;
  }

  html[data-theme="dark"] .sp-mobile-bottom,
  body[data-theme="dark"] .sp-mobile-bottom{
    background:
      radial-gradient(circle at 50% 0%,rgba(217,154,33,.16),transparent 12rem),
      linear-gradient(180deg,#020712 0%,#061426 100%) !important;
    border-color:rgba(217,154,33,.58) !important;
    box-shadow:
      0 18px 44px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  html[data-theme="dark"] .sp-theme-toggle,
  body[data-theme="dark"] .sp-theme-toggle{
    background:rgba(217,154,33,.18) !important;
    border-color:rgba(255,196,86,.55) !important;
    color:#ffc456 !important;
  }
}

/* =========================================================
   MOBILE LUXURY TRUST FOOTER
   Turns the trust/footer block into premium mobile cards.
   ========================================================= */
@media (max-width:820px){

  .sp-footer-trust{
    width:calc(100% - 20px) !important;
    margin:26px auto 104px !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .sp-footer-trust div{
    position:relative !important;
    min-height:92px !important;
    padding:18px 18px 18px 64px !important;
    border-radius:22px !important;
    border:1px solid rgba(217,154,33,.22) !important;
    background:
      radial-gradient(circle at 96% 8%,rgba(255,196,86,.13),transparent 7rem),
      linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,248,235,.92)) !important;
    box-shadow:
      0 16px 36px rgba(8,24,45,.10),
      inset 0 1px 0 rgba(255,255,255,.86) !important;
    overflow:hidden !important;
  }

  .sp-footer-trust div::before{
    content:"" !important;
    position:absolute !important;
    left:18px !important;
    top:20px !important;
    width:34px !important;
    height:34px !important;
    border-radius:14px !important;
    background:
      radial-gradient(circle at 30% 22%,rgba(255,255,255,.32),transparent 52%),
      linear-gradient(135deg,#d99a21,#ffc456) !important;
    box-shadow:
      0 10px 22px rgba(217,154,33,.24),
      inset 0 1px 0 rgba(255,255,255,.35) !important;
  }

  .sp-footer-trust div::after{
    content:"" !important;
    position:absolute !important;
    left:31px !important;
    top:30px !important;
    width:8px !important;
    height:8px !important;
    border-radius:50% !important;
    background:#071426 !important;
    box-shadow:
      0 0 0 5px rgba(7,20,38,.10),
      0 0 0 10px rgba(7,20,38,.05) !important;
  }

  .sp-footer-trust b{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 0 6px !important;
    color:#111827 !important;
    font-size:15px !important;
    line-height:1.15 !important;
    letter-spacing:-.02em !important;
    font-weight:950 !important;
  }

  .sp-footer-trust b .sp-i{
    display:none !important;
  }

  .sp-footer-trust span{
    display:block !important;
    margin:0 !important;
    color:#536175 !important;
    font-size:12.5px !important;
    line-height:1.38 !important;
    font-weight:750 !important;
  }

  /* Dark mode version */
  html[data-theme="dark"] .sp-footer-trust,
  body[data-theme="dark"] .sp-footer-trust{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  html[data-theme="dark"] .sp-footer-trust div,
  body[data-theme="dark"] .sp-footer-trust div{
    border:1px solid rgba(217,154,33,.28) !important;
    background:
      radial-gradient(circle at 96% 8%,rgba(255,196,86,.13),transparent 7rem),
      linear-gradient(135deg,rgba(10,28,48,.96),rgba(4,14,26,.98)) !important;
    box-shadow:
      0 16px 38px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  html[data-theme="dark"] .sp-footer-trust b,
  body[data-theme="dark"] .sp-footer-trust b{
    color:#ffd37d !important;
  }

  html[data-theme="dark"] .sp-footer-trust span,
  body[data-theme="dark"] .sp-footer-trust span{
    color:rgba(248,250,252,.76) !important;
  }

  html[data-theme="dark"] .sp-footer-trust div::after,
  body[data-theme="dark"] .sp-footer-trust div::after{
    background:#061426 !important;
    box-shadow:
      0 0 0 5px rgba(6,20,38,.30),
      0 0 0 10px rgba(255,196,86,.08) !important;
  }
}

@media (max-width:390px){
  .sp-footer-trust div{
    min-height:88px !important;
    padding:16px 15px 16px 58px !important;
    border-radius:20px !important;
  }

  .sp-footer-trust div::before{
    left:15px !important;
    top:18px !important;
    width:32px !important;
    height:32px !important;
  }

  .sp-footer-trust div::after{
    left:27px !important;
    top:28px !important;
  }

  .sp-footer-trust b{
    font-size:14px !important;
  }

  .sp-footer-trust span{
    font-size:12px !important;
  }
}

/* =========================================================
   FIX BAD TRUST FOOTER FAKE ICONS
   Remove pseudo "eye" icons and use real SVG icons.
   ========================================================= */
@media (max-width:820px){

  .sp-footer-trust{
    width:calc(100% - 22px) !important;
    margin:24px auto 104px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .sp-footer-trust div{
    min-height:auto !important;
    padding:17px 18px !important;
    border-radius:22px !important;
    border:1px solid rgba(217,154,33,.22) !important;
    background:
      radial-gradient(circle at 96% 10%,rgba(255,196,86,.12),transparent 8rem),
      linear-gradient(135deg,#ffffff 0%,#fff8ea 100%) !important;
    box-shadow:
      0 14px 32px rgba(8,24,45,.08),
      inset 0 1px 0 rgba(255,255,255,.88) !important;
    overflow:hidden !important;
  }

  .sp-footer-trust div::before,
  .sp-footer-trust div::after{
    display:none !important;
    content:none !important;
  }

  .sp-footer-trust b{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 0 7px !important;
    color:#111827 !important;
    font-size:15px !important;
    line-height:1.15 !important;
    letter-spacing:-.02em !important;
    font-weight:950 !important;
  }

  .sp-footer-trust b .sp-i{
    display:block !important;
    flex:0 0 auto !important;
    width:18px !important;
    height:18px !important;
    padding:10px !important;
    box-sizing:content-box !important;
    border-radius:15px !important;
    color:#071426 !important;
    stroke:#071426 !important;
    background:linear-gradient(135deg,#d99a21,#ffc456) !important;
    border:1px solid rgba(255,255,255,.42) !important;
    box-shadow:
      0 10px 22px rgba(217,154,33,.22),
      inset 0 1px 0 rgba(255,255,255,.35) !important;
  }

  .sp-footer-trust span{
    display:block !important;
    margin:0 0 0 52px !important;
    color:#475467 !important;
    font-size:12.5px !important;
    line-height:1.38 !important;
    font-weight:760 !important;
  }

  html[data-theme="dark"] .sp-footer-trust,
  body[data-theme="dark"] .sp-footer-trust{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  html[data-theme="dark"] .sp-footer-trust div,
  body[data-theme="dark"] .sp-footer-trust div{
    border-color:rgba(217,154,33,.28) !important;
    background:
      radial-gradient(circle at 96% 10%,rgba(255,196,86,.13),transparent 8rem),
      linear-gradient(135deg,rgba(10,28,48,.97),rgba(4,14,26,.98)) !important;
    box-shadow:
      0 16px 38px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  html[data-theme="dark"] .sp-footer-trust b,
  body[data-theme="dark"] .sp-footer-trust b{
    color:#ffd37d !important;
  }

  html[data-theme="dark"] .sp-footer-trust span,
  body[data-theme="dark"] .sp-footer-trust span{
    color:rgba(248,250,252,.76) !important;
  }

  html[data-theme="dark"] .sp-footer-trust b .sp-i,
  body[data-theme="dark"] .sp-footer-trust b .sp-i{
    color:#071426 !important;
    stroke:#071426 !important;
    background:linear-gradient(135deg,#d99a21,#ffc456) !important;
  }
}

@media (max-width:390px){
  .sp-footer-trust div{
    padding:16px 15px !important;
    border-radius:20px !important;
  }

  .sp-footer-trust b{
    gap:10px !important;
    font-size:14px !important;
  }

  .sp-footer-trust b .sp-i{
    width:17px !important;
    height:17px !important;
    padding:9px !important;
    border-radius:14px !important;
  }

  .sp-footer-trust span{
    margin-left:48px !important;
    font-size:12px !important;
  }
}

/* Mobile Sphere projects home section */
@media (max-width:820px){
  .sp-opportunity-badge{
    min-height:24px !important;
    padding:0 9px !important;
    font-size:9px !important;
    color:#071426 !important;
    background:linear-gradient(135deg,#d99a21,#ffc456) !important;
  }

  html[data-theme="dark"] .sp-opportunity-badge,
  body[data-theme="dark"] .sp-opportunity-badge{
    color:#071426 !important;
    background:linear-gradient(135deg,#d99a21,#ffc456) !important;
  }
}

/* Mobile readability for Sphere project cards */
@media (max-width:820px){
  #sphere-projects .sp-opportunity{
    min-height:210px !important;
    padding:15px !important;
    border-radius:22px !important;
  }

  #sphere-projects .sp-opportunity strong{
    font-size:14px !important;
    line-height:1.25 !important;
  }

  #sphere-projects .sp-opportunity span:not(.sp-opportunity-badge){
    font-size:12px !important;
    line-height:1.38 !important;
  }

  #sphere-projects .sp-opportunity small{
    font-size:10.5px !important;
  }

  html[data-theme="dark"] #sphere-projects .sp-opportunity,
  body[data-theme="dark"] #sphere-projects .sp-opportunity{
    background:
      radial-gradient(circle at 92% 8%,rgba(255,196,86,.16),transparent 7rem),
      linear-gradient(180deg,#0d2138 0%,#071524 100%) !important;
  }
}

@media (max-width:820px){
  .sp-projects-shell,
  .sp-project-detail-shell{
    width:calc(100% - 20px) !important;
  }

  .sp-projects-hero-mini{
    margin:16px 0 18px !important;
    padding:24px 18px !important;
    border-radius:26px !important;
  }

  .sp-projects-hero-mini h1{
    font-size:34px !important;
  }

  .sp-project-grid-clean{
    grid-template-columns:1fr !important;
    gap:13px !important;
  }

  .sp-project-card-clean{
    min-height:auto !important;
    border-radius:22px !important;
  }

  .sp-project-detail-hero,
  .sp-project-detail-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .sp-project-detail-main{
    padding:26px 18px !important;
    border-radius:26px !important;
  }

  .sp-project-detail-main h1{
    font-size:35px !important;
  }

  .sp-project-detail-side,
  .sp-project-content-card{
    border-radius:24px !important;
    padding:18px !important;
  }
}

/* Mobile badge cleanup for Sphere project cards */
@media (max-width:820px){
  #sphere-projects .sp-project-card-top,
  .sp-project-card-clean .sp-project-card-top{
    top:11px !important;
    left:11px !important;
    right:11px !important;
    max-width:calc(100% - 22px) !important;
  }

  #sphere-projects .sp-project-type,
  .sp-project-card-clean .sp-project-type{
    max-width:100% !important;
    min-height:23px !important;
    height:23px !important;
    padding:0 9px !important;
    font-size:8.5px !important;
  }

  #sphere-projects .sp-project-featured,
  .sp-project-card-clean .sp-project-featured{
    display:none !important;
  }
}

@media (max-width:820px){
  #sphere-projects .sp-project-grid-home{
    grid-template-columns:1fr !important;
    gap:13px !important;
  }

  #sphere-projects .sp-project-card-home{
    min-height:auto !important;
  }

  #sphere-projects .sp-project-type{
    font-size:8.5px !important;
    max-width:100% !important;
  }
}

/* Mobile header i18n safety */
@media (max-width:820px){
  .sp-actions{
    width:auto !important;
    overflow:visible !important;
    gap:8px !important;
  }

  .sp-actions .sp-chip,
  .sp-actions .sp-user-chip,
  .sp-actions .sp-create-btn{
    max-width:72px !important;
  }

  .sp-actions .sp-create-btn span,
  .sp-actions .sp-user-chip strong,
  .sp-actions .sp-user-chip span,
  .sp-actions .sp-chip span:not([data-sp-theme-icon]){
    display:none !important;
  }
}

@media (max-width:820px){
  .sp-project-card-cover{
    height:150px !important;
    margin:-18px -18px 16px !important;
  }

  .sp-project-card-cover img{
    object-position:center !important;
  }
}