.favicon-shell { max-width: 1200px; }
.favicon-page { max-width: 1060px; }
.favicon-page .breadcrumbs { margin-top: 18px; }
.favicon-hero { margin-bottom: 18px; }
.favicon-hero h1 { max-width: none; font-size: clamp(24px, 3.3vw, 40px); letter-spacing: -.05em; white-space: nowrap; }
.favicon-hero .hero-subtitle { max-width: 68ch; }
.favicon-hero code, .favicon-faq code { padding: 2px 5px; border: 1px solid #e1e5ee; border-radius: 5px; background: #f3f5f9; color: #35415c; font-size: .92em; }
.favicon-workspace { width: 100%; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 14px; }
.favicon-workspace.is-pending .favicon-form { grid-column: 1; width: 100%; justify-self: stretch; }
.favicon-preview-card[hidden] { display: none; }
.favicon-workspace .panel { min-width: 0; padding: clamp(22px, 3vw, 30px); border: 1px solid #e0e3ea; border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 10px 28px rgba(38, 44, 60, .045); }
.favicon-panel-heading { margin-bottom: 21px; }
.favicon-panel-heading .section-kicker { width: fit-content; max-width: 100%; margin: 0 0 8px; color: #68738c; font-size: 10px; font-weight: 750; letter-spacing: .13em; white-space: nowrap; }
.favicon-panel-heading .section-kicker span { padding: 0 3px; color: #a0a8b8; }
.favicon-panel-heading h2 { margin: 0 0 7px; color: #252d3e; font-size: 22px; line-height: 1.3; letter-spacing: -.025em; }
.favicon-panel-heading > p:last-child { margin: 0; color: #606777; font-size: 13px; line-height: 1.65; }
.favicon-form label { display: block; margin-bottom: 7px; color: #363d4e; font-size: 12px; font-weight: 650; }
.favicon-input-row { display: flex; gap: 9px; }
.favicon-input-shell { min-width: 0; min-height: 49px; flex: 1; padding: 0 7px 0 13px; display: flex; align-items: center; gap: 8px; border: 1px solid #d9dee8; border-radius: 11px; background: linear-gradient(180deg, #fff, #fbfcff); box-shadow: 0 2px 6px rgba(34, 48, 80, .035); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.favicon-input-shell:focus-within { border-color: #7388b4; background: #fff; box-shadow: 0 0 0 3px rgba(75, 99, 155, .12), 0 4px 12px rgba(34, 48, 80, .06); }
.favicon-url-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: #71809c; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.favicon-input-shell input { width: 0; min-width: 0; min-height: 45px; flex: 1; padding: 0 3px; border: 0; outline: none; background: transparent; color: #252d3e; font: inherit; font-size: 14px; }
.favicon-input-shell input::placeholder { color: #9298a5; }
.favicon-input-shell input:focus-visible { outline: 0; }
.favicon-paste { min-height: 34px; padding: 0 10px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; border: 1px solid #dfe4ed; border-radius: 8px; background: #f7f8fb; color: #4b5874; font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.favicon-paste svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.favicon-paste:hover:not(:disabled) { border-color: #bbc6da; background: #eef2f9; color: #2c426e; }
.favicon-paste:disabled { opacity: .55; cursor: not-allowed; }
.favicon-submit, .favicon-download { min-height: 46px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #1f459e; border-radius: 9px; background: linear-gradient(135deg, #3267d2, #1c459e); box-shadow: 0 5px 12px rgba(44, 80, 158, .13); color: #fff; font: inherit; font-size: 13px; font-weight: 680; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.favicon-submit:hover:not(:disabled), .favicon-download:hover:not(:disabled) { box-shadow: 0 8px 18px rgba(44, 80, 158, .2); transform: translateY(-1px); }
.favicon-submit:disabled, .favicon-download:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.favicon-submit > span:last-child, .favicon-download > span:last-child { font-size: 18px; line-height: 1; }
.favicon-help { margin: 9px 0 0; color: #747b89; font-size: 12px; }
.example-domain { padding: 0; border: 0; background: none; color: #3e568d; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.example-domain:hover { color: #243e78; }
.favicon-status { min-height: 22px; margin: 18px 0 0; color: #4e586d; font-size: 13px; line-height: 1.55; }
.favicon-status.is-loading { color: #405987; }
.favicon-status.is-error { color: #a53c38; }
.favicon-status.is-success { color: #2f704e; }
.favicon-disclosure { margin: 15px 0 0; padding-top: 14px; border-top: 1px solid #eaecf1; color: #707684; font-size: 11px; line-height: 1.65; }
.favicon-disclosure a, .favicon-faq a { color: #3d527f; text-underline-offset: 3px; }
.favicon-preview-card { display: flex; flex-direction: column; }
.favicon-preview-card .favicon-panel-heading { margin-bottom: 15px; }
.favicon-preview-stage { min-height: 178px; padding: 20px; display: grid; place-items: center; overflow: hidden; border: 1px solid #e5e7ed; border-radius: 12px; background-color: #fbfbfd; background-image: linear-gradient(45deg,#f0f1f5 25%,transparent 25%),linear-gradient(-45deg,#f0f1f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f1f5 75%),linear-gradient(-45deg,transparent 75%,#f0f1f5 75%); background-position: 0 0,0 7px,7px -7px,-7px 0; background-size: 14px 14px; }
.favicon-preview-stage img { width: min(128px, 48vw); height: min(128px, 48vw); object-fit: contain; image-rendering: auto; filter: drop-shadow(0 7px 14px rgba(35, 45, 68, .12)); }
.favicon-placeholder { position: relative; width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid #dfe3ec; border-radius: 18px; background: linear-gradient(145deg,#fff,#edf1f8); box-shadow: 0 8px 20px rgba(50,62,90,.08); color: #52617e; }
.favicon-placeholder[hidden] { display: none; }
.favicon-placeholder span { font-size: 48px; font-weight: 700; letter-spacing: -.09em; line-height: 1; }
.favicon-placeholder i { position: absolute; right: 9px; bottom: 8px; color: #5677bd; font-size: 24px; font-style: normal; line-height: 1; }
.favicon-meta { min-height: 45px; margin: 12px 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; color: #4b5261; }
.favicon-meta strong { overflow: hidden; color: #31394c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.favicon-meta span { color: #777e8b; font-size: 11px; }
.favicon-meta[hidden] { display: none; }
.favicon-download { width: 100%; min-height: 48px; margin-top: auto; }
.favicon-format-note { margin: 9px 0 0; color: #777e8b; font-size: 11px; line-height: 1.55; text-align: center; }
.favicon-how { width: 100%; max-width: none; margin: 30px 0 0; padding: 26px 0; border-bottom: 1px solid #e1e3e8; }
.favicon-how > .section-kicker, .favicon-faq > .section-kicker { margin: 0 0 7px; color: #68738c; font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.favicon-how h2, .favicon-faq h2 { margin: 0 0 14px; color: #252d3e; font-size: clamp(21px, 2.8vw, 26px); letter-spacing: -.03em; }
.favicon-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.favicon-steps article { min-width: 0; padding: 17px; border: 1px solid #e1e4eb; border-radius: 12px; background: rgba(255,255,255,.7); }
.favicon-steps article > span { display: block; margin-bottom: 11px; color: #6d7d9d; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.favicon-steps h3 { margin: 0 0 6px; color: #343c4f; font-size: 14px; }
.favicon-steps p { margin: 0; color: #646b79; font-size: 12px; line-height: 1.65; }
.favicon-faq { width: 100%; max-width: none; margin: 28px 0 0; }
.favicon-faq details { padding: 14px 0; border-top: 1px solid #e6e8ed; }
.favicon-faq summary { color: #363d4e; font-size: 14px; font-weight: 650; line-height: 1.55; cursor: pointer; }
.favicon-faq details p { margin: 8px 0 0; color: #5f6674; font-size: 13px; line-height: 1.75; }
.favicon-page .related-tools { width: 100%; max-width: none; margin: 22px 0 0; }
.favicon-page .related-tools h2 { color: #282f40; }
.favicon-page .page-footer { margin-top: 30px; }
@media (max-width: 720px) { .favicon-workspace { grid-template-columns: minmax(0,1fr); } .favicon-preview-card { min-height: 0; } .favicon-preview-stage { min-height: 155px; } }
@media (max-width: 600px) { .favicon-hero h1 { font-size: clamp(27px, 7vw, 36px); white-space: normal; } .favicon-workspace .panel { padding: 20px 18px; } .favicon-input-row { align-items: stretch; flex-direction: column; } .favicon-submit { min-height: 46px; } .favicon-steps { grid-template-columns: 1fr; gap: 8px; } .favicon-steps article { padding: 14px; } .favicon-steps article > span { margin-bottom: 7px; } .favicon-page .related-tools { padding: 20px; } }