.image-v1-workspace[data-image-tool="favicon-generator"] .image-v1-grid{
  grid-template-columns:minmax(340px,38%) minmax(0,62%)!important;
  align-items:start;
}
.image-v1-workspace[data-image-tool="favicon-generator"] .image-v1-panel:first-child{
  max-height:calc(100vh - 154px);
  overflow:auto;
  scrollbar-gutter:stable;
  padding-right:10px;
}
.image-v1-workspace[data-image-tool="favicon-generator"] .image-v1-panel:first-child::-webkit-scrollbar{width:8px}
.image-v1-workspace[data-image-tool="favicon-generator"] .image-v1-panel:first-child::-webkit-scrollbar-thumb{background:#7dd3fc;border-radius:8px}
.image-v1-workspace[data-image-tool="favicon-generator"] .image-friendly-settings{display:block}
.image-v1-workspace[data-image-tool="favicon-generator"] .image-tool-action,
.image-v1-workspace[data-image-tool="favicon-generator"] [data-image-common],
.favicon-code-wrap button{
  border-radius:4px!important;
  text-align:center;
}
.image-v1-workspace[data-image-tool="favicon-generator"] [hidden]{display:none!important}
.image-v1-workspace[data-image-tool="favicon-generator"].is-processing .image-v1-panel{cursor:progress}

.favicon-pro{padding:16px 0 28px}
.favicon-pro__hero{
  border:1px solid rgba(37,99,235,.14);
  border-radius:8px;
  background:linear-gradient(135deg,#f8fbff,#eef6ff);
  padding:16px;
  margin-bottom:14px;
}
.favicon-pro__hero b{display:block;color:#0f172a;font:900 18px/1.25 var(--dna-font-sidebar,Inter,system-ui,sans-serif)}
.favicon-pro__hero p{margin:7px 0 0;color:#48647f;font:700 13px/1.5 var(--dna-font-sidebar,Inter,system-ui,sans-serif)}
.favicon-pro__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.favicon-pro__field,.favicon-pro__check{display:flex;flex-direction:column;gap:7px;min-width:0}
.favicon-pro__field.is-wide,.favicon-pro__check.is-wide{grid-column:1/-1}
.favicon-pro__field>span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#10243c;
  font:850 13px/1.3 var(--dna-font-sidebar,Inter,system-ui,sans-serif);
}
.favicon-pro__field>span b{color:#1769e8;font-size:12px}
.favicon-pro__field small,.favicon-pro__check small{
  color:#647b92;
  font:650 11px/1.4 var(--dna-font-sidebar,Inter,system-ui,sans-serif);
}
.favicon-pro__field input:not([type="range"]),
.favicon-pro__field select{
  width:100%;
  min-height:42px;
  border:1px solid rgba(37,99,235,.18);
  border-radius:4px;
  background:#fff;
  color:#10243c;
  padding:10px 11px;
  font:750 13px/1.3 var(--dna-font-sidebar,Inter,system-ui,sans-serif);
  outline:0;
}
.favicon-pro__field input:focus,.favicon-pro__field select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.favicon-pro__field input[type="color"]{padding:4px;cursor:pointer}
.favicon-pro__field input:disabled,.favicon-pro__field select:disabled,.favicon-pro__field.is-disabled{opacity:.5;cursor:not-allowed}
.favicon-pro__check{
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  min-height:56px;
  border:1px solid rgba(37,99,235,.14);
  border-radius:5px;
  padding:11px 12px;
  background:#fff;
}
.favicon-pro__check>input{width:18px;height:18px;margin:2px 0 0;accent-color:#1769e8;flex:0 0 auto}
.favicon-pro__check>span{display:flex;flex-direction:column;gap:3px;color:#10243c;font:800 13px/1.3 var(--dna-font-sidebar,Inter,system-ui,sans-serif)}
.favicon-range{display:grid!important;grid-template-columns:minmax(0,1fr) 72px;gap:10px;align-items:center}
.favicon-range input[type="range"]{
  width:100%;height:6px;appearance:none;border:0!important;border-radius:8px;
  background:linear-gradient(90deg,#38bdf8,#2563eb);outline:0;
}
.favicon-range input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;border:0;border-radius:50%;background:#2563eb;box-shadow:0 4px 12px rgba(37,99,235,.3);cursor:pointer;
}
.favicon-range input[type="number"]{text-align:center;padding-inline:6px!important}
.favicon-input-guidance{
  display:flex;align-items:flex-start;gap:9px;margin-top:15px;border:1px solid rgba(14,165,233,.17);
  border-radius:5px;background:#f0f9ff;color:#45627f;padding:11px 12px;font:700 11px/1.45 var(--dna-font-sidebar,Inter,system-ui,sans-serif);
}
.favicon-input-guidance i{margin-top:2px;color:#0284c7}

.favicon-preview,.favicon-result{
  border:1px solid rgba(37,99,235,.14);
  border-radius:8px;
  background:#f8fbff;
  padding:15px;
}
.favicon-preview__stage{
  position:relative;
  min-height:390px;
  border:1px solid rgba(37,99,235,.1);
  border-radius:8px;
  background:
    linear-gradient(45deg,rgba(37,99,235,.045) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(37,99,235,.045) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(37,99,235,.045) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(37,99,235,.045) 75%),#fff;
  background-size:28px 28px;
  background-position:0 0,0 14px,14px -14px,-14px 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;overflow:hidden;
}
.favicon-badge{
  display:inline-flex;align-items:center;min-height:27px;border-radius:4px;background:#172033;color:#fff;
  padding:0 9px;font:850 11px/1 var(--dna-font-sidebar,Inter,system-ui,sans-serif);letter-spacing:.01em;
}
.favicon-badge.is-success{background:#047857}
.favicon-preview__stage>.favicon-badge{position:absolute;top:14px;left:14px}
.favicon-live-canvas{display:block;max-width:100%;object-fit:contain;box-shadow:0 12px 30px rgba(15,23,42,.14);image-rendering:auto}
.favicon-live-canvas.is-large{box-shadow:0 22px 48px rgba(37,99,235,.2)}
.favicon-size-strip{display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:18px}
.favicon-size-strip>div{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:46px}
.favicon-size-strip b{color:#58708b;font:750 10px/1 var(--dna-font-sidebar,Inter,system-ui,sans-serif)}

.favicon-context-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:10px;margin-top:12px}
.favicon-browser-preview,.favicon-platform-preview{
  border:1px solid rgba(37,99,235,.12);border-radius:6px;background:#fff;padding:12px;min-width:0;
}
.favicon-browser-preview>span{display:block;margin-bottom:8px;color:#647b92;font:750 10px/1 var(--dna-font-sidebar,Inter,system-ui,sans-serif);text-transform:uppercase;letter-spacing:.06em}
.favicon-browser-chrome{
  display:grid;grid-template-columns:20px minmax(0,1fr) 16px;align-items:center;gap:8px;min-height:39px;
  border:1px solid #dbe4ee;border-bottom-color:#cbd5e1;border-radius:5px 5px 2px 2px;background:#f8fafc;padding:8px 9px;
}
.favicon-browser-chrome b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#25364a;font:700 12px/1 var(--dna-font-sidebar,Inter,system-ui,sans-serif)}
.favicon-browser-chrome i{color:#94a3b8;font-size:11px}
.favicon-platform-preview{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.favicon-platform-preview>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0}
.favicon-platform-preview b{color:#526b85;font:750 10px/1.2 var(--dna-font-sidebar,Inter,system-ui,sans-serif);text-align:center}
.favicon-platform-icon{display:inline-flex;width:66px;height:66px;overflow:hidden;box-shadow:0 6px 16px rgba(15,23,42,.13)}
.favicon-platform-icon.is-apple{border-radius:15px}
.favicon-platform-icon.is-maskable{border-radius:50%}

.favicon-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}
.favicon-card{border:1px solid rgba(37,99,235,.12);border-radius:6px;background:#fff;padding:11px;text-align:center;min-width:0}
.favicon-card b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#0f172a;font:850 13px/1.25 var(--dna-font-sidebar,Inter,system-ui,sans-serif)}
.favicon-card span{display:block;margin-top:4px;color:#647b92;font:700 10px/1.3 var(--dna-font-sidebar,Inter,system-ui,sans-serif)}
.favicon-platform-note{display:flex;align-items:flex-start;gap:8px;margin:11px 0 0;color:#5b7188;font:650 11px/1.45 var(--dna-font-sidebar,Inter,system-ui,sans-serif)}
.favicon-platform-note i{margin-top:2px;color:#0284c7}

.favicon-package{margin-top:14px;border-top:1px solid rgba(37,99,235,.12);padding-top:14px}
.favicon-result__top{display:grid;grid-template-columns:116px minmax(0,1fr);gap:15px;align-items:center;border:1px solid rgba(37,99,235,.12);border-radius:7px;background:#fff;padding:13px}
.favicon-result__top img{width:104px;height:104px;object-fit:contain;border-radius:6px;background:#f8fbff;padding:10px}
.favicon-result__top h3{margin:9px 0 5px;color:#0f172a;font:850 17px/1.25 var(--dna-font-sidebar,Inter,system-ui,sans-serif);overflow-wrap:anywhere}
.favicon-result__top p{margin:0;color:#526b85;font:700 12px/1.45 var(--dna-font-sidebar,Inter,system-ui,sans-serif)}
.favicon-code-wrap{margin-top:12px;border:1px solid rgba(37,99,235,.12);border-radius:7px;background:#fff;overflow:hidden}
.favicon-code-wrap header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(37,99,235,.1)}
.favicon-code-wrap header b{color:#0f172a;font:850 12px/1.2 var(--dna-font-sidebar,Inter,system-ui,sans-serif)}
.favicon-code-wrap button{min-height:32px;border:1px solid rgba(37,99,235,.18);background:#eef7ff;color:#1769e8;padding:0 11px;font:850 11px/1 var(--dna-font-sidebar,Inter,system-ui,sans-serif);cursor:pointer}
.favicon-code{margin:0;padding:13px;white-space:pre-wrap;overflow:auto;color:#0f172a;font:650 11px/1.55 Consolas,Monaco,monospace}
.favicon-files{margin-top:12px;border:1px solid rgba(37,99,235,.12);border-radius:6px;background:#fff;padding:0 12px 12px}
.favicon-files summary{cursor:pointer;padding:11px 0;color:#1769e8;font:800 12px/1.3 var(--dna-font-sidebar,Inter,system-ui,sans-serif)}
.favicon-file-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;padding:0;list-style:none}
.favicon-file-list li{display:flex;align-items:center;gap:8px;min-height:36px;border:1px solid rgba(37,99,235,.09);border-radius:4px;background:#f8fbff;color:#20364d;padding:7px 9px;font:700 11px/1.25 var(--dna-font-sidebar,Inter,system-ui,sans-serif);min-width:0}
.favicon-file-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.favicon-file-list i{color:#1769e8;flex:0 0 auto}

body.theme-dark .favicon-pro__hero,
body.theme-dark .favicon-pro__field input:not([type="range"]),
body.theme-dark .favicon-pro__field select,
body.theme-dark .favicon-pro__check,
body.theme-dark .favicon-preview,
body.theme-dark .favicon-result,
body.theme-dark .favicon-browser-preview,
body.theme-dark .favicon-platform-preview,
body.theme-dark .favicon-card,
body.theme-dark .favicon-result__top,
body.theme-dark .favicon-code-wrap,
body.theme-dark .favicon-files{
  background:rgba(15,23,42,.76);border-color:rgba(96,165,250,.23);color:#dbeafe;
}
body.theme-dark .favicon-input-guidance{background:rgba(2,132,199,.1);border-color:rgba(56,189,248,.22);color:#bfdbfe}
body.theme-dark .favicon-pro__hero b,
body.theme-dark .favicon-pro__field>span,
body.theme-dark .favicon-pro__check>span,
body.theme-dark .favicon-card b,
body.theme-dark .favicon-result__top h3,
body.theme-dark .favicon-code-wrap header b,
body.theme-dark .favicon-code{color:#f8fafc}
body.theme-dark .favicon-pro__hero p,
body.theme-dark .favicon-pro__field small,
body.theme-dark .favicon-pro__check small,
body.theme-dark .favicon-card span,
body.theme-dark .favicon-result__top p,
body.theme-dark .favicon-platform-note,
body.theme-dark .favicon-platform-preview b,
body.theme-dark .favicon-size-strip b{color:#b6c5d6}
body.theme-dark .favicon-preview__stage{
  border-color:rgba(96,165,250,.16);
  background:
    linear-gradient(45deg,rgba(96,165,250,.07) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(96,165,250,.07) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(96,165,250,.07) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(96,165,250,.07) 75%),#0f172a;
  background-size:28px 28px;background-position:0 0,0 14px,14px -14px,-14px 0;
}
body.theme-dark .favicon-browser-chrome,body.theme-dark .favicon-file-list li{background:#111c2e;border-color:rgba(148,163,184,.2);color:#dbeafe}
body.theme-dark .favicon-browser-chrome b{color:#dbeafe}
body.theme-dark .favicon-code-wrap button{background:#17243a;border-color:rgba(96,165,250,.28);color:#bfdbfe}

@media(max-width:1180px){
  .image-v1-workspace[data-image-tool="favicon-generator"] .image-v1-grid{grid-template-columns:minmax(320px,42%) minmax(0,58%)!important}
  .favicon-metrics{grid-template-columns:1fr 1fr}
  .favicon-context-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .image-v1-workspace[data-image-tool="favicon-generator"] .image-v1-grid,
  .favicon-pro__grid,
  .favicon-metrics,
  .favicon-file-list,
  .favicon-result__top{grid-template-columns:1fr!important}
  .image-v1-workspace[data-image-tool="favicon-generator"] .image-v1-panel:first-child{max-height:none;overflow:visible;padding-right:0;scrollbar-gutter:auto}
  .favicon-pro__field.is-wide,.favicon-pro__check.is-wide{grid-column:auto}
  .favicon-preview__stage{min-height:330px}
  .favicon-result__top{text-align:center}
  .favicon-result__top img{margin:auto}
}
@media(max-width:520px){
  .favicon-preview,.favicon-result{padding:11px}
  .favicon-preview__stage{min-height:306px;gap:22px}
  .favicon-platform-preview{grid-template-columns:1fr 1fr}
  .favicon-size-strip{gap:12px}
  .favicon-range{grid-template-columns:minmax(0,1fr) 64px}
  .favicon-code-wrap header{align-items:flex-start;flex-direction:column}
  .favicon-code-wrap button{width:100%}
}