.favicon-page { max-width: 1040px; }
.favicon-tool .status.error { color:#b42318; }
.favicon-tool { padding: 22px; }
.favicon-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .85fr); gap: 18px; align-items: start; }
.upload-card { display: grid; gap: 6px; padding: 18px; border: 1px dashed #9badc4; border-radius: 12px; background: #fbfcff; cursor: pointer; }
.upload-card strong { font-size: 17px; }
.upload-card span,.hint { color: var(--ink-3); font-size: 13px; }
.upload-card input { margin-top: 8px; width: 100%; font: inherit; }
.source-preview { min-width: 0; }
.checker { background-color: #fff; background-image: repeating-conic-gradient(#e7ebf2 0% 25%, #fff 0% 50%); background-size: 18px 18px; }
.source-checker { min-height: 170px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; overflow: hidden; padding: 12px; text-align: center; }
.source-checker img { display:block; max-width:100%; max-height:220px; object-fit:contain; }
.source-checker span { color:var(--ink-3); font-size:14px; }
.fit-options { grid-column:1/-1; border:1px solid var(--line); border-radius:10px; padding:14px; display:grid; gap:9px; margin:0; }
.fit-options legend { font-weight:650; padding:0 6px; }
.fit-options label { display:flex; gap:8px; align-items:flex-start; color:var(--ink-2); }
.fit-options input { margin-top:5px; }
.fit-options label span { color:var(--ink-3); }
.fit-options .hint { margin:0; }
.favicon-actions { grid-column:1/-1; }
.favicon-results { border-top:1px solid var(--line); margin-top:22px; padding-top:20px; }
.favicon-results-head { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.favicon-results-head h2 { margin:0; }
.favicon-results-head .hint { margin:4px 0 0; }
.favicon-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); gap:12px; }
.favicon-card { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; min-width:0; }
.favicon-card .preview { height:112px; display:grid; place-items:center; padding:10px; background-color:#fff; background-image:repeating-conic-gradient(#e7ebf2 0% 25%,#fff 0% 50%); background-size:16px 16px; }
.favicon-card img { image-rendering:auto; max-width:100%; max-height:100%; }
.favicon-card p { margin:0; padding:7px 9px; border-top:1px solid var(--line); text-align:center; font-size:13px; color:var(--ink-2); }
.favicon-card a { display:block; padding:8px; text-align:center; font-weight:650; text-decoration:none; border-top:1px solid var(--line); }
.favicon-steps { padding-left:22px; color:var(--ink-2); }
.favicon-steps li { margin:8px 0; }
.code-sample { max-width:100%; overflow:auto; padding:14px; border-radius:10px; background:#f4f6fa; font-size:13px; line-height:1.6; }
.related-link { color:var(--ink-2); padding:12px 0; }
@media(max-width:640px) { .favicon-tool{padding:14px}.favicon-inputs{grid-template-columns:1fr}.fit-options,.favicon-actions{grid-column:auto}.favicon-results-head{align-items:flex-start}.favicon-results-head .btn{width:100%}.favicon-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }