/* ===== БАЗА ===== */
*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Arial, sans-serif;
background:#0f172a;
color:#e2e8f0;
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

/* ===== ВЫДЕЛЕНИЕ ТЕКСТА ===== */
::selection{
background:#38bdf8;
color:#020617;
}

/* ===== КОНТЕЙНЕР ===== */
.container{
max-width:1000px;
margin:auto;
padding:20px;
}

/* ===== HEADER ===== */
header{
text-align:center;
padding:30px 20px;
}

header h1{
margin:0;
font-size:32px;
letter-spacing:0.5px;
}

header p{
margin:10px 0 0;
color:#94a3b8;
font-size:15px;
}

/* ===== ПОИСК ===== */
.search{
width:100%;
padding:12px;
margin-top:15px;
border-radius:10px;
border:1px solid #334155;
background:#020617;
color:white;
font-size:16px;
outline:none;
transition:0.2s;
}

.search:focus{
border-color:#38bdf8;
box-shadow:0 0 0 3px rgba(56,189,248,0.15);
}

/* ===== СЕТКА ===== */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:15px;
margin-top:20px;
}

/* ===== КАРТОЧКИ ===== */
.card{
background:#0b1220;
border:1px solid #1f2937;
border-radius:14px;
padding:16px;
transition:0.2s;
box-shadow:0 8px 18px rgba(0,0,0,0.18);
}

.card:hover{
transform:translateY(-4px);
border-color:#38bdf8;
box-shadow:0 14px 28px rgba(0,0,0,0.28);
}

.card h3{
margin:0 0 6px;
color:#e2e8f0;
font-size:18px;
}

.card p{
margin:0;
color:#94a3b8;
font-size:14px;
}

/* убираем подчёркивания у карточек */
.card a,
.card a:hover{
text-decoration:none;
display:block;
color:inherit;
}

/* ===== СТАТЬИ ===== */
article{
max-width:850px;
margin:auto;
padding:20px;
}

h1{
font-size:28px;
line-height:1.3;
margin-bottom:15px;
}

h2{
margin-top:28px;
font-size:22px;
line-height:1.35;
color:#f8fafc;
}

h3{
margin-top:22px;
font-size:18px;
color:#cbd5e1;
}

p, li{
font-size:15px;
color:#d1d5db;
}

/* ===== СПИСКИ ===== */
ul, ol{
padding-left:20px;
}

li{
margin-bottom:8px;
}

/* ===== ССЫЛКИ ===== */
a{
color:#38bdf8;
text-decoration:none;
transition:0.2s;
}

a:hover{
text-decoration:underline;
color:#7dd3fc;
}

/* карточки без подчёркивания */
a.card,
a.card:hover{
text-decoration:none;
}

/* ===== КНОПКИ ===== */
button,
.btn-link,
.to-top,
.next-button{
background:#38bdf8;
color:#020617;
border:none;
border-radius:10px;
padding:10px 14px;
font-weight:600;
cursor:pointer;
text-decoration:none;
display:inline-block;
transition:0.2s;
}

button:hover,
.btn-link:hover,
.to-top:hover,
.next-button:hover{
background:#0ea5e9;
transform:translateY(-2px);
text-decoration:none;
}

/* ===== BACK ===== */
.back{
display:inline-block;
margin-bottom:15px;
color:#38bdf8;
font-weight:bold;
}

.back:hover{
text-decoration:none;
transform:translateX(-3px);
}

/* ===== ЛИНИЯ ===== */
hr{
border:none;
border-top:1px solid #1f2937;
margin:25px 0;
}

/* ===== ВАЖНЫЙ БЛОК ===== */
.block{
padding:14px;
border-radius:10px;
margin:14px 0;
}

.warn{
background:#1f2937;
border:1px solid #f59e0b;
color:#fbbf24;
}

.info{
background:#0b1220;
border:1px solid #38bdf8;
color:#bae6fd;
}

/* ===== КОД / КОМАНДЫ ===== */
code{
background:#020617;
padding:3px 6px;
border-radius:6px;
color:#93c5fd;
font-size:14px;
}

/* ===== КНОПКА НАВЕРХ ===== */
.to-top{
position:fixed;
right:16px;
bottom:16px;
z-index:999;
box-shadow:0 8px 20px rgba(0,0,0,0.3);
}

/* ===== НАВИГАЦИЯ МЕЖДУ СТАТЬЯМИ ===== */
.next-step{
margin-top:35px;
padding:22px;
background:#0b1220;
border:1px solid #1f2937;
border-radius:14px;
text-align:center;
box-shadow:0 8px 18px rgba(0,0,0,0.18);

display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.sticky-nav{
position:sticky;
top:0;
z-index:900;

display:flex;
justify-content:center;
align-items:center;
gap:50px;
flex-wrap:wrap;

padding:7px 10px;
margin:14px 0;

background:rgba(11,18,32,0.92);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

border:1px solid #1f2937;
border-radius:12px;

box-shadow:0 8px 18px rgba(0,0,0,0.18);
}
h2[id]{
scroll-margin-top:90px;
}
.sticky-nav .btn-link{
padding:8px 12px;
font-size:14px;
}

/* ===== КАРТИНКИ В СТАТЬЯХ ===== */
.img-wide{
width:90%;
max-width:900px;
height:auto;
display:block;
margin:18px auto;
border-radius:12px;
border:1px solid #1f2937;
box-shadow:0 10px 22px rgba(0,0,0,0.22);
}

.img-tall{
width:50%;
max-width:420px;
height:auto;
display:block;
margin:18px auto;
border-radius:12px;
border:1px solid #1f2937;
box-shadow:0 10px 22px rgba(0,0,0,0.22);
}

/* ===== ТАБЛИЦЫ ===== */
table{
width:100%;
border-collapse:collapse;
margin:18px 0;
background:#0b1220;
border-radius:12px;
overflow:hidden;
}

th, td{
padding:12px;
border:1px solid #1f2937;
text-align:left;
font-size:14px;
}

th{
background:#111827;
color:#f8fafc;
}

/* ===== FOOTER ===== */
footer{
text-align:center;
padding:30px 10px 80px;
color:#64748b;
font-size:13px;
border-top:1px solid #1f2937;
margin-top:40px;
}

/* ===== МОБИЛКА ===== */
@media(max-width:700px){

.container{
padding:10px;
}

.grid{
grid-template-columns:1fr;
gap:12px;
}

article{
padding:15px;
}

header{
padding:22px 12px;
}

header h1{
font-size:26px;
}

h1{
font-size:22px;
}

h2{
font-size:19px;
}

h3{
font-size:17px;
}

p, li{
font-size:14px;
}

.search{
font-size:15px;
}

.img-wide,
.img-tall{
width:100%;
max-width:100%;
}

.next-step{
padding:18px;
}

.to-top{
bottom:70px;
right:12px;
padding:10px 12px;
}

table{
display:block;
overflow-x:auto;
white-space:nowrap;
}
}