/* Google100.net responsive professional refresh — loaded last. */
:root{
  --ui-page:#edf4fb;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f6f9fd;
  --ui-surface-blue:#eaf3ff;
  --ui-ink:#132238;
  --ui-muted:#60728a;
  --ui-line:#cfdaea;
  --ui-blue:#1769e0;
  --ui-blue-dark:#0d4fb5;
  --ui-teal:#078f91;
  --ui-gold:#d99b13;
  --ui-shadow:0 16px 45px rgba(31,65,110,.13);
  color-scheme:light;
}
html{background:var(--ui-page)}
html,body{max-width:100%;}
body{
  color:var(--ui-ink);
  background:linear-gradient(135deg,#eef6ff 0%,#f8fbff 45%,#effaf7 100%);
  padding-bottom:38px;
}
button,a,input,select,textarea{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(23,105,224,.25);outline-offset:2px}

/* Correct the footer-height collision and restore Studio scrolling. */
.app{
  height:calc(100vh - 38px)!important;
  height:calc(100dvh - 38px)!important;
  min-height:0!important;
  grid-template-columns:minmax(300px,370px) minmax(0,1fr)!important;
  background:var(--ui-page)!important;
}
.sidebar{
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  background:var(--ui-surface)!important;
  border-right:1px solid var(--ui-line)!important;
  box-shadow:8px 0 30px rgba(38,75,120,.08)!important;
}
.workspace{
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  grid-template-rows:64px minmax(0,1fr) auto!important;
  background:var(--ui-page)!important;
}
.panel-scroll{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:16px 15px 90px!important;
  scrollbar-color:#9eb6d4 #edf3fa;
}
.panel-scroll::after{content:"";display:block;height:36px}
.stage{
  min-height:0!important;
  overflow:auto!important;
  background:radial-gradient(circle at 50% 16%,rgba(64,137,226,.18),transparent 36%),linear-gradient(145deg,#dce9f8,#f5f9fd 58%,#e8f6f2)!important;
  border:0!important;
}

/* Brighter, professional Studio chrome. */
.brand{
  min-height:72px!important;height:auto!important;
  background:linear-gradient(115deg,#f9fcff,#eaf3ff)!important;
  border-bottom:1px solid var(--ui-line)!important;
  color:var(--ui-ink)!important;
}
.brand strong{color:#10233e!important}.brand small{color:var(--ui-muted)!important}
.brand-nav .album-link,.album-link,.panel-link{
  color:var(--ui-blue-dark)!important;background:#fff!important;border-color:#bfd0e6!important;
}
.brand-nav .album-link:hover,.album-link:hover,.panel-link:hover{background:var(--ui-surface-blue)!important;border-color:#75a8e7!important}
.tabs{
  background:#f4f8fd!important;border-bottom:1px solid var(--ui-line)!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.tabs button,.button-grid button,.topbar button,.sidebar>button,.tab-panel>button,.file-btn,
.library-actions button,.anchor-grid button,.icon-grid button{
  background:#fff!important;color:#243a57!important;border-color:#c8d6e7!important;
  box-shadow:0 2px 5px rgba(34,67,108,.04);
}
.tabs button:hover,.button-grid button:hover,.topbar button:hover,.tab-panel>button:hover,.file-btn:hover,
.library-actions button:hover,.anchor-grid button:hover,.icon-grid button:hover{background:#edf5ff!important;border-color:#72a5e5!important;color:#0d4fb5!important}
.tabs button.active,.primary{background:linear-gradient(135deg,#1769e0,#1385d9)!important;border-color:#1769e0!important;color:#fff!important}
.tab-panel{color:var(--ui-ink)!important}.tab-panel h2{color:#10233e!important}.tab-panel h3{color:#3e638d!important}
.tab-panel label{color:#445a73!important}
.tab-panel input,.tab-panel select,.tab-panel textarea,.select-field{
  background:#fff!important;color:#16283f!important;border-color:#c6d5e7!important;
}
.tab-panel input::placeholder,.tab-panel textarea::placeholder{color:#8a9bb0}
.tab-panel input:focus,.tab-panel select:focus,.tab-panel textarea:focus{border-color:#4d91e7!important;box-shadow:0 0 0 3px rgba(23,105,224,.12)}
.builder-card,.contact-editor-card,.library-item,.empty,.hint,.layer{
  background:var(--ui-surface-soft)!important;border-color:#d2deec!important;color:var(--ui-ink)!important;
}
.hint,.empty,.adjust-note,.library-empty,.template-empty{color:var(--ui-muted)!important}
.layer.active{background:#e7f1ff!important;border-color:#5896df!important}.layer button{background:#e3edf8!important;color:#214466!important}
.chips button{background:#fff!important;color:#36536f!important;border-color:#c8d6e7!important}.chips button.active{background:#1769e0!important;color:#fff!important}
.topbar{
  background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--ui-line)!important;
  color:var(--ui-ink)!important;backdrop-filter:blur(14px);
}
.topbar strong{color:#10233e}.topbar span{color:var(--ui-muted)!important}
.studio-tools-popover{background:#fff!important;border-color:#c8d6e7!important;box-shadow:var(--ui-shadow)!important}
.mobile-quick-actions{
  background:rgba(255,255,255,.96)!important;border-top:1px solid var(--ui-line)!important;
  padding-bottom:max(8px,env(safe-area-inset-bottom));
}
.mobile-quick-actions button{background:#fff!important;color:#173452!important;border:1px solid #c5d4e6!important}
.mobile-quick-actions .primary{color:#fff!important}
.toast{background:#fff!important;color:#18324e!important;border-color:#b9cce3!important;box-shadow:var(--ui-shadow)!important}

/* Home page: lively light professional styling. */
.home-view{
  min-height:calc(100dvh - 38px)!important;
  color:var(--ui-ink)!important;
  background:radial-gradient(circle at 10% 8%,rgba(66,133,244,.16),transparent 28%),radial-gradient(circle at 92% 15%,rgba(52,168,83,.13),transparent 28%),linear-gradient(145deg,#f4f9ff,#ffffff 48%,#effaf6)!important;
}
.home-header{
  background:rgba(255,255,255,.9)!important;border-bottom:1px solid var(--ui-line)!important;
  box-shadow:0 6px 22px rgba(42,77,119,.07);
}
.g-number,.g-domain{color:#1a2d45!important}
.home-nav a{color:#42566f!important}.home-nav a:hover,.home-nav a.active{color:#0e58c5!important;background:#eaf3ff!important;box-shadow:inset 0 0 0 1px #c5d9f3!important}
.home-hero{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(240,247,255,.98))!important;border-color:#c9daed!important;box-shadow:var(--ui-shadow)!important}
.home-hero h1{color:#10233e!important}.home-lead{color:#52677f!important}.home-kicker{color:#087d89!important}
.home-benefit-list div{background:#fff!important;border-color:#d4e1ef!important;box-shadow:0 8px 22px rgba(40,76,118,.07)}
.home-benefit-list strong{color:#18304c!important}.home-benefit-list span,.home-trust-row{color:#64788e!important}
.home-btn{background:#fff!important;color:#173c68!important;border-color:#bfd0e4!important}.home-btn.primary{color:#fff!important;background:linear-gradient(135deg,#1769e0,#078f91)!important;border-color:#1769e0!important}
.home-feature-grid article{background:#fff!important;border-color:#d0deed!important;box-shadow:0 12px 30px rgba(37,72,113,.09)!important}
.home-feature-grid h2{color:#17304c}.home-feature-grid p{color:#61758c!important}.home-feature-grid a{color:#0c67cf!important}
.home-cta{background:linear-gradient(115deg,#e8f3ff,#e9faf4)!important;border-color:#b9dfd7!important;box-shadow:0 14px 34px rgba(38,91,108,.09)}
.home-cta h2{color:#153451}.home-cta p{color:#61758c!important}

/* Templates and My Album get the same brighter visual system. */
:is(#albumView,#myAlbumView){background:linear-gradient(145deg,#eef6ff,#fbfdff 55%,#effaf6)!important;color:var(--ui-ink)!important;min-height:calc(100dvh - 38px)!important}
:is(#albumView,#myAlbumView) .album-header{background:rgba(255,255,255,.94)!important;border-color:var(--ui-line)!important;box-shadow:0 6px 22px rgba(42,77,119,.07)}
:is(#albumView,#myAlbumView) .album-header strong,:is(#albumView,#myAlbumView) h1,:is(#albumView,#myAlbumView) h2,:is(#albumView,#myAlbumView) h3{color:#132b47!important}
:is(#albumView,#myAlbumView) .album-header small,:is(#albumView,#myAlbumView) p,:is(#albumView,#myAlbumView) .note,:is(#albumView,#myAlbumView) .section-copy{color:#60748b!important}
:is(#albumView,#myAlbumView) .back-link,:is(#albumView,#myAlbumView) .create-link{background:#fff!important;color:#125cbf!important;border-color:#c2d3e7!important}
:is(#albumView,#myAlbumView) .hero,:is(#albumView,#myAlbumView) .template-album-library,:is(#albumView,#myAlbumView) .showcase,:is(#albumView,#myAlbumView) .library{background:rgba(255,255,255,.84)!important;border-color:#ccdaea!important;box-shadow:0 14px 36px rgba(39,75,117,.08)!important}
:is(#albumView,#myAlbumView) .stats>div,:is(#albumView,#myAlbumView) .album-card,:is(#albumView,#myAlbumView) .carousel-card{background:#fff!important;border-color:#ccdbea!important;color:var(--ui-ink)!important}
:is(#albumView,#myAlbumView) .template-search-tools input,:is(#albumView,#myAlbumView) .template-search-tools button,:is(#albumView,#myAlbumView) .search-wrap input,:is(#albumView,#myAlbumView) .search-wrap button{background:#fff!important;color:#18324e!important;border-color:#c7d6e7!important}
:is(#albumView,#myAlbumView) .album-template-categories button{background:#fff!important;color:#36536f!important;border-color:#c7d6e7!important}
:is(#albumView,#myAlbumView) .album-template-categories button.active{background:#1769e0!important;color:#fff!important;border-color:#1769e0!important}

/* Copyright stays readable without turning the whole interface black. */
.global-copyright{background:rgba(245,249,253,.97)!important;color:#60728a!important;border-top-color:#c9d7e7!important;box-shadow:0 -5px 18px rgba(36,69,108,.06)}
.global-copyright strong{color:#1b3552!important}

@media(max-width:1100px){
  .app{grid-template-columns:320px minmax(0,1fr)!important}
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .home-main{padding-inline:24px!important}
}

/* Tablet and phone: preview first, editor controls below, and one natural page scroll. */
@media(max-width:820px){
  html,body{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important}
  body{padding-bottom:42px!important}
  .app{
    display:flex!important;flex-direction:column!important;
    height:auto!important;min-height:calc(100dvh - 42px)!important;
    overflow:visible!important;
  }
  .workspace{
    order:1!important;width:100%!important;height:auto!important;min-height:0!important;
    overflow:visible!important;display:grid!important;grid-template-rows:auto auto auto!important;
  }
  .sidebar{
    order:2!important;position:relative!important;inset:auto!important;transform:none!important;
    width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;
    overflow:visible!important;box-shadow:none!important;border-right:0!important;border-top:1px solid var(--ui-line)!important;
  }
  .sidebar-scrim,.mobile-panel-toggle,.mobile-panel-close,.mobile-top-tools{display:none!important}
  .brand{position:relative!important;min-height:64px!important;padding:12px 14px!important;flex-wrap:wrap!important}
  .brand-nav{margin-left:0!important;width:100%!important;overflow-x:auto!important;padding-top:6px!important}
  .tabs{
    position:sticky!important;top:0!important;z-index:45!important;
    display:flex!important;overflow-x:auto!important;grid-template-columns:none!important;
    padding:9px!important;gap:7px!important;scrollbar-width:thin;
  }
  .tabs button{flex:0 0 auto!important;min-width:90px!important;min-height:42px!important;font-size:12px!important}
  .panel-scroll{overflow:visible!important;max-height:none!important;padding:15px 14px 110px!important}
  .topbar{position:sticky!important;top:0!important;z-index:50!important;min-height:58px!important;height:auto!important;padding:8px 10px!important;flex-wrap:wrap!important}
  .top-actions{margin-left:auto!important;max-width:100%!important;overflow-x:auto!important;padding-bottom:2px!important}
  .always-visible-studio-bars,.always-visible-history-bar,.always-visible-health-bar,.always-visible-sides-bar,.always-visible-print-bar,.always-visible-alignment-bar{display:none!important}
  .stage{
    width:100%!important;height:min(48dvh,470px)!important;min-height:285px!important;
    overflow:auto!important;padding:18px 14px 28px!important;align-items:flex-start!important;justify-content:flex-start!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .card-wrap{margin:auto!important}
  .mobile-quick-actions{
    position:sticky!important;bottom:42px!important;z-index:48!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(70px,1fr))!important;
    gap:7px!important;overflow-x:auto!important;padding:9px 10px!important;
  }
  .mobile-quick-actions button{min-height:44px!important;white-space:nowrap!important}
  .button-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .home-header{position:relative!important}
  .home-main{padding:20px 14px 58px!important}
  .home-hero{grid-template-columns:1fr!important;padding:22px!important;gap:28px!important}
  .home-hero-visual{max-width:620px!important}
  .home-hero-content{text-align:left!important}.home-actions,.home-trust-row{justify-content:flex-start!important}
  :is(#albumView,#myAlbumView) .album-main{padding-bottom:82px!important}
  .global-copyright{min-height:42px!important}
}

@media(max-width:560px){
  .google100-logo{font-size:27px!important}
  .home-nav{gap:4px!important}.home-nav a{padding:8px 10px!important;font-size:13px!important}
  .home-hero h1{font-size:clamp(34px,11vw,46px)!important}.home-lead{font-size:16px!important}
  .home-benefit-list,.home-feature-grid{grid-template-columns:1fr!important}
  .home-actions .home-btn{width:100%!important}
  .stage{height:42dvh!important;min-height:250px!important;padding:12px 8px 22px!important}
  .topbar-title span{max-width:110px!important}
  .zoom-controls button:nth-of-type(1),.zoom-controls button:nth-of-type(2){display:none!important}
  .studio-tools-menu summary{padding:8px 10px!important}
  .mobile-quick-actions{grid-template-columns:repeat(5,92px)!important;justify-content:flex-start!important}
  .button-grid,.grid2{grid-template-columns:1fr!important}
  .tabs button{min-width:84px!important}
  :is(#albumView,#myAlbumView) .album-template-grid,:is(#albumView,#myAlbumView) .album-grid{grid-template-columns:1fr!important}
  :is(#albumView,#myAlbumView) .album-header{grid-template-columns:auto minmax(0,1fr) auto!important}
}

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