
/* ==========================================================
   BusinessCardStudio v2.0 — Phase 6 Final Polish
   Unified navigation, accessibility, responsiveness, consistency.
   ========================================================== */

:root{
  --v2-bg:#263d56;
  --v2-bg-2:#304b67;
  --v2-panel:#f6f8fb;
  --v2-card:#ffffff;
  --v2-line:#c6d1dd;
  --v2-text:#21364b;
  --v2-muted:#667b90;
  --v2-primary:#4679b8;
  --v2-primary-hover:#386da9;
  --v2-accent:#559596;
  --v2-danger:#b55252;
  --v2-radius:14px;
  --v2-shadow:0 12px 30px rgba(13,31,48,.18);
}

/* Global consistency */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  background:linear-gradient(145deg,var(--v2-bg),var(--v2-bg-2))!important;
}
img,svg,canvas{max-width:100%}
button,input,select,textarea{font:inherit}
button,.btn,[role="button"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(104,177,255,.72)!important;
  outline-offset:3px!important;
}
button:disabled,.btn:disabled{
  opacity:.55!important;
  cursor:not-allowed!important;
}
::selection{background:#8bb7e5;color:#10263b}

/* Unified Google100 brand treatment */
.google100-logo,
.compact-logo,
.g100-wordmark{
  font-weight:800!important;
  letter-spacing:-.035em!important;
  white-space:nowrap!important;
}
.google100-logo span:nth-child(1),
.g100-wordmark span:nth-child(1){color:#4285f4!important}
.google100-logo span:nth-child(2),
.g100-wordmark span:nth-child(2){color:#ea4335!important}
.google100-logo span:nth-child(3),
.g100-wordmark span:nth-child(3){color:#fbbc05!important}
.google100-logo span:nth-child(4),
.g100-wordmark span:nth-child(4){color:#4285f4!important}
.google100-logo span:nth-child(5),
.g100-wordmark span:nth-child(5){color:#34a853!important}
.google100-logo span:nth-child(6),
.g100-wordmark span:nth-child(6){color:#ea4335!important}

/* Navigation */
.site-nav,
.home-nav,
.global-nav,
.brand-nav{
  align-items:center!important;
}
.site-nav a,
.home-nav a,
.global-nav a,
.brand-nav a,
.album-link{
  min-height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:11px!important;
  text-decoration:none!important;
  transition:background .18s ease,transform .18s ease,border-color .18s ease!important;
}
.site-nav a:hover,
.home-nav a:hover,
.global-nav a:hover,
.brand-nav a:hover,
.album-link:hover{
  transform:translateY(-1px);
}

/* Buttons */
button,.btn{
  border-radius:11px!important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease!important;
}
button:hover:not(:disabled),.btn:hover:not(:disabled){
  transform:translateY(-1px);
}
.primary,.btn-primary{
  background:linear-gradient(135deg,var(--v2-primary),var(--v2-accent))!important;
  color:#fff!important;
  border-color:transparent!important;
}
.primary:hover,.btn-primary:hover{
  background:linear-gradient(135deg,var(--v2-primary-hover),#47898a)!important;
}
.danger,.btn-danger{
  background:var(--v2-danger)!important;
  color:#fff!important;
}

/* Consistent panels */
.panel,.card,.dialog,.modal-content,.template-card,.album-card,
.builder-card,.contact-editor-card,.library-item{
  border-radius:var(--v2-radius)!important;
}
.panel,.card,.template-card,.album-card{
  box-shadow:var(--v2-shadow)!important;
}

/* Home polish */
.home-page,.home-shell{
  min-height:calc(100dvh - 38px)!important;
}
.home-hero{
  align-items:center!important;
}
.home-hero-copy{
  max-width:680px;
}
.home-hero-copy h1{
  line-height:1.06!important;
  text-wrap:balance;
}
.home-hero-copy p{
  line-height:1.7!important;
}
.home-feature-grid,
.feature-grid,
.workflow-grid{
  gap:18px!important;
}
.home-feature-card,
.feature-card,
.workflow-card{
  background:rgba(255,255,255,.96)!important;
  color:var(--v2-text)!important;
  border:1px solid rgba(255,255,255,.42)!important;
}

/* Template page */
.template-grid{
  align-items:stretch!important;
}
.template-card{
  overflow:hidden!important;
  border:1px solid rgba(198,209,221,.9)!important;
}
.template-card button,
.template-card .btn{
  min-height:42px!important;
}
.template-preview{
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  background:#eef2f6!important;
}
.template-toolbar{
  backdrop-filter:blur(12px);
  box-shadow:0 8px 22px rgba(16,35,53,.15)!important;
}

/* Album polish */
.album-featured{
  scrollbar-width:thin;
  scrollbar-color:#7692ac transparent;
  overscroll-behavior-inline:contain;
}
.album-featured::-webkit-scrollbar{height:10px}
.album-featured::-webkit-scrollbar-thumb{
  background:#7692ac;
  border-radius:999px;
}
.album-grid{
  align-items:stretch!important;
}
.album-card{
  overflow:hidden!important;
  border:1px solid rgba(198,209,221,.9)!important;
}
.album-toolbar{
  backdrop-filter:blur(12px);
  box-shadow:0 8px 22px rgba(16,35,53,.15)!important;
}
.album-search input,
.album-search{
  min-height:44px!important;
}

/* Footer stays readable everywhere */
.app-copyright,
.site-footer,
footer{
  color:#dbe6ef!important;
  background:#203449!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
}
.app-copyright a,
.site-footer a,
footer a{color:#fff!important}

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

/* High contrast support */
@media (forced-colors:active){
  button,.btn,a,input,select,textarea{
    forced-color-adjust:auto;
  }
}

/* Tablet refinements */
@media (max-width:900px){
  .home-hero{
    grid-template-columns:1fr!important;
  }
  .home-hero-media{
    max-width:680px!important;
    margin-inline:auto!important;
  }
  .home-hero-copy{
    max-width:760px!important;
    margin-inline:auto!important;
  }
  .template-grid,
  .album-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Phone refinements */
@media (max-width:620px){
  body{font-size:15px}
  .site-nav,
  .home-nav,
  .global-nav,
  .brand-nav{
    width:100%!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    padding-bottom:3px!important;
    scrollbar-width:none;
  }
  .site-nav::-webkit-scrollbar,
  .home-nav::-webkit-scrollbar,
  .global-nav::-webkit-scrollbar,
  .brand-nav::-webkit-scrollbar{display:none}
  .site-nav a,
  .home-nav a,
  .global-nav a,
  .brand-nav a{
    flex:0 0 auto!important;
  }
  .template-grid,
  .album-grid{
    grid-template-columns:1fr!important;
    padding-inline:12px!important;
  }
  .template-toolbar,
  .album-toolbar{
    position:sticky!important;
    top:0!important;
    z-index:80!important;
  }
  .home-hero-copy h1{
    font-size:clamp(2rem,11vw,3rem)!important;
  }
  .home-actions,
  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .home-actions .btn,
  .hero-actions .btn,
  .home-actions button,
  .hero-actions button{
    width:100%!important;
    min-height:48px!important;
  }
}

/* Very narrow phones */
@media (max-width:380px){
  .compact-logo,.google100-logo{font-size:.95rem!important}
  button,.btn{font-size:13px!important}
}
