
/* ==========================================================
   Google100.net — Blue Contrast & Readability Fix
   This stylesheet is intentionally loaded last.
   ========================================================== */

:root{
  --blue-950:#102a43;
  --blue-900:#173b5e;
  --blue-850:#1d466d;
  --blue-800:#24527d;
  --blue-700:#286da8;
  --blue-600:#3688c8;
  --blue-500:#55a8df;
  --blue-200:#cdeaff;
  --blue-100:#e9f6ff;
  --blue-050:#f6fbff;
  --ink:#17324d;
  --muted:#557089;
  --line:#b9d5e8;
  --white:#ffffff;
}

/* Entire application */
html,
body{
  background:linear-gradient(145deg,#dceefa 0%,#f5fbff 52%,#d5e9f7 100%)!important;
  color:var(--ink)!important;
}

.home-view,
#albumView,
#myAlbumView{
  background:
    radial-gradient(circle at 8% 8%,rgba(85,168,223,.25),transparent 26%),
    radial-gradient(circle at 92% 12%,rgba(40,109,168,.17),transparent 30%),
    linear-gradient(145deg,#e5f4ff,#f8fcff 52%,#d9edf9)!important;
  color:var(--ink)!important;
}

/* Header bars */
.home-header,
.album-header{
  background:linear-gradient(100deg,var(--blue-950),var(--blue-800))!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 8px 24px rgba(16,42,67,.24)!important;
}

#editorSidebar .brand,
#appShell .topbar,
.template-toolbar,
.album-toolbar{
  background:linear-gradient(110deg,var(--blue-950),var(--blue-800))!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.17)!important;
}

/* Google100.net logo: every part remains visible on dark blue */
.google100-logo{
  text-shadow:0 1px 1px rgba(0,0,0,.12)!important;
}
.google100-logo .g-blue{color:#74b7ff!important}
.google100-logo .g-red{color:#ff796f!important}
.google100-logo .g-yellow{color:#ffd45c!important}
.google100-logo .g-green{color:#64d98a!important}
.google100-logo .g-number{
  color:#ffffff!important;
  font-weight:900!important;
  margin-left:2px!important;
  text-shadow:0 0 10px rgba(117,190,255,.3)!important;
}
.google100-logo .g-domain{
  color:#bfe7ff!important;
  font-weight:800!important;
}

/* Main navigation: strong contrast in every state */
.home-nav a,
.site-nav a,
.global-nav a,
.brand-nav a,
.album-link{
  color:#f4faff!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  font-weight:750!important;
  opacity:1!important;
}

.home-nav a:hover,
.site-nav a:hover,
.global-nav a:hover,
.brand-nav a:hover,
.album-link:hover{
  color:#fff!important;
  background:rgba(85,168,223,.32)!important;
  border-color:rgba(205,234,255,.7)!important;
}

.home-nav a.active,
.site-nav a.active,
.global-nav a.active,
.brand-nav a.active,
.album-link.active{
  color:var(--blue-950)!important;
  background:#e6f6ff!important;
  border-color:#fff!important;
  box-shadow:0 5px 14px rgba(4,25,44,.22)!important;
}

/* Studio navigation and workspace */
#appShell.app{
  background:linear-gradient(145deg,var(--blue-950),var(--blue-800))!important;
}

#editorSidebar.sidebar{
  background:#eaf4fb!important;
  border-color:#a9c9dd!important;
}

#editorSidebar .brand strong,
#appShell .topbar strong{
  color:#fff!important;
}

#editorSidebar .brand small,
#appShell .topbar span{
  color:#d7eeff!important;
}

#editorSidebar .tabs{
  background:#d4e8f5!important;
  border-color:#abc9dc!important;
}

#editorSidebar .tabs button{
  background:#f8fcff!important;
  color:#244d70!important;
  border-color:#abc9dc!important;
}

#editorSidebar .tabs button:hover{
  background:#dff2ff!important;
  color:#123d63!important;
}

#editorSidebar .tabs button.active{
  background:linear-gradient(135deg,#2879b7,#42a1d7)!important;
  color:#fff!important;
  border-color:#1e6fa9!important;
}

#editorSidebar .panel-scroll{
  background:#eaf4fb!important;
  color:var(--ink)!important;
}

#editorSidebar .tab-panel h2,
#editorSidebar .tab-panel h3,
#editorSidebar .tab-panel label{
  color:var(--ink)!important;
}

#editorSidebar .builder-card,
#editorSidebar .contact-editor-card,
#editorSidebar .library-item,
#editorSidebar .layer,
#editorSidebar .hint{
  background:#fff!important;
  color:var(--ink)!important;
  border-color:#b7d1e2!important;
}

#editorSidebar input,
#editorSidebar select,
#editorSidebar textarea{
  background:#fff!important;
  color:#17324d!important;
  border-color:#9fc2d9!important;
}

#appShell .workspace,
#appShell .stage{
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    radial-gradient(circle at center,rgba(83,160,213,.25),transparent 56%),
    linear-gradient(145deg,#183b5b,#28638f)!important;
  background-size:32px 32px,32px 32px,auto,auto!important;
}

/* General page content */
.home-hero,
.home-benefit-list div,
.home-feature-grid article,
.home-workflow,
.home-cta,
#albumView .hero,
#myAlbumView .hero,
#albumView .template-album-library,
#myAlbumView .template-album-library,
#albumView .showcase,
#myAlbumView .showcase,
#albumView .library,
#myAlbumView .library,
.template-card,
.album-card,
.carousel-card,
.stats>div{
  background:#fff!important;
  color:var(--ink)!important;
  border-color:#bad4e5!important;
}

.home-hero h1,
.home-feature-grid h2,
.home-workflow h2,
.home-cta h2,
#albumView h1,
#albumView h2,
#albumView h3,
#myAlbumView h1,
#myAlbumView h2,
#myAlbumView h3{
  color:#163b5e!important;
}

.home-lead,
.home-feature-grid p,
.home-workflow p,
.home-cta p,
#albumView p,
#myAlbumView p,
.section-copy,
.note{
  color:#526f88!important;
}

.home-kicker,
.workflow-heading>span,
.home-cta>div>span{
  color:#1e76b5!important;
}

.home-feature-grid article a,
#albumView a:not(.google100-logo),
#myAlbumView a:not(.google100-logo){
  color:#126cae!important;
}

/* Buttons and controls */
button,
.btn,
.home-btn,
#albumView .back-link,
#myAlbumView .back-link,
#albumView .create-link,
#myAlbumView .create-link{
  background:#edf7fd!important;
  color:#17486f!important;
  border-color:#a9cce2!important;
}

button:hover,
.btn:hover,
.home-btn:hover,
#albumView .back-link:hover,
#myAlbumView .back-link:hover{
  background:#d7effd!important;
  color:#0e3d64!important;
  border-color:#6faed4!important;
}

button.primary,
.btn-primary,
.home-btn.primary,
.primary{
  background:linear-gradient(135deg,#2478b7,#3e9fd3)!important;
  color:#fff!important;
  border-color:#1d6fa9!important;
}

button.primary:hover,
.btn-primary:hover,
.home-btn.primary:hover,
.primary:hover{
  background:linear-gradient(135deg,#1d68a2,#328fc5)!important;
  color:#fff!important;
}

/* Template and album controls */
.template-search-tools input,
.search-wrap input,
.album-search,
.album-search input{
  background:#fff!important;
  color:var(--ink)!important;
  border-color:#9fc4dc!important;
}

.album-template-categories button{
  background:#edf7fd!important;
  color:#245576!important;
  border-color:#afd0e3!important;
}

.album-template-categories button.active{
  background:#2479b8!important;
  color:#fff!important;
  border-color:#1d6ca3!important;
}

/* Footer */
.global-copyright,
.app-copyright,
.site-footer,
footer{
  background:#102e49!important;
  color:#dcefff!important;
  border-color:rgba(255,255,255,.13)!important;
}

.global-copyright strong,
.app-copyright strong,
.site-footer strong,
footer strong{
  color:#fff!important;
}

/* Clear keyboard focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:3px solid #74c6ff!important;
  outline-offset:3px!important;
}

/* Mobile navigation remains legible */
@media(max-width:620px){
  .home-header{
    background:linear-gradient(145deg,var(--blue-950),var(--blue-800))!important;
  }
  .home-nav a,
  .brand-nav a{
    color:#f4faff!important;
    background:rgba(255,255,255,.1)!important;
  }
  .home-nav a.active,
  .brand-nav a.active{
    color:#123b5d!important;
    background:#e8f7ff!important;
  }
}
