:root{--color-dark-blue: hsl(209, 23%, 22%);--color-very-dark-blue: hsl(207, 26%, 17%);--color-very-dark: hsl(200, 15%, 8%);--color-dark-gray: hsl(0, 0%, 52%);--color-very-light-gray: hsl(0, 0%, 98%);--color-white: hsl(0, 0%, 100%);--color-bg: hsl(0, 0%, 98%);--color-element: hsl(0, 0%, 100%);--color-input: hsl(0, 0%, 52%);--color-text: hsl(200, 15%, 8%);--color-text-muted: hsl(0, 0%, 42%);--color-border: hsl(0, 0%, 88%);--color-shadow: rgba(0, 0, 0, .08);--color-shadow-hover: rgba(0, 0, 0, .15);--color-accent: hsl(211, 80%, 48%);--color-accent-soft: hsl(211, 80%, 95%);--transition: .25s cubic-bezier(.4, 0, .2, 1);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--font-main: "Nunito Sans", sans-serif}[data-theme=dark]{--color-bg: hsl(207, 26%, 17%);--color-element: hsl(209, 23%, 22%);--color-input: hsl(0, 0%, 75%);--color-text: hsl(0, 0%, 100%);--color-text-muted: hsl(0, 0%, 70%);--color-border: hsl(209, 23%, 28%);--color-shadow: rgba(0, 0, 0, .25);--color-shadow-hover: rgba(0, 0, 0, .4);--color-accent: hsl(211, 80%, 60%);--color-accent-soft: hsl(209, 23%, 28%)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-main);font-size:14px;font-weight:300;background-color:var(--color-bg);color:var(--color-text);transition:background-color var(--transition),color var(--transition);min-height:100vh;width:100%}img{display:block;max-width:100%}button{cursor:pointer;font-family:inherit;border:none;outline:none}input{border:none;outline:none}a{text-decoration:none;color:inherit}.header{background-color:var(--color-element);box-shadow:0 2px 12px var(--color-shadow);position:sticky;top:0;z-index:100;transition:background-color var(--transition),box-shadow var(--transition)}.header__inner{max-width:1440px;margin:0 auto;padding:0 5%;height:72px;display:flex;align-items:center;justify-content:space-between}.header__logo{font-size:1.25rem;font-weight:800;letter-spacing:-.5px;color:var(--color-text)}.theme-toggle{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.875rem;background:none;color:var(--color-text);border-radius:var(--radius-sm);transition:background var(--transition),color var(--transition)}.theme-toggle:hover{color:var(--color-accent)}.theme-toggle svg{width:18px;height:18px;flex-shrink:0}.controls{max-width:1440px;margin:0 auto;padding:36px 5% 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.search-wrap{position:relative;flex:0 1 480px;min-width:280px}.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--color-input);pointer-events:none;width:18px;height:18px;z-index:2}.search-input{width:100%;height:52px;padding:0 20px 0 50px;background:var(--color-element);border:1.5px solid transparent;border-radius:var(--radius-md);font-family:var(--font-main);font-size:.875rem;font-weight:300;color:var(--color-text);box-shadow:0 2px 12px var(--color-shadow);transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}.search-input::placeholder{color:var(--color-input);font-weight:400}.search-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft),0 2px 12px var(--color-shadow)}.filter-container{position:relative;width:100%;max-width:200px}.filter-button{width:100%;height:52px;padding:0 22px;border-radius:var(--radius-md);background:var(--color-element);color:var(--color-text);box-shadow:0 2px 12px var(--color-shadow);display:flex;align-items:center;justify-content:space-between;font-family:var(--font-main);font-size:.875rem;font-weight:600;cursor:pointer;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);border:1.5px solid transparent}.filter-button:focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}.filter-chevron{flex-shrink:0;color:var(--color-input);transition:transform .2s ease;width:16px;height:16px}.filter-button.open .filter-chevron{transform:rotate(180deg)}.filter-dropdown{list-style:none;margin:0;padding:.6rem 0;position:absolute;top:calc(100% + 6px);left:0;width:100%;border-radius:var(--radius-md);background:var(--color-element);box-shadow:0 8px 24px var(--color-shadow-hover);display:none;z-index:30}.filter-dropdown.show{display:block}.filter-option{padding:.5rem 22px;font-size:.875rem;font-weight:300;color:var(--color-text);cursor:pointer;transition:background var(--transition),color var(--transition)}.filter-option:hover,.filter-option:focus{background:var(--color-accent-soft);color:var(--color-accent);outline:none}.filter-reset-option{font-weight:600;font-size:.8rem;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);margin-bottom:4px;padding-bottom:8px}.grid-wrap{max-width:1440px;margin:0 auto;padding:0 5% 60px}.results-count{font-size:.8rem;color:var(--color-text-muted);margin-bottom:20px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.countries-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2.5rem}.card{background:var(--color-element);border-radius:var(--radius-lg);box-shadow:0 2px 16px var(--color-shadow);overflow:hidden;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),background var(--transition);animation:fadeUp .35s ease both}.card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 12px 32px var(--color-shadow-hover)}.card:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.card__flag-wrap{aspect-ratio:16 / 10;overflow:hidden;background:var(--color-border)}.card__flag{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.card:hover .card__flag{transform:scale(1.04)}.card__body{padding:1.5rem 1.5rem 1.75rem}.card__name{font-size:1.125rem;font-weight:800;margin-bottom:1rem;line-height:1.2}.card__detail{font-size:.875rem;line-height:1.4}.card__detail p{margin-bottom:.4rem}.card__detail span{font-weight:600}.card__detail .val{font-weight:300;color:var(--color-text-muted)}.empty,.empty-state{grid-column:1 / -1;text-align:center;padding:80px 20px;color:var(--color-text-muted)}.empty__icon{font-size:4rem;margin-bottom:20px;opacity:.4}.empty__title{font-size:1.25rem;font-weight:800;margin-bottom:8px}.empty__sub{font-size:.875rem}.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2.5rem}.skeleton-card{background:var(--color-element);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 16px var(--color-shadow)}.skeleton-flag{aspect-ratio:16 / 10;background:var(--color-border);animation:shimmer 1.4s infinite}.skeleton-body{padding:1.5rem 1.5rem 1.75rem}.skeleton-line{height:14px;border-radius:7px;background:var(--color-border);animation:shimmer 1.4s infinite;margin-bottom:10px}.skeleton-line.short{width:60%}.skeleton-line.medium{width:80%}@keyframes shimmer{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 768px){.countries-grid,.skeleton-grid{gap:2rem}.header__inner{padding:1.9rem 1.5rem}.header__logo{font-size:1 rem;font-weight:800}.theme-toggle{font-size:.85rem;gap:.45rem}.theme-toggle svg{width:14px;height:14px}}@media (max-width: 600px){.controls{padding:24px 5% 16px;flex-direction:column;align-items:stretch}.search-wrap{flex:1 1 100%;min-width:0}.filter-container{max-width:100%}.countries-grid,.skeleton-grid{gap:1.5rem}.header__inner{padding:0 5%}}@media (max-width: 375px){.header__inner{padding:1.5rem 1rem}.header__logo{font-size:.95rem}.theme-toggle{font-size:.8rem}.theme-toggle svg{width:12px;height:12px}.controls,.grid-wrap{padding-left:1rem;padding-right:1rem}.countries-grid{grid-template-columns:1fr;gap:2rem}.search-wrap,.filter-container{max-width:100%}}.detail-page{max-width:1440px;margin:0 auto;padding:48px 5% 80px;animation:fadeUp .4s ease both}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.back-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:135px;background:var(--color-element);border:none;border-radius:var(--radius-md);padding:10px 28px;font-family:var(--font-main);font-size:.9rem;font-weight:600;color:var(--color-text);box-shadow:0 2px 12px var(--color-shadow);margin:0rem 0 4rem;transition:transform var(--transition),box-shadow var(--transition),background var(--transition)}.back-btn:hover{transform:translate(-4px);box-shadow:0 4px 20px var(--color-shadow-hover)}.back-btn svg{width:18px;height:18px}.detail-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:6rem;align-items:center}.detail-flag-wrap{overflow:visible;box-shadow:0 8px 40px var(--color-shadow-hover)}.detail-flag-wrap img{width:100%;max-width:560px;display:block;aspect-ratio:16/10;object-fit:cover;box-shadow:0 2px 10px #0000001f}.detail-name{font-size:2rem;font-weight:800;margin-bottom:25px;line-height:1.2}.detail-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-bottom:2.5rem}.detail-fact{font-size:.875rem;line-height:2}.detail-fact span{font-weight:300;color:var(--color-text-muted)}.border-country-group{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.border-country-group p{margin:0}.border-country-list{display:flex;flex-wrap:wrap;gap:10px}.border-pill,.no-borders{background:var(--color-element);border:none;border-radius:var(--radius-sm);padding:6px 18px;font-family:var(--font-main);font-size:.8rem;font-weight:300;color:var(--color-text);box-shadow:0 1px 8px var(--color-shadow);cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),background var(--transition),color var(--transition)}.border-pill:hover{transform:translateY(-2px);box-shadow:0 4px 14px var(--color-shadow-hover);background:var(--color-accent);color:#fff}@media (max-width: 900px){.detail-layout{grid-template-columns:1fr;gap:40px}.detail-name{font-size:1.6rem}}@media (max-width: 768px){.detail-page{padding:32px 5% 60px}.back-btn{margin-bottom:40px}.detail-name{font-size:1.4rem;margin-bottom:20px}.detail-facts{grid-template-columns:1fr}}@media (max-width: 375px){.detail-page{padding:2.5rem 1rem 4rem}.detail-layout{gap:2.5rem}.back-btn{padding:.6rem 1.4rem;font-size:.9rem;min-width:95px}.detail-flag-wrap img{width:100%;max-width:none}.detail-name{font-size:1.6rem}.detail-facts{gap:2rem}.detail-fact{font-size:.95rem;line-height:1.8}.border-country-list{gap:.6rem}.border-pill{min-width:85px;padding:.5rem 1rem;font-size:.85rem}}