/* ToolTapGo Google Play App Icon Generator isolated layout fix.
   Loaded only by the Google Play icon tool to prevent shared CSS regressions. */

/* Google Play App Icon Generator v2 — compact tabs, aligned controls and early previews. */
.app-icon-builder-v2{gap:18px}
.app-icon-mode-card-v2,
.app-icon-source-panel-v2,
.app-icon-preview-shell-v2{padding:18px;border-radius:18px}
.app-icon-section-heading-v2{margin-bottom:12px}
.app-icon-section-heading-v2 h3{margin-top:3px;font-size:1rem}
.app-icon-tabs{
  display:inline-grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(100%,430px);
  gap:4px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2)
}
.app-icon-tabs button{
  min-height:44px!important;
  justify-content:center!important;
  gap:8px!important;
  padding:0 16px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--muted)!important;
  font:800 .78rem/1 inherit!important;
  text-align:center!important;
  transform:none!important
}
.app-icon-tabs button>i{
  width:auto!important;
  height:auto!important;
  display:inline-block!important;
  border-radius:0!important;
  background:transparent!important;
  color:currentColor!important;
  font-size:.94rem!important
}
.app-icon-tabs button.is-active{
  background:var(--surface)!important;
  color:var(--ink)!important;
  box-shadow:0 2px 8px rgba(22,32,45,.08)!important
}
.app-icon-panel-heading{margin-bottom:15px}
.app-icon-panel-heading>div{display:flex;align-items:flex-start;gap:11px}
.app-icon-panel-heading h2,
.app-icon-panel-heading h3{margin:0 0 4px;font-size:1rem}
.app-icon-panel-heading p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.55}
.app-icon-step{width:29px;height:29px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:var(--brand-soft);color:var(--brand);font-size:.72rem;font-weight:900}
.app-icon-settings-v2{margin-top:16px;padding:16px;gap:15px}
.app-icon-settings-v2 label{min-width:0}
.app-icon-full-row{grid-column:1/-1}
.app-icon-adaptive-grid-v2{gap:14px}
.app-icon-layer-card-v2{padding:16px;gap:14px;background:var(--surface-2)}
.app-icon-layer-card-v2 .ttg-upload-shell{margin:0}
.app-icon-layer-size{margin-top:0}
.app-icon-background-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface)
}
.app-icon-background-tabs button{
  min-height:40px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font:800 .73rem/1 inherit
}
.app-icon-background-tabs button.is-active{background:var(--brand-soft);color:var(--brand);box-shadow:none}
.app-icon-background-panel[hidden]{display:none!important}
.app-icon-preview-shell-v2{background:var(--surface)}
.app-icon-preview-shell-v2 .app-icon-preview-head{margin-bottom:13px}
.app-icon-preview-shell-v2 .app-icon-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.app-icon-preview-shell-v2 .app-icon-preview-card{min-height:82px;padding:9px;grid-template-columns:58px minmax(0,1fr);gap:10px}
.app-icon-preview-shell-v2 .app-icon-thumb,
.app-icon-preview-shell-v2 .app-icon-thumb canvas{width:58px;height:58px}
.app-icon-export-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px}
.app-icon-export-row .app-icon-zip-setting{min-width:0;margin:0;padding:0;border:0;background:transparent}
.app-icon-export-row .app-icon-download{width:auto;min-width:245px;min-height:52px;margin:0;white-space:nowrap}
.app-icon-builder-v2 .app-icon-range-heading{margin:-24px 2px 0}
.app-icon-builder-v2 .app-icon-quality-note{margin:0}
@media(max-width:900px){
  .app-icon-preview-shell-v2 .app-icon-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-icon-export-row{grid-template-columns:1fr}
  .app-icon-export-row .app-icon-download{width:100%;min-width:0}
}
@media(max-width:650px){
  .app-icon-mode-card-v2,.app-icon-source-panel-v2,.app-icon-preview-shell-v2{padding:14px;border-radius:15px}
  .app-icon-tabs{width:100%}

/* 2026-07-24 repaired app-icon layout and adaptive final preview. */
@media(max-width:800px){
  .site-header .nav-actions [data-account-link],
  .site-header .nav-actions [data-register-link]{display:none!important}
}

/* Keep the generator visually consistent with standard ToolTapGo panels. */
body[data-tool="google-play-app-icon-generator"] .app-icon-builder-v2{gap:18px}
body[data-tool="google-play-app-icon-generator"] .app-icon-mode-card-v2,
body[data-tool="google-play-app-icon-generator"] .app-icon-source-panel-v2,
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2{
  padding:18px!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:var(--surface)!important;
  box-shadow:none!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-section-heading-v2{margin-bottom:12px}
body[data-tool="google-play-app-icon-generator"] .app-icon-section-heading-v2 h3{margin:4px 0 0;font-size:1rem;line-height:1.3}
body[data-tool="google-play-app-icon-generator"] .app-icon-tabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:min(100%,430px)!important;
  gap:4px!important;
  padding:4px!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:var(--surface-2)!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-tabs button{
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--muted)!important;
  box-shadow:none!important;
  font-size:.78rem!important;
  font-weight:850!important;
  line-height:1!important;
  transform:none!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-tabs button.is-active{
  background:var(--surface)!important;
  color:var(--ink)!important;
  box-shadow:0 2px 8px rgba(22,32,45,.08)!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-tabs button>i{
  width:auto!important;height:auto!important;display:inline-block!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  color:currentColor!important;font-size:.95rem!important
}

body[data-tool="google-play-app-icon-generator"] .app-icon-panel-heading{margin-bottom:15px}
body[data-tool="google-play-app-icon-generator"] .app-icon-panel-heading>div{display:flex;align-items:flex-start;gap:11px}
/* The panels emit <h2>, so these rules only ever reached the <h3> variant: the
   heading kept the 24px/38.9px page default and the step badge, top-aligned
   against that tall line box, sat above the text. Matching both tags restores
   the panel size, and the badge-height min-height centres the first line on the
   badge. */
body[data-tool="google-play-app-icon-generator"] .app-icon-panel-heading h2,
body[data-tool="google-play-app-icon-generator"] .app-icon-panel-heading h3{
  display:flex;
  align-items:center;
  min-height:30px;
  margin:0 0 5px;
  font-size:1rem;
  line-height:1.3
}
body[data-tool="google-play-app-icon-generator"] .app-icon-panel-heading p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.55}
body[data-tool="google-play-app-icon-generator"] .app-icon-step{
  width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;
  border-radius:9px;background:var(--brand-soft);color:var(--brand);font-size:.72rem;font-weight:900
}
body[data-tool="google-play-app-icon-generator"] .app-icon-settings-v2{margin-top:16px;padding:16px;gap:15px}
body[data-tool="google-play-app-icon-generator"] .app-icon-settings-v2 label{min-width:0}
body[data-tool="google-play-app-icon-generator"] .app-icon-full-row{grid-column:1/-1}

body[data-tool="google-play-app-icon-generator"] .app-icon-adaptive-grid-v2{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-layer-card-v2{
  min-width:0!important;
  display:grid!important;
  align-content:start!important;
  gap:15px!important;
  padding:17px!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:var(--surface-2)!important;
  box-shadow:none!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-layer-title{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  margin:0!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-layer-title>div{display:grid!important;gap:4px!important;min-width:0!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-layer-title b{display:block!important;font-size:.88rem!important;line-height:1.3!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-layer-title small{display:block!important;margin:0!important;color:var(--muted)!important;font-size:.7rem!important;line-height:1.45!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-layer-number{
  width:29px;height:29px;display:grid;place-items:center;flex:0 0 29px;
  border-radius:9px;background:var(--brand-soft);color:var(--brand);font-size:.72rem;font-weight:900
}
body[data-tool="google-play-app-icon-generator"] .app-icon-layer-card-v2 label{display:grid!important;gap:7px!important;min-width:0!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-layer-card-v2 label>small{display:block!important;margin:0!important;line-height:1.5!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-layer-card-v2 .ttg-upload-shell{margin:0!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-layer-size{margin:0!important}

body[data-tool="google-play-app-icon-generator"] .app-icon-background-tabs{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:4px!important;padding:4px!important;border:1px solid var(--line)!important;
  border-radius:13px!important;background:var(--surface)!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-background-tabs button{
  min-height:40px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:8px!important;padding:0 12px!important;border:0!important;border-radius:9px!important;
  background:transparent!important;color:var(--muted)!important;box-shadow:none!important;
  font-size:.73rem!important;font-weight:850!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-background-tabs button.is-active{
  background:var(--brand-soft)!important;color:var(--brand)!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-background-panel[hidden]{display:none!important}

/* Preview cards: at least 88px artwork, balanced standard cards and three clean adaptive cards. */
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2{background:var(--surface)!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2 .app-icon-preview-head{margin-bottom:14px}
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2 .app-icon-preview-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:11px!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2 .app-icon-preview-card{
  min-width:0!important;min-height:112px!important;display:grid!important;
  grid-template-columns:88px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;
  padding:11px!important;border:1px solid var(--line)!important;border-radius:15px!important;
  background:var(--surface)!important;box-shadow:none!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2 .app-icon-thumb,
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2 .app-icon-thumb canvas{
  width:88px!important;height:88px!important;min-width:88px!important;max-width:none!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-preview-card{
  min-height:210px!important;
  grid-template-columns:1fr!important;
  grid-template-rows:96px auto!important;
  align-content:start!important;
  align-items:start!important;
  text-align:left!important;
  padding:14px!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-thumb,
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-thumb canvas{
  width:96px!important;height:96px!important;min-width:96px!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-thumb{margin:0 auto!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-copy{display:grid!important;gap:4px!important;min-width:0!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-card b{font-size:.74rem!important;line-height:1.3!important;overflow-wrap:anywhere!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-preview-card small{margin-top:0!important;font-size:.66rem!important;line-height:1.45!important}

body[data-tool="google-play-app-icon-generator"] .app-icon-final-preview-card{grid-template-rows:96px minmax(0,1fr)!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-final-thumb{overflow:hidden!important;background:transparent!important;transition:border-radius .18s ease}
body[data-tool="google-play-app-icon-generator"] .app-icon-final-preview-card.is-circle .app-icon-final-thumb,
body[data-tool="google-play-app-icon-generator"] .app-icon-final-preview-card.is-circle .app-icon-final-thumb canvas{border-radius:50%!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-final-preview-card.is-square .app-icon-final-thumb,
body[data-tool="google-play-app-icon-generator"] .app-icon-final-preview-card.is-square .app-icon-final-thumb canvas{border-radius:18px!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-final-preview-copy{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;min-width:0!important;height:100%!important}
body[data-tool="google-play-app-icon-generator"] .app-icon-shape-tabs{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:4px!important;width:100%!important;margin-top:auto!important;padding:4px!important;
  border:1px solid var(--line)!important;border-radius:11px!important;background:var(--surface-2)!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-shape-tabs button{
  min-width:0!important;min-height:36px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:6px!important;padding:0 7px!important;border:0!important;border-radius:8px!important;
  background:transparent!important;color:var(--muted)!important;box-shadow:none!important;
  font-size:.68rem!important;font-weight:850!important;line-height:1!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-shape-tabs button.is-active{
  background:var(--surface)!important;color:var(--brand)!important;box-shadow:0 2px 7px rgba(22,32,45,.08)!important
}

body[data-tool="google-play-app-icon-generator"] .app-icon-export-row{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;gap:14px!important
}
body[data-tool="google-play-app-icon-generator"] .app-icon-export-row .app-icon-zip-setting{min-width:0;margin:0;padding:0;border:0;background:transparent}
body[data-tool="google-play-app-icon-generator"] .app-icon-export-row .app-icon-download{width:auto;min-width:245px;min-height:52px;margin:0;white-space:nowrap}

@media(max-width:1080px){
  body[data-tool="google-play-app-icon-generator"] .app-icon-adaptive-grid-v2{grid-template-columns:1fr!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2 .app-icon-preview-grid:not(.is-adaptive){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:860px){
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive{grid-template-columns:1fr!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-preview-card{
    min-height:120px!important;grid-template-columns:96px minmax(0,1fr)!important;grid-template-rows:auto!important;align-items:center!important
  }
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-thumb{margin:0!important}
}
@media(max-width:650px){
  body[data-tool="google-play-app-icon-generator"] .app-icon-mode-card-v2,
  body[data-tool="google-play-app-icon-generator"] .app-icon-source-panel-v2,
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2{padding:14px!important;border-radius:15px!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-tabs{width:100%!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-tabs button{padding:0 9px!important;font-size:.72rem!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-settings-v2{grid-template-columns:1fr!important;padding:14px!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-full-row{grid-column:auto!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2 .app-icon-preview-grid{grid-template-columns:1fr!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2 .app-icon-preview-card,
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-preview-card{
    min-height:112px!important;grid-template-columns:88px minmax(0,1fr)!important;grid-template-rows:auto!important;padding:11px!important
  }
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-thumb,
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-thumb canvas{width:88px!important;height:88px!important;min-width:88px!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-final-preview-copy{height:auto!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-shape-tabs{margin-top:8px!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-export-row{grid-template-columns:1fr!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-export-row .app-icon-download{width:100%!important;min-width:0!important}
}
@media(max-width:390px){
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2 .app-icon-preview-card,
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-preview-card{grid-template-columns:85px minmax(0,1fr)!important}
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2 .app-icon-thumb,
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-shell-v2 .app-icon-thumb canvas,
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-thumb,
  body[data-tool="google-play-app-icon-generator"] .app-icon-preview-grid.is-adaptive .app-icon-thumb canvas{width:85px!important;height:85px!important;min-width:85px!important}
}