/* Главная страница (резюме). Вынесено из index.html */
	/* ============================================================
	   FONTS
	   ============================================================ */
	/* Шрифты подключаются из /assets/vendor/fonts/fonts-home.css (размещены на сайте) */

	/* ============================================================
	   DESIGN TOKENS
	   ============================================================ */
	:root{
		--bg:            #101116;
		--bg-soft:       #15161c;
		--card:          #1c1e25;
		--card-soft:     #22242c;
		--border:        rgba(255,255,255,.07);
		--border-soft:   rgba(255,255,255,.04);

		--text:          #f2f3f5;
		--text-muted:    #9598a3;
		--text-faint:    #64666f;

		--accent:        #2fe3a6;
		--accent-strong: #1fcf95;
		--accent-bg:     rgba(47,227,166,.12);
		--accent-text:   #55f0bd;

		--amber:         #f0a84e;
		--amber-bg:      rgba(240,168,78,.13);

		--grey-bg:       rgba(255,255,255,.05);
		--grey-text:     #8a8d96;

		--radius-lg:     22px;
		--radius-md:     16px;
		--radius-sm:     11px;

		--shadow-card:   0 10px 30px -12px rgba(0,0,0,.55);
		--font-display:  'Montserrat', sans-serif;
		--font-mono:     'JetBrains Mono', monospace;
	}

	*{ box-sizing: border-box; }

	html{ background: var(--bg); }

	body{
		margin: 0;
		background: var(--bg);
		color: var(--text);
		font-family: var(--font-display);
		font-weight: 400;
		line-height: 1.55;
		-webkit-font-smoothing: antialiased;
	}

	h1,h2,h3,h4,h5,h6{ font-weight: 700 !important; margin: 0;}

	a{ color: var(--accent-text); }

	::selection{ background: var(--accent); color: #06110d; }

	/* Фон страницы — в конце файла («ФОН „C“»): сетка из точек и одно неподвижное пятно */

	/* ============================================================
	   PAGE / LAYOUT
	   ============================================================ */
	.page{
		max-width: 900px;
		margin: 0 auto;
		padding: 28px 16px 60px;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.card{
		background: var(--card);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-card);
		padding: 22px 24px;
	}

	.section-title{
		font-size: 15px;
		letter-spacing: .01em;
    color: var(--text-muted);
	}

	/* ============================================================
	   REVEAL ON SCROLL
	   ============================================================ */
	.reveal{
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
	}
	.reveal.is-visible{ opacity: 1; transform: translateY(0); }

	@media (prefers-reduced-motion: reduce){
		.reveal{ transition: none; opacity: 1; transform: none; }
	}

	/* ============================================================
	   PROFILE HEADER CARD
	   ============================================================ */
	.profile-card{
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.profile-main{
		display: flex;
		align-items: center;
		gap: 16px;
		flex-wrap: wrap;
	}
	.avatar{
		width: 72px;
		height: 72px;
		border-radius: 50%;
		object-fit: cover;
		border: 2px solid var(--border);
		flex-shrink: 0;
	}
	.profile-info{ flex: 1; min-width: 160px; }
	.profile-info h1{ font-size: 21px; color: var(--text);}
	.profile-info .role{
		margin: 4px 0 0;
		color: var(--text-muted);
		font-size: 13.5px;
	}

	.profile-actions{
		display: flex;
		align-items: center;
		gap: 10px;
		margin-left: auto;
	}
	.btn-accent{
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: var(--accent);
		color: #06140f;
		font-weight: 600;
		font-size: 13.5px;
		text-decoration: none;
		padding: 10px 18px;
		border-radius: 999px;
		border: none;
		transition: transform .18s ease, background .18s ease;
		white-space: nowrap;
	}
	.btn-accent:hover{ background: var(--accent-strong); transform: translateY(-1px); text-decoration: none; color: #06140f; }
	.icon-btn{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 12px;
		background: var(--card-soft);
		border: 1px solid var(--border);
		color: var(--text);
		text-decoration: none;
		transition: transform .18s ease, background .18s ease, color .18s ease;
	}
	.icon-btn:hover{ background: var(--accent-bg); color: var(--accent-text); transform: translateY(-1px); text-decoration: none; }

	/* stats row */
	.stats-row{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
	}
	.stat-box{
		display: flex;
		align-items: center;
		gap: 12px;
		background: var(--card-soft);
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		padding: 14px 14px;
	}
	.stat-icon{
		width: 34px;
		height: 34px;
		flex-shrink: 0;
		border-radius: 10px;
		background: var(--accent-bg);
		color: var(--accent-text);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.stat-icon svg{ width: 17px; height: 17px; }
	.stat-num{
		font-family: var(--font-mono);
		font-weight: 700;
		font-size: 19px;
		line-height: 1.1;
	}
	.stat-label{
		font-size: 11.5px;
		color: var(--text-muted);
		margin-top: 2px;
	}

	/* ============================================================
	   ABOUT / UPTIME BAR
	   ============================================================ */
	.about-text{
		margin: 10px 0 20px;
		color: var(--text-muted);
		font-size: 14.5px;
    text-align: justify;
		/* max-width: 62ch; */
	}
	.uptime-caption{
		font-family: var(--font-mono);
		font-size: 12px;
		color: var(--accent-text);
		margin-bottom: 10px;
	}
	.uptime-caption::before{ content: "$ "; color: var(--text-faint); }
	.uptime-bar{
		display: flex;
		height: 34px;
		width: 100%;
		border-radius: 999px;
		overflow: hidden;
		border: 1px solid var(--border);
		background: var(--card-soft);
	}
	.uptime-segment{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-mono);
		font-size: 10.5px;
		color: #06140f;
		white-space: nowrap;
		overflow: hidden;
		width: 0 !important;
		transition: width 1.1s cubic-bezier(.2,.7,.2,1);
	}
	.uptime-bar.grown .uptime-segment{ width: var(--w) !important; }
	.uptime-segment.empty{ background: transparent; }
	.uptime-segment.learn{ background: var(--card); color: var(--text-muted); border-right: 1px solid var(--border); }
	.uptime-segment.exp{ background: var(--accent); color: #06140f; font-weight: 600; padding: 0 8px; }
	.uptime-legend{
		display: flex;
		gap: 18px;
		margin-top: 12px;
		font-size: 12px;
		color: var(--text-muted);
	}
	.uptime-legend .dot{
		display: inline-block;
		width: 8px; height: 8px;
		border-radius: 50%;
		margin-right: 6px;
	}
	.uptime-legend .dot.learn{ background: var(--text-faint); }
	.uptime-legend .dot.exp{ background: var(--accent); }

	/* ============================================================
	   TECH SECTION / TOOLBAR
	   ============================================================ */
	.section-header{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		margin-bottom: 18px;
	}
	.toolbar{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
	}
	.search-input-wrap{
		position: relative;
		display: flex;
		align-items: center;
	}
	.search-input-wrap svg{
		position: absolute;
		left: 12px;
		width: 15px; height: 15px;
		color: var(--text-faint);
		pointer-events: none;
	}
	.search-input{
		background: var(--card-soft);
		border: 1px solid var(--border);
		color: var(--text);
		border-radius: 999px;
		padding: 9px 14px 9px 34px;
		font-family: var(--font-display);
		font-size: 13px;
		width: 190px;
		outline: none;
		transition: border-color .18s ease, width .25s ease;
	}
	.search-input:focus{ border-color: var(--accent); width: 220px; }
	.search-input::placeholder{ color: var(--text-faint); }

	.filter-group{
		display: flex;
		background: var(--card-soft);
		border: 1px solid var(--border);
		border-radius: 999px;
		padding: 3px;
		gap: 2px;
	}
	.filter-btn{
		border: none;
		background: transparent;
		color: var(--text-muted);
		font-family: var(--font-display);
		font-size: 12.5px;
		font-weight: 500;
		padding: 7px 14px;
		border-radius: 999px;
		cursor: pointer;
		transition: background .18s ease, color .18s ease;
	}
	.filter-btn.active{ background: var(--accent); color: #06140f; font-weight: 600; }
	.filter-btn:not(.active):hover{ color: var(--text); }

	.sort-btn{
		display: inline-flex;
		align-items: center;
		gap: 7px;
		background: var(--card-soft);
		border: 1px solid var(--border);
		color: var(--text-muted);
		font-family: var(--font-display);
		font-size: 12.5px;
		font-weight: 500;
		padding: 8px 14px;
		border-radius: 999px;
		cursor: pointer;
		transition: color .18s ease, border-color .18s ease;
	}
	.sort-btn svg{ width: 14px; height: 14px; }
	.sort-btn:hover{ color: var(--text); }
	.sort-btn.active{ color: var(--accent-text); border-color: var(--accent); }

	/* tech grid + cards */
	.tech-grid{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
		gap: 14px;
	}
	.tech-card{
		background: var(--card-soft);
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-md);
		padding: 16px 16px 14px;
		transition: transform .22s ease, border-color .22s ease, opacity .25s ease, box-shadow .22s ease;
		opacity: 0;
		transform: translateY(14px);
	}
	.tech-card.is-visible{ opacity: 1; transform: translateY(0); }
	.tech-card:hover{ transform: translateY(-3px); border-color: var(--border); box-shadow: 0 14px 26px -16px rgba(0,0,0,.6); }
	.tech-card.card-hidden{ display: none; }

	.tech-card-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12px;
		gap: 10px;
	}
	.tech-card-title{
		font-size: 13px;
		font-weight: 600;
		color: var(--text);
	}
	.tech-count-badge{
		font-family: var(--font-mono);
		font-size: 11px;
		font-weight: 600;
		padding: 3px 9px;
		border-radius: 999px;
		white-space: nowrap;
	}
	.tech-count-badge.badge-full{ background: var(--accent-bg); color: var(--accent-text); }
	.tech-count-badge.badge-partial{ background: var(--amber-bg); color: var(--amber); }
	.tech-count-badge.badge-empty{ background: var(--grey-bg); color: var(--grey-text); }

	.tech-pills{
		display: flex;
		flex-wrap: wrap;
		gap: 7px;
	}

	/* pill items (kept .item / .item_active / .item_disabled hooks from original markup) */
	.item{
		display: inline-flex;
		align-items: center;
		border: 1px solid var(--border);
		border-radius: 999px;
		padding: 5px 12px;
		font-size: 12.5px;
		text-decoration: none;
		color: var(--text-muted);
		background: transparent;
		transition: all .18s ease;
	}
	.item:hover{ text-decoration: none; }
	.item_active{
		background: var(--accent-bg);
		border-color: rgba(47,227,166,.35);
		color: var(--accent-text);
	}
	a.item_active{ cursor: pointer; }
	a.item_active:hover{ background: var(--accent); color: #06140f; border-color: var(--accent); }
	.item_disabled{
		background: var(--grey-bg);
		border-color: var(--border-soft);
		color: var(--grey-text);
	}
	.item.pill-hidden{
		width: 0; padding: 0; margin: 0; border: 0; opacity: 0;
		overflow: hidden; 
    /*корректно отображает без отступов, но страдает анимация*/ display: none; /*---*/
	}

	/* ============================================================
	   CERTIFICATES SLIDER
	   ============================================================ */
	.cert-card{
		background: var(--card-soft) !important;
		border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-md);
    overflow: hidden;
		box-shadow: none !important;
		transition: transform .22s ease, border-color .22s ease;
	}
	.cert-card:hover{ transform: translateY(-4px); border-color: var(--border) !important; }
	.cert-card .uk-card-body{ padding: 16px 18px 18px; }
	.cert-card .uk-card-title{ font-size: 14.5px; color: var(--text); margin-bottom: 4px; }
	.cert-card p{ color: var(--text-muted); font-size: 12.5px; margin: 0; }
	.uk-slidenav{ color: var(--text-muted); }
	.uk-slidenav:hover{ color: var(--accent-text); }
	.uk-dotnav > * > *{ background: var(--border); box-shadow: none; }
	.uk-dotnav > .uk-active > *{ background: var(--accent); }
 
	/* ============================================================
	   MODALS
	   ============================================================ */
	.uk-modal-dialog{
		background: var(--card);
		color: var(--text);
		border: 1px solid var(--border);
    border-radius: var(--radius-md);
	}
	.uk-modal-header{ background: transparent; border-color: var(--border); }
	.uk-modal-title{ color: var(--text); font-size: 18px; }
	.uk-modal-body{ color: var(--text-muted); font-size: 14px; }
	.uk-modal-body strong{ color: var(--text); }
	.uk-modal-body h3{ color: var(--text); font-size: 15px; margin: 16px 0 8px; }
	.uk-modal-footer{ background: transparent; border-color: var(--border); }
	.uk-modal-close-default{ color: var(--text-muted); }
	.uk-modal-close-default:hover{ color: var(--text); }
	.uk-button-default{
		/* background: var(--card-soft);
		color: var(--text);
		border-color: var(--border); */

    background: var(--accent-bg);
    border-color: rgba(47, 227, 166, .35);
    color: var(--accent-text);

    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    text-decoration: none;
    color: var(--text-muted);
    background: transparent;
    transition: all .18s ease;


	}
	.uk-button-default:hover{ background: var(--accent); color: #06140f; border-color: var(--accent); }
	.uk-modal{ background: rgba(6,7,10,.72); }

	/* tooltips */
	.uk-tooltip{
		background: var(--card-soft);
		color: var(--text);
		border: 1px solid var(--border);
		font-family: var(--font-mono);
		font-size: 11.5px;
		border-radius: 8px;
	}

	/* ============================================================
	   FOOTER
	   ============================================================ */
	.footer-note{
		text-align: center;
		color: var(--text-faint);
		font-size: 12px;
		padding: 6px 0 0;
	}

    /* ===================== TIMELINE (Опыт) ===================== */
    .timeline{ position: relative; margin-top: 8px; padding-left: 26px; }
    .timeline::before{
        content:""; position:absolute; left:7px; top:6px; bottom:6px;
        width:2px; background:var(--border);
    }
    .tl-item{ position:relative; padding-bottom:22px; }
    .tl-item:last-child{ padding-bottom:0; }
    .tl-item::before{
        content:""; position:absolute; left:-24px; top:5px;
        width:12px; height:12px; border-radius:50%;
        background:var(--accent); box-shadow:0 0 0 4px var(--accent-bg);
    }
    .tl-period{ font-family:var(--font-mono); font-size:12px; color:var(--accent-text); margin-bottom:3px; }
    .tl-role{ font-size:15px; font-weight:600; color:var(--text); }
    .tl-company{ font-size:13px; color:var(--text-muted); margin-bottom:8px; }
    .tl-desc{ font-size:13.5px; color:var(--text-muted); margin:0 0 10px; }
    .tl-item .tech-pills{ margin-top:8px; }

    /* ===================== PROJECTS (Проекты) ===================== */
    .proj-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(255px, 1fr)); gap:14px; }
    .proj-card{
        display:flex; flex-direction:column;
        background:var(--card-soft); border:1px solid var(--border-soft);
        border-radius:var(--radius-md); padding:16px 16px 14px;
        transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .proj-card:hover{ transform:translateY(-3px); border-color:var(--border); box-shadow:0 14px 26px -16px rgba(0,0,0,.6); }
    .proj-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .proj-icon{
        width:34px; height:34px; flex-shrink:0; border-radius:10px;
        background:var(--accent-bg); color:var(--accent-text);
        display:flex; align-items:center; justify-content:center;
    }
    .proj-icon svg{ width:17px; height:17px; }
    .proj-title{ font-size:13.5px; font-weight:600; color:var(--text); }
    .proj-desc{ font-size:13px; color:var(--text-muted); margin:0 0 12px; flex:1; }
    .proj-card .tech-pills{ margin-bottom:12px; }
    .proj-more{ align-self:flex-start; font-size:12.5px; font-weight:600; color:var(--accent-text); text-decoration:none; cursor:pointer; }
    .proj-more:hover{ text-decoration:none; color:var(--accent); }

	/* ============================================================
	   RESPONSIVE
	   ============================================================ */
	@media (max-width: 700px){
		.stats-row{ grid-template-columns: repeat(2, 1fr); }
		.profile-actions{ margin-left: 0; width: 100%; justify-content: flex-start; }
		.profile-main{ width: 100%; }
	}
	@media (max-width: 460px){
		.stats-row{ grid-template-columns: repeat(2, 1fr); }
		.search-input, .search-input:focus{ width: 100%; }
		.toolbar{ width: 100%; }
		.search-input-wrap{ width: 100%; }
		.section-header{ align-items: stretch; }
		.filter-group{ overflow-x: auto; }
	}





@media print{
    /* всё, что скрыто до скролла — принудительно видимо на печати */
	.reveal, .tech-card, .proj-card, .tl-item{
		opacity: 1 !important;
		transform: none !important;
	}

	body::before, body::after, .profile-actions, .toolbar, .certs-desc a,
	.uk-slidenav, .uk-dotnav{ display:none !important; }

	html, body{ background:#fff !important; color:#111 !important; }
	.page{ max-width:100%; padding:0; gap:12px; }

	/* .card БЕЗ break-inside:avoid — только светлая тема */
	.card{
		background:#fff !important; border:1px solid #ddd !important;
		box-shadow:none !important; border-radius:0; padding:14px 0;
	}
	.section-title, .profile-info h1, .tech-card-title{ color:#111 !important; }
	.about-text, .role, .tl-desc, .proj-desc{ color:#333 !important; }

	.item{ color:#222 !important; border-color:#bbb !important; background:#fff !important; }
	/*.item_disabled{ color:#888 !important; }*/
    /* Использую — залитые, жирный контур */
    .item_active{
        color:#111 !important;
        background:#eaeaea !important;
        border:1.5px solid #333 !important;
        font-weight:600 !important;
    }

    /* Изучаю — пустые, пунктир, приглушённый текст */
    .item_disabled{
        color:#777 !important;
        background:#fff !important;
        border:1.5px dashed #bbb !important;
        font-weight:400 !important;
    }

	/* ГЛАВНОЕ: убираем grid — он не пагинируется. Карточки в 2 колонки через inline-block */
	.tech-grid, .proj-grid{ display:block !important; font-size:0; }
	.tech-card, .proj-card{
		display:inline-block; width:49%; vertical-align:top;
		margin:0 0 12px; box-sizing:border-box;
		break-inside:avoid; font-size:13px;
	}
	.tech-card:nth-child(odd), .proj-card:nth-child(odd){ margin-right:2%; }

	/* мелкие блоки не рвём между страницами */
	.tl-item, .cert-card{ break-inside:avoid; }

	/* сертификаты — столбиком вместо слайдера */
	.uk-slider-items{ display:block !important; transform:none !important; }
	.uk-slider-items > *{ width:100% !important; }

	@page{ margin:14mm; }
}

/* ============================================================
   ФОН «C» — как в админке и блоге: сетка из точек тает к низу экрана,
   одно неподвижное слабое пятно; без анимации
   ============================================================ */
html{ background:#0b0c10; }
body{ background: transparent; }
body::before, body::after{ content:""; position:fixed; z-index:-1; pointer-events:none; }
body::before{
	inset:0;
	background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 35%, transparent 92%);
	mask-image: linear-gradient(180deg, #000 0, #000 35%, transparent 92%);
}
body::after{
	width:620px; height:620px; top:-300px; left:12%;
	border-radius:50%; background: var(--accent); opacity:.09; filter: blur(130px);
}
@media (max-width: 680px){ body::after{ width:360px; height:360px; } }

/* ============================================================
   ОПЫТ: описание и навыки старых мест работы под спойлером
   ============================================================ */
.tl-more{ margin-top: 2px; }
.tl-more > summary{
	list-style: none; display: inline-flex; align-items: center; gap: 7px;
	font-size: 12.5px; font-weight: 600; color: var(--accent-text); cursor: pointer; user-select: none;
	padding: 3px 0; border-radius: 6px;
}
.tl-more > summary::-webkit-details-marker{ display: none; }
.tl-more > summary::after{
	content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.tl-more[open] > summary::after{ transform: translateY(1px) rotate(-135deg); }
.tl-more > summary:hover{ color: var(--accent); }
.tl-more > summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.tl-more:not([open]) .when-open, .tl-more[open] .when-closed{ display: none; }
.tl-more-body{ padding-top: 8px; animation: tlMoreIn .25s ease; }
@keyframes tlMoreIn{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .tl-more-body{ animation: none; } .tl-more > summary::after{ transition: none; } }
@media print{ .tl-more > summary{ display: none; } .tl-more-body{ padding-top: 0; } }

/* Подвал: ссылки на документы о персональных данных и настройки cookie */
.footer-note .footer-links{ display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font-size: 12px; }
.footer-note .footer-links a{ color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted currentColor; }
.footer-note .footer-links a:hover{ color: var(--accent-text); }
.footer-note .footer-links a[hidden]{ display: none; }
@media print{ .footer-note .footer-links{ display: none; } }