:root{--color-primary:#2563eb;--color-primary-dark:#1d4ed8;--color-primary-light:#3b82f6;--color-secondary:#0f172a;--color-accent:#10b981;--color-white:#ffffff;--color-gray-50:#f8fafc;--color-gray-100:#f1f5f9;--color-gray-200:#e2e8f0;--color-gray-300:#cbd5e1;--color-gray-400:#94a3b8;--color-gray-500:#64748b;--color-gray-600:#475569;--color-gray-700:#334155;--color-gray-800:#1e293b;--color-gray-900:#0f172a;--color-success:#22c55e;--color-warning:#f59e0b;--color-error:#ef4444;--font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);--transition-fast:150ms ease;--transition-normal:250ms ease;--transition-slow:350ms ease;--container-max:1280px;--header-height:72px}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--color-gray-700);background:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}img{max-width:100%;height:auto;display:block}button{font-family:inherit;cursor:pointer;border:none;background:none}ul,ol{list-style:none}.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--spacing-6)}.site-main{min-height:calc(100vh - var(--header-height) - 300px);padding-top:var(--header-height)}.section{padding:var(--spacing-16) 0}.section-header{text-align:center;margin-bottom:var(--spacing-12)}.section-title{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--spacing-3)}.section-subtitle{font-size:var(--font-size-lg);color:var(--color-gray-500);max-width:600px;margin:0 auto}.site-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:var(--color-white);border-bottom:1px solid var(--color-gray-200);z-index:1000}.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);gap:var(--spacing-6)}.logo{display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-xl);color:var(--color-gray-900);font-weight:500}.logo strong{font-weight:700}.logo:hover{color:var(--color-gray-900)}.main-nav ul{display:flex;align-items:center;gap:var(--spacing-1)}.main-nav a{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);color:var(--color-gray-600);font-size:var(--font-size-sm);font-weight:500;border-radius:var(--radius-md);transition:all var(--transition-fast)}.main-nav a:hover{color:var(--color-gray-900);background:var(--color-gray-100)}.main-nav a i{font-size:0.625rem;transition:transform var(--transition-fast)}.has-dropdown{position:relative}.has-dropdown:hover>a i{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;min-width:200px;background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--spacing-2);opacity:0;visibility:hidden;transition:all var(--transition-fast)}.has-dropdown:hover .dropdown{opacity:1;visibility:visible}.dropdown a{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-md)}.dropdown a:hover{background:var(--color-gray-50)}.flag-emoji{font-size:1.25rem}.dropdown a i{font-size:1.25rem;width:1.5rem;text-align:center;color:var(--color-primary)}.header-actions{display:flex;align-items:center;gap:var(--spacing-3)}.search-toggle,.menu-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--color-gray-600);border-radius:var(--radius-md);transition:all var(--transition-fast)}.search-toggle:hover,.menu-toggle:hover{color:var(--color-gray-900);background:var(--color-gray-100)}.menu-toggle{display:none;flex-direction:column;gap:5px}.menu-toggle span{width:20px;height:2px;background:currentColor;border-radius:1px;transition:all var(--transition-fast)}.lang-switcher a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:var(--font-size-xs);font-weight:600;color:var(--color-gray-600);background:var(--color-gray-100);border-radius:var(--radius-md);transition:all var(--transition-fast)}.lang-switcher a:hover{color:var(--color-primary);background:var(--color-gray-200)}.search-bar{display:none;padding:var(--spacing-4) 0;border-top:1px solid var(--color-gray-200)}.search-bar.active{display:block}.search-bar form{display:flex;gap:var(--spacing-2)}.search-bar input{flex:1;padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-base);border:1px solid var(--color-gray-300);border-radius:var(--radius-lg);outline:none;transition:border-color var(--transition-fast)}.search-bar input:focus{border-color:var(--color-primary)}.search-bar button{padding:var(--spacing-3) var(--spacing-5);background:var(--color-primary);color:var(--color-white);border-radius:var(--radius-lg);transition:background var(--transition-fast)}.search-bar button:hover{background:var(--color-primary-dark)}.hero{padding:var(--spacing-20) 0;background:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)),url('/img/hero-flags-opt.webp') center/cover no-repeat;text-align:center;position:relative}.hero-title{font-size:var(--font-size-5xl);font-weight:800;color:var(--color-white);margin-bottom:var(--spacing-4);letter-spacing:-0.02em;text-shadow:0 2px 4px rgba(0,0,0,0.3)}.hero-subtitle{font-size:var(--font-size-xl);color:rgba(255,255,255,0.9);max-width:600px;margin:0 auto var(--spacing-10);text-shadow:0 1px 2px rgba(0,0,0,0.3)}.hero-search{max-width:500px;margin:0 auto var(--spacing-8)}.hero-search form{display:flex;background:var(--color-white);border:2px solid var(--color-gray-200);border-radius:var(--radius-xl);overflow:hidden;transition:border-color var(--transition-fast)}.hero-search form:focus-within{border-color:var(--color-primary)}.hero-search input{flex:1;padding:var(--spacing-4) var(--spacing-6);font-size:var(--font-size-lg);border:none;outline:none}.hero-search button{padding:var(--spacing-4) var(--spacing-6);background:var(--color-primary);color:var(--color-white);font-size:var(--font-size-lg)}.hero-search button:hover{background:var(--color-primary-dark)}.hero-stats{display:flex;justify-content:center;gap:var(--spacing-10);flex-wrap:wrap}.hero-stat{text-align:center}.hero-stat-value{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-white);text-shadow:0 1px 2px rgba(0,0,0,0.3)}.hero-stat-label{font-size:var(--font-size-sm);color:rgba(255,255,255,0.8)}.flags-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--spacing-6);align-items:end}.flags-grid.compact{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--spacing-4)}.flags-grid-large{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-8);align-items:end}.flag-card-large{display:flex;flex-direction:column;background:var(--color-white);border-radius:2px;overflow:hidden;transition:all var(--transition-normal);text-decoration:none}.flag-card-large:hover{box-shadow:var(--shadow-lg)}.flag-card-large .flag-image-wrapper{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:visible;border-radius:2px}.flag-card-large .flag-image-wrapper img{width:100%;height:auto;border-radius:2px;border:1px solid rgba(0,0,0,0.1)}.flag-card-large .flag-info{padding:var(--spacing-5);min-height:70px}.flag-card-large .flag-name{font-size:var(--font-size-lg);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-2)}.flag-card-large .flag-excerpt{font-size:var(--font-size-sm);color:var(--color-gray-600);line-height:1.5}.other-categories{margin-top:var(--spacing-16);padding-top:var(--spacing-8);border-top:1px solid var(--color-gray-200)}.other-categories h2{font-size:var(--font-size-xl);margin-bottom:var(--spacing-6)}.category-links{display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.category-link{display:inline-flex;padding:var(--spacing-3) var(--spacing-5);background:var(--color-gray-100);border-radius:var(--radius-full);color:var(--color-gray-700);text-decoration:none;font-weight:500;transition:all var(--transition-fast)}.category-link:hover{background:var(--color-primary);color:var(--color-white)}.flag-card{display:flex;flex-direction:column;background:var(--color-white);border-radius:2px;overflow:hidden;transition:all var(--transition-normal)}.flag-card:hover{box-shadow:var(--shadow-lg)}.flag-card-image{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:visible;border-radius:2px}.flag-card-image img{width:100%;height:auto;border-radius:2px;border:1px solid rgba(0,0,0,0.1)}.flag-card-content{padding:var(--spacing-4);text-align:center;height:72px;overflow:hidden}.flag-card-title{font-size:var(--font-size-base);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.flag-card-subtitle{font-size:var(--font-size-xs);color:var(--color-gray-500)}.continents-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--spacing-6)}.continent-card{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-6);background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-xl);transition:all var(--transition-normal)}.continent-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-lg)}.continent-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:2.25rem;background:var(--color-gray-100);border-radius:var(--radius-lg);color:var(--color-primary)}.continent-info h3{font-size:var(--font-size-lg);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-1)}.continent-info p{font-size:var(--font-size-sm);color:var(--color-gray-500)}.flag-detail{padding:var(--spacing-12) 0}.flag-detail-header{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-12);margin-bottom:var(--spacing-12)}.flag-image-wrapper{position:relative;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-xl)}.flag-image-wrapper img{width:100%;height:auto}.flag-info{display:flex;flex-direction:column;justify-content:center}.flag-info h1{font-size:var(--font-size-4xl);font-weight:800;color:var(--color-gray-900);margin-bottom:var(--spacing-4)}.flag-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-4);margin-bottom:var(--spacing-8)}.flag-meta-item{padding:var(--spacing-4);background:var(--color-gray-50);border-radius:var(--radius-lg)}.flag-meta-label{font-size:var(--font-size-xs);color:var(--color-gray-500);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--spacing-1)}.flag-meta-value{font-size:var(--font-size-lg);font-weight:600;color:var(--color-gray-900)}.flag-actions{display:flex;gap:var(--spacing-3);flex-wrap:wrap}.flag-sections-nav{display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin-bottom:var(--spacing-8);padding:var(--spacing-4);background:var(--color-gray-50);border-radius:var(--radius-lg)}.flag-sections-nav a{padding:var(--spacing-2) var(--spacing-4);background:var(--color-white);color:var(--color-gray-700);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;text-decoration:none;border:1px solid var(--color-gray-200);transition:all 0.2s ease}.flag-sections-nav a:hover{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}.flag-section{margin-bottom:var(--spacing-12);scroll-margin-top:var(--spacing-8)}.flag-section h2{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--spacing-4);padding-bottom:var(--spacing-3);border-bottom:2px solid var(--color-gray-200)}.flag-section p{font-size:var(--font-size-xl);color:var(--color-gray-600);line-height:1.8}.flag-colors{display:flex;gap:var(--spacing-3);flex-wrap:wrap}.color-chip{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-full)}.color-chip-swatch{width:20px;height:20px;border-radius:var(--radius-full);border:1px solid var(--color-gray-200)}.color-chip-name{font-size:var(--font-size-sm);color:var(--color-gray-700)}.color-analysis{background:var(--color-gray-50);padding:var(--spacing-6);border-radius:var(--radius-xl)}.color-bars{display:flex;height:32px;border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--spacing-6);box-shadow:var(--shadow-sm)}.color-bar{height:100%;min-width:2px;transition:opacity var(--transition-fast)}.color-bar:hover{opacity:0.8}.color-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-3)}.color-legend-item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-2) var(--spacing-3);background:var(--color-white);border-radius:var(--radius-md);border:1px solid var(--color-gray-200)}.color-swatch{width:24px;height:24px;border-radius:var(--radius-sm);border:1px solid var(--color-gray-200);flex-shrink:0}.color-info{flex:1;display:flex;flex-direction:column;min-width:0}.color-name{font-size:var(--font-size-sm);font-weight:500;color:var(--color-gray-900)}.color-hex{font-size:var(--font-size-xs);color:var(--color-gray-500);font-family:monospace}.color-percent{font-size:var(--font-size-sm);font-weight:600;color:var(--color-primary);white-space:nowrap}.download-section{background:var(--color-gray-50);padding:var(--spacing-8);border-radius:var(--radius-2xl)}.download-options{display:flex;gap:var(--spacing-4);flex-wrap:wrap}.download-option{flex:1;min-width:200px;background:var(--color-white);padding:var(--spacing-6);border-radius:var(--radius-xl);border:1px solid var(--color-gray-200);text-align:center}.download-option h4{font-size:var(--font-size-lg);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-2)}.download-option p{font-size:var(--font-size-sm);color:var(--color-gray-500);margin-bottom:var(--spacing-4)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-sm);font-weight:600;border-radius:var(--radius-lg);transition:all var(--transition-fast);white-space:nowrap}.btn-primary{background:var(--color-primary);color:var(--color-white)}.btn-primary:hover{background:var(--color-primary-dark);color:var(--color-white)}.btn-secondary{background:var(--color-gray-100);color:var(--color-gray-700)}.btn-secondary:hover{background:var(--color-gray-200);color:var(--color-gray-900)}.btn-outline{border:2px solid var(--color-gray-200);color:var(--color-gray-700)}.btn-outline:hover{border-color:var(--color-gray-300);background:var(--color-gray-50)}.btn-lg{padding:var(--spacing-4) var(--spacing-8);font-size:var(--font-size-base)}.btn-icon{width:40px;height:40px;padding:0}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--spacing-8)}.blog-card{background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-normal)}.blog-card:hover{box-shadow:var(--shadow-lg)}.blog-card-image{aspect-ratio:16/9;background:var(--color-gray-100);overflow:hidden}.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.blog-card:hover .blog-card-image img{transform:scale(1.05)}.blog-card-content{padding:var(--spacing-6)}.blog-card-date{font-size:var(--font-size-xs);color:var(--color-gray-500);margin-bottom:var(--spacing-2)}.blog-card-title{font-size:var(--font-size-xl);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-3);line-height:1.3}.blog-card-excerpt{font-size:var(--font-size-sm);color:var(--color-gray-600);line-height:1.6}.blog-content p{margin-bottom:var(--spacing-6)}.blog-content h2{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-gray-900);margin-top:var(--spacing-10);margin-bottom:var(--spacing-4);padding-top:var(--spacing-4);border-top:1px solid var(--color-gray-100)}.blog-content h2:first-child{margin-top:0;padding-top:0;border-top:none}.blog-content h3{font-size:var(--font-size-xl);font-weight:600;color:var(--color-gray-800);margin-top:var(--spacing-8);margin-bottom:var(--spacing-3)}.blog-content ul,.blog-content ol{margin-bottom:var(--spacing-6);padding-left:var(--spacing-6)}.blog-content ul{list-style:disc}.blog-content ol{list-style:decimal}.blog-content li{margin-bottom:var(--spacing-2);padding-left:var(--spacing-2)}.blog-content strong{color:var(--color-gray-900);font-weight:600}.blog-content blockquote{margin:var(--spacing-6) 0;padding:var(--spacing-4) var(--spacing-6);border-left:4px solid var(--color-primary);background:var(--color-gray-50);font-style:italic;color:var(--color-gray-600);border-radius:0 var(--radius-md) var(--radius-md) 0}.blog-content img{border-radius:var(--radius-lg);margin:var(--spacing-6) 0}.blog-content figure{margin:var(--spacing-8) 0}.blog-content figcaption{text-align:center;font-size:var(--font-size-sm);color:var(--color-gray-500);margin-top:var(--spacing-2)}.flag-comparison{display:flex;gap:var(--spacing-4);align-items:center;justify-content:center;flex-wrap:wrap;margin:var(--spacing-6) 0;padding:var(--spacing-6);background:var(--color-gray-50);border-radius:var(--radius-xl)}.flag-comparison img{height:80px;width:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-md);margin:0}.flag-comparison .vs{font-weight:700;color:var(--color-gray-400);font-size:var(--font-size-lg)}.flag-comparison .flag-label{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-2)}.flag-comparison .flag-label span{font-size:var(--font-size-sm);color:var(--color-gray-600);font-weight:500}.flag-comparison .flag-box{border-radius:var(--radius-md);box-shadow:var(--shadow-md);background-size:100% 100% !important;background-repeat:no-repeat;background-position:0 0}@media (max-width:640px){.flag-comparison img{height:60px}}.quiz-container{max-width:600px;margin:0 auto;padding:var(--spacing-12) var(--spacing-6)}.quiz-card{background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-2xl);padding:var(--spacing-8);text-align:center}.quiz-progress{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-6);padding-bottom:var(--spacing-4);border-bottom:1px solid var(--color-gray-200)}.quiz-progress-bar{flex:1;height:6px;background:var(--color-gray-200);border-radius:var(--radius-full);margin:0 var(--spacing-4);overflow:hidden}.quiz-progress-fill{height:100%;background:var(--color-primary);border-radius:var(--radius-full);transition:width var(--transition-normal)}.quiz-flag{width:200px;height:auto;margin:0 auto var(--spacing-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.quiz-question{font-size:var(--font-size-xl);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-6)}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3)}.quiz-option{padding:var(--spacing-4);background:var(--color-gray-50);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:500;color:var(--color-gray-700);transition:all var(--transition-fast);cursor:pointer}.quiz-option:hover{border-color:var(--color-primary);background:var(--color-white)}.quiz-option.correct{border-color:var(--color-success);background:rgba(34,197,94,0.1);color:var(--color-success)}.quiz-option.wrong{border-color:var(--color-error);background:rgba(239,68,68,0.1);color:var(--color-error)}.quiz-result{padding:var(--spacing-8)}.quiz-score{font-size:var(--font-size-5xl);font-weight:800;color:var(--color-primary);margin-bottom:var(--spacing-2)}.quiz-score-label{font-size:var(--font-size-lg);color:var(--color-gray-500);margin-bottom:var(--spacing-8)}.api-docs{padding:var(--spacing-12) 0}.api-section{margin-bottom:var(--spacing-12)}.api-section h2{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--spacing-4)}.code-block{background:var(--color-gray-900);color:var(--color-gray-100);padding:var(--spacing-6);border-radius:var(--radius-lg);overflow-x:auto;font-family:'Fira Code','Monaco',monospace;font-size:var(--font-size-sm);line-height:1.6}.code-block code{display:block}.code-comment{color:var(--color-gray-500)}.code-string{color:#a5d6ff}.code-keyword{color:#ff7b72}.api-example{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-6);margin-top:var(--spacing-6)}.api-example-code{background:var(--color-gray-900);padding:var(--spacing-4);border-radius:var(--radius-lg)}.api-example-preview{display:flex;align-items:center;justify-content:center;background:var(--color-gray-100);border-radius:var(--radius-lg);padding:var(--spacing-6)}.api-example-preview img{max-width:150px;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.site-footer{background:var(--color-gray-900);color:var(--color-gray-300);padding:var(--spacing-16) 0 var(--spacing-8)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--spacing-12);margin-bottom:var(--spacing-12)}.footer-logo{display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-xl);color:var(--color-white);margin-bottom:var(--spacing-4)}.footer-logo strong{font-weight:700}.footer-about p{font-size:var(--font-size-sm);line-height:1.7;color:var(--color-gray-400)}.footer-section h4{font-size:var(--font-size-sm);font-weight:600;color:var(--color-white);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--spacing-4)}.footer-section ul{display:flex;flex-direction:column;gap:var(--spacing-2)}.footer-section a{color:var(--color-gray-400);font-size:var(--font-size-sm);transition:color var(--transition-fast)}.footer-section a:hover{color:var(--color-white)}.footer-bottom{padding-top:var(--spacing-8);border-top:1px solid var(--color-gray-800);text-align:center}.footer-bottom p{font-size:var(--font-size-sm);color:var(--color-gray-500)}.error-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:var(--spacing-12) var(--spacing-6)}.error-code{font-size:8rem;font-weight:800;color:var(--color-gray-200);line-height:1;margin-bottom:var(--spacing-4)}.error-title{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--spacing-4)}.error-message{font-size:var(--font-size-lg);color:var(--color-gray-500);margin-bottom:var(--spacing-8);max-width:500px}.breadcrumbs{padding:var(--spacing-4) 0}.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:var(--spacing-2);font-size:var(--font-size-sm)}.breadcrumbs li{display:flex;align-items:center;gap:var(--spacing-2)}.breadcrumbs li:not(:last-child)::after{content:'/';color:var(--color-gray-400)}.breadcrumbs a{color:var(--color-gray-500)}.breadcrumbs a:hover{color:var(--color-primary)}.breadcrumbs span{color:var(--color-gray-700)}.compare-flags{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--spacing-8);align-items:start;padding:var(--spacing-12) 0}.compare-flag{text-align:center}.compare-flag img{width:100%;max-width:300px;margin:0 auto var(--spacing-4);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.compare-vs{display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:var(--color-gray-100);border-radius:var(--radius-full);font-size:var(--font-size-xl);font-weight:700;color:var(--color-gray-500);margin-top:100px}.compare-table{margin-top:var(--spacing-12)}.compare-table table{width:100%;border-collapse:collapse}.compare-table th,.compare-table td{padding:var(--spacing-4);text-align:left;border-bottom:1px solid var(--color-gray-200)}.compare-table th{font-weight:600;color:var(--color-gray-500);background:var(--color-gray-50)}.compare-table td{color:var(--color-gray-700)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-4{margin-top:var(--spacing-4)}.mt-8{margin-top:var(--spacing-8)}.mb-4{margin-bottom:var(--spacing-4)}.mb-8{margin-bottom:var(--spacing-8)}.hidden{display:none !important}@media (max-width:1024px){.flag-detail-header{grid-template-columns:1fr;gap:var(--spacing-8)}.footer-grid{grid-template-columns:1fr 1fr;gap:var(--spacing-8)}.api-example{grid-template-columns:1fr}}@media (max-width:768px){:root{--header-height:64px}.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-white);border-top:1px solid var(--color-gray-200);box-shadow:var(--shadow-lg);padding:var(--spacing-4)}.main-nav.active{display:block}.main-nav ul{flex-direction:column;gap:0}.main-nav a{padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-md)}.dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:var(--spacing-4)}.menu-toggle{display:flex}.hero-title{font-size:var(--font-size-3xl)}.hero-subtitle{font-size:var(--font-size-base)}.section{padding:var(--spacing-10) 0}.section-title{font-size:var(--font-size-2xl)}.flags-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--spacing-4)}.footer-grid{grid-template-columns:1fr;gap:var(--spacing-6)}.compare-flags{grid-template-columns:1fr}.compare-vs{margin:var(--spacing-4) auto}.quiz-options{grid-template-columns:1fr}}@media (max-width:480px){.container{padding:0 var(--spacing-4)}.hero{padding:var(--spacing-12) 0}.flag-meta{grid-template-columns:1fr}.hero-stats{gap:var(--spacing-6)}.error-code{font-size:5rem}}body.has-admin-bar{padding-bottom:60px}@media (max-width:900px){body.has-admin-bar{padding-bottom:100px}}.info-box{background:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);padding:var(--spacing-4) var(--spacing-6)}.info-box h4{margin-bottom:var(--spacing-2);font-size:var(--font-size-base);color:var(--color-gray-800)}.info-box p{margin:0;color:var(--color-gray-600);font-size:var(--font-size-sm);line-height:1.6}.content-prose{max-width:65ch;line-height:1.75;color:var(--color-gray-700)}.content-prose p+p{margin-top:var(--spacing-4)}.emoji-display{text-align:center;padding:var(--spacing-8) 0}.emoji-large{font-size:8rem;line-height:1;display:block;margin-bottom:var(--spacing-4)}.emoji-actions{display:flex;justify-content:center;gap:var(--spacing-3)}.emoji-options{display:flex;flex-direction:column;gap:var(--spacing-4)}.emoji-option{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-4);background:var(--bg-secondary);border-radius:var(--radius-lg)}.emoji-option .emoji-large{font-size:3rem;margin-bottom:0;min-width:120px;text-align:center}.emoji-option-desc{flex:1;color:var(--text-secondary);font-size:0.9rem}.colors-detail{display:flex;flex-wrap:wrap;gap:var(--spacing-6)}.color-detail-item{display:flex;align-items:flex-start;gap:var(--spacing-4);padding:var(--spacing-4);background:var(--color-gray-50);border-radius:var(--radius-lg);min-width:200px}.color-swatch-large{width:80px;height:80px;border-radius:var(--radius-md);box-shadow:var(--shadow-md);flex-shrink:0}.color-info{font-size:var(--font-size-sm);color:var(--color-gray-600);line-height:1.6}.color-info strong{color:var(--color-gray-800)}.subpage-nav{display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.subpage-nav-item{display:inline-block;padding:var(--spacing-3) var(--spacing-5);background:var(--color-gray-100);color:var(--color-gray-700);border-radius:var(--radius-full);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-fast)}.subpage-nav-item:hover{background:var(--color-primary);color:var(--color-white)}.drawing-guide h3{margin-top:var(--spacing-6);margin-bottom:var(--spacing-3);font-size:var(--font-size-lg);color:var(--color-gray-800)}.drawing-guide h3:first-child{margin-top:0}.drawing-guide p{color:var(--color-gray-600);line-height:1.7}.text-muted{color:var(--color-gray-500)}@media (max-width:768px){.emoji-large{font-size:5rem}.colors-detail{flex-direction:column}.color-detail-item{width:100%}.subpage-nav{flex-direction:column}.subpage-nav-item{text-align:center}}.history-intro{background:var(--color-gray-50);border-radius:var(--radius-xl);padding:var(--spacing-8);margin-bottom:var(--spacing-8)}.history-intro p{font-size:var(--font-size-lg);color:var(--color-gray-700);line-height:1.8;margin:0}.history-key-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-4);margin-top:var(--spacing-6)}.key-fact{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-4);text-align:center;border:1px solid var(--color-gray-200)}.key-fact-icon{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-2)}.key-fact-label{font-size:var(--font-size-sm);color:var(--color-gray-500);text-transform:uppercase;letter-spacing:0.05em}.key-fact-value{font-size:var(--font-size-xl);font-weight:700;color:var(--color-gray-900)}.history-timeline{position:relative;padding-left:var(--spacing-8);margin:var(--spacing-8) 0}.history-timeline::before{content:'';position:absolute;left:12px;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,var(--color-primary),var(--color-primary-light));border-radius:2px}.timeline-item{position:relative;padding-bottom:var(--spacing-8)}.timeline-item:last-child{padding-bottom:0}.timeline-dot{position:absolute;left:calc(-1 * var(--spacing-8)+4px);top:4px;width:20px;height:20px;background:var(--color-primary);border-radius:50%;border:4px solid var(--color-white);box-shadow:var(--shadow-md);z-index:1}.timeline-item.era-imperial .timeline-dot{background:#d4af37}.timeline-item.era-soviet .timeline-dot{background:#cc0000}.timeline-item.era-modern .timeline-dot{background:var(--color-primary)}.timeline-item.era-republic .timeline-dot{background:#6B2B6E}.timeline-item.era-republic .timeline-date{color:#6B2B6E;background:rgba(107,43,110,0.1)}.timeline-item.era-authoritarian .timeline-dot{background:#4a4a4a}.timeline-item.era-authoritarian .timeline-date{color:#4a4a4a;background:rgba(74,74,74,0.1)}.timeline-content{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-6);box-shadow:var(--shadow-md);border:1px solid var(--color-gray-100)}.timeline-header{display:flex;align-items:flex-start;gap:var(--spacing-4);margin-bottom:var(--spacing-4)}.timeline-flag{height:65px;object-fit:contain;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);flex-shrink:0}.timeline-title-group{flex:1}.timeline-date{display:inline-block;font-size:var(--font-size-sm);font-weight:600;color:var(--color-primary);background:rgba(37,99,235,0.1);padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-full);margin-bottom:var(--spacing-2)}.timeline-item.era-imperial .timeline-date{color:#8b6914;background:rgba(212,175,55,0.15)}.timeline-item.era-soviet .timeline-date{color:#cc0000;background:rgba(204,0,0,0.1)}.timeline-title{font-size:var(--font-size-xl);font-weight:700;color:var(--color-gray-900);margin:0}.timeline-body{color:var(--color-gray-600);line-height:1.7}.timeline-body p{margin:0 0 var(--spacing-3)}.timeline-body p:last-child{margin-bottom:0}.history-context{background:linear-gradient(135deg,var(--color-gray-50),var(--color-gray-100));border-radius:var(--radius-xl);padding:var(--spacing-8);margin:var(--spacing-8) 0}.history-context h3{font-size:var(--font-size-xl);color:var(--color-gray-900);margin-bottom:var(--spacing-4);display:flex;align-items:center;gap:var(--spacing-3)}.history-context h3 i{color:var(--color-primary)}.history-context p{color:var(--color-gray-700);line-height:1.8;margin:0}.flag-comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-6);margin:var(--spacing-8) 0}.comparison-item{text-align:center}.comparison-flag{width:100%;max-width:200px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-3)}.comparison-label{font-weight:600;color:var(--color-gray-700)}.comparison-years{font-size:var(--font-size-sm);color:var(--color-gray-500)}.history-sources{background:var(--color-gray-50);border-radius:var(--radius-lg);padding:var(--spacing-6);margin-top:var(--spacing-8)}.history-sources h4{font-size:var(--font-size-base);color:var(--color-gray-700);margin-bottom:var(--spacing-3)}.history-sources ul{list-style:none;margin:0;padding:0}.history-sources li{font-size:var(--font-size-sm);color:var(--color-gray-500);padding:var(--spacing-1) 0}@media (max-width:768px){.history-timeline{padding-left:var(--spacing-6)}.timeline-dot{left:calc(-1 * var(--spacing-6)+4px);width:16px;height:16px}.timeline-header{flex-direction:column}.timeline-flag{width:100%;max-width:120px;height:auto}.history-key-facts{grid-template-columns:repeat(2,1fr)}}.flag-images-gallery{display:flex;flex-wrap:wrap;gap:var(--spacing-3);margin-top:var(--spacing-4);align-items:flex-start}.flag-image-item{position:relative;overflow:hidden;background:var(--color-gray-100);display:block}.flag-image-item img{display:block;height:120px;width:auto;transition:transform 0.3s ease}.flag-image-item:hover img{transform:scale(1.05)}.flag-image-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease;color:white;font-size:var(--font-size-xl)}.flag-image-item:hover .flag-image-overlay{opacity:1}.flag-images-credit{margin-top:var(--spacing-4);text-align:right;color:var(--color-gray-500)}.flag-images-credit a{color:var(--color-primary);text-decoration:none}.flag-images-credit a:hover{text-decoration:underline}@media (max-width:768px){.flag-images-gallery{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--spacing-2)}}.ds-text,.ds-text p,.ds-text li,.ds-text strong{color:#17a2b8 !important}.flag-section p{margin-bottom:1em}.flag-section p:last-child{margin-bottom:0}.flag-section ul{list-style:disc;padding-left:1.5em;margin-bottom:1em}.flag-section ul li{margin-bottom:0.5em;font-size:var(--font-size-xl)}@media(max-width:768px){.hero{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('/img/hero-flags-mobile.webp') center/cover no-repeat}}