/* ATLAS SHELL - shared layout for all pages */
:root { --bg-page:#faf9f7; --bg-surface:#fff; --bg-code:#f3f4f6; --bg-sidebar:#0c1222; --txt:#111827; --txt2:#4b5563; --txt3:#9ca3af; --border:#e5e7eb; --border2:#d1d5db; --accent:#0d7377; --accent-l:rgba(13,115,119,.08); --radius:8px; --f-head:'Figtree',sans-serif; --f-body:'Crimson Pro',serif; --f-mono:'JetBrains Mono',monospace; --transition:.25s cubic-bezier(.4,0,.2,1); }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--f-body); color:var(--txt); background:var(--bg-page); line-height:1.7; font-size:17px; margin:0; }
.site-header { background:var(--bg-surface); border-bottom:1px solid var(--border); padding:12px 0; position:sticky; top:0; z-index:100; }
.site-header .container { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.site-header .logo { font-family:var(--f-head); font-size:20px; font-weight:700; color:var(--accent); text-decoration:none; display:flex; align-items:center; gap:8px; }
.site-header .logo span { color:var(--txt3); font-weight:400; font-size:14px; }
.site-header .nav-links { display:flex; gap:4px; flex-wrap:wrap; }
.site-header .nav-links a { font-family:var(--f-head); font-size:13px; color:var(--txt2); text-decoration:none; padding:6px 12px; border-radius:var(--radius); transition:all var(--transition); }
.site-header .nav-links a:hover, .site-header .nav-links a.active { color:var(--accent); background:var(--accent-l); }
.site-header .lang-switch { display:flex; gap:4px; }
.site-header .lang-switch a { font-family:var(--f-head); font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--radius); color:var(--txt3); text-decoration:none; }
.site-header .lang-switch a.active { color:var(--accent); background:var(--accent-l); }
@media (max-width:700px) { .site-header .container { flex-direction:column; align-items:stretch; } .site-header .logo, .site-header .nav-links, .site-header .lang-switch { justify-content:center; } }
.breadcrumb { padding:12px 0; font-family:var(--f-head); font-size:13px; color:var(--txt3); border-bottom:1px solid var(--border); background:var(--bg-surface); }
.breadcrumb .container { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.breadcrumb a { color:var(--accent); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb span { color:var(--txt2); }
.main-content { max-width:1200px; margin:0 auto; padding:32px 24px 64px; }
.main-content h1 { font-family:var(--f-head); font-size:clamp(28px,4vw,38px); font-weight:700; color:var(--txt); margin-bottom:8px; line-height:1.2; }
.main-content .subtitle { font-size:17px; color:var(--txt2); margin-bottom:24px; }
.content-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin:24px 0; }
.atlas-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; transition:all var(--transition); cursor:pointer; text-decoration:none; color:var(--txt); display:block; position:relative; overflow:hidden; }
.atlas-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); opacity:0; transition:opacity var(--transition); }
.atlas-card:hover { border-color:var(--accent); box-shadow:0 2px 12px rgba(0,0,0,.06); transform:translateY(-2px); }
.atlas-card:hover::before { opacity:1; }
.atlas-card .card-type { font-family:var(--f-head); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent); margin-bottom:4px; }
.atlas-card .card-title { font-family:var(--f-head); font-size:17px; font-weight:600; margin-bottom:4px; }
.atlas-card .card-desc { font-size:14px; color:var(--txt2); line-height:1.5; }
.atlas-card .card-meta { margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.atlas-card .card-badge { font-size:10px; font-weight:600; padding:2px 10px; border-radius:12px; background:var(--bg-code); color:var(--txt3); }
.atlas-card .card-badge.accent { background:var(--accent-l); color:var(--accent); }
.atlas-card.coming-soon { opacity:.7; cursor:default; }
.atlas-card.coming-soon::before { background:var(--txt3); }
.atlas-card.coming-soon:hover { transform:none; border-color:var(--border); box-shadow:none; }
@keyframes fadeIn { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }