*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-card: #1c2333;--bg-card-hover: #242d3d;--text-primary: #e6edf3;--text-secondary: #8b949e;--text-muted: #6e7681;--border-color: #30363d;--accent: #58a6ff;--accent-hover: #79c0ff;--success: #3fb950;--search-bg: #0d1117;--radius: 8px;--radius-lg: 12px}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}.preview-app{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 4rem}.preview-header{text-align:center;margin-bottom:2.5rem}.preview-header h1{font-size:2.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.header-icon{font-size:2rem}.header-subtitle{color:var(--text-secondary);font-size:1.1rem;margin-bottom:1.5rem}.search-container{position:relative;max-width:480px;margin:0 auto .75rem}.search-input{width:100%;padding:.75rem 2.5rem .75rem 1rem;font-size:1rem;background:var(--search-bg);border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-primary);outline:none;transition:border-color .2s,box-shadow .2s}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #58a6ff26}.search-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;padding:.25rem;line-height:1;border-radius:4px;transition:color .2s}.search-clear:hover{color:var(--text-primary)}.result-count{color:var(--text-muted);font-size:.875rem}.flag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem}.flag-card{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.625rem .375rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);cursor:pointer;transition:all .15s ease;text-align:center;font-family:inherit;color:inherit;width:100%}.flag-card:hover{background:var(--bg-card-hover);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.flag-card:active{transform:translateY(0)}.flag-card.copied{border-color:var(--success);background:#3fb95014}.flag-icon{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:3px;overflow:hidden;flex-shrink:0}.flag-icon svg{display:block;width:1.25em!important;height:1.25em!important}.flag-name{font-size:.625rem;font-weight:500;line-height:1.2;color:var(--text-primary);word-break:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flag-code{font-size:.5625rem;font-family:SF Mono,Fira Code,Fira Mono,Roboto Mono,monospace;color:var(--text-muted);background:#6e76811a;padding:.0625rem .375rem;border-radius:3px}.flag-import{font-size:.5625rem;color:var(--accent);font-weight:500;opacity:0;transition:opacity .15s}.flag-card:hover .flag-import{opacity:1}.flag-card.copied .flag-import{opacity:1;color:var(--success)}.no-results{text-align:center;padding:4rem 1rem;color:var(--text-muted)}.no-results p{font-size:1.125rem}.preview-footer{text-align:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border-color);color:var(--text-muted);font-size:.875rem}@media (max-width: 640px){.preview-app{padding:1rem .75rem 3rem}.preview-header h1{font-size:1.75rem}.flag-grid{grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:.375rem}.flag-card{padding:.5rem .25rem}}