:root{
      --bg:#ffffff;
      --muted:#818181;
      --accent-green:#82E015;
      --card-bg: rgba(255,255,255,0.8);
      --favicon-scale-tab: 1;     
  --favicon-scale-device: 0.9;  
  --favicon-scale-splash: 0.9;  
  --favicon-radius-tab: 0%;
--favicon-radius-device: 4px;
--favicon-radius-splash: 10px;

--favicon-bg-tab-light: transparent;
--favicon-bg-tab-dark: #000000;
--favicon-bg-device: #FFFFFF;

    }

   *{box-sizing:border-box}
html,body{height:100%;}


html{
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:var(--bg);
  color:#111;
  overflow-x:hidden;
  overflow-y:hidden;
}



.webapp-row {
  display: flex;
  gap: 20px;
  align-items: center;
}

    .section-title{
  
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:26px;
  line-height:1.2;
  text-align:center;
  color:#fff;
}



.section-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

    .page{
  width:100%;
  height:100vh;
  display:flex;

  
  max-width:100vw;
  overflow-x:hidden;
}


    .left{
      width:50vw;
      position:fixed;
      left:0;top:0;bottom:0;
      padding:46px 60px;
      background:#fff;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:40px;
      overflow:hidden;
    }
   .right{
  width:50vw;
  margin-left:50vw;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden; 
  padding:40px 36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:40px;
 
  background:
    linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  background-size:cover;
  
}


    .right::-webkit-scrollbar{width:12px}
    .right::-webkit-scrollbar-thumb{
      background:rgba(0,0,0,0.25);
      border-radius:10px;
      border:3px solid rgba(255,255,255,0.15);
    }

    .logo{width:60px;height:60px}
    .logo img{width:100%;height:100%;object-fit:contain}

    .title{
      max-width:376px;
      text-align:center;
      font-weight:700;
  font-size:26px;
  line-height:1.2;
    }

    .descr{
      max-width:439px;
      text-align:center;
      font-size:16px;
      line-height:26px;
      color:#000;
    }

    /* ---------------- TABs ---------------- */

    .tabs{
      width: fit-content;
      background:#EFEFEF;
      padding:4px;
      border-radius:14px;
      display:flex;
      gap:4px;
    }

    .tabs .tab{
      flex:1;
      border-radius:11px;
      padding:8px 20px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      height:48px;

      background:transparent;

      cursor:pointer;
      transition:background .2s ease,color .2s ease;
    }

    .tab-title,
    .tab-subtitle{
      white-space: nowrap;
    }

    .tab-title{
      font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      font-weight:600;
      font-size:16px;
      line-height:19px;
      text-align:center;
      color:rgba(0,0,0,0.7);
    }

    .tab-subtitle{
      font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      font-weight:400;
      font-size:11px;
      line-height:13px;
      text-align:center;
      color:rgba(0,0,0,0.4);
    }

    /* active */
    .tabs .tab.tab--selected{
      background:#FFFFFF;
    }
    .tabs .tab.tab--selected .tab-title{
      color:#000000;
    }
    .tabs .tab.tab--selected .tab-subtitle{
      color:rgba(0,0,0,0.5);
    }

    /* hover */
    .tabs .tab:hover:not(.tab--selected){
      background:rgba(255,255,255,0.35);
    }

    /* ------------- Block structure ------------- */

    .element-question{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
    }

    /* ------------- DROPZONE (как на favicon.kz) ------------- */

   
.upload-wrap{
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:8px;
  gap:10px;

  width:429px;
 

  background:#E0E0E0;
  border:1px solid rgba(0, 0, 0, 0.04);
  border-radius:26px;
}


.upload-box{
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:30px 60px;
  gap:10px;

  width:413px;
  

  background:rgba(255, 255, 255, 0.73);
  border:1px dashed #CCCCCC;
  box-shadow:0px 0px 40px rgba(0, 0, 0, 0.1);
  border-radius:20px;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    height .2s ease;
}


.upload-box.upload-box--hover{
  background:#E9F0FE;
  border:1px dashed #0072FF;
}


.upload-box:hover{
  background:#E9F0FE;
  border-color:#0072FF;
  box-shadow:0px 0px 40px rgba(0,0,0,0.1);
}

/
.upload-box.upload-box--filled{
  min-height:131px;
}


.upload-text{
  max-width:349px;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:16px;
  line-height:22px;
  text-align:center;
  letter-spacing:-0.02em;
  color:#B2B2B2;
}


.upload-filename{
  display:none;             
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
  line-height:17px;
  color:#818181;
}


#choose {
  color: #0072FF; 
  text-decoration: none;
}

#choose:hover {
  color: #0056d6;
  text-decoration: underline;
}



    
.howto{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

.howto__icon{
  width:14px;
  height:14px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:7px;
  color:#9C9C9C; 
  flex:none;
}

.howto__icon svg{
  width:14px;
  height:14px;
  display:block;
}

.howto__text{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style:normal;
  font-weight:500;
  font-size:14px;
  line-height:17px;
  color:#818181;
  flex:none;
  text-decoration: none;
}


.howto:hover .howto__icon{
  color:#0072FF;
}

.howto:hover .howto__text{
  color:#0072FF;
  text-decoration: none;
}



.generate-btn {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:18px 40px;
  gap:10px;
  
  height:60px;
  border-radius:16px;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:24px;
  text-align:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .1s ease, transform .1s ease;
  background:#000;
  color:#fff;
  box-shadow:0px 24px 25px rgba(0,0,0,0.15);
}


.generate-btn:hover:not(.generate-btn--disabled) {
  background:#2E2E2E;
  color:rgba(255,255,255,0.8);
}


.generate-btn--disabled {
  background:rgba(0,0,0,0.22) !important;
  color:rgba(0,0,0,0.09) !important;
  box-shadow:none !important;
  cursor:default !important;
  pointer-events:none !important;
}



.switch {
  width:102px;
  height:54px;
  padding:3px;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  border-radius:50px;
  backdrop-filter:blur(7px);
  cursor:pointer;

  transition:background .25s, border-color .25s;
}


.switch[data-theme="light"] {
  background:rgba(255,255,255,0.21);
  border:1px solid rgba(255,255,255,0.25);
}


.switch[data-theme="light"]:hover {
  background:rgba(255,255,255,0.7);
  border-color:rgba(255,255,255,0.55);
}


.switch[data-theme="dark"] {
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(0,0,0,0.35);
}


.switch[data-theme="dark"]:hover {
  background:rgba(0,0,0,0.5);
}


.switch__thumb {
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;

  background:#fff;
  transition:transform .3s ease, background .3s ease;
}


.switch[data-theme="light"] .switch__thumb {
  transform:translateX(0);
  background:#fff;
}

.switch[data-theme="dark"] .switch__thumb {
  transform:translateX(48px);
  background:#000;
}


.switch__icon {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(0.6); 
  opacity:0;
  transition:opacity .25s, transform .25s;
}

/* солнце видно в light */
.switch[data-theme="light"] .switch__icon--sun {
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

/* луна видна в dark */
.switch[data-theme="dark"] .switch__icon--moon {
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

.switch__icon svg {
  display:block; 
}




.theme-row{
  display:flex;
  gap:20px;
  justify-content:center;
}

.theme-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}


.palette-label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:3px 6px;
  
  border-radius:999px;
  background:rgba(228,228,228,0.18);
  border:1px solid rgba(255,255,255,0.35);
  backdrop-filter:blur(12px);

  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:12px;
  line-height:1;
  color:#FFFFFF;
}


.palette-dots{
  display:flex;
  gap:4px;
}

.palette-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  box-sizing:border-box;
  transition:border-color .15s ease, transform .15s ease;
  cursor: pointer;
}


.palette-dot:hover{
  border-color:#363636;
}



.palette-dot--white{ background:#FFFFFF; }
.palette-dot--gray{  background:#363636; }
.palette-dot--green{ background:var(--accent-green); }




.palette-label--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;


  background: rgba(228, 228, 228, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}


.palette-label--disabled .palette-dot {
  border-color: transparent !important;
}

.palette-label--disabled span {
  opacity: 0.7;
}




.palette-header {
  display: flex;
  flex-direction: row;   
  align-items: center;   
  gap: 4px;              
}





.info-btn {
  width: 16px;
  height: 16px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(228, 228, 228, 0.1);
  border: 0.761905px solid rgba(163, 163, 163, 0.2);
  backdrop-filter: blur(5.33333px);
  border-radius: 68.5714px;

  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: -0.02em;
  color: #FFFFFF;

  cursor: pointer;
  padding: 0;
}


.info-btn:hover {
  background: rgba(228, 228, 228, 0.3);
}


.info-tooltip {
  position: absolute;
  top: 22px;           
  right: 0;           
  left: auto;         
min-width: 140px;
  max-width: 290px;
  padding: 8px 10px;
  border-radius: 10px;

  background: rgba(0, 0, 0, 0.85);
  color: #fff;

  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  line-height: 1.3;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;

  pointer-events: none; 
  z-index: 20;
}


.info-btn-wrap:hover .info-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


.info-btn-wrap {
  position: relative;
  display: none;
  align-items: center;
}


.palette-header--locked .info-btn-wrap {
  display: flex;
}





.scale-btn,
.radius-btn {
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 5px;
  gap: 10px;

  width: 21px;
  height: 21px;

 background: rgba(228, 228, 228, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(7px);
  border-radius: 90px;

  cursor: pointer;
}


.scale-btn__icon,
.radius-btn__icon {
  width: 10px;
  height: 10px;
  display: block;
}


.scale-btn:hover:not(.scale-btn--disabled),
.radius-btn:hover:not(.radius-btn--disabled) {
  background: rgba(228, 228, 228, 0.4);
}


.scale-btn--disabled,
.radius-btn--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}


.theme-chip{
  min-width:200px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;

  border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:14px;
}

.theme-chip--light{
  background:#FFFFFF;
  color:#363636;
}


.theme-chip--dark{
  background:#143B69;
  color:#FFFFFF;
}


.theme-chip__left{
  display:flex;
  align-items:center;
  gap:8px;
}

.theme-chip__favicon,
.snippetFaviconGoogle,
.snippetFaviconYandex {
  border-radius: var(--favicon-radius-tab);
}

.theme-chip__favicon{
  width:20px;
  height:20px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}


.favicon-svg svg {
  width: 100%;
  height: 100%;
  transform-origin: center center;
}


.theme-chip__label{
  white-space:nowrap;
}

.theme-chip__close{
  font-size:14px;
  line-height:1;
  
  opacity:.8;
}


#yandexGoogle{
  display:flex;
  flex-direction:column;   
  gap:4px;
}


.snippetYandex,
.snippetGoogle{
  background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(20px);
  border-radius:20px;
  padding:16px;
  display:flex;
  gap:12px;
}


.snippetYandex{
  flex-direction:row;
}

.snippetGoogle{
  flex-direction:column;
}


.snippetFaviconYandex,
.snippetFaviconGoogle{
  display:flex;
  align-items:center;
  justify-content:center;
  
  overflow:hidden;
}

.snippetFaviconYandex{
  width:16px;
  height:16px;
  border-radius: var(--favicon-radius-tab);

}

.snippetFaviconGoogle{
  width:28px;
  height:28px;
  border-radius: var(--favicon-radius-tab);
}



.theme-chip__favicon .favicon-svg svg,
.snippetFaviconGoogle .favicon-svg svg,
.snippetFaviconYandex  .favicon-svg svg {
  transform: scale(var(--favicon-scale-tab));
}



.snippetFaviconSubGoogle{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
}


.snippetTitleSubDeskYandex,
.sub{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  padding-bottom: 4px;
}


.titleYandex,
.titleGoogle{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:21px;
  color:#000;
}


.subYandex,
.subGoogle{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:12px;
  line-height:15px;
  color:#2B682A;
}


.subWebGoogle{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:17px;
  color:#000;
}


.descYandex{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:400;
  font-size:12px;
  line-height:16px;
  color:#000;
}

.descGoogle{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:700;
  font-size:12px;
  line-height:18px;
  color:#8D8D8D;
}


    .card{background:#fff;padding:12px;border-radius:12px;display:flex;gap:12px;align-items:flex-start}
    .card .favicon{width:16px;height:16px;border-radius:4px;background:var(--accent-green)}
    .meta .row1{font-weight:700;color:#2B682A;font-size:12px}
    .meta .row2{font-size:17px;color:#000}
    .meta .row3{font-size:12px;color:#8D8D8D;font-weight:700}

    .device{width:262px;height:524px;position:relative}
    .device .frame{
      width:100%;height:100%;
      background:url('../img/public/smartphon.png') center/contain no-repeat;
      border-radius:8px;
    }

  

   .device .badge{
  position:absolute;
  left:33px;
  top:59px;
  width:39px;
  height:39px;
  border-radius: var(--favicon-radius-device);
  
overflow: hidden; 
  display:flex;
  align-items:center;
  justify-content:center;
}


.device .badge .favicon-svg svg {
  transform: scale(var(--favicon-scale-device));
}


    .device .your-site{
      position:absolute;left:30px;top:102px;
      color:#fff;font-size:10px;text-align:center;width:45px
    }

   .splash {
  width:320px;
  height:662px;
  position:relative;
  overflow:hidden;
  
}


.splash-bg {
  position:absolute;
  inset:0;
  background:var(--accent-green);
  z-index:1;
  width:98%;
  height:99%;
  margin: 3px;
  border-radius:50px;
  overflow:hidden;
}


.splash-center {
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:2;
}


.splash-icon{
  width:80px;
  height:80px;
  border-radius: var(--favicon-radius-splash);      
  background:var(--bg);  

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}


.splash-icon .favicon-svg svg {
  transform: scale(var(--favicon-scale-splash));
}



.splash-frame {
  position:absolute;
  inset:0;
  background:url('../img/public/splashSmartphon.png') center/contain no-repeat;
  z-index:3;
  pointer-events:none;
}



.footer{
  margin-top:auto;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.footer-copy{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:14px;
  color:rgba(129,129,129,0.7);
}


.footer-link{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:10px;

  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:17px;
  text-align:center;

  color:#818181;
  text-decoration:none;
  cursor:pointer;
  transition:color .15s ease;
}

.footer-link:hover{
  color:#0072FF;
}




.radius-modal {
  position: fixed;
  z-index: 900;
  display: none;

  box-sizing: border-box;
  width: 135px;
  padding: 8px;
  gap: 8px;

  flex-direction: column;
  align-items: flex-start;

  background: #FFFFFF;
  box-shadow: 0px 2px 14px rgba(0,0,0,0.15);
  border-radius: 10px;

  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.radius-modal__header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  cursor: move;
}

.radius-modal__title {
  flex: 1;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  color: #656565;
}

.radius-modal__close {
  border: none;
  background: none;
  padding: 0;
  margin-left: 4px;

  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #999;
  cursor: pointer;
}

.radius-modal__close:hover {
  color: #666;
}

.radius-modal__input {
  width: 100%;
  height: 23px;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;

  background: #F1F1F1;
  border-radius: 4px;
  transition: background .15s ease;
}

.radius-modal__input:hover {
  background: #E7E7E7;
}

.radius-modal__icon {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

.radius-modal__field {
  border: none;
  background: transparent;
  padding: 0;

  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: #000;

  width: 100%;
  min-width: 12px;
  text-align: left;
  outline: none;
}


.radius-modal__field::-webkit-inner-spin-button,
.radius-modal__field::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.radius-modal__field[type="number"] {
  -moz-appearance: textfield;
}





.scale-modal {
  position: fixed;
  z-index: 900;
  display: none; 

  box-sizing: border-box;
  width: 135px;

  padding: 8px;
  gap: 8px;

  
  flex-direction: column;
  align-items: flex-start;

  background: #FFFFFF;
  box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.15);
  border-radius: 10px;

  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


.scale-modal__header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}


.scale-modal__title {
  flex: 1;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  color: #656565;
}

.scale-modal__close {
  border: none;
  background: none;
  padding: 0;
  margin-left: 4px;

  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;   
  line-height: 1;    
  color: #999999;    

  cursor: pointer;
}


.scale-modal__close:hover {
  color: #666666;
}



.scale-modal__input {
  width: 100%;
  height: 23px;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;

  background: #F1F1F1;
  border-radius: 4px;
  transition: background .15s ease;
}


.scale-modal__field {
  border: none;
  background: transparent;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: #000;
  padding: 0;
  text-align: left;
  outline: none;

  width: 100%;
  min-width: 12px; 
}


.scale-modal__field::-webkit-outer-spin-button,
.scale-modal__field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.scale-modal__field[type="number"] {
  -moz-appearance: textfield;
}



.scale-modal__percent {
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: #000000;
}



.scale-modal__input:hover {
  background: #E7E7E7;
}


.scale-modal__icon {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  display: block;
}


.scale-modal__value {
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  color: #000000;
}



.scale-modal__header {
  cursor: move;
}




.color-modal {
  width: 220px;              
}

.color-modal__body {
  width: 100%;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-modal__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.15);
  padding: 0;
  cursor: pointer;
}

.color-swatch:hover {
  border-color: #0072FF;
}







body[data-mode="dark"] .theme-chip--light {
  background: #4C4D55 !important;
  color: #FFFFFF !important;
}



body[data-mode="dark"] .theme-chip--light .theme-chip__close {
  color: #E5E5E5 !important;
}


body[data-mode="dark"] .theme-chip--dark {
  background: #242630 !important;
  color: #FFFFFF !important;
}



body[data-mode="dark"] .theme-chip--dark .theme-chip__close {
  color: #E5E5E5 !important;
}



body[data-mode="dark"] .snippetGoogle,
body[data-mode="dark"] .snippetYandex {
  background: rgba(24, 24, 26, 0.85) !important;
  color: #FFFFFF !important;
}


body[data-mode="dark"] .titleGoogle,
body[data-mode="dark"] .titleYandex {
  color: #FFFFFF !important;
}


body[data-mode="dark"] .subWebGoogle {
  color: #FFFFFF !important;
}



body[data-mode="dark"] .descGoogle,
body[data-mode="dark"] .descYandex {
  color: #CCCCCC !important;
}


body[data-mode="dark"] .subGoogle,
body[data-mode="dark"] .subYandex {
  color: #BAFFB8 !important; 
}




.color-picker-modal{
  position:fixed;
  z-index:9999;
  top:120px;
  left:50%;
 
  width:200px;
  max-width:90vw;
  border-radius:10px;
  background:#fff;
  box-shadow:0 18px 60px rgba(0,0,0,0.28);
  display:none;
  flex-direction:column;
  overflow:hidden;
}

#colorPickerHeader{
  cursor:move;
  user-select:none;
}

.color-picker-modal__body{
  padding:0;
  width: 100%;
  display:flex;
  flex-direction:column;
  gap:8px;
}



.color-picker__sv{
  position:relative;
  width:100%;
  padding-top:100%;         
  border-radius:8px;
  overflow:hidden;
  background:#ff0000;
  background-image:
    linear-gradient(to top, #000000, transparent),
    linear-gradient(to right, #FFFFFF, var(--picker-main-color, #FF0000));
  cursor:crosshair;
}

.color-picker__sv-handle{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,0.35);
  background:#fff;
  pointer-events:none;
  transform:translate(-50%,-50%);
}



.color-picker__field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
}

.color-picker__label{
  font-size:10px;
  color:#555;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.color-picker__value{
  font-weight:500;
  color:#777;
}

.color-picker__code-input{
  width:100%;
  height:32px;
  border-radius:8px;
  border:1px solid #E0E0E0;
  padding:4px 8px;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:12px;
  background:#FAFAFA;
}



.color-picker__slider input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:16px;
  border-radius:999px;
  outline:none;
  border:none;
  margin:0;
  background:transparent;
  position:relative;
}


.color-picker__slider--hue input[type="range"]{
  background-image:linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  border-radius:999px;
}


.color-picker__slider--alpha{
  position:relative;
  overflow:hidden;
  border-radius:999px;
}

.color-picker__slider--alpha::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 50%, #ccc 50%, #ccc 75%, transparent 75%, transparent 100%),
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 50%, #ccc 50%, #ccc 75%, transparent 75%, transparent 100%);
  background-size:8px 8px;
  background-position:0 0,4px 4px;
  z-index:0;
}

.color-picker__slider--alpha input[type="range"]{
  position:relative;
  z-index:1;
}



.color-picker__slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(0,0,0,0.25);
  box-shadow:0 0 3px rgba(0,0,0,0.2);
  cursor:pointer;
  margin-top:-1px;
}

.color-picker__slider input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(0,0,0,0.25);
  box-shadow:0 0 3px rgba(0,0,0,0.2);
  cursor:pointer;
}

/* трек для Firefox */
.color-picker__slider input[type="range"]::-moz-range-track{
  height:16px;
  border-radius:999px;
  background:transparent;
}



#colorCode {
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fafafa;
}


.clear-link,
.clear-light-link,
.clear-dark-link {
  margin-top: 4px;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  
}

.clear-link:hover {
  color: rgba(255, 255, 255, 0.8);
}


.clear-link--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}


.clear-link--disabled:hover {
  color: rgba(255, 255, 255, 0.5);
}




.crop-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

.crop-modal-overlay.is-open {
  display: flex;
}


.crop-modal-overlay[hidden] {
  display: none !important;
}

.crop-modal {
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 16px 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.3);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

}


.crop-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.crop-modal__title {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.crop-modal__close {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #9ca3af;
  padding: 0 4px;
}


.crop-modal__close:hover {
  color: #666666;
}


.crop-modal__body {
  margin-bottom: 16px;
}


.crop-modal__area {
  position: relative;
  width: 100%;
  padding-top: 100%; 
  border: 1px solid #e5e7eb;
  overflow: hidden;
  background: #f9fafb;
}


.crop-modal__area svg {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
}



.crop-modal__area::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,
      transparent 0,
      transparent 33.333%,
      rgba(0, 0, 0, 0.08) 33.333%,
      rgba(0, 0, 0, 0.08) 34%,
      transparent 34%,
      transparent 66.666%,
      rgba(0, 0, 0, 0.08) 66.666%,
      rgba(0, 0, 0, 0.08) 67.333%,
      transparent 67.333%),
    linear-gradient(to bottom,
      transparent 0,
      transparent 33.333%,
      rgba(0, 0, 0, 0.08) 33.333%,
      rgba(0, 0, 0, 0.08) 34%,
      transparent 34%,
      transparent 66.666%,
      rgba(0, 0, 0, 0.08) 66.666%,
      rgba(0, 0, 0, 0.08) 67.333%,
      transparent 67.333%);
}


.crop-modal__area::after {
  content: '';
  position: absolute;
  inset: 0px;               
  pointer-events: none;
  border: 0px solid rgba(0, 0, 0, 0.4);
  border-radius: 0px;

 
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1) inset;
}


.crop-modal__area--danger::after {
  border-color: #EF4444;     

  box-shadow: 0 0 0 5px rgba(0, 132, 255, 0.2) inset;
}


.crop-modal__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.crop-modal__zoom {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  outline: none;
  cursor: pointer;
}


.crop-modal__zoom::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
}
.crop-modal__zoom::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
}


.crop-modal__zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #2688ff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
  margin-top: -4px;
}
.crop-modal__zoom::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #2688ff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
}

.crop-modal__fit{
  /* размер как у thumb/кнопок — компактно */
  width: 54px;
  height: 34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);

  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);

  color: rgba(17,17,17,0.75);
  cursor: pointer;

  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.crop-modal__fit:hover{
  background: #ffffff;
  border-color: rgba(0,0,0,0.14);
  color: rgba(17,17,17,0.95);
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}

.crop-modal__fit:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}

.crop-modal__fit svg{
  display:block;
}

.crop-modal__fit:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(130, 224, 21, 0.25),
    0 10px 22px rgba(0,0,0,0.14);
  border-color: rgba(130, 224, 21, 0.55);
}

/* опционально: подсветка, когда картинка "в опасной зоне" */
.crop-modal__area--danger ~ .crop-modal__footer .crop-modal__fit{
  border-color: rgba(239, 68, 68, 0.35);
}

.crop-modal__btn-primary,
.crop-modal__btn-ghost {
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  padding: 16px 16px;
  border: none;
  cursor: pointer;
}


.crop-modal__btn-primary {
  background: #000000;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}


.crop-modal__btn-primary:hover {
  background:#2E2E2E;
  color:rgba(255,255,255,0.8);
}


.crop-modal__btn-ghost {
  background: transparent;
  color: #6b7280;
}

.crop-modal__btn-ghost:hover {
  background: transparent;
  color: #0072FF;
}


.crop-modal__btn-ghost--link {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;

  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
align-self: center;
  text-align: center;
  color: #818181;
  text-align: left;
  cursor: pointer;
}


.crop-modal__btn-ghost--link:hover {
  background: transparent;
  color: #0072FF;
  
}






@media (max-width: 600px) {
  .crop-modal-overlay {
    align-items: flex-end;
  }
  .crop-modal__fit{
    width: 44px;
    height: 36px;
  }
  .crop-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 12px 12px 0 0;

  }
}





@media (max-width:600px) {
  
  .left {
    padding: 24px 16px;
    gap: 16px;
  }

  .right {
    padding: 40px 16px 32px;
    gap: 16px;
  }


  .title {
    font-size: 20px;
    line-height: 26px;
  }

  .descr {
    font-size: 14px;
    line-height: 22px;
  }

 .section-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    
}



  .upload-wrap,
  .upload-box {
    width: 100%;
  }

  .upload-box {
    padding: 24px 16px;
  }


  .tabs {
    width: 100%;
    justify-content: space-between;
  }

  .tabs .tab {
    padding: 6px 10px;
  }


  .theme-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .theme-col {
    width: 100%;
  }

 
  #yandexGoogle {
    width: 100%;
  }

  .snippetYandex,
  .snippetGoogle {
    width: 100%;
  }

 
  .webapp-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }


  .device {
    width: 220px;
    height: 440px;   
    margin: 0 auto;
  }

  .splash {
    width: 260px;
    height: 540px;   
    margin: 0 auto;
  }

 

  .scale-modal,
  .radius-modal {
    width: 100%;
    max-width: 100%;
    left: 0 !important;
    right: 0;
    bottom: 0;
    top: auto !important;

    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 25px rgba(0,0,0,0.35);
  }


  .scale-modal__input, 
  .radius-modal__input {
   height: 40px;
   gap: 8px;
  padding: 6px 12px;
}

.scale-modal__title,
.radius-modal__title {
  font-weight: 600;
    font-size: 14px;
    line-height: 16px;
}


  .scale-modal__header,
  .radius-modal__header {
    cursor: default;
  }

  .color-popup {
    left: 0 !important;
    right: 0;
    bottom: 0;
    top: auto !important;
    transform: none;

    width: 100%;
  }

  .color-popup__panel {
    width: 100%;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 25px rgba(0,0,0,0.35);
  }

  .color-popup__drag {
    cursor: default;
  }

.tab-title{
      
      font-size:14px;
      line-height:16px;
      
    }

    .upload-text {
    font-size: 14px;
    line-height: 20px;
    }

    .generate-btn {
    font-size: 18px;
    line-height: 22px;
    }
    


}

/* ==========================================================
   Favicon Next 1.0.2 — compatibility layer over canonical UI
   The visual system above is copied from the old Favicon.kz UI.
   ========================================================== */

[hidden]{display:none!important}
button,input,select{font:inherit}
button{color:inherit}
button.tab{border:0}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;z-index:500;top:12px;left:12px;transform:translateY(-160%);padding:8px 12px;background:#111;color:#fff;border-radius:8px;text-decoration:none}
.skip-link:focus{transform:none}
:where(button,input,select,a,[role="button"]):focus-visible{outline:3px solid rgba(130,224,21,.75);outline-offset:3px}

.public-generator{--tab-bg:transparent;--tab-scale:1;--tab-radius:0%;--device-bg:#fff;--device-scale:.9;--complete-light-bg:transparent;--complete-dark-bg:transparent;--complete-scale:1;--complete-radius:0%;--complete-device-bg:#fff;--complete-device-scale:.9}
.public-generator .page{min-height:100vh}
.public-generator .left{gap:34px}
.public-generator .left-brand{display:flex;flex-direction:column;gap:16px;align-items:center;margin-bottom:10px}
.public-generator .title{margin:0}
.public-generator .descr{margin:0}
.public-generator .left-flow{display:flex;flex-direction:column;gap:28px;align-items:center}
.public-generator .tabs{max-width:100%}
.public-generator .tabs .tab{min-width:0}
.public-generator .tabs .tab.is-active{background:#fff}
.public-generator .tabs .tab.is-active .tab-title{color:#000}
.public-generator .tabs .tab.is-active .tab-subtitle{color:rgba(0,0,0,.5)}
.public-generator .tabs .tab:not(.is-active) .tab-title{color:rgba(0,0,0,.7)}
.public-generator .mode-tab{cursor:pointer}
.public-generator .mode-tab[aria-selected="true"]{background:#fff}

.public-generator .upload-box{cursor:pointer;min-height:131px}
.public-generator .upload-box.is-dragover{background:#E9F0FE;border-color:#0072FF}
.public-generator .upload-box strong{font-size:16px;color:#b2b2b2;text-align:center;line-height:22px;letter-spacing:-.02em}
.public-generator .upload-box .upload-hint{font-size:12px;color:#9b9b9b;text-align:center;line-height:17px}
.public-generator .upload-filename{display:block;max-width:330px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.public-generator .upload-filename:empty{display:none}
.public-generator .upload-arrow{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111;font-size:19px;box-shadow:0 3px 14px rgba(0,0,0,.08)}

.public-generator .status-line{width:429px;min-height:18px;margin-top:-2px;text-align:center;color:#818181;font-size:12px;line-height:16px}
.public-generator .status-line[data-kind="error"]{color:#b33d35}
.public-generator .status-line[data-kind="ready"]{color:#4f8500}
.public-generator .crop-actions{display:flex;gap:22px;justify-content:center;min-height:17px}
.public-generator .text-action{border:0;background:none;padding:0;color:#b4b4b4;font-size:12px;cursor:pointer}
.public-generator .text-action:hover:not(:disabled){color:#0072ff}
.public-generator .text-action:disabled{opacity:.38;cursor:default}

.public-generator .generate-btn{width:429px;border:0}
.public-generator .generate-btn:disabled,.public-generator .generate-btn.generate-btn--disabled{background:#d9d9d9;color:#aaa;box-shadow:none;cursor:default}
.public-generator .generate-btn:not(:disabled):not(.generate-btn--disabled){background:#000;color:#fff}
.public-generator .usage-count{font-weight:700;color:#111}
.public-generator .footer{gap:7px}
.public-generator .footer-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.public-generator .footer a,.public-generator .footer button,.public-generator .footer select{border:0;background:none;padding:0;font:inherit;color:rgba(129,129,129,.8);text-decoration:none;cursor:pointer;font-size:12px}
.public-generator .footer a:hover,.public-generator .footer button:hover{color:#0072ff}
.public-generator .footer select{font-weight:600}

.public-generator .right{background-size:cover;background-position:top center}
.public-generator .right-inner{width:100%;max-width:712px;display:flex;flex-direction:column;align-items:center;gap:40px}
.public-generator .switch{position:sticky;top:12px;z-index:10;align-self:flex-end;margin-bottom:-14px}
.public-generator .preview-settings-trigger{border:0}
.public-generator .palette-label.preview-settings-trigger{cursor:pointer}
.public-generator .palette-label.preview-settings-trigger:hover{background:rgba(228,228,228,.36)}
.public-generator .palette-label .palette-dot{pointer-events:none}
.public-generator .theme-chip__favicon{background:var(--tab-bg)}
.public-generator .theme-chip__favicon .favicon-svg{width:100%;height:100%;display:grid;place-items:center}
.public-generator .theme-chip__favicon .favicon-svg svg{transform:scale(var(--tab-scale));border-radius:var(--tab-radius)}
.public-generator[data-generator-mode="complete"] .theme-chip--light .theme-chip__favicon{background:var(--complete-light-bg)}
.public-generator[data-generator-mode="complete"] .theme-chip--dark .theme-chip__favicon{background:var(--complete-dark-bg)}
.public-generator[data-generator-mode="complete"] .theme-chip__favicon .favicon-svg svg{transform:scale(var(--complete-scale));border-radius:var(--complete-radius)}
.public-generator[data-generator-mode="mini"] .complete-only-control{opacity:.3;pointer-events:none}
.public-generator[data-generator-mode="pwa"] .complete-only-control{opacity:.3;pointer-events:none}

.public-generator .snippetFaviconGoogle .favicon-svg,.public-generator .snippetFaviconYandex .favicon-svg{width:100%;height:100%;display:grid;place-items:center;background:var(--tab-bg)}
.public-generator .snippetFaviconGoogle .favicon-svg svg,.public-generator .snippetFaviconYandex .favicon-svg svg{transform:scale(var(--tab-scale));border-radius:var(--tab-radius)}
.public-generator[data-generator-mode="complete"] .snippetFaviconGoogle .favicon-svg,.public-generator[data-generator-mode="complete"] .snippetFaviconYandex .favicon-svg{background:var(--complete-light-bg)}
.public-generator[data-generator-mode="complete"] .snippetFaviconGoogle .favicon-svg svg,.public-generator[data-generator-mode="complete"] .snippetFaviconYandex .favicon-svg svg{transform:scale(var(--complete-scale));border-radius:var(--complete-radius)}
.public-generator .snippetFaviconGoogle .favicon-svg>span,.public-generator .snippetFaviconYandex .favicon-svg>span,.public-generator .theme-chip__favicon .favicon-svg>span{font-size:7px;color:#999}

.public-generator .device .badge{background:var(--device-bg)}
.public-generator .device .badge .favicon-svg{width:100%;height:100%;display:grid;place-items:center}
.public-generator .device .badge .favicon-svg svg{transform:scale(var(--device-scale));width:100%;height:100%}
.public-generator .device .badge .favicon-svg>span{font-size:7px;color:#888}
.public-generator .splash-icon{background:var(--device-bg)}
.public-generator .splash-icon .favicon-svg{width:100%;height:100%;display:grid;place-items:center}
.public-generator .splash-icon .favicon-svg svg{transform:scale(var(--device-scale));width:100%;height:100%}
.public-generator[data-generator-mode="complete"] .device .badge,.public-generator[data-generator-mode="complete"] .splash-icon{background:var(--complete-device-bg)}
.public-generator[data-generator-mode="complete"] .device .badge .favicon-svg svg,.public-generator[data-generator-mode="complete"] .splash-icon .favicon-svg svg{transform:scale(var(--complete-device-scale))}
.public-generator .section-heading-row{width:100%;display:flex;align-items:center;justify-content:center;position:relative}
.public-generator .section-heading-row .settings-pill{position:absolute;right:0}
.public-generator .settings-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(228,228,228,.18);backdrop-filter:blur(7px);color:#fff;font-size:11px;cursor:pointer}
.public-generator .settings-pill:hover{background:rgba(228,228,228,.4)}
.public-generator .pwa-only{display:none}
.public-generator[data-generator-mode="pwa"] .pwa-only{display:inline-flex}
.public-generator[data-generator-mode="pwa"] .non-pwa-only{display:none!important}

/* Floating contextual settings: replaces the large settings cards from 1.0.1. */
.context-popover{position:fixed;z-index:210;width:min(360px,calc(100vw - 24px));max-height:min(78vh,720px);overflow:auto;padding:14px;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:rgba(255,255,255,.97);box-shadow:0 20px 60px rgba(0,0,0,.28);backdrop-filter:blur(20px);display:none;color:#111}
.context-popover.is-open{display:block}
.context-popover__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.context-popover__head h3{margin:0;font-size:14px;line-height:18px}
.context-popover__head button{width:26px;height:26px;border:0;border-radius:50%;background:#efefef;cursor:pointer;font-size:18px;line-height:1}
.context-popover__sub{margin:-7px 0 12px;color:#777;font-size:10px;line-height:1.45}
.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.context-grid label{display:grid;gap:5px;color:#777;font-size:10px}
.context-grid input,.context-grid select{min-width:0;width:100%;height:34px;padding:6px 9px;border:1px solid #ddd;border-radius:7px;background:#fff;color:#111;font-size:11px}
.context-grid input[aria-invalid="true"]{border-color:#c6493f;background:#fff5f4}
.context-divider{height:1px;background:#ececec;margin:12px 0}
.context-section-title{display:flex;justify-content:space-between;gap:10px;align-items:end;margin:0 0 8px}
.context-section-title strong{font-size:11px}.context-section-title span{font-size:9px;color:#888;text-align:right}
.theme-paints__columns,.theme-paint-row{display:grid;grid-template-columns:minmax(0,1fr) 1fr 1fr;gap:6px;align-items:center}
.theme-paints__columns{padding:0 4px 4px;color:#999;font-size:9px}
.theme-paint-row{padding:4px 0}.theme-paint-row__source{min-width:0;display:flex;gap:5px;align-items:center;font-size:9px}.theme-paint-row__source i{width:11px;height:11px;border:1px solid rgba(0,0,0,.15);border-radius:3px;background:var(--paint,transparent)}.theme-paint-row__source code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme-paint-row input{width:100%;min-width:0;padding:5px;border:1px solid #ddd;border-radius:6px;font-size:9px}.theme-paints__empty{font-size:10px;color:#888;margin:0}
.form-errors{margin-top:8px;padding:9px;border-radius:8px;background:#fff0ef;color:#a63d34;font-size:10px}.form-errors ul{margin:4px 0 0;padding-left:16px}
.maskable-preview-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}.maskable-preview-wrap>div:first-child{display:grid;gap:3px;font-size:10px}.maskable-preview-wrap span{color:#777;font-size:9px}.maskable-preview{width:84px;height:84px;position:relative;display:grid;place-items:center;overflow:hidden;border:1px solid #ddd;border-radius:12px;background:#fff}.maskable-preview__art{width:55%;height:55%;display:grid;place-items:center}.maskable-preview__art svg{width:100%;height:100%}.maskable-preview__safe{position:absolute;width:80%;height:80%;border:1px dashed rgba(0,0,0,.45);border-radius:50%}

/* Old small scale/radius windows now share one contextual panel, but keep the same trigger appearance. */
.public-generator .scale-btn,.public-generator .radius-btn{border:1px solid rgba(255,255,255,.35)}
.public-generator .scale-btn img,.public-generator .radius-btn img{pointer-events:none}

/* Archive modal stays secondary and out of the main composition. */
.package-dialog,.consent-dialog{width:min(650px,calc(100vw - 32px));max-height:82vh;padding:0;border:0;border-radius:18px;background:#fff;color:#111;box-shadow:0 30px 100px rgba(0,0,0,.35)}
.package-dialog::backdrop,.consent-dialog::backdrop{background:rgba(0,0,0,.48);backdrop-filter:blur(4px)}
.package-dialog{padding:20px}.package-dialog__head,.consent-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.package-dialog h2,.consent-dialog h2{margin:0;font-size:19px}.package-dialog p{margin:4px 0 0;color:#777;font-size:11px}.dialog-close{width:30px;height:30px;border:0;border-radius:50%;background:#eee;cursor:pointer;font-size:18px}.package-count-row{display:flex;gap:6px;align-items:baseline;margin:14px 0 8px}.package-count-row strong{font-size:24px}.package-count-row span{font-size:10px;color:#777}.package-preview{max-height:360px;overflow:auto;border:1px solid #eee;border-radius:10px;background:#f7f7f7}.package-file-list{list-style:none;margin:0;padding:6px;display:grid;grid-template-columns:1fr 1fr;gap:3px}.package-file-list li{min-width:0;background:#fff;border-radius:6px;padding:6px}.package-file-list code{font:9px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* Consent remains required but is deliberately quieter than the 1.0.1 bar. */
.consent-banner{position:fixed;z-index:300;left:50%;bottom:18px;transform:translateX(-50%);width:min(760px,calc(100vw - 28px));padding:13px 14px;border:1px solid rgba(0,0,0,.1);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 14px 45px rgba(0,0,0,.18);display:flex;align-items:center;gap:14px}.consent-banner[hidden]{display:none}.consent-banner>div:first-child{min-width:0;flex:1}.consent-banner strong{font-size:12px}.consent-banner p{margin:3px 0 0;color:#777;font-size:10px;line-height:1.4}.consent-banner__actions{display:flex;gap:6px}.consent-banner__actions button,.consent-dialog__actions button{min-height:34px;padding:0 10px;border:1px solid #ddd;border-radius:9px;background:#fff;cursor:pointer;font-size:10px}.consent-banner__actions .generate-button,.consent-dialog__actions .generate-button{border-color:var(--accent-green);background:var(--accent-green);font-weight:700}.consent-dialog form{padding:20px}.consent-dialog__head{align-items:center;margin-bottom:10px}.consent-option{padding:12px 0;border-top:1px solid #eee;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}.consent-option strong{display:block;font-size:12px}.consent-option p{margin:3px 0 0;color:#666;font-size:10px;line-height:1.45}.consent-option input{width:18px;height:18px}.consent-lock{font-size:9px;color:#568700}.consent-dialog__actions{display:flex;justify-content:flex-end;margin-top:12px}

@media (max-width:1000px){
  .public-generator .right-inner{max-width:712px;margin:0 auto}
  .context-popover{position:fixed!important;left:12px!important;right:12px!important;bottom:12px!important;top:auto!important;width:auto;max-height:70vh;border-radius:14px}
}
@media (max-width:600px){
  .public-generator .left{padding-bottom:76px}
  .public-generator .status-line,.public-generator .generate-btn{width:100%}
  .public-generator .tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;padding:3px}
  .public-generator .tabs .tab{padding:6px 5px;height:52px}
  .public-generator .tab-subtitle{font-size:9px;white-space:normal;line-height:11px}
  .public-generator .section-heading-row .settings-pill{position:static;margin-left:8px}
  .package-file-list{grid-template-columns:1fr}
  .consent-banner{flex-direction:column;align-items:stretch}.consent-banner__actions{flex-wrap:wrap}.consent-banner__actions button{flex:1 1 120px}
  .context-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
.helper-reset{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit}
.public-generator .howto.helper-reset{cursor:pointer}

/* ===== Left-side restoration pass: old public interaction model ===== */
.public-generator .upload-box{
  min-height:131px;
  padding:30px 44px;
  gap:8px;
}
.public-generator .upload-text{
  max-width:349px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:16px;
  line-height:22px;
  text-align:center;
  letter-spacing:-.02em;
  color:#B2B2B2;
}
.public-generator .choose-file-link{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  margin:0;
  font:inherit;
  color:#0072FF;
  cursor:pointer;
  text-decoration:none;
}
.public-generator .choose-file-link:hover{color:#0056d6;text-decoration:underline}
.public-generator .upload-hint{font-size:11px;line-height:15px;color:#9b9b9b}
.public-generator .usage-count{font-weight:500;color:inherit}

/* Language: compact custom dropdown; native select remains available to JS/a11y. */
.locale-picker{position:relative;display:inline-flex;align-items:center}
.locale-picker__toggle{
  appearance:none;
  border:0;
  background:none;
  padding:2px 0;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font:600 12px/1 'Inter',system-ui,sans-serif;
  color:rgba(129,129,129,.8);
  cursor:pointer;
}
.locale-picker__toggle:hover,.locale-picker__toggle[aria-expanded="true"]{color:#0072ff}
.locale-picker__toggle svg{flex:none;transition:transform .15s ease}
.locale-picker__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.locale-picker__menu{
  position:absolute;
  z-index:700;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  min-width:76px;
  padding:5px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  background:rgba(255,255,255,.98);
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}
.locale-picker__menu[hidden]{display:none}
.locale-picker__menu button{
  width:100%;
  border:0;
  border-radius:7px;
  background:transparent;
  padding:7px 9px;
  text-align:left;
  font:500 12px/1.2 'Inter',system-ui,sans-serif;
  color:#555;
  cursor:pointer;
}
.locale-picker__menu button:hover,.locale-picker__menu button:focus-visible{outline:none;background:#f1f1f1;color:#111}

/* Toasts replace the permanent technical status line. */
.toast-stack{
  position:fixed;
  z-index:12000;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  pointer-events:none;
}
.toast{
  max-width:min(520px,calc(100vw - 32px));
  padding:10px 14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:11px;
  background:rgba(255,255,255,.97);
  box-shadow:0 12px 35px rgba(0,0,0,.16);
  color:#555;
  font:500 12px/1.4 'Inter',system-ui,sans-serif;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .18s ease,transform .18s ease;
}
.toast.is-visible{opacity:1;transform:translateY(0)}
.toast--error{color:#a23e36;border-color:rgba(162,62,54,.2)}
.toast--ready{color:#4f770d}

/* Tutorial modal restored from the previous public UI. */
.vid-overlay{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35);padding:16px}
.vid-overlay.is-open{display:flex}
.vid-card{width:688px;max-width:100%;max-height:calc(100dvh - 32px);background:#fff;border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 45px rgba(15,23,42,.35)}
.vid-close-row{height:37px;display:flex;justify-content:flex-end;align-items:center;padding:10px 8px 0 0;box-sizing:border-box}
.vid-close{width:35px;height:37px;border:0;background:transparent;cursor:pointer;font:400 22px/27px 'Inter',sans-serif;color:#9B9B9B;opacity:.8}
.vid-close:hover{opacity:1}
.vid-body{padding:0 20px 20px;display:flex;flex-direction:column;gap:21px;overflow:auto;-webkit-overflow-scrolling:touch}
.vid-title{margin:0 0 12px;font:700 26px/31px 'Inter',system-ui,sans-serif;text-align:center;color:#000}
.vid-video,.vid-video video{width:100%}
.vid-video video{aspect-ratio:16/9;height:auto;max-height:calc(100dvh - 180px);display:block;border-radius:14px;background:#000;object-fit:contain}

/* Manual crop: restored as the upload step instead of main-page Fit/Reset actions. */
.crop-modal-overlay{position:fixed;inset:0;z-index:11000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35);padding:16px}
.crop-modal-overlay.is-open{display:flex}
.crop-modal-overlay[hidden]{display:none!important}
.crop-modal{width:340px;max-width:calc(100vw - 32px);background:#fff;border-radius:18px;padding:16px;box-shadow:0 18px 45px rgba(15,23,42,.3);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
.crop-modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.crop-modal__title{font-size:14px;font-weight:500;color:#111827}
.crop-modal__close{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;color:#9ca3af;padding:0 4px}
.crop-modal__close:hover{color:#666}
.crop-modal__body{margin-bottom:16px}
.crop-modal__area{position:relative;width:100%;aspect-ratio:1/1;border:1px solid #e5e7eb;overflow:hidden;background:#f9fafb;touch-action:none}
.crop-modal__area::before{content:'';position:absolute;z-index:4;inset:0;pointer-events:none;background-image:linear-gradient(to right,transparent 0,transparent 33.333%,rgba(0,0,0,.08) 33.333%,rgba(0,0,0,.08) 34%,transparent 34%,transparent 66.666%,rgba(0,0,0,.08) 66.666%,rgba(0,0,0,.08) 67.333%,transparent 67.333%),linear-gradient(to bottom,transparent 0,transparent 33.333%,rgba(0,0,0,.08) 33.333%,rgba(0,0,0,.08) 34%,transparent 34%,transparent 66.666%,rgba(0,0,0,.08) 66.666%,rgba(0,0,0,.08) 67.333%,transparent 67.333%)}
.crop-modal__area::after{content:'';position:absolute;z-index:5;inset:0;pointer-events:none;box-shadow:0 0 0 5px rgba(0,0,0,.1) inset}
.crop-modal__area--danger::after{box-shadow:0 0 0 5px rgba(239,68,68,.18) inset}
.crop-modal__error{margin:8px 0 0;color:#b33d35;font-size:11px;line-height:15px;text-align:center}
.crop-modal__footer{display:grid;grid-template-columns:minmax(0,1fr) 54px;align-items:center;gap:16px 10px}
.crop-modal__zoom{width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:#e5e7eb;outline:none;cursor:pointer}
.crop-modal__zoom::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:#e5e7eb}.crop-modal__zoom::-moz-range-track{height:8px;border-radius:999px;background:#e5e7eb}
.crop-modal__zoom::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #2688ff;box-shadow:0 1px 3px rgba(15,23,42,.3);margin-top:-4px}.crop-modal__zoom::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #2688ff;box-shadow:0 1px 3px rgba(15,23,42,.3)}
.crop-modal__fit{width:54px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.85);color:rgba(17,17,17,.75);cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.1)}
.crop-modal__fit:hover{background:#fff;border-color:rgba(0,0,0,.14);box-shadow:0 10px 22px rgba(0,0,0,.14)}
.crop-modal__fit svg{display:block}
.crop-modal__btn-primary,.crop-modal__btn-ghost{grid-column:1/-1;border-radius:12px;font:500 16px/1.2 'Inter',system-ui,sans-serif;padding:16px;border:0;cursor:pointer}
.crop-modal__btn-primary{background:#000;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.crop-modal__btn-primary:hover{background:#2E2E2E;color:rgba(255,255,255,.8)}
.crop-modal__btn-primary:disabled{opacity:.45;cursor:wait}
.crop-modal__btn-ghost--link{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;font:400 14px/17px 'Inter',system-ui,sans-serif;color:#818181;text-align:center}
.crop-modal__btn-ghost--link:hover{color:#0072FF}

@media (max-width:600px){
  .vid-overlay{align-items:flex-end;padding:0}.vid-card{width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:90dvh}.vid-body{padding:0 12px 14px;gap:12px}.vid-title{font-size:20px;line-height:24px}.vid-video video{border-radius:12px;max-height:56dvh}
  .crop-modal-overlay{align-items:flex-end;padding:0}.crop-modal{width:100%;max-width:none;border-radius:18px 18px 0 0;padding:16px 16px max(16px,env(safe-area-inset-bottom))}
}

/* ===== Step 3: old right-side interaction model restored ===== */
.settings-storage{display:none!important}

/* Footer remains one quiet typographic line. */
.public-generator .footer-row{gap:14px}
.public-generator .footer a,
.public-generator .footer button,
.public-generator .footer select,
.public-generator .locale-picker__toggle,
.public-generator .footer-copy{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:14px;
}
.public-generator .locale-picker__toggle{font-weight:500}
.locale-picker__menu button:hover,
.locale-picker__menu button:focus-visible{
  outline:none;
  background:transparent;
  color:#0072FF;
}

/* Theme switch: old geometry, centered in the right half. helper-reset must not erase padding. */
.public-generator .switch.helper-reset{
  align-self:center;
  position:sticky;
  top:12px;
  z-index:10;
  margin-bottom:-14px;
  padding:3px;
}

/* Old palette header: compact and local to the preview it changes. */
.public-generator .palette-header{gap:4px;min-height:21px}
.public-generator .palette-label{
  padding:3px 6px;
  gap:8px;
  cursor:default;
  white-space:nowrap;
}
.public-generator .palette-dots{display:flex;gap:4px;align-items:center;max-width:150px;flex-wrap:wrap}
.public-generator .palette-dot{
  appearance:none;
  padding:0;
  width:11px;
  height:11px;
  flex:0 0 11px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  cursor:pointer;
  background-clip:padding-box;
}
.public-generator .palette-dot--transparent{
  background-color:#fff;
  background-image:linear-gradient(45deg,#cfcfcf 25%,transparent 25%,transparent 75%,#cfcfcf 75%),linear-gradient(45deg,#cfcfcf 25%,transparent 25%,transparent 75%,#cfcfcf 75%);
  background-position:0 0,3px 3px;
  background-size:6px 6px;
}
.public-generator[data-input-kind="raster"] .svg-palette-only{display:none}
.public-generator[data-generator-mode="pwa"] [data-output-scope="browser"]{opacity:.32;pointer-events:none}
.public-generator .complete-only-control{transition:opacity .15s ease}

/* Device/launch controls: background + scale only. Platform controls appear only in PWA mode. */
.platform-switch{
  align-items:center;
  gap:2px;
  padding:2px;
  border-radius:999px;
  background:rgba(228,228,228,.18);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
}
.platform-switch button{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.65);
  border-radius:999px;
  padding:4px 8px;
  font:500 10px/1 'Inter',sans-serif;
  cursor:pointer;
}
.platform-switch button:hover{color:#fff}
.platform-switch button.is-active{background:rgba(255,255,255,.9);color:#111}
.public-generator[data-app-platform="android"] .device .badge{border-radius:50%}
.public-generator[data-app-platform="ios"] .device .badge{border-radius:22%}
.public-generator .device .badge{background:var(--device-bg)}
.public-generator .device .badge .favicon-svg svg{transform:scale(var(--device-scale));width:100%;height:100%}
.public-generator .splash-bg{background:var(--launch-bg,#fff)}
.public-generator .splash-icon{background:transparent;border-radius:0}
.public-generator .splash-icon .favicon-svg svg{transform:scale(var(--launch-scale,.55));width:100%;height:100%}

/* Old small Scale / Rounding windows. */
.local-popover{
  position:fixed;
  z-index:920;
  box-sizing:border-box;
  padding:8px;
  background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.15);
  border-radius:10px;
  font-family:'Inter',system-ui,sans-serif;
  color:#111;
}
.local-popover[hidden]{display:none!important}
.local-popover.is-open{display:flex;flex-direction:column;gap:8px}
.local-popover--value{width:135px}
.local-popover--color{width:200px;z-index:930}
.local-popover__header{width:100%;display:flex;align-items:center;gap:4px}
.local-popover__header strong{flex:1;font-weight:400;font-size:10px;line-height:12px;color:#656565}
.local-popover__header button{border:0;background:none;padding:0;margin-left:4px;color:#999;cursor:pointer;font:400 14px/1 'Inter',sans-serif}
.local-popover__header button:hover{color:#666}
.local-value-field{
  width:100%;height:23px;display:flex;align-items:center;gap:6px;padding:4px 6px;background:#f1f1f1;border-radius:4px;transition:background .15s ease;
}
.local-value-field:hover{background:#e7e7e7}
.local-value-field img{width:11px;height:11px;flex:0 0 auto}
.local-value-field input{
  width:100%;min-width:12px;border:0;background:transparent;padding:0;outline:0;text-align:left;font:400 12px/15px 'Inter',sans-serif;color:#000;
}
.local-value-field input::-webkit-inner-spin-button,.local-value-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.local-value-field input[type=number]{-moz-appearance:textfield}
.local-value-field span{font:400 12px/15px 'Inter',sans-serif;color:#000}

/* Compact color window. Native swatch keeps the implementation robust, alpha stays explicit. */
.compact-color-picker{display:flex;flex-direction:column;gap:8px}
.compact-color-picker label{display:flex;flex-direction:column;gap:4px;font:400 10px/1.2 'Inter',sans-serif;color:#555}
.compact-color-picker__alpha>span{display:flex;align-items:center;justify-content:space-between}
.compact-color-picker__alpha b{font-weight:500;color:#777}
.compact-color-picker__alpha input[type=range]{width:100%;margin:0}

/* PWA metadata remains a separate larger popover; visual settings live beside previews. */
#pwaPanel.context-popover{width:min(360px,calc(100vw - 24px))}

@media (max-width:1000px){
  .public-generator .switch.helper-reset{position:relative;top:auto;margin-bottom:0}
  .local-popover{max-width:calc(100vw - 24px)}
}
.public-generator:not([data-generator-mode="pwa"]) .device .badge{border-radius:22%}
.public-generator .palette-label .palette-dot{pointer-events:auto}


/* Style step 4: platform-aware preview controls and compact local app details. */
.public-generator .theme-col,
.public-generator .search-preview-section{
  transition:opacity .16s ease;
}
.public-generator .is-preview-disabled{
  opacity:.5;
}
.public-generator .is-preview-disabled .palette-header,
.public-generator .is-preview-disabled .theme-chip,
.public-generator .is-preview-disabled .splash,
.public-generator .is-preview-disabled #yandexGoogle{
  pointer-events:none;
}
.public-generator .svg-reset-link[hidden]{display:none!important}

.public-generator .svg-reset-link:disabled{
  opacity:.35;
  color:rgba(255,255,255,.5);
  cursor:default;
  pointer-events:none;
}
.public-generator .svg-reset-link:disabled:hover{color:rgba(255,255,255,.5)}

.public-generator .details-btn{
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0;
  width:21px;
  height:21px;
  background:rgba(228,228,228,.18);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(7px);
  border-radius:90px;
  color:#fff;
  cursor:pointer;
}
.public-generator .details-btn:hover{background:rgba(228,228,228,.4)}
.public-generator .details-btn svg{display:block;pointer-events:none}
.public-generator .details-btn.is-invalid{
  box-shadow:0 0 0 2px rgba(255,105,105,.7);
}

.public-generator .platform-switch{
  margin-top:4px;
}
.public-generator .platform-switch button:disabled{
  opacity:.35;
  cursor:default;
  color:rgba(255,255,255,.5);
}
.public-generator .platform-switch button:disabled:hover{
  color:rgba(255,255,255,.5);
}
.public-generator .platform-switch button.is-active{
  background:#fff;
  color:#111;
}

.public-generator .local-popover--details{
  width:230px;
  gap:9px;
}
.public-generator .local-text-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font:400 10px/1.2 'Inter',sans-serif;
  color:#656565;
}
.public-generator .local-text-field>span{
  display:block;
}
.public-generator .local-text-field em{
  font-style:normal;
  color:#999;
}
.public-generator .local-text-field input{
  width:100%;
  height:30px;
  box-sizing:border-box;
  border:1px solid #dedede;
  border-radius:7px;
  padding:0 8px;
  background:#fff;
  outline:none;
  font:400 12px/1 'Inter',sans-serif;
  color:#111;
}
.public-generator .local-text-field input:focus{
  border-color:#82E015;
  box-shadow:0 0 0 2px rgba(130,224,21,.2);
}
.public-generator .local-field-hint{
  font:400 9px/1.35 'Inter',sans-serif;
  color:#c45454;
}
.public-generator .local-field-hint[hidden]{display:none!important}

.public-generator .app-icon-col .app-safe-zone{
  display:none;
  position:absolute;
  width:80%;
  height:80%;
  left:10%;
  top:10%;
  box-sizing:border-box;
  border:1px dashed rgba(0,0,0,.38);
  border-radius:50%;
  pointer-events:none;
}
.public-generator[data-generator-mode="pwa"][data-app-platform="android"] .app-icon-col .app-safe-zone{
  display:block;
}
.public-generator .device .badge{position:relative}

.public-generator .launch-note{
  margin-top:2px;
  font:400 9px/1.2 'Inter',sans-serif;
  color:rgba(255,255,255,.55);
}
.public-generator:not([data-generator-mode="pwa"]) .launch-note{opacity:.6}

/* The old large PWA settings card is intentionally gone. */
.public-generator .settings-pill{display:none!important}


/* Step 4 finishing adjustments. */
.public-generator .platform-switch{
  display:inline-flex;
}
.public-generator[data-app-platform="android"] .device .badge{
  border-radius:50%;
}
.public-generator[data-app-platform="ios"] .device .badge{
  border-radius:22%;
}


/* Style step 4.1: clarify unavailable outputs and simplify platform switch. */
.public-generator .is-preview-disabled{
  opacity:.5;
  filter:saturate(.7);
}
.public-generator .is-preview-disabled .theme-chip,
.public-generator .is-preview-disabled .device,
.public-generator .is-preview-disabled .splash,
.public-generator .is-preview-disabled #yandexGoogle{
  box-shadow:none;
}
.public-generator .is-preview-disabled .palette-header,
.public-generator .is-preview-disabled .theme-chip,
.public-generator .is-preview-disabled .device,
.public-generator .is-preview-disabled .splash,
.public-generator .is-preview-disabled .clear-link,
.public-generator .is-preview-disabled #yandexGoogle{
  pointer-events:none;
}

/* Platform choice is a light text switch, not a rounded segmented pill. */
.public-generator .platform-switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
}
.public-generator .platform-switch button{
  padding:2px 0;
  border:0;
  border-radius:0;
  background:transparent!important;
  color:rgba(255,255,255,.45);
  font:500 10px/1.2 'Inter',sans-serif;
  cursor:pointer;
  transition:color .15s ease,opacity .15s ease;
}
.public-generator .platform-switch button:hover:not(:disabled){
  color:#fff;
}
.public-generator .platform-switch button.is-active{
  background:transparent!important;
  color:#fff;
  font-weight:600;
}
.public-generator .platform-switch button:disabled{
  opacity:.32;
  color:rgba(255,255,255,.35);
  cursor:default;
}
.public-generator .platform-switch button:disabled:hover{
  color:rgba(255,255,255,.35);
}

/* Launch screen exists only in the PWA package. Do not show explanatory copy in disabled modes. */
.public-generator:not([data-generator-mode="pwa"]) .launch-note{
  display:none;
}

/* ===== Style step 5: final review corrections ===== */

/* Theme preview switch is decorative/secondary: centered, but scrolls away with content. */
.public-generator .switch,
.public-generator .switch.helper-reset{
  position:relative;
  top:auto;
  z-index:1;
  align-self:center;
  margin-bottom:-14px;
}

/* App icon badge keeps the original phone composition; safe-zone is an overlay, not a layout item. */
.public-generator .device .badge{
  position:absolute!important;
  left:33px;
  top:59px;
}
.public-generator .app-icon-col .app-safe-zone{pointer-events:none}

/* App-details validation belongs inside the popover, never around the pencil button. */
.public-generator .details-btn.is-invalid,
.public-generator .details-btn[data-incomplete="true"]{
  box-shadow:none!important;
  border-color:rgba(255,255,255,.35)!important;
}

/* Context help: old small i-button with hover/focus/tap tooltip. */
.public-generator .context-info{
  display:none;
  position:relative;
  align-items:center;
  pointer-events:auto;
}
.public-generator .context-info .info-tooltip{
  z-index:980;
  width:max-content;
  min-width:150px;
  max-width:245px;
}
.public-generator .context-info .info-copy{display:none}
.public-generator[data-generator-mode="mini"] .context-info--dark,
.public-generator[data-generator-mode="pwa"] .context-info--dark,
.public-generator[data-generator-mode="mini"] .context-info--app,
.public-generator[data-generator-mode="complete"] .context-info--app,
.public-generator[data-generator-mode="pwa"][data-app-platform="android"] .context-info--app,
.public-generator:not([data-generator-mode="pwa"]) .context-info--launch{
  display:flex;
}
.public-generator[data-generator-mode="mini"] .context-info--dark .info-copy--mini,
.public-generator[data-generator-mode="pwa"] .context-info--dark .info-copy--pwa,
.public-generator[data-generator-mode="mini"] .context-info--app .info-copy--complete,
.public-generator[data-generator-mode="complete"] .context-info--app .info-copy--complete,
.public-generator[data-generator-mode="pwa"][data-app-platform="android"] .context-info--app .info-copy--pwa-android{
  display:inline;
}
.public-generator .info-btn-wrap:hover .info-tooltip,
.public-generator .info-btn-wrap:focus-within .info-tooltip,
.public-generator .info-btn-wrap.is-open .info-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
/* Disabled previews stay visibly inactive, but their help icon remains usable. */
.public-generator .is-preview-disabled .palette-header{pointer-events:auto}
.public-generator .is-preview-disabled .palette-header button:not([data-info-toggle]){pointer-events:none}

/* Palette controls may fold locally before the whole page switches to a vertical layout. */
@media (min-width:1201px) and (max-width:1500px){
  .public-generator .theme-row .palette-label{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    white-space:normal;
  }
  .public-generator .theme-row .palette-dots{
    max-width:none;
    flex-wrap:nowrap;
  }
  .public-generator .theme-row .palette-header{
    align-items:flex-start;
  }
}

/* Two columns stop before controls get cramped. */
@media (max-width:1200px){
  .public-generator .page,
  .page{
    flex-direction:column;
    height:auto;
    min-height:100vh;
  }
  .public-generator .left,
  .left{
    position:relative;
    width:100%;
    height:auto;
    min-height:100vh;
    padding:32px 24px;
    justify-content:flex-start;
  }
  .public-generator .right,
  .right{
    width:100%;
    margin-left:0;
    height:auto;
    min-height:100vh;
    overflow:visible;
    padding:40px 24px;
  }
  main.right > section{width:100%!important}
  .public-generator .right-inner{max-width:712px;margin:0 auto}
}

/* Old structured modal language: large title, quiet close, clear striped rows. */
.package-dialog,
.consent-dialog{
  width:min(820px,calc(100vw - 30px));
  max-height:88vh;
  border-radius:22px;
  box-shadow:0 28px 90px rgba(0,0,0,.28);
}
.package-dialog{padding:28px 14px 14px}
.package-dialog__head{
  position:relative;
  display:block;
  padding:8px 52px 20px;
  text-align:center;
}
.package-dialog__head h2{
  margin:0;
  font:700 26px/1.15 'Inter',system-ui,sans-serif;
  letter-spacing:-.02em;
}
.package-dialog__head p{
  margin:8px auto 0;
  max-width:520px;
  font:400 11px/1.45 'Inter',system-ui,sans-serif;
  color:#858585;
}
.package-dialog__head .dialog-close{
  position:absolute;
  right:4px;
  top:0;
  width:34px;
  height:34px;
  background:transparent;
  color:#9b9b9b;
  font-size:24px;
}
.package-dialog__head .dialog-close:hover{color:#555;background:transparent}
.package-count-row{
  justify-content:center;
  margin:0 0 12px;
  color:#858585;
}
.package-count-row strong{font:600 12px/1 'Inter',system-ui,sans-serif;color:#111}
.package-count-row span{font:400 11px/1 'Inter',system-ui,sans-serif;color:#858585}
.package-preview{
  max-height:58vh;
  overflow:auto;
  border:0;
  border-radius:12px;
  background:#f2f2f2;
}
.package-file-list{
  display:block;
  margin:0;
  padding:0;
}
.package-file-list .package-file-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:9px 14px;
  border-radius:0;
  background:#f3f3f3;
}
.package-file-list .package-file-row:nth-child(even){background:#e8e8e8}
.package-file-check{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#82E015;
  color:#111;
  font:700 11px/1 'Inter',system-ui,sans-serif;
}
.package-file-list code{
  min-width:0;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#222;
  font:400 12px/1.35 'Inter',system-ui,sans-serif;
}

@media (max-width:600px){
  .package-dialog{padding:20px 10px 10px}
  .package-dialog__head{padding:8px 34px 16px}
  .package-dialog__head h2{font-size:21px}
  .package-file-list .package-file-row{padding:9px 10px}
  .package-file-list code{font-size:10px}
}

/* ===== Style step 6: final visual/interaction corrections ===== */

/* Download counter is a quiet status line, not a link. */
.public-generator .usage-note{cursor:default}
.public-generator .usage-note:hover .howto__icon{color:#9C9C9C}
.public-generator .usage-note:hover .howto__text{color:#818181;text-decoration:none}
.public-generator .usage-note .usage-count{font-weight:500;color:inherit}

/* Keep palette controls in one row. When space gets tight, replace the long caption with contextual help. */
.public-generator .palette-info{display:none}
@media (min-width:1201px) and (max-width:1500px){
  .public-generator .theme-row .palette-label{
    flex-direction:row;
    align-items:center;
    gap:5px;
    white-space:nowrap;
  }
  .public-generator .theme-row .palette-label__text{display:none}
  .public-generator .theme-row .palette-info{display:flex!important;flex:0 0 auto}
  .public-generator .theme-row .palette-dots{max-width:none;flex-wrap:nowrap}
  .public-generator .theme-row .palette-header{align-items:center}
}

/* Disabled output: dim the unavailable feature, never its explanation. */
.public-generator .is-preview-disabled{opacity:1!important;filter:none!important}
.public-generator .theme-col.is-preview-disabled > .theme-chip,
.public-generator .theme-col.is-preview-disabled > .clear-link,
.public-generator .theme-col.is-preview-disabled > .device,
.public-generator .theme-col.is-preview-disabled > .platform-switch,
.public-generator .theme-col.is-preview-disabled > .splash,
.public-generator .theme-col.is-preview-disabled > .launch-note,
.public-generator .theme-col.is-preview-disabled > .palette-header > :not(.info-btn-wrap){
  opacity:.5;
  filter:saturate(.7);
}
.public-generator .search-preview-section.is-preview-disabled{opacity:.5;filter:saturate(.7)}
.public-generator .is-preview-disabled .info-btn-wrap,
.public-generator .is-preview-disabled .info-btn,
.public-generator .is-preview-disabled .info-tooltip{opacity:1!important;filter:none!important}
.public-generator .is-preview-disabled .info-btn-wrap{pointer-events:auto!important}

/* Consent: cleaner card, more readable copy. */
.public-generator .consent-banner{border:0!important;box-shadow:0 14px 45px rgba(0,0,0,.18)}
.public-generator .consent-banner strong{font-size:14px;line-height:18px}
.public-generator .consent-banner p{font-size:12px;line-height:1.5;margin-top:5px}
.public-generator .consent-banner__actions button{font-size:11px}

/* Explicit pencil/shape buttons share the old circular-control language. */
.public-generator .app-shape-btn{
  box-sizing:border-box;display:flex;justify-content:center;align-items:center;padding:0;width:21px;height:21px;
  background:rgba(228,228,228,.18);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(7px);
  border-radius:90px;color:#fff;cursor:pointer;
}
.public-generator .app-shape-btn:hover{background:rgba(228,228,228,.4)}
.public-generator .app-shape-btn svg{display:block;pointer-events:none}
.public-generator[data-app-platform="ios"] .app-shape-btn{display:none}

/* Android shape is preview-only. */
.public-generator[data-app-platform="android"][data-app-shape="circle"] .device .badge{border-radius:50%}
.public-generator[data-app-platform="android"][data-app-shape="rounded"] .device .badge{border-radius:24%}
.public-generator[data-app-platform="android"][data-app-shape="squircle"] .device .badge{border-radius:34%}
.public-generator[data-app-platform="android"][data-app-shape="square"] .device .badge{border-radius:7%}
.public-generator[data-app-platform="ios"] .device .badge{border-radius:22%}

.local-popover--shape{width:250px;gap:9px}
.local-popover--shape .local-popover__header{gap:6px}
.local-popover--shape .shape-info{display:flex;margin-left:auto}
.local-popover--shape .shape-info .info-btn{width:16px;height:16px;margin:0;padding:0}
.local-popover--shape .shape-info .info-tooltip{right:auto;left:0;top:22px;min-width:190px;max-width:235px}
.shape-options{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.shape-options button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 3px;border:1px solid transparent;border-radius:8px;background:#f3f3f3;color:#777;cursor:pointer;font:500 8px/1.1 'Inter',system-ui,sans-serif}
.shape-options button:hover{background:#ececec;color:#333}
.shape-options button.is-active{border-color:#82E015;background:#fff;color:#111;box-shadow:0 0 0 1px rgba(130,224,21,.16)}
.shape-sample{display:block;width:22px;height:22px;background:#111}
.shape-sample--circle{border-radius:50%}
.shape-sample--rounded{border-radius:24%}
.shape-sample--squircle{border-radius:34%}
.shape-sample--square{border-radius:7%}

/* Full custom color picker: saturation/brightness + hue + alpha. */
.local-popover--color{width:240px;z-index:930;padding:10px}
.compact-color-picker{display:flex;flex-direction:column;gap:8px}
.compact-color-picker__label,.color-picker__range{font:400 10px/1.2 'Inter',system-ui,sans-serif;color:#656565}
.color-picker__sv{
  --picker-hue:hsl(0 100% 50%);
  position:relative;width:100%;height:188px;border-radius:9px;overflow:hidden;cursor:crosshair;outline:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0),#000),linear-gradient(to right,#fff,rgba(255,255,255,0)),var(--picker-hue);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
  touch-action:none;
}
.color-picker__sv:focus-visible{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 0 0 2px rgba(0,114,255,.25)}
.color-picker__sv-thumb{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.45);transform:translate(-50%,-50%);pointer-events:none}
.color-picker__range{display:flex;flex-direction:column;gap:4px}
.color-picker__range>span{display:flex;align-items:center;justify-content:space-between}
.color-picker__range b{font-weight:500;color:#777}
.color-picker__range input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:12px;margin:0;border:0;border-radius:999px;outline:none;cursor:pointer}
.color-picker__hue input[type=range]{background:linear-gradient(to right,#f00 0%,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,#f00 100%)}
.color-picker__alpha input[type=range]{background:linear-gradient(to right,rgb(var(--picker-rgb,0,0,0)),rgba(var(--picker-rgb,0,0,0),0)),repeating-conic-gradient(#d7d7d7 0 25%,#fff 0 50%) 0/8px 8px}
.color-picker__range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;border:1px solid rgba(0,0,0,.2);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.color-picker__range input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;border:1px solid rgba(0,0,0,.2);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.color-picker__range input[type=range]::-moz-range-track{height:12px;background:transparent;border:0}

/* Vertical/mobile layout should end naturally instead of reserving an empty viewport. */
@media (max-width:1200px){
  .public-generator .left,.left{min-height:auto!important}
  .public-generator .footer,.footer{margin-top:50px!important}
}
/* Legacy PWA browser-output dimming used parent opacity; keep help readable by delegating dimming to child controls. */
.public-generator[data-generator-mode="pwa"] [data-output-scope="browser"]{opacity:1;pointer-events:auto}

/* ===== Style step 7: compact contextual controls ===== */
/* Palette help belongs to the color dots themselves when the long caption is hidden. */
.public-generator .palette-dots-row{display:flex;align-items:center;gap:4px;min-width:0}
.public-generator .palette-dots-row .palette-info{margin:0;flex:0 0 auto}
@media (min-width:1201px) and (max-width:1500px){
  .public-generator .theme-row .palette-label{gap:4px}
  .public-generator .theme-row .palette-dots-row .palette-info{display:flex!important}
}

/* Local popovers may be moved out of the artwork they control. */
.local-popover__header{cursor:grab;user-select:none;touch-action:none}
.local-popover.is-dragging .local-popover__header{cursor:grabbing}
.local-popover__header button,
.local-popover__header .info-btn-wrap{cursor:pointer;touch-action:auto}

/* Shape help sits directly beside the title and uses a darker treatment on white. */
.local-popover--shape .local-popover__header{gap:4px}
.local-popover--shape .local-popover__header strong{flex:0 0 auto}
.local-popover--shape .shape-info{display:flex;margin-left:0}
.local-popover--shape .local-popover__header>[data-close-local-control]{margin-left:auto}
.info-btn--dark{background:rgba(30,30,30,.12);border-color:rgba(30,30,30,.18);color:#555;backdrop-filter:none}
.info-btn--dark:hover{background:rgba(30,30,30,.2);color:#222}

/* Shape samples should read as preview choices, not heavy black pictograms. */
.shape-sample{background:#a6a6a6}
.shape-options button:hover .shape-sample{background:#888}
.shape-options button.is-active .shape-sample{background:#727272}

/* Smaller color tool: still precise enough, but no longer hides most of the preview. */
.local-popover--color{width:210px;padding:9px;gap:7px}
.local-popover--color .compact-color-picker{gap:7px}
.local-popover--color .color-picker__sv{height:132px;border-radius:8px}
/* Old square picker rule uses padding-top:100%; cancel it inside the compact local tool. */
.local-popover--color .color-picker__sv{padding-top:0!important;height:132px!important}
/* Header button reset is more specific than .info-btn; restore the dark-on-white info chip explicitly. */
.local-popover--shape .shape-info .info-btn--dark{
  width:16px;height:16px;margin:0;padding:0;
  border:1px solid rgba(30,30,30,.16);
  background:rgba(30,30,30,.12);
  color:#4f4f4f;
  border-radius:50%;
  font:600 10px/14px 'Inter',system-ui,sans-serif;
}
.local-popover--shape .shape-info .info-btn--dark:hover{background:rgba(30,30,30,.2);color:#222}

/* ===== Style step 8: polish, progressive background, comparison modal ===== */

/* Palette help is part of the color-dot row, not a detached control. */
.public-generator .palette-dots-row{display:flex;align-items:center;gap:4px;min-width:0}
.public-generator .palette-dots-row .palette-info{margin:0;flex:0 0 auto}

/* Compact help on white local popovers. */
.local-popover--shape .shape-info .info-btn--dark{
  width:12px!important;
  height:12px!important;
  min-width:12px;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:rgba(30,30,30,.14)!important;
  color:#4f4f4f!important;
  border-radius:50%;
  font:600 8px/12px 'Inter',system-ui,sans-serif!important;
}
.local-popover--shape .shape-info .info-btn--dark:hover{background:rgba(30,30,30,.22)!important;color:#222!important}

/* One quiet sample color; selected state is communicated by the card, not a black pictogram. */
.shape-sample,
.shape-options button:hover .shape-sample,
.shape-options button.is-active .shape-sample{background:#DADADA!important}

/* All informational tooltips share one glass treatment. */
.public-generator .info-tooltip,
.local-popover .info-tooltip{
  width:220px!important;
  min-width:220px!important;
  max-width:220px!important;
  box-sizing:border-box;
  border:0!important;
  background:rgba(25,25,27,.72)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}

/* App details reuses the same quiet input language as Scale/Rounding. */
.public-generator .local-text-field input{
  height:23px!important;
  padding:4px 6px!important;
  border:0!important;
  border-radius:4px!important;
  background:#F1F1F1!important;
  box-shadow:none!important;
  font:400 12px/15px 'Inter',system-ui,sans-serif!important;
  color:#000!important;
  transition:background .18s ease,outline-color .18s ease;
}
.public-generator .local-text-field input:hover,
.public-generator .local-text-field input:focus{background:#E7E7E7!important;box-shadow:none!important}

/* Upload grey frame must be optically and mathematically equal on all four sides. */
.public-generator .upload-wrap{align-items:stretch!important;padding:8px!important}
.public-generator .upload-box{width:100%!important;max-width:none!important;margin:0!important}

/* Fast, subtle feedback throughout the public UI. */
.public-generator .tabs .tab,
.public-generator .choose-file-link,
.public-generator .howto__text,
.public-generator .scale-btn,
.public-generator .radius-btn,
.public-generator .details-btn,
.public-generator .app-shape-btn,
.public-generator .info-btn,
.public-generator .palette-dot,
.public-generator .clear-link,
.public-generator .platform-switch button,
.public-generator .generate-btn,
.public-generator .locale-picker__toggle,
.public-generator .locale-picker__menu button,
.public-generator .theme-chip,
.public-generator .snippetGoogle,
.public-generator .snippetYandex,
.public-generator .device .badge,
.public-generator .splash-icon{
  transition:background-color .18s ease,color .18s ease,opacity .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.public-generator .local-popover{animation:localPopoverIn .16s ease both}
@keyframes localPopoverIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .public-generator *, .public-generator *::before, .public-generator *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Progressive background: a tiny blurred frame is visible immediately, full JPEG fades in after decode. */
.public-generator .right.preview-panel{
  position:relative;
  isolation:isolate;
  background:#9ba8ab!important;
}
.public-generator .right.preview-panel::after,
.public-generator .right.preview-panel::before{
  content:"";
  position:fixed;
  top:0;
  right:0;
  width:50vw;
  height:100vh;
  pointer-events:none;
  background-position:top center;
  background-repeat:no-repeat;
  background-size:cover;
}
.public-generator .right.preview-panel::after{
  z-index:0;
  background-image:linear-gradient(0deg,rgba(0,0,0,.20),rgba(0,0,0,.20)),var(--preview-bg-low,none);
  filter:blur(16px);
  transform:scale(1.035);
  opacity:1;
  transition:opacity .45s ease;
}
.public-generator .right.preview-panel::before{
  z-index:1;
  background-image:linear-gradient(0deg,rgba(0,0,0,.20),rgba(0,0,0,.20)),var(--preview-bg-full,none);
  opacity:0;
  transition:opacity .48s ease;
}
.public-generator .right.preview-panel.bg-ready::before{opacity:1}
.public-generator .right.preview-panel.bg-ready::after{opacity:0}
.public-generator .right-inner{position:relative;z-index:2}
@media (max-width:1200px){
  .public-generator .right.preview-panel::after,
  .public-generator .right.preview-panel::before{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
}

/* Comparison modal: one current, structured comparison across all three real contracts. */
.package-dialog{width:min(920px,calc(100vw - 28px))}
.package-comparison-wrap{
  max-height:64vh;
  overflow:auto;
  border:0!important;
  border-radius:12px;
  background:#f3f3f3!important;
}
.package-comparison{
  width:100%;
  min-width:690px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-family:'Inter',system-ui,sans-serif;
}
.package-comparison thead th{
  position:sticky;
  top:0;
  z-index:2;
  height:62px;
  padding:12px 14px;
  background:#f7f7f7;
  color:#111;
  font:700 15px/1.2 'Inter',system-ui,sans-serif;
  text-align:center;
  border-right:1px solid #fff;
}
.package-comparison thead th:first-child{width:46%;text-align:left;border-top-left-radius:12px}
.package-comparison thead th:last-child{border-right:0;border-top-right-radius:12px}
.package-comparison tbody th,
.package-comparison tbody td{
  height:44px;
  padding:9px 14px;
  border-right:1px solid #fff;
  vertical-align:middle;
}
.package-comparison tbody tr:nth-child(odd)>*{background:#ededed}
.package-comparison tbody tr:nth-child(even)>*{background:#f7f7f7}
.package-comparison tbody th{
  color:#202020;
  font:400 12px/1.3 'Inter',system-ui,sans-serif;
  text-align:left;
}
.package-comparison tbody td{text-align:center}
.package-comparison tbody td:last-child{border-right:0}
.comparison-mark{
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  font:700 11px/1 'Inter',system-ui,sans-serif;
}
.package-comparison td.is-included .comparison-mark{background:#82E015;color:#111}
.package-comparison td.is-not-included .comparison-mark{background:#c9c9c9;color:#fff;opacity:.85}
.package-count-row{display:none!important}
@media (max-width:600px){
  .package-comparison{min-width:640px}
  .package-comparison thead th{font-size:13px;height:54px}
  .package-comparison tbody th{font-size:11px}
}


/* ===== Style step 8.1: tooltip containment, stable color tool, comparison polish ===== */

/* Tooltips must always wrap inside their glass surface, even when inherited from nowrap controls. */
.public-generator .info-tooltip,
.local-popover .info-tooltip{
  width:min(220px,calc(100vw - 24px))!important;
  min-width:0!important;
  max-width:min(220px,calc(100vw - 24px))!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:auto;
  line-height:1.38!important;
}
.public-generator .info-tooltip span,
.local-popover .info-tooltip span{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* Comparison modal: closer to the old UI scale and icon language. */
.package-dialog__head p{
  font-size:14px!important;
  line-height:1.4!important;
  color:#6f6f6f!important;
  margin-top:6px!important;
}
.package-comparison thead th{
  font-size:16px!important;
}
.package-comparison tbody th{
  font-size:14px!important;
  line-height:1.35!important;
}
.package-comparison tbody th,
.package-comparison tbody td{
  min-height:48px;
}
.comparison-mark{
  width:20px!important;
  height:20px!important;
  display:inline-block!important;
  vertical-align:middle;
  overflow:visible;
}
.package-comparison td.is-included .comparison-mark,
.package-comparison td.is-not-included .comparison-mark{
  background:none!important;
  color:inherit!important;
  opacity:1!important;
  border-radius:0!important;
}
@media (max-width:600px){
  .package-dialog__head p{font-size:13px!important}
  .package-comparison thead th{font-size:14px!important}
  .package-comparison tbody th{font-size:13px!important}
}

/* ===== Style step 8.2: disabled help + unified glass tooltips ===== */
/* Help belongs to the active feature. Disabled previews do not expose interactive hints. */
.public-generator .is-preview-disabled .info-btn-wrap{
  pointer-events:none!important;
  opacity:.5!important;
  filter:saturate(.7)!important;
}
.public-generator .is-preview-disabled .info-btn{cursor:default!important}
.public-generator .is-preview-disabled .info-tooltip{display:none!important}

/* Final single tooltip treatment everywhere: no border, one glass surface, one blur. */
.public-generator .info-tooltip,
.local-popover .info-tooltip{
  box-sizing:border-box!important;
  width:min(220px,calc(100vw - 24px))!important;
  min-width:0!important;
  max-width:min(220px,calc(100vw - 24px))!important;
  padding:8px 10px!important;
  border:0!important;
  border-radius:10px!important;
  background:rgba(25,25,27,.72)!important;
  color:#fff!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.16)!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.38!important;
}
.public-generator .info-tooltip span,
.local-popover .info-tooltip span{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* Usage counter is plain supporting copy, not a help/link row. */
.public-generator .usage-note{gap:0!important}

/* ===== Style step 8.3: visible glass blur + smoother theme switch ===== */
/* Make the 14px glass blur visually legible on every information tooltip. */
.public-generator .info-tooltip,
.local-popover .info-tooltip{
  background:rgba(18,18,20,.54)!important;
  backdrop-filter:blur(14px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(125%)!important;
}

/* Theme preview switch: soft hover feedback and a clean thumb/icon transition. */
.public-generator .switch{
  -webkit-backdrop-filter:blur(7px);
  transition:background-color .20s ease,border-color .20s ease,box-shadow .20s ease,transform .20s ease!important;
  will-change:transform;
}
.public-generator .switch:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.public-generator .switch:active{
  transform:translateY(0) scale(.985);
}
.public-generator .switch__thumb{
  transition:transform .26s cubic-bezier(.2,.75,.25,1),background-color .22s ease,box-shadow .22s ease!important;
  will-change:transform;
}
.public-generator .switch:hover .switch__thumb{
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.public-generator .switch__icon{
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.75,.25,1)!important;
}



/* ===== Style step 8.4: app metadata help + launch color seed + clean public app preview ===== */
/* Public app preview is visual, not a technical safe-zone diagram. */
.public-generator .app-icon-col .app-safe-zone{display:none!important}

/* App details help uses the same compact dark-on-white info language as Preview shape. */
.public-generator .local-field-label{
  display:flex!important;
  align-items:center;
  gap:4px;
  min-height:12px;
}
.public-generator .local-field-label>.info-btn-wrap{display:flex!important;margin:0;flex:0 0 auto}
.public-generator .local-field-label>.info-btn-wrap .info-btn--dark{
  width:12px!important;height:12px!important;min-width:12px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:50%;
  background:rgba(30,30,30,.14)!important;color:#4f4f4f!important;
  font:600 8px/12px 'Inter',system-ui,sans-serif!important;
}
.public-generator .local-field-label>.info-btn-wrap .info-btn--dark:hover{background:rgba(30,30,30,.22)!important;color:#222!important}
.public-generator .local-field-label>.info-btn-wrap .info-tooltip{
  left:0!important;right:auto!important;top:18px!important;
}

/* Theme switch remains secondary but every state change should feel deliberate. */
.public-generator .switch{position:static!important;top:auto!important;transition:background-color .20s ease,border-color .20s ease,box-shadow .20s ease,transform .20s ease!important}
.public-generator .switch__thumb{transition:transform .26s cubic-bezier(.2,.75,.25,1),background-color .22s ease,box-shadow .22s ease!important}
.public-generator .switch__icon{transition:opacity .18s ease,transform .22s cubic-bezier(.2,.75,.25,1)!important}


/* ===== Style step 8.5: linked Launch-screen logo controls ===== */
/* Launch has two compact rows: screen background, then the Android app-icon controls it reuses. */
.public-generator .launch-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.public-generator .launch-icon-controls{justify-content:center}

/* The launch logo is the same Android maskable icon: background and scale stay linked. */
.public-generator .splash-icon{
  background:var(--launch-icon-bg,#fff)!important;
}
.public-generator .splash-icon .favicon-svg svg{
  transform:scale(var(--launch-scale,.55))!important;
}

/* Reuse the Android preview shape for the launch logo rather than inventing a second rounding state. */
.public-generator[data-app-shape="circle"] .launch-screen-col .splash-icon{border-radius:50%!important}
.public-generator[data-app-shape="rounded"] .launch-screen-col .splash-icon{border-radius:24%!important}
.public-generator[data-app-shape="squircle"] .launch-screen-col .splash-icon{border-radius:34%!important}
.public-generator[data-app-shape="square"] .launch-screen-col .splash-icon{border-radius:7%!important}

/* iOS selection on the left must not hide the Android launch-screen shape control. */
.public-generator[data-app-platform="ios"] .launch-screen-col .launch-shape-btn{display:flex!important}

/* Technical provenance now lives in the contextual help, never as permanent copy below the phone. */
.public-generator .launch-note{display:none!important}
/* Launch help is relevant in the active PWA mode; disabled-mode help remains non-interactive. */
.public-generator[data-generator-mode="pwa"] .context-info--launch{display:flex}


/* ===== Style step 8.6: palette tooltip backdrop + persistent dark help + consent readability ===== */
/* Palette help sits outside the already-blurred palette pill so its own backdrop blur can sample the preview behind it. */
.public-generator .palette-header>.palette-info{
  margin:0;
  flex:0 0 auto;
}

/* Keep Dark tab help present when the Complete preview becomes active. */
.public-generator[data-generator-mode="complete"] .context-info--dark{display:flex}
.public-generator[data-generator-mode="complete"] .context-info--dark .info-copy--complete{display:inline}

/* Consent glass: keep the translucent card, but make the 14px backdrop blur visible and the copy readable. */
.public-generator .consent-banner{
  background:rgba(255,255,255,.84)!important;
  backdrop-filter:blur(14px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(120%)!important;
}
.public-generator .consent-banner p{
  font-size:14px!important;
  line-height:1.45!important;
}
.public-generator .consent-banner__actions button{
  font-size:16px!important;
  line-height:1.2!important;
}


/* ===== Style step 8.7: palette info placement + stacked consent layout ===== */
/* Keep only the two browser-palette help buttons inside the glass palette pill, directly beside the color dots. */
.public-generator .palette-dots-row>.palette-info{
  margin:0;
  flex:0 0 auto;
}

/* Privacy banner reads top-to-bottom: title, description, then one horizontal action row. */
.public-generator .consent-banner{
  flex-direction:column!important;
  align-items:stretch!important;
  gap:10px!important;
}
.public-generator .consent-banner>div:first-child{
  width:100%;
  min-width:0;
  flex:none;
}
.public-generator .consent-banner__actions{
  width:100%;
  justify-content:flex-start!important;
  align-items:center;
}
.public-generator .consent-banner__actions button{
  font-size:14px!important;
  line-height:1.2!important;
}

/* ===== Style step 8.8: palette glass layering fix ===== */
/*
 * The palette info button must stay visually inside the color pill, but a
 * backdrop-filter on the pill itself creates a backdrop root / stacking
 * context. That traps the nested tooltip: its own blur cannot sample the
 * preview correctly, and later preview artwork can paint above it.
 *
 * Keep the same glass appearance on a pseudo-element instead. The actual
 * .palette-label no longer creates the backdrop root, so the nested tooltip
 * can use its 14px blur and its z-index normally.
 */
.public-generator .palette-label{
  position:relative;
  background:transparent!important;
  border-color:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.public-generator .palette-label::before{
  content:"";
  position:absolute;
  inset:0;
  box-sizing:border-box;
  border-radius:inherit;
  background:rgba(228,228,228,.18);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  pointer-events:none;
  z-index:0;
}
.public-generator .palette-label>*{
  position:relative;
  z-index:1;
}
.public-generator .palette-label .palette-info{
  z-index:30;
}
.public-generator .palette-label .info-tooltip{
  z-index:1000!important;
}
/* Re-open the shared crop flow after the initial upload crop. */
.public-generator .palette-header .crop-trigger{
  display:flex;
  align-items:center;
  justify-content:center;
  height:24px;
  min-width:62px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font:600 10px/1 'Inter',sans-serif;
  cursor:pointer;
  backdrop-filter:blur(8px) saturate(120%);
}
.public-generator .palette-header .crop-trigger:hover:not(:disabled){background:rgba(255,255,255,.28)}
.public-generator .palette-header .crop-trigger:disabled{opacity:.35;cursor:default;pointer-events:none}



/* ===== 2026-09-30 v5: structural App Icon rows in every mode ===== */
/*
 * Background and actions are separate DOM rows in Mini, Complete and PWA.
 * Keep the composition consistent with Launch Screen: background on the first
 * row, controls on the second. Mode-specific buttons may still hide/show, but
 * the row structure itself never changes between product modes.
 */
.public-generator .app-icon-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.public-generator .app-icon-background-row,
.public-generator .app-icon-action-row{
  min-height:21px;
  align-items:center;
  justify-content:center;
}
.public-generator .app-icon-action-row{
  display:flex;
  gap:4px;
}
.public-generator .app-icon-action-row .crop-trigger{height:21px}


/* ===== 2026-09-30 v3: uniform inactive Launch-screen controls ===== */
/*
 * Launch controls are wrapped in .launch-controls, unlike the other preview
 * headers. Dim the wrapper as one unavailable output so its labels, glass,
 * buttons and contextual info match the disabled phone preview below it.
 */
.public-generator .launch-screen-col.is-preview-disabled > .launch-controls{
  opacity:.5;
  filter:saturate(.7);
  pointer-events:none;
}
/* Avoid double-dimming the nested info control; it inherits the wrapper opacity. */
.public-generator .launch-screen-col.is-preview-disabled > .launch-controls .info-btn-wrap,
.public-generator .launch-screen-col.is-preview-disabled > .launch-controls .info-btn{
  opacity:1!important;
  filter:none!important;
  pointer-events:none!important;
}


/* Revision 10: exactly one vertical scroll owner in each layout.
 * >1200px: body/document stay locked and .right is the desktop scroll pane.
 * <=1200px: the layout stacks and only the root document scrolls; body, page and
 * preview are ordinary visible-overflow flow containers. */
@media (max-width:1200px){
  html{height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden}
  body.public-generator{height:auto;min-height:100vh;overflow:visible!important}
  body.public-generator .page{height:auto!important;min-height:100vh;overflow:visible!important}
  body.public-generator .right.preview-panel{height:auto!important;min-height:100vh;overflow:visible!important}
}