.favicon-page{width:min(100%,var(--content));margin:0 auto;padding:1.2rem clamp(18px,5vw,58px) 4rem}
.favicon-intro{padding:2rem 0 1.2rem}.favicon-intro h1{max-width:900px}.favicon-intro>p:last-child{max-width:850px;color:var(--muted);font-size:1.06rem}
.favicon-workspace{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);gap:1.1rem;align-items:start}
.favicon-controls,.favicon-preview-panel,.favicon-help{padding:1.2rem;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-card)}
.favicon-controls h2,.favicon-preview-panel h2,.favicon-help h2{font-size:1.35rem;letter-spacing:-.02em}
.favicon-controls>label,.favicon-fields label{display:block;margin:.85rem 0 .3rem;color:var(--ink);font-size:.88rem;font-weight:700}
.favicon-controls>input:not([type=color]):not([type=range]),.favicon-controls>select,.favicon-fields select{width:100%;min-height:44px;padding:.65rem .75rem;border:1px solid #cfd8e6;border-radius:10px;background:#fff;color:var(--ink)}
.favicon-controls input[type=file]{padding:.5rem;background:var(--soft)}.favicon-controls input[type=color]{display:block;width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:.25rem;background:#fff}
.favicon-fields{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .8rem;margin-top:.3rem}.favicon-fields input[type=range]{width:100%;min-height:44px}
.field-note{margin:.35rem 0;color:var(--muted);font-size:.82rem;line-height:1.5}.secondary-button{border:1px solid #b7c8e4;background:#fff;color:var(--blue)}.secondary-button:hover{background:var(--blue-soft)}
.favicon-controls #refreshFavicon{width:100%;margin-top:1rem}.favicon-status{min-height:1.5em;margin:.75rem 0 0;color:var(--muted);font-size:.87rem;overflow-wrap:anywhere}.favicon-status.error{color:#b42318}
.favicon-browser{padding:1rem;border:1px solid #dbe3ee;border-radius:14px;background:linear-gradient(#f4f6fa 0 32px,#fff 32px)}.browser-dots{display:flex;gap:5px;margin-bottom:.8rem}.browser-dots i{width:8px;height:8px;border-radius:50%;background:#cbd5e1}
.browser-tab{display:flex;align-items:center;gap:.55rem;width:min(100%,260px);min-height:40px;padding:.35rem .55rem;border:1px solid #dbe3ee;border-bottom-color:#fff;border-radius:9px 9px 0 0;background:#fff;color:#344054;font-size:.82rem}.browser-tab canvas{width:24px;height:24px}.browser-tab span:nth-of-type(1){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.tab-close{color:#98a2b3;font-size:1.15rem}
.favicon-size-previews{display:flex;align-items:flex-end;justify-content:space-around;gap:.75rem;flex-wrap:wrap;padding:1.2rem .2rem}.favicon-size-previews>div{display:flex;min-width:54px;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted);font-size:.78rem}.favicon-size-previews canvas{max-width:100%;image-rendering:pixelated}
.favicon-downloads{display:grid;gap:.55rem}.favicon-downloads button,.favicon-code button{width:100%;font-size:.9rem}.favicon-code{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}.favicon-code h3{font-size:1.1rem}.favicon-code p{color:var(--muted);font-size:.9rem}
.favicon-code pre{overflow:auto;padding:.9rem;border-radius:12px;background:#101828;color:#f2f4f7;font-size:.78rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}.favicon-help{margin-top:1.2rem;background:var(--soft);box-shadow:none}.favicon-help li{margin:.45rem 0;line-height:1.65}.favicon-help p{color:var(--muted)}.favicon-help a{color:var(--blue)}
footer .footer-description{flex:1 1 320px;max-width:62ch;margin:0;color:var(--muted);font-size:.88rem;line-height:1.55}footer .legal-footer-links{display:flex;flex-wrap:wrap;gap:.5rem 1rem}footer .legal-footer-links a{color:var(--blue);font-weight:650;text-decoration:none}footer .legal-footer-links a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:800px){.favicon-workspace{grid-template-columns:1fr}}@media(max-width:480px){.favicon-controls,.favicon-preview-panel,.favicon-help{padding:1rem}.favicon-intro{padding-top:1.2rem}.favicon-size-previews{gap:.5rem}}