/* Begin Again — production UI parity layer
   Ports the approved Demo visual language into Laravel views without Demo runtime dependencies. */

:root{
  --ba-parity-surface:rgba(255,255,255,.82);
  --ba-parity-border:rgba(62,119,178,.15);
  --ba-parity-ink:#17345c;
  --ba-parity-muted:#5b748e;
  --ba-parity-shadow:0 18px 54px rgba(43,86,137,.15);
}
html[data-theme="dark"]{
  --ba-parity-surface:rgba(10,31,67,.84);
  --ba-parity-border:rgba(137,211,255,.16);
  --ba-parity-ink:#f4f9ff;
  --ba-parity-muted:#bfd0e6;
  --ba-parity-shadow:0 22px 64px rgba(0,8,31,.34);
}

/* Desktop/top navigation */
.navbar{z-index:1080!important;min-height:68px}
.navbar-brand-logo{filter:drop-shadow(0 2px 4px rgba(34,112,182,.16))}
.navbar .nav-link{font-weight:600;border-radius:10px;padding:.5rem .7rem!important;transition:background .18s ease,color .18s ease}
.navbar .nav-link:hover{background:rgba(79,124,255,.08)}
html[data-theme="dark"] .navbar .nav-link:hover{background:rgba(255,255,255,.07)}

/* Home problem cards — real production assets, no data URI or Demo JS. */
.cover-scene .topic-circle{
  position:relative!important;
  justify-content:flex-end!important;
  overflow:hidden!important;
  isolation:isolate;
  padding:0!important;
  background-color:#dbeeff!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border:1px solid rgba(255,255,255,.7)!important;
}
.cover-scene .topic-circle::before{display:none!important}
.cover-scene .topic-circle::after{
  content:"";position:absolute;inset:46% 0 0;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(9,35,72,.18) 16%,rgba(8,30,66,.64));
  pointer-events:none;
}
.cover-scene .topic-circle > span{
  position:relative;z-index:2;width:100%;padding:17px 12px 16px;
  color:#fff!important;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.48);
  background:linear-gradient(180deg,transparent,rgba(6,28,64,.24));
}
.cover-scene .topic-item:nth-child(1) .topic-circle{background-image:url('/images/experience/problem-learning.webp')!important}
.cover-scene .topic-item:nth-child(2) .topic-circle{background-image:url('/images/experience/problem-mental.webp')!important}
.cover-scene .topic-item:nth-child(3) .topic-circle{background-image:url('/images/experience/problem-family.webp')!important}
.cover-scene .topic-item:nth-child(4) .topic-circle{background-image:url('/images/experience/problem-love.webp')!important}
.cover-scene .topic-item:nth-child(5) .topic-circle{background-image:url('/images/experience/problem-social.webp')!important}
.cover-scene .topic-circle:hover{transform:translateY(-6px) scale(1.018)!important;box-shadow:0 22px 58px rgba(26,69,117,.26)!important}

/* About */
.about-hero,.about-section,.about-gallery{color:var(--ba-parity-ink)}
.about-title{color:var(--ba-parity-ink)!important;text-shadow:none!important}
.about-subtitle,.about-text{color:var(--ba-parity-muted)!important}
.about-card,.safe-box{
  background:var(--ba-parity-surface)!important;
  border:1px solid var(--ba-parity-border)!important;
  box-shadow:var(--ba-parity-shadow)!important;
  backdrop-filter:blur(18px) saturate(130%);
}
.safe-box{border-radius:24px!important}

/* Policy */
.policy-wrapper{width:min(1120px,calc(100% - 28px));margin-inline:auto!important;color:var(--ba-parity-ink)}
.policy-title{color:var(--ba-parity-ink)!important;text-shadow:none!important}
.policy-subtitle{color:var(--ba-parity-muted)!important}
.policy-card{
  background:var(--ba-parity-surface)!important;
  border:1px solid var(--ba-parity-border)!important;
  box-shadow:var(--ba-parity-shadow)!important;
  backdrop-filter:blur(18px) saturate(130%);
}
.policy-card h2,.policy-card h3,.policy-card h4{color:var(--ba-parity-ink)!important}
.policy-card p,.policy-card li{color:var(--ba-parity-muted)!important}
.policy-tabs,.policy-wrapper .nav-tabs{gap:6px;border:0!important;overflow-x:auto;flex-wrap:nowrap;padding:5px;border-radius:16px;background:rgba(79,124,255,.06)}
.policy-tabs button,.policy-wrapper .nav-link{white-space:nowrap;border:0!important;border-radius:12px!important;color:var(--ba-parity-muted)!important}
.policy-tabs button.active,.policy-wrapper .nav-link.active{background:linear-gradient(135deg,#4f7cff,#20c9b5)!important;color:#fff!important;box-shadow:0 8px 22px rgba(50,116,178,.2)}

/* Profile — preserve production functionality, refresh the surfaces. */
.profile-hero{color:var(--ba-parity-ink)}
.profile-name,.profile-meta-num,.info-value,.my-post-content{color:var(--ba-parity-ink)!important}
.profile-handle,.profile-meta-label,.info-label,.section-title{color:var(--ba-parity-muted)!important}
.nickname-card,.info-card,.profile-tabs,.my-post-card{
  background:var(--ba-parity-surface)!important;
  border:1px solid var(--ba-parity-border)!important;
  box-shadow:var(--ba-parity-shadow)!important;
  backdrop-filter:blur(16px) saturate(125%);
}
.profile-tabs{padding:5px!important;border-radius:15px!important}
.profile-tab{color:var(--ba-parity-muted)!important;border-radius:11px!important}
.profile-tab.active{background:linear-gradient(135deg,rgba(79,124,255,.16),rgba(32,201,181,.16))!important;color:#2871bc!important}
html[data-theme="dark"] .profile-tab.active{color:#9be7c4!important}
.my-post-actions{background:rgba(79,124,255,.08)!important}
.my-post-date,.my-post-stats{color:var(--ba-parity-muted)!important}
.profile-form-input,.profile-form-select,.nickname-input{
  background:rgba(255,255,255,.62)!important;color:#17345c!important;border-color:rgba(79,124,255,.18)!important
}
html[data-theme="dark"] .profile-form-input,html[data-theme="dark"] .profile-form-select,html[data-theme="dark"] .nickname-input{background:rgba(255,255,255,.07)!important;color:#f4f9ff!important}

/* Mobile bottom navigation */
@media(max-width:991px){
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
  #bottomNav{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:100vw!important;height:calc(80px + env(safe-area-inset-bottom))!important;
    min-height:calc(80px + env(safe-area-inset-bottom))!important;
    display:flex!important;align-items:stretch!important;
    padding:3px max(4px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important;
    overflow:hidden!important;z-index:2147483000!important;isolation:isolate!important;
    background:linear-gradient(180deg,rgba(239,250,255,.99),rgba(211,238,253,.995))!important;
    border-top:1px solid rgba(80,145,199,.22)!important;
    box-shadow:0 -10px 30px rgba(38,88,128,.17)!important;
    transform:translate3d(0,0,0)!important;-webkit-transform:translate3d(0,0,0)!important;
  }
  html[data-theme="dark"] #bottomNav{background:linear-gradient(180deg,rgba(16,49,94,.99),rgba(7,28,67,.998))!important;border-top-color:rgba(143,186,255,.22)!important}
  #bottomNav .bn-item{
    min-width:0!important;height:74px!important;flex:1 1 20%!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;
    gap:0!important;padding:0 1px 3px!important;color:#56718b!important;font-size:11px!important;line-height:1!important;overflow:hidden!important;
  }
  html[data-theme="dark"] #bottomNav .bn-item{color:#c5d8ed!important}
  #bottomNav .bn-item>i{display:none!important}
  #bottomNav .bn-item>span:not(.ba-nav-character){height:14px!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:14px!important}
  #bottomNav .bn-item.active{color:#2c78bb!important}
  .ba-nav-character{
    display:block!important;width:min(17vw,67px)!important;height:min(13.62vw,54px)!important;max-width:67px!important;max-height:54px!important;
    flex:0 0 auto!important;background-image:url('/images/experience/navbar-character-sprite.webp');background-repeat:no-repeat;background-size:500% 100%;background-position-y:center;
    filter:drop-shadow(0 1px 1px rgba(2,24,48,.12)) saturate(1.035);transition:transform .18s ease;
  }
  #bottomNav .bn-item.active .ba-nav-character{transform:scale(1.025)}
  .ba-nav-home{background-position-x:0%}.ba-nav-smiling{background-position-x:25%}.ba-nav-talk{background-position-x:50%}.ba-nav-account{background-position-x:75%}.ba-nav-more{background-position-x:100%}

  #moreSheet{
    z-index:2147483001!important;background:var(--ba-parity-surface)!important;color:var(--ba-parity-ink)!important;
    border:1px solid var(--ba-parity-border)!important;border-bottom:0!important;box-shadow:0 -20px 60px rgba(21,58,101,.25)!important;backdrop-filter:blur(22px) saturate(140%)!important
  }
  #moreBackdrop{z-index:2147483000!important}
  .more-item{color:var(--ba-parity-ink)!important}.more-item i{color:#4089c7!important}
  .more-divider{border-color:var(--ba-parity-border)!important}

  /* Copyright/footer must never sit above the fixed mobile nav. */
  footer,.site-footer,.footer{display:none!important}

  .cover-scene .topic-grid{gap:12px!important}
  .cover-scene .topic-circle{height:190px!important;border-radius:24px!important;background-position:center!important}
  .cover-scene .topic-item:last-child:nth-child(odd) .topic-circle{height:210px!important}
  .cover-scene .topic-circle>span{padding:16px 8px 13px!important;font-size:15px!important}

  .policy-wrapper{width:min(100% - 22px,1120px)!important;padding-bottom:110px!important}
  .profile-container,.profile-content{padding-bottom:105px!important}
}

@media(max-width:430px){
  .navbar-brand-logo{width:28px!important;height:33px!important}.navbar-brand-text{font-size:19px!important}
  #bottomNav .bn-item{font-size:10px!important}
  .cover-scene .topic-circle{height:168px!important}
}

/* Keyboard accessibility */
.visit-btn:focus-visible,.bn-item:focus-visible,.more-item:focus-visible,.navbar a:focus-visible{outline:3px solid rgba(79,124,255,.42)!important;outline-offset:2px}