:root{

--bg:#f7f8fa;
--card:#ffffff;

--text:#1f2937;
--text-muted:#6b7280;

--primary:#3b82f6;

--success:#16a34a;
--warning:#f59e0b;
--danger:#dc2626;

--radius:12px;

--shadow-sm:0 2px 8px rgba(0,0,0,0.05);
--shadow-md:0 10px 28px rgba(0,0,0,0.08);

--space-xs:8px;
--space-sm:16px;
--space-md:24px;
--space-lg:36px;

}

*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

h1{
font-size:2rem;
font-weight:700;
margin-bottom:var(--space-sm);
}

h2{
font-size:1.4rem;
font-weight:600;
margin-bottom:var(--space-sm);
}

p{
margin-bottom:var(--space-sm);
}

.text-muted{
color:var(--text-muted);
font-size:.9rem;
}

a{
color:var(--primary);
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

.container{
max-width:760px;
margin:auto;
padding:var(--space-md);
}

.navbar{
position:sticky;
top:0;
background:white;
z-index:100;
border-bottom:1px solid #eee;
}

.nav-inner{
max-width:1000px;
margin:auto;
padding:12px 20px;
display:flex;
align-items:center;
gap:20px;
}

.logo{
font-weight:700;
font-size:1.1rem;
}

.search-box{
margin-left:auto;
}

.search-box input{
padding:8px 12px;
border-radius:6px;
border:1px solid #e5e7eb;
width:220px;
font-size:.9rem;
}

.card{
background:var(--card);
border-radius:var(--radius);
padding:var(--space-md);
box-shadow:var(--shadow-sm);
margin-bottom:var(--space-md);
}

.section{
margin-top:var(--space-lg);
}

.link-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--space-sm);
}

.link-card{
background:#f9fafb;
padding:16px;
border-radius:8px;
transition:all .2s ease;
color:var(--text);
display:block;
box-shadow:0 1px 4px rgba(0,0,0,0.04);
}

.link-card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-md);
}

.badge{
padding:6px 12px;
border-radius:6px;
font-weight:600;
font-size:.85rem;
display:inline-block;
margin-bottom:var(--space-sm);
}

.badge-legal{
background:var(--success);
color:white;
}

.badge-restricted{
background:var(--warning);
color:white;
}

.badge-illegal{
background:var(--danger);
color:white;
}

.quick-answer{
background:#f1f5f9;
border-left:4px solid var(--primary);
padding:var(--space-sm);
border-radius:6px;
margin-top:var(--space-sm);
}

.breadcrumbs{
font-size:.9rem;
color:var(--text-muted);
margin-bottom:var(--space-sm);
}

.hero{
background:white;
padding:60px 20px;
text-align:center;
border-bottom:1px solid #eee;
}

.hero-inner{
max-width:760px;
margin:auto;
}

.hero-subtitle{
font-size:1.1rem;
margin-top:10px;
}

.hero-description{
color:var(--text-muted);
margin-top:10px;
}

.button{
display:inline-block;
background:var(--primary);
color:white;
padding:10px 18px;
border-radius:6px;
font-weight:500;
margin-top:10px;
}

.button:hover{
opacity:.9;
}

.ad-slot{
margin:32px 0;
padding:20px;
background:#f3f4f6;
border-radius:8px;
text-align:center;
font-size:.85rem;
color:#9ca3af;
}

.footer{
text-align:center;
font-size:.9rem;
color:var(--text-muted);
padding:40px 0;
}

.progress-bar{
position:fixed;
top:0;
left:0;
height:3px;
background:var(--primary);
width:0;
z-index:200;
}

.map-container{
overflow:auto;
margin-top:20px;
}

.world-map{
width:100%;
height:auto;
}

.map-legend{
display:flex;
gap:16px;
margin-top:16px;
}

.legend-item{
display:flex;
align-items:center;
gap:6px;
font-size:.9rem;
}

.legend-dot{
width:10px;
height:10px;
border-radius:50%;
display:inline-block;
}

.legend-legal{
background:var(--success);
}

.legend-restricted{
background:var(--warning);
}

.legend-illegal{
background:var(--danger);
}

img{
max-width:100%;
display:block;
}

html{
scroll-behavior:smooth;
}

@media (prefers-reduced-motion: reduce){
*{
animation:none!important;
transition:none!important;
}
}