/*
Theme Name: My Timer
Theme URI: https://my-timer.com/
Author: Ваше имя
Description: Тема для сайта таймера на основе Underscores с кастомным дизайном.
Version: 1.0
Text Domain: my-timer
*/

/* ------------------ Светлая тема (дефолт) ------------------ */

:root {
	--bg-color:#f3f4f6;
	--container-bg:#fff;
	--text-color:#1f2937;
	--accent-color:#6366f1;
	--accent-hover:#4f46e5;
	--border-color:#e5e7eb;
	--border-radius:6px;
	--error-color:#ef4444;
	--success-color:#10b981;
	--font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
	--element-bg:#fff
	}
	
	[data-theme="dark"] {
	--bg-color:#111827;
	--container-bg:#1f2937;
	--text-color:#e5e7eb;
	--accent-color:#818cf8;
	--accent-hover:#6366f1;
	--border-color:#374151;
	--error-color:#f87171;
	--success-color:#34d399;
	--element-bg:#121428
	}
	
	body,header,.timer-section,input,button,select {
	transition:background-color .3s ease,color .3s ease,border-color .3s ease
	}
	
	* {
	margin:0;
	padding:0;
	box-sizing:border-box
	}
	
	body {
	background-color:var(--bg-color);
	color:var(--text-color);
	font-family:var(--font-family);
	line-height:1.5;
	padding-bottom:70px
	}
	
	h2 {
	font-weight:600
	}
	
	a {
	text-decoration:none;
	color:var(--accent-color)
	}
	
	header {
	position:relative;
	background-color:var(--container-bg);
	border-bottom:1px solid var(--border-color)
	}
	
	.header-inner {
		display: flex;
		align-items: center;
		padding: 0.5rem 1rem;
		flex-wrap: wrap;
	}
	
	.theme-switch {
	position:absolute;
	top:1.5rem;
	right:1.5rem;
	display:flex;
	align-items:center;
	gap:.5rem
	}
	
	.theme-switch input {
	display:none
	}
	
	.theme-switch label {
	display:inline-block;
	width:50px;
	height:26px;
	background:var(--border-color);
	border-radius:50px;
	position:relative;
	cursor:pointer
	}
	
	.theme-switch label::after {
	content:"";
	position:absolute;
	top:3px;
	left:3px;
	width:20px;
	height:20px;
	background:var(--accent-color);
	border-radius:50%;
	transition:transform .3s
	}
	
	.theme-switch input:checked+label::after {
	transform:translateX(24px)
	}
	
	.page-title {
	text-align:center;
	font-size:2rem;
	margin-top:.1rem;
	margin-bottom:.1rem;
	font-weight:600;
	color:var(--accent-color)
	}
	
	@media (min-width: 1024px) {
	.site,.site-content,.wrapper {
	max-width:1200px;
	margin:0 auto
	}
	
	.timer-listing ul {
	max-width:1200px;
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1rem;
	padding:0;
	list-style:none
	}
	}
	
	.timer-section {
	background-color:var(--container-bg);
	padding:.5rem;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	max-width:600px;
	margin:2rem auto
	}
	
	.timer-section h2 {
	text-align:center;
	font-size:1.6rem;
	margin-bottom:1rem
	}
	
	.time-inputs {
	display:flex;
	gap:1rem;
	justify-content:space-between;
	margin-bottom:1rem;
	flex-wrap:wrap
	}
	
	.time-inputs>div {
	flex:1;
	min-width:0
	}
	
	.time-inputs label {
	display:block;
	margin-bottom:.3rem;
	font-weight:600
	}
	
	.time-inputs input {
	width:100%;
	padding:.5rem;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	font-size:1rem;
	background-color:var(--element-bg);
	color:var(--text-color)
	}
	
	.presets-container {
	margin-bottom:1rem
	}
	
	.presets-collapsible {
	overflow:hidden;
	max-height:105px;
	transition:max-height .3s ease
	}
	
	.presets-collapsible.expanded {
	max-height:9999px
	}
	
	.phrase-buttons {
	display:flex;
	flex-wrap:wrap;
	gap:.5rem
	}
	
	.phrase-buttons button {
	flex:1 1 auto;
	min-width:120px;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--element-bg);
	color:var(--text-color);
	padding:.5rem;
	cursor:pointer;
	font-size:.9rem;
	transition:background-color .2s
	}
	
	.phrase-buttons button:hover {
	background-color:var(--border-color)
	}
	
	.toggle-btn {
	display:block;
	margin:.5rem auto 1rem;
	border:none;
	border-radius:var(--border-radius);
	background-color:var(--accent-color);
	color:#fff;
	padding:.6rem 1rem;
	cursor:pointer;
	transition:background-color .2s
	}
	
	.toggle-btn:hover {
	background-color:var(--accent-hover)
	}
	
	.melody-group,.title-group {
	margin-bottom:1rem
	}
	
	.melody-group label,.title-group label {
	display:block;
	margin-bottom:.3rem;
	font-weight:600
	}
	
	.melody-group select,.title-group input {
	width:100%;
	padding:.5rem;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--element-bg);
	color:var(--text-color)
	}
	
	.start-btn {
	display:block;
	width:100%;
	text-align:center;
	padding:.8rem;
	font-size:1rem;
	font-weight:600;
	border:none;
	border-radius:var(--border-radius);
	background-color:var(--accent-color);
	color:#fff;
	cursor:pointer;
	transition:background-color .2s
	}
	
	.start-btn:hover {
	background-color:var(--accent-hover)
	}
	
	.countdown-display {
	margin:.5rem 0;
	text-align:center
	}
	
	.countdown-display #countdownText {
	font-size:3rem;
	font-family:'Courier New',monospace
	}
	
	.countdown-display p {
	font-size:1.2rem;
	margin-top:.5rem;
	opacity:.8
	}
	
	.control-buttons {
	display:flex;
	gap:1rem;
	margin:1rem 0;
	justify-content:center;
	flex-wrap:wrap
	}
	
	.control-buttons button {
	flex:1 1 auto;
	min-width:100px;
	border:none;
	border-radius:var(--border-radius);
	padding:.7rem;
	font-size:1rem;
	cursor:pointer;
	color:#fff;
	transition:background-color .2s
	}
	
	.stop-btn {
	background-color:var(--error-color)
	}
	
	.stop-btn:hover {
	background-color:#ff8f8f
	}
	
	.reset-btn {
	background-color:#2c3748
	}
	
	.reset-btn:hover {
	background-color:#3c4453
	}
	
	footer {
	position:static;
	background-color:var(--container-bg);
	border-top:1px solid var(--border-color);
	text-align:center;
	padding:.8rem
	}
	
	footer button {
	padding:.8rem 1.5rem;
	font-size:1rem;
	font-weight:600;
	border:none;
	border-radius:var(--border-radius);
	background-color:var(--accent-color);
	color:#fff;
	cursor:pointer;
	transition:background-color .2s
	}
	
	footer button:hover {
	background-color:var(--accent-hover)
	}
	
	@media (max-width: 480px) {
	header h1,.page-title {
	font-size:1.6rem
	}
	
	.timer-section {
	margin:1rem auto
	}
	
	.countdown-display #countdownText {
	font-size:2.4rem
	}
	
	.presets-collapsible {
	max-height:150px
	}
	}
	
	@media (min-width: 2000px) {
	.timer-section {
	max-width:800px;
	padding:2rem 3rem
	}
	
	.countdown-display #countdownText {
	font-size:4rem
	}
	
	.timer-section h2 {
	font-size:2rem
	}
	}
	
	.front-page-fixed-footer {
	position:fixed!important;
	bottom:0;
	left:0;
	right:0;
	background-color:var(--container-bg);
	border-top:1px solid var(--border-color);
	text-align:center;
	padding:.8rem;
	z-index:999
	}
	
	.front-page-fixed-footer button {
	padding:.8rem 1.5rem;
	font-size:1rem;
	font-weight:600;
	border:none;
	border-radius:var(--border-radius);
	background-color:var(--accent-color);
	color:#fff;
	cursor:pointer;
	transition:background-color .2s
	}
	
	.front-page-fixed-footer button:hover {
	background-color:var(--accent-hover)
	}
	
	.custom-logo {
	max-width:100px;
	height:auto;
	margin-left:0
	}
	
	.site-branding {
		margin-right: 0;
	}

	.main-navigation {
	order: 2;
    width: 100%;
	}
	
	@media (max-width: 768px) {
	body .site-header .main-navigation ul.menu,body .site-header .main-navigation ul#primary-menu {
	display:none
	}
	
	body .site-header .main-navigation.open ul.menu,body .site-header .main-navigation.open ul#primary-menu {
	display:flex;
	flex-direction:column
	}
	
	.site-branding {
	text-align:center
	}
	}

	.main-navigation.toggled ul.menu,
	.main-navigation.toggled ul#primary-menu {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: var(--container-bg);
	z-index: 10;
	padding: 0.5rem 0;
	}
	
	@media (min-width: 769px) {
	.main-navigation ul.menu,
	.main-navigation ul#primary-menu {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	
	.menu-toggle {
	display:none!important
	}
	
	.main-navigation .menu {
	display:flex;
	flex-direction:row;
	justify-content:center;
	flex-wrap:wrap
	}
	
	.menu-toggle {
	display:none!important
	}
	
	.header-inner {
		justify-content: space-between;
	}

	.site-navigation {
		position: static;
		width: auto;
	}
	
	.main-navigation .menu li a {
		display: inline-block;
		padding: 0.75rem 1.25rem;
		margin: 0.3rem;
		border-radius: var(--border-radius);
		background-color: var(--accent-color);
		color: white;
		font-weight: 600;
		text-decoration: none;
		transition: background-color 0.3s ease;
		border: 1px solid var(--border-color);
	}
	
	.main-navigation .menu li a:hover {
	background-color:var(--accent-hover)
	}
	}
	
	.main-navigation.open ul.menu {
	display:flex;
	flex-direction:column;
	background-color:var(--container-bg);
	position:absolute;
	top:100%;
	left:0;
	right:0;
	box-shadow:0 2px 8px #0000001a;
	animation:fadeInDown .3s ease forwards;
	padding:0;
	margin:0
	}
	
	.main-navigation.open ul.menu li {
	width:100%;
	text-align:center;
	margin:.25rem 0
	}
	
	.seo-text {
	max-width:800px;
	margin:2rem auto;
	padding:1.5rem;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--container-bg);
	box-shadow:0 2px 5px #0000001a;
	font-size:1rem;
	line-height:1.6;
	color:var(--text-color)
	}
	
	.seo-text h2,.seo-text h3 {
	margin-top:1rem;
	margin-bottom:.5rem
	}
	
	.seo-text p {
	margin-bottom:1rem
	}
	
	.seo-text ul,.seo-text ol {
	margin:0 0 1rem 1.5rem;
	padding-left:0
	}
	
	.seo-text ul {
	list-style-type:disc;
	list-style-position:outside
	}
	
	.seo-text ol {
	list-style-type:decimal;
	list-style-position:outside
	}
	
	.seo-text li {
	margin-bottom:.5rem
	}
	
	.main-navigation .menu {
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	padding:0 .5rem;
	margin:0;
	justify-content:center
	}
	
	.main-navigation .menu li {
	width: auto;
    text-align: center;
    margin: 0;
	}
	
	.main-navigation .menu li a {
	display:inline-block;
	padding:.75rem 1.25rem;
	margin:.5rem;
	border-radius:var(--border-radius);
	background-color:var(--accent-color);
	color:#fff;
	font-weight:600;
	text-decoration:none;
	transition:background-color .3s ease,color .3s ease;
	border:1px solid var(--border-color)
	}
	
	.main-navigation .menu li a:hover {
	background-color:var(--accent-hover);
	color:#fff
	}
	
	.menu-item-has-children>a {
	position:relative;
	padding-right:20px
	}
	
	.main-navigation .menu-item-object-page a {
	background-color:var(--success-color)
	}
	
	.main-navigation .menu-item-object-category a {
	background-color:var(--accent-color)
	}
	
	.menu-toggle {
	display:none;
	position:relative;
	width:30px;
	height:24px;
	background:none;
	border:none;
	cursor:pointer;
	z-index:100;
	top: 0px;
	right: 180px;
	}
	
	.menu-toggle .hamburger-line {
	display:block;
	position:absolute;
	left:0;
	width:100%;
	height:4px;
	background-color:var(--text-color);
	border-radius:var(--border-radius);
	transition:transform .3s ease,opacity .3s ease
	}

	.main-navigation.toggled ul {
		display: flex;
		flex-direction: column;
	}
	
	.menu-toggle .hamburger-line:nth-child(1) {
	top:0
	}
	
	.menu-toggle .hamburger-line:nth-child(2) {
	top:10px
	}
	
	.menu-toggle .hamburger-line:nth-child(3) {
	top:20px
	}
	
	.menu-toggle.open .hamburger-line:nth-child(1) {
	transform:translateY(10px) rotate(45deg)
	}
	
	.menu-toggle.open .hamburger-line:nth-child(2) {
	opacity:0
	}
	
	.menu-toggle.open .hamburger-line:nth-child(3) {
	transform:translateY(-10px) rotate(-45deg)
	}
	
	.main-navigation ul {
	display:flex;
	gap:.5rem;
	list-style:none;
	padding:0;
	margin:0
	}

	.main-navigation .menu li a {
		padding: 0.5rem 1rem;
		margin: 0.25rem;
	}
	
	@media (max-width: 768px) {
	.menu-toggle {
	display:block
	}
	
	.main-navigation ul {
	display:none;
	flex-direction:column;
	background-color:var(--container-bg);
	position:absolute;
	top:100%;
	left:0;
	right:0;
	box-shadow:0 2px 8px #0000001a;
	animation:fadeInDown .3s ease forwards
	}
	
	.main-navigation.open ul,.main-navigation.toggled .menu {
	display:flex;
	flex-direction:column;
	position:absolute;
	top:100%;
	left:0;
	right:0;
	background-color:var(--container-bg);
	z-index:1000;
	box-shadow:0 2px 8px #0000001a
	}
	}
	
	@keyframes fadeInDown {
	from {
	opacity:0;
	transform:translateY(-10px)
	}
	
	to {
	opacity:1;
	transform:translateY(0)
	}
	}
	
	.menu-toggle::before {
	content:url('path-to-your-icon.svg');
	font-size:initial;
	line-height:normal
	}
	
	.main-navigation .sub-menu {
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background-color:var(--accent-hover);
	border:1px solid var(--border-color);
	padding:.5rem 0;
	z-index:999;
	white-space:nowrap
	}
	
	.main-navigation li {
	width:100%;
	text-align:center;
	margin:.25rem 0
	}
	
	.main-navigation li:hover>.sub-menu {
	display:block;
	background-color:var(--accent-hover)
	}
	
	.main-navigation .sub-menu li a {
	display:block;
	padding:.5rem 1rem;
	color:#fff;
	text-decoration:none;
	white-space:nowrap;
	transition:background-color .3s ease
	}
	
	.main-navigation .sub-menu li a:hover {
	background-color:var(--accent-hover);
	color:#fff
	}
	
	.menu-item-has-children>a::after {
	content:"";
	position:absolute;
	bottom:-8px;
	left:50%;
	transform:translateX(-50%);
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-top:6px solid var(--accent-color)
	}
	
	.timer-listing h2 {
	margin-bottom:1rem;
	font-size:1.8rem
	}
	
	.timer-listing ul {
	list-style:none!important;
	margin:0!important;
	padding:0!important
	}
	
	.timer-listing ul li {
	margin-bottom:.5rem;
	list-style:none!important
	}
	
	.timer-listing ul li::before,.timer-listing ul li::marker,.timer-listing ul li::after {
	content:none!important;
	display:none!important
	}
	
	.timer-listing ul li a {
	display:inline!important;
	padding:0!important;
	background:none!important;
	border:none!important;
	border-radius:0!important;
	text-decoration:none!important;
	color:var(--accent-color)!important;
	font-weight:400!important
	}
	
	.timer-listing ul li a:hover {
	background-color:var(--accent-hover)
	}
	
	.timer-list a {
	margin-right:.5rem;
	color:var(--accent-color);
	text-decoration:none
	}
	
	.timer-list a:hover {
	color:var(--accent-hover);
	text-decoration:underline
	}
	
	.timer-listing ul::marker {
	content:none!important
	}
	
	.timer-listing ul,.timer-listing ul li {
	list-style:none!important;
	margin:0!important;
	padding:0!important
	}
	
	.timer-listing ul li::marker,.timer-listing ul li::before,.timer-listing ul li::after {
	content:""!important;
	display:none!important
	}
	
	html body .timer-listing-title {
	font-size:1rem!important;
	margin-top:.5rem!important;
	margin-bottom:.5rem!important;
	color:var(--text-color)!important;
	font-weight:400!important
	}
	
	html body .timer-listing {
	margin:2rem auto!important;
	padding:1.5rem!important;
	background-color:var(--container-bg);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	box-shadow:0 2px 5px #0000001a
	}
	
	.timer-listing {
	max-width:1200px;
	margin:2rem auto!important;
	margin-bottom:1.5rem!important;
	padding:1.5rem!important;
	background-color:var(--container-bg);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	box-shadow:0 2px 5px #0000001a;
	display:flex;
	flex-direction:column
	}
	
	.home .timer-listing:after {
	content:'';
	display:block;
	width:100%;
	height:1px;
	background-color:var(--border-color);
	margin-top:2rem
	}
	
	.home footer,.front-page-fixed-footer {
	margin-top:2rem;
	clear:both
	}
	
	.timer-items-container {
	width:100%;
	display:flex;
	justify-content:center;
	margin-top:1rem
	}
	
	.custom-timer {
	margin:1rem 0;
	padding:.5rem;
	text-align:center
	}
	
	.custom-timer .timer-display {
	font-family:'Courier New',monospace;
	font-size:2rem;
	color:var(--text-color)
	}
	
	@media (min-width: 1024px) {
	.timer-listing ul {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1rem;
	margin:0;
	padding:0
	}
	
	.timer-buttons-container {
	grid-column:1 / -1;
	text-align: center
	}
	}
	
	.timer-listing .show-more-btn {
	display:block;
	margin:1rem auto;
	padding:.5rem 1rem;
	background-color:var(--accent-color);
	color:#fff;
	border:none;
	border-radius:var(--border-radius);
	cursor:pointer;
	transition:background-color .3s ease
	}
	
	.timer-listing .show-more-btn:hover {
	background-color:var(--accent-hover)
	}
	
	.timer-listing .show-more-btn,.timer-listing .hide-btn {
	display:block;
	margin:1rem auto;
	padding:.5rem 1rem;
	background-color:var(--accent-color);
	color:#fff;
	border:none;
	border-radius:var(--border-radius);
	cursor:pointer;
	transition:background-color .3s ease
	}
	
	.timer-listing .show-more-btn:hover,.timer-listing .hide-btn:hover {
	background-color:var(--accent-hover)
	}
	
	.timer-listing ul li:nth-child(n+16) {
	display:none
	}
	
	.timer-items-container ul {
	width:100%
	}
	
	@media (min-width: 1024px) {
	.timer-items-container ul {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1rem;
	margin:0;
	padding:0
	}
	
	.timer-items-container ul li {
	margin-bottom:.5rem
	}
	}
	
	@media (max-width: 1023px) {
	.timer-items-container ul li {
	margin-bottom:.8rem;
	padding-bottom:.5rem;
	border-bottom:1px solid var(--border-color)
	}
	
	.timer-items-container ul li:last-child {
	border-bottom:none
	}
	}
	
	.stopwatch-section {
	background-color:var(--container-bg);
	padding:1.5rem;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	max-width:600px;
	margin:2rem auto
	}
	
	.stopwatch-section h2 {
	text-align:center;
	font-size:1.6rem;
	margin-bottom:1rem;
	font-weight:600
	}
	
	.stopwatch-tabs {
	display:flex;
	margin-bottom:1.5rem;
	border-bottom:1px solid var(--border-color)
	}
	
	.tab-button {
	flex:1;
	background:none;
	border:none;
	padding:.8rem;
	font-size:1rem;
	cursor:pointer;
	color:var(--text-color);
	font-weight:600;
	border-bottom:3px solid transparent
	}
	
	.tab-button.active {
	color:var(--accent-color);
	border-bottom:3px solid var(--accent-color)
	}
	
	.tab-content {
	display:none
	}
	
	.tab-content.active {
	display:block
	}
	
	.digital-display {
	font-family:'Courier New',monospace;
	font-size:3rem;
	text-align:center;
	margin:1.5rem 0
	}
	
	.analog-container {
	position:relative;
	width:280px;
	height:280px;
	margin:2rem auto
	}
	
	.analog-face {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius:50%;
	background-color:var(--element-bg);
	border:2px solid var(--border-color);
	box-sizing:border-box;
	box-shadow:none
	}
	
	.marking {
	position:absolute;
	width:2px;
	height:10px;
	background-color:var(--text-color);
	top:50%;
	left:50%;
	transform-origin:0 0
	}
	
	.second-hand {
	position:absolute;
	width:2px;
	height:130px;
	background-color:var(--error-color);
	bottom:50%;
	left:50%;
	transform-origin:50% 100%;
	transform:translateX(-50%);
	z-index:2
	}
	
	.center-circle {
	position:absolute;
	width:14px;
	height:14px;
	border-radius:50%;
	background-color:var(--accent-color);
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:3
	}
	
	.laps-container {
	margin-top:1.5rem;
	max-height:200px;
	overflow-y:auto;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--container-bg);
	color:var(--text-color)
	}
	
	.lap {
	display:flex;
	justify-content:space-between;
	padding:.8rem 1rem;
	border-bottom:1px solid var(--border-color);
	align-items:center;
	background-color:var(--element-bg)
	}
	
	.lap:hover {
	background-color:var(--bg-color)
	}
	
	.lap:last-child {
	border-bottom:none
	}
	
	.lap-number {
	font-weight:700;
	color:var(--accent-color)
	}
	
	.lap-time {
	font-family:'Courier New',monospace;
	color:var(--text-color)
	}
	
	.control-buttons {
	display:flex;
	gap:.5rem;
	justify-content:center;
	margin-top:1.5rem
	}
	
	.control-btn {
	border:none;
	border-radius:var(--border-radius);
	padding:.7rem 1.2rem;
	font-size:1rem;
	cursor:pointer;
	color:#fff;
	transition:background-color .2s;
	min-width:80px
	}
	
	.start-btn {
	background-color:var(--accent-color)
	}
	
	.start-btn:hover {
	background-color:var(--accent-hover)
	}
	
	.start-btn:disabled {
	background-color:var(--border-color);
	cursor:not-allowed;
	opacity:.7
	}
	
	.stop-btn {
	background-color:var(--error-color)
	}
	
	.stop-btn:hover {
	background-color:#ff8f8f
	}
	
	.stop-btn:disabled {
	background-color:var(--border-color);
	cursor:not-allowed;
	opacity:.7
	}
	
	.reset-btn {
	background-color:#2c3748
	}
	
	.reset-btn:hover {
	background-color:#3c4453
	}
	
	.reset-btn:disabled {
	background-color:var(--border-color);
	cursor:not-allowed;
	opacity:.7
	}
	
	.lap-btn {
	background-color:var(--success-color)
	}
	
	.lap-btn:hover {
	background-color:#0da775
	}
	
	.lap-btn:disabled {
	background-color:var(--border-color);
	cursor:not-allowed;
	opacity:.7
	}
	
	.stopwatch-tabs {
	display:flex;
	margin-bottom:1.5rem;
	border-bottom:1px solid var(--border-color);
	background-color:var(--container-bg)
	}
	
	.tab-button {
	flex:1;
	background:none;
	border:none;
	padding:.8rem;
	font-size:1rem;
	cursor:pointer;
	color:var(--text-color);
	font-weight:600;
	border-bottom:3px solid transparent;
	transition:all .3s ease
	}
	
	.tab-button.active {
	color:var(--accent-color);
	border-bottom:3px solid var(--accent-color)
	}
	
	.tab-content {
	display:none
	}
	
	.tab-content.active {
	display:block
	}
	
	@media (max-width: 480px) {
	.analog-container {
	width:220px;
	height:220px
	}
	
	.second-hand {
	height:100px
	}
	
	.control-buttons {
	flex-wrap:wrap
	}
	
	.control-btn {
	flex:1 1 calc(50% - 0.5rem);
	min-width:80px
	}
	}
	
	.time-section {
	background-color:var(--container-bg);
	padding:1.5rem;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	max-width:600px;
	margin:2rem auto;
	text-align:center
	}
	
	.current-time-display {
	margin:2rem 0
	}
	
	.digital-time {
	font-family:'Courier New',monospace;
	font-size:3.5rem;
	font-weight:700;
	color:var(--accent-color)
	}
	
	.current-date {
	font-size:1.5rem;
	margin:.5rem 0;
	color:var(--text-color)
	}
	
	.timezone-info {
	font-size:1rem;
	opacity:.8;
	margin-bottom:1.5rem
	}
	
	.city-selector {
	margin:2rem 0
	}
	
	.city-selector select {
	padding:.5rem;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--element-bg);
	color:var(--text-color);
	width:200px;
	margin-right:.5rem
	}
	
	.city-selector button {
	padding:.5rem 1rem;
	background-color:var(--accent-color);
	color:#fff;
	border:none;
	border-radius:var(--border-radius);
	cursor:pointer
	}
	
	.city-selector button:hover {
	background-color:var(--accent-hover)
	}
	
	.city-listing {
	max-width:1200px;
	margin:2rem auto;
	padding:1.5rem;
	background-color:var(--container-bg);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius)
	}
	
	.city-listing-title {
	font-size:1.5rem;
	margin-bottom:1rem;
	color:var(--text-color)
	}
	
	.city-items-container ul {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
	gap:1rem;
	margin:0;
	padding:0;
	list-style:none
	}
	
	.city-items-container ul li a {
	color:var(--accent-color);
	text-decoration:none
	}
	
	.city-items-container ul li a:hover {
	color:var(--accent-hover);
	text-decoration:underline
	}
	
	.analog-clock-container {
	display:flex;
	justify-content:center;
	margin:2rem 0
	}
	
	.analog-clock {
	position:relative;
	width:150px;
	height:150px;
	border-radius:50%;
	background-color:var(--element-bg,#121428);
	border:3px solid var(--accent-color,#818cf8)
	}
	
	.hour-hand {
	width:40px;
	height:4px;
	background-color:#fff;
	z-index:1
	}
	
	.minute-hand {
	width:55px;
	height:3px;
	background-color:#fff;
	z-index:2
	}
	
	.second-hand {
	width:65px;
	height:2px;
	background-color:red;
	z-index:3
	}
	
	.number {
	position:absolute;
	width:20px;
	height:20px;
	top:50%;
	left:50%;
	margin-top:-10px;
	margin-left:-10px;
	text-align:center;
	font-weight:700;
	color:var(--text-color)
	}
	
	.time-difference-section {
	max-width:800px;
	margin:2rem auto;
	padding:1.5rem;
	background-color:var(--container-bg);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius)
	}
	
	.time-difference-table {
	width:100%;
	border-collapse:collapse;
	margin-top:1rem
	}
	
	.time-difference-table th,.time-difference-table td {
	padding:.8rem;
	text-align:left;
	border-bottom:1px solid var(--border-color)
	}
	
	.time-difference-table th {
	font-weight:700;
	background-color:var(--bg-color)
	}
	
	.time-difference-table tr:hover {
	background-color:var(--bg-color)
	}
	
	.continent-section {
	margin:1.5rem 0
	}
	
	.continent-section h3 {
	font-size:1.3rem;
	margin-bottom:.8rem;
	color:var(--accent-color);
	border-bottom:1px solid var(--border-color);
	padding-bottom:.5rem
	}
	
	.city-items-container ul {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
	gap:.5rem;
	margin:0!important;
	padding:0!important;
	list-style:none!important
	}
	
	.city-items-container ul li {
	list-style:none!important;
	margin-bottom:.5rem!important;
	padding:.3rem!important
	}
	
	.city-items-container ul li a {
	display:block!important;
	color:var(--text-color)!important;
	text-decoration:none!important;
	padding:.5rem!important;
	border-radius:var(--border-radius);
	transition:background-color .3s ease,color .3s ease
	}
	
	.city-items-container ul li a:hover {
	background-color:var(--accent-color)!important;
	color:#fff!important
	}
	
	.show-all-link {
	font-style:italic;
	color:var(--accent-color)!important
	}
	
	.city-selector {
	margin:1.5rem 0;
	display:flex;
	flex-direction:column;
	align-items:center
	}
	
	.city-selector form {
	width:100%;
	max-width:400px;
	display:flex;
	flex-direction:column;
	gap:.5rem
	}
	
	.city-selector label {
	font-weight:700;
	margin-bottom:.3rem
	}
	
	.city-selector select {
	width:100%;
	padding:.8rem;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--element-bg);
	color:var(--text-color);
	font-size:1rem
	}
	
	.city-selector button {
	width:100%;
	padding:.8rem;
	background-color:var(--accent-color);
	color:#fff;
	border:none;
	border-radius:var(--border-radius);
	cursor:pointer;
	font-size:1rem;
	font-weight:700;
	transition:background-color .3s ease
	}
	
	.city-selector button:hover {
	background-color:var(--accent-hover)
	}
	
	.analog-clock-container {
	margin:2rem auto;
	display:flex;
	justify-content:center
	}
	
	.analog-clock {
	position:relative;
	width:250px;
	height:250px;
	border-radius:50%;
	background-color:var(--element-bg);
	border:4px solid var(--accent-color);
	box-shadow:0 0 15px #0000001a
	}
	
	.hour-hand,.minute-hand,.second-hand {
	position:absolute;
	bottom:50%;
	left:50%;
	transform-origin:50% 100%;
	background-color:var(--text-color);
	border-radius:2px
	}
	
	.hour-hand {
	width:6px;
	height:70px;
	margin-left:-3px;
	background-color:var(--text-color);
	z-index:1
	}
	
	.minute-hand {
	width:4px;
	height:90px;
	margin-left:-2px;
	background-color:var(--text-color);
	z-index:2
	}
	
	.second-hand {
	width:2px;
	height:105px;
	margin-left:-1px;
	background-color:var(--accent-color);
	z-index:3
	}
	
	.number {
	position:absolute;
	width:30px;
	height:30px;
	top:50%;
	left:50%;
	margin-top:-15px;
	margin-left:-15px;
	text-align:center;
	line-height:30px;
	font-weight:700;
	color:var(--text-color)
	}
	
	@media (max-width: 768px) {
	.time-difference-table th,.time-difference-table td {
	padding:.5rem;
	font-size:.9rem
	}
	
	.analog-clock {
	width:200px;
	height:200px
	}
	
	.hour-hand {
	height:50px
	}
	
	.minute-hand {
	height:70px
	}
	
	.second-hand {
	height:85px
	}
	
	.city-items-container ul {
	grid-template-columns:repeat(auto-fill,minmax(150px,1fr))
	}
	}
	
	@media (max-width: 480px) {
	.analog-clock {
	width:180px;
	height:180px
	}
	
	.digital-time {
	font-size:2.5rem
	}
	
	.continent-section h3 {
	font-size:1.1rem
	}
	
	.city-items-container ul {
	grid-template-columns:repeat(auto-fill,minmax(120px,1fr))
	}
	}
	
	.city-grid-container {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
	gap:20px;
	margin:2rem auto;
	max-width:1200px;
	padding:0 1rem
	}
	
	.city-card {
	background-color:var(--container-bg);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	padding:1.5rem;
	text-align:center;
	box-shadow:0 2px 5px #0000001a;
	transition:transform .3s ease,box-shadow .3s ease
	}
	
	.city-card:hover {
	transform:translateY(-5px);
	box-shadow:0 5px 15px #0000001a
	}
	
	.city-name {
	font-size:1.5rem;
	font-weight:600;
	margin-bottom:.5rem;
	color:var(--accent-color)
	}
	
	.city-time {
	font-family:'Courier New',monospace;
	font-size:2.2rem;
	margin:.5rem 0;
	font-weight:700
	}
	
	.city-date {
	color:var(--text-color);
	margin-bottom:.5rem
	}
	
	.time-difference {
	font-size:.9rem;
	color:var(--text-color);
	opacity:.8;
	margin-bottom:1rem
	}
	
	.analog-clock-container {
	display:flex;
	justify-content:center;
	margin:1rem 0
	}
	
	.analog-clock {
	position:relative;
	width:150px;
	height:150px;
	border-radius:50%;
	background-color:var(--element-bg);
	border:3px solid var(--accent-color);
	box-shadow:0 2px 10px #0000001a
	}
	
	.hour-hand {
	width:4px;
	height:40px;
	margin-left:-2px;
	border-radius:4px;
	z-index:1
	}
	
	.minute-hand {
	width:3px;
	height:55px;
	margin-left:-1.5px;
	border-radius:3px;
	z-index:2
	}
	
	.second-hand {
	width:2px;
	height:65px;
	margin-left:-1px;
	background-color:var(--accent-color);
	border-radius:2px;
	z-index:3
	}
	
	.center-dot {
	position:absolute;
	top:50%;
	left:50%;
	width:10px;
	height:10px;
	background:var(--accent-color,red);
	border-radius:50%;
	transform:translate(-50%,-50%);
	z-index:4
	}
	
	.number {
	position:absolute;
	width:24px;
	height:24px;
	top:50%;
	left:50%;
	margin-top:-12px;
	margin-left:-12px;
	text-align:center;
	line-height:24px;
	font-weight:700;
	font-size:.9rem;
	color:var(--text-color)
	}
	
	@media (max-width: 768px) {
	.header-inner {
		flex-direction: column;
		align-items: stretch;
		padding: 0.5rem;
	}

	.top-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.5rem;
	  }
	
	.site-branding {
		text-align: left;
		flex: 1;
	}
	
	.theme-switch {
		position: static;
		margin-right: 0;
	}
	
	.main-navigation {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: flex-end; /* Выравниваем бургер вправо */
		order: 2;
		top: auto;
		right: auto;
	}

	.main-navigation.toggled ul.menu,
	.main-navigation.toggled ul#primary-menu {
	  flex-direction: column;
	  width: 100%;
	  padding-top: 0.5rem;
	}
	
	.main-navigation.open ul {
		top: 100%; /* Это будет относительно позиции .main-navigation */
		margin-top: 1.5rem; /* Добавляем отступ сверху */
		width: 100vw; /* На всю ширину экрана */
		left: -1rem; /* Компенсация right у .main-navigation */
		right: auto;
		padding: 0.5rem 0;
	}
	
	.city-grid-container {
	grid-template-columns:repeat(auto-fill,minmax(250px,1fr))
	}
	
	.city-card {
	padding:1rem
	}
	
	.city-name {
	font-size:1.3rem
	}
	
	.city-time {
	font-size:1.8rem
	}
	
	.analog-clock {
	width:120px;
	height:120px
	}
	}
	
	@media (max-width: 480px) {
	.city-grid-container {
	grid-template-columns:1fr
	}
	}
	
	.city-pagination {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:1rem;
	margin:2rem auto;
	text-align:center
	}
	
	.city-pagination button {
	padding:.7rem 1.5rem;
	font-size:1rem;
	border-radius:var(--border-radius);
	background-color:var(--accent-color);
	color:#fff;
	cursor:pointer;
	transition:background-color .3s ease
	}
	
	.city-pagination button:hover {
	background-color:var(--accent-hover)
	}
	
	.city-search {
	width:940px;
	max-width:100%;
	margin:1rem auto;
	padding:.5rem 1rem;
	background-color:var(--container-bg);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	box-shadow:0 2px 5px #0000001a
	}
	
	.city-search input {
	width:100%;
	padding:.75rem 1rem;
	font-size:1rem;
	color:var(--text-color);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--element-bg);
	outline:none;
	transition:border-color .3s ease
	}
	
	.city-search input:focus {
	border-color:var(--accent-color)
	}
	
	.city-pagination {
	text-align:center;
	margin-top:20px
	}
	
	.city-search-container {
	width:900px;
	max-width:100%;
	text-align:center
	}
	
	.city-search-container input {
	width:100%;
	max-width:100%;
	padding:10px 15px;
	font-size:16px;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--element-bg);
	color:var(--text-color);
	box-sizing:border-box
	}
	
	.city-search-wrapper {
	width:100%;
	padding:1rem;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:20px 0
	}
	
	#clock-toggle {
	position:absolute;
	top:-43px;
	right:10px;
	padding:.5rem 1rem;
	background-color:var(--accent-color);
	color:#fff;
	border:none;
	border-radius:var(--border-radius);
	cursor:pointer;
	font-size:1rem;
	transition:background-color .3s ease;
	z-index:10
	}
	
	#clock-toggle:hover {
	background-color:var(--accent-hover)
	}
	
	.city-grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px
	}
	
	.pagination-nav {
	margin:2rem auto;
	overflow-x:auto;
	text-align:center;
	width:fit-content
	}
	
	.pagination-nav ul {
	display:flex;
	justify-content:center;
	list-style:none;
	padding:0;
	margin:0
	}
	
	.pagination-nav li {
	margin:0 5px
	}
	
	.pagination-nav a,.pagination-nav span {
	display:inline-block;
	padding:.6rem 1rem;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--container-bg);
	color:var(--accent-color);
	text-decoration:none;
	transition:background-color .3s ease,color .3s ease,border-color .3s ease;
	white-space:nowrap;
	font-weight:500
	}
	
	.pagination-nav a:hover {
	background-color:var(--accent-hover);
	border-color:var(--accent-hover);
	color:#fff
	}
	
	.pagination-nav .current {
	background-color:var(--accent-color);
	border-color:var(--accent-color);
	color:#fff;
	cursor:default
	}
	
	@media (max-width: 600px) {
	.pagination-nav a,.pagination-nav span {
	padding:.4rem .8rem;
	margin:0 3px;
	font-size:.9rem
	}
	}
	
	.city-item[style*="display: none"] {
	display:none!important
	}
	
	.city-search-input {
	width:100%;
	padding:.6rem 1rem;
	grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--container-bg);
	color:var(--text-color);
	font-size:1rem
	}
	
	.social-share {
	max-width:800px;
	margin:1.5rem auto;
	padding:1rem;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	background-color:var(--element-bg)
	}
	
	.social-share h3 {
	text-align:center;
	margin-bottom:1rem;
	font-size:1.2rem;
	color:var(--accent-color)
	}
	
	.social-buttons {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:.5rem
	}
	
	.social-button {
	display:flex;
	align-items:center;
	padding:.5rem 1rem;
	border-radius:var(--border-radius);
	text-decoration:none;
	color:#fff;
	font-weight:600;
	transition:opacity .2s
	}
	
	.social-button:hover {
	opacity:.9
	}
	
	.social-button img {
	margin-right:.5rem;
	filter:invert(1)
	}
	
	.social-button.twitter {
	background-color:#1DA1F2
	}
	
	.social-button.facebook {
	background-color:#1877F2
	}
	
	.social-button.whatsapp {
	background-color:#25D366
	}
	
	.social-button.telegram {
	background-color:#08c
	}
	
	@media (max-width: 480px) {
	.social-buttons {
	flex-direction:column
	}
	
	.social-button {
	width:100%;
	justify-content:center
	}
	}
	
	.city-item a {
	font-size:1rem;
	padding:.5rem;
	border-radius:var(--border-radius);
	color:var(--text-color);
	display:block;
	background-color:var(--element-bg);
	transition:background-color .3s ease
	}
	
	.city-item a:hover {
	background-color:var(--accent-hover);
	color:#fff
	}
	
	@media (min-width: 1024px) {
	.city-pagination button {
	font-size:1.2rem;
	padding:.8rem 1.5rem
	}
	}
	
	@media (max-width: 480px) {
	.city-items-container ul {
	grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
	gap:5px;
	margin:0;
	padding:0
	}
	
	.city-item {
	margin:0;
	padding:5px
	}
	
	.city-search-wrapper {
	padding:0
	}
	
	.city-search-container input {
	padding:.6rem 1rem;
	font-size:1rem
	}
	}
	
	.time-search-wrapper {
	display:flex;
	justify-content:space-between;
	gap:10px;
	margin-bottom:2rem
	}
	
	.time-search-container {
	position:relative;
	flex:1
	}
	
	.time-search-container input {
	width:100%;
	padding:10px;
	font-size:1rem;
	border-radius:var(--border-radius,8px);
	border:1px solid #c8c8ff33;
	background-color:#1e233299;
	color:#ffffffe6;
	outline:none
	}
	
	.time-search-container input:focus {
	border-color:#5e6eec99;
	box-shadow:0 0 0 2px #5e6eec4d
	}
	
	.time-search-container label {
	color:var(--accent-color);
	margin-bottom:5px;
	display:block
	}
	
	.time-search-container input::placeholder {
	color:#c8c8ff80
	}
	
	.time-difference-section {
	max-width:800px;
	margin:2rem auto;
	padding:1.5rem;
	background-color:var(--container-bg);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	box-shadow:0 2px 10px #0000001a
	}
	
	.time-difference-display {
	font-size:1.2rem;
	font-weight:600;
	color:var(--accent-color);
	text-align:center;
	margin:1.5rem 0
	}
	
	.city-cards-container {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:2rem;
	gap:1rem
	}
	
	.city-card {
	flex:1;
	padding:1.5rem;
	background-color:var(--container-bg);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius,8px);
	text-align:center;
	transition:transform 0.2s,box-shadow .2s;
	box-shadow:0 2px 10px #0000001a;
	position:relative;
	cursor:pointer
	}
	
	.city-card:hover {
	transform:translateY(-3px);
	box-shadow:0 5px 15px #0000001a
	}
	
	.city-card h3 {
	margin-top:0;
	margin-bottom:1rem;
	font-size:1.4rem;
	color:var(--text-color)
	}
	
	.time-info {
	display:flex;
	flex-direction:column;
	gap:.5rem
	}
	
	.current-time {
	font-size:2rem;
	font-weight:700;
	color:var(--accent-color)
	}
	
	.time-date {
	font-size:.9rem;
	font-weight:600;
	color:var(--text-color);
	opacity:.7
	}
	
	.time-diff-indicator {
	display:flex;
	align-items:center;
	justify-content:center;
	padding:.75rem;
	background-color:var(--accent-color);
	color:#fff;
	border-radius:50%;
	font-weight:700;
	width:3.5rem;
	height:3.5rem;
	position:relative;
	z-index:5
	}
	
	.time-diff-indicator::before,.time-diff-indicator::after {
	content:'';
	position:absolute;
	height:2px;
	background-color:var(--accent-color);
	width:3rem;
	z-index:2
	}
	
	.time-diff-indicator::before {
	right:100%;
	margin-right:10px
	}
	
	.time-diff-indicator::after {
	left:100%;
	margin-left:10px
	}
	
	.city-dropdown {
	position:absolute;
	top:100%;
	left:0;
	right:0;
	background-color:var(--container-bg);
	border:1px solid var(--border-color);
	border-radius:0 0 8px 8px;
	box-shadow:0 5px 15px #0000001a;
	max-height:250px;
	overflow-y:auto;
	z-index:100;
	display:none;
	margin-top:5px
	}
	
	.city-dropdown.show {
	display:block
	}
	
	.city-dropdown-item {
	padding:10px 15px;
	color:var(--text-color);
	cursor:pointer;
	transition:background-color .2s;
	text-align:left
	}
	
	.city-dropdown-item:hover {
	background-color:var(--accent-color);
	color:#fff
	}
	
	@media (max-width: 768px) {
	.time-search-wrapper {
	flex-direction:column
	}
	
	.city-cards-container {
	flex-direction:column
	}
	
	.time-diff-indicator {
	margin:1rem 0
	}
	
	.time-diff-indicator::before,.time-diff-indicator::after {
	width:2px;
	height:3rem
	}
	
	.time-diff-indicator::before {
	right:50%;
	top:0;
	transform:translateY(-100%);
	margin-right:0;
	margin-top:-10px
	}
	
	.time-diff-indicator::after {
	left:50%;
	bottom:0;
	transform:translateY(100%);
	margin-left:0;
	margin-bottom:-10px
	}
	}
	
	.city-dropdown-item.highlight {
	background-color:#5e6eec33
	}
	
	.city-dropdown {
	max-height:300px;
	overflow-y:auto;
	scrollbar-width:thin;
	scrollbar-color:#5e6eec99 #1e23324d
	}
	
	.city-dropdown::-webkit-scrollbar {
	width:6px
	}
	
	.city-dropdown::-webkit-scrollbar-thumb {
	background-color:#5e6eec99;
	border-radius:3px
	}
	
	.city-dropdown::-webkit-scrollbar-track {
	background-color:#1e23324d
	}
	
	.date-calculator-container {
	background:var(--bg-color);
	padding:2rem 1rem
	}
	
	.date-calculator-container .date-calculator-header h1 {
	font-size:3rem;
	background:linear-gradient(45deg,var(--accent-color),var(--accent-hover));
	-webkit-background-clip:text;
	-webkit-text-fill-color:var(--text-color)!important;
	margin-bottom:.5rem;
	background-clip:unset!important
	}
	
	.date-calculator-container .date-calculator-subtitle,.date-calculator-container label {
	color:var(--text-color);
	opacity:.7
	}
	
	.date-calculator-container .card.date-calculator-inner {
	max-width:900px;
	margin:0 auto;
	background:var(--container-bg)!important;
	border:none!important;
	border-radius:var(--border-radius)!important;
	box-shadow:var(--shadow-default,0 0.5rem 1rem #0000000d)!important
	}
	
	.date-calculator-container .card:hover {
	transform:translateY(-.25rem);
	box-shadow:0 1rem 2rem #0000001a
	}
	
	.date-calculator-container .seo-text,.date-calculator-container .result-card {
	background:var(--container-bg)!important;
	color:var(--text-color)!important
	}
	
	.date-calculator-container .tabs {
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:1rem;
	margin-bottom:2rem
	}
	
	.date-calculator-container .tab {
	text-align:center;
	padding:.75rem;
	border-radius:var(--border-radius);
	background:var(--border-color);
	color:var(--text-color);
	cursor:pointer;
	font-weight:600;
	transition:background .3s ease
	}
	
	.date-calculator-container .tab.active {
	background:var(--accent-color);
	color:#fff
	}
	
	.date-calculator-container .tab:hover:not(.active) {
	background:var(--accent-hover);
	color:#fff
	}
	
	.date-calculator-container .tab-content {
	display:none;
	animation:fadeIn .5s
	}
	
	.date-calculator-container .tab-content.active {
		display: block;
		height: auto !important; /* Переопределяем фиксированную высоту */
		min-height: 170px; /* Используем минимальную высоту вместо фиксированной */
	}
	
	@keyframes fadeIn {
	from {
	opacity:0
	}
	
	to {
	opacity:1
	}
	}
	
	.date-calculator-container .form-group {
	margin-bottom:1rem;
	}
	
	.date-calculator-container .date-group {
	display:flex;
	align-items:baseline;
	gap:.5rem
	}

	  /* Более компактный вид для строки с годами, месяцами и днями */
	  .date-calculator-container #add .date-group label {
		min-width: 60px;
		text-align: left;
	  }
	
	.date-calculator-container .date-group label {
	margin:0;
	width:auto;
	min-width:120px;
	text-align:center;
	font-size:18px;
	font-weight:600;
	margin:5px;
	margin-right:.5rem;
	color:var(--text-color);
	opacity:.85;
	white-space:nowrap
	}
	
	.date-calculator-container input {
	width:auto;
	max-width:250px;
	padding:.75rem;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	transition:border-color .3s ease,box-shadow .3s ease
	}
	
	.date-calculator-container input:focus {
	outline:none;
	border-color:var(--accent-color);
	box-shadow:0 0 0 3px #4e73df33
	}
	
	.date-calculator-container button {
	display:block;
	width:250px;
	background:var(--accent-color);
	color:#fff;
	border:none;
	padding:.75rem 1.5rem;
	border-radius:var(--border-radius);
	cursor:pointer;
	font-weight:600;
	transition:background .3s ease,transform .3s ease;
	margin:1rem auto 0
	}
	
	.date-calculator-container button:hover {
	background:var(--accent-hover);
	transform:translateY(-2px)
	}
	
	.date-calculator-container .result-card {
	background:var(--bg-color);
	border-left:4px solid var(--accent-color);
	padding:1.5rem;
	border-radius:var(--border-radius);
	margin-top:1.5rem;
	
	}
	
	.date-calculator-container .details {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
	gap:1rem
	}
	
	.date-calculator-container .detail-item {
	background:#6366f1;
	padding:.75rem;
	border-radius:var(--border-radius);
	box-shadow:var(--shadow-default,0 0.5rem 1rem #0000000d);
	text-align:center;
	transition:border-color .3s ease
	}
	
	.date-calculator-container .detail-item:hover {
	border-color:var(--accent-hover)
	}
	
	.date-calculator-container .date-display {
	background:var(--element-bg)!important;
	color:var(--text-color)!important;
	font-weight:600;
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	padding:.75rem 1rem;
	width:100%;
	box-sizing:border-box;
	font-size:1rem;
	line-height:1.2;
	margin-top:0;
	text-align:center
	}
	
	.date-calculator-header {
	background:none!important;
	text-align:center;
	padding:0 1rem
	}
	
	.date-calculator-header h1 {
	display:inline-block;
	background:none!important;
	margin:0 auto
	}
	
	.date-calculator-header p {
	margin:.5rem auto 2rem;
	font-weight:400
	}
	
	@media (max-width: 600px) {
	.date-calculator-header h1 {
	font-size:2rem;
	line-height:1.2
	}
	
	.date-calculator-header p {
	font-size:1rem;
	max-width:90%
	}
	}
	
	@media (min-width: 601px) and (max-width: 1023px) {
	.date-calculator-header h1 {
	font-size:2.5rem;
	line-height:1.2
	}
	
	.date-calculator-header p {
	font-size:1.1rem;
	max-width:80%
	}
	}
	
	@media (min-width: 1024px) {
	.date-calculator-header h1 {
	font-size:3rem;
	line-height:1.1
	}
	
	.date-calculator-header p {
	font-size:1.2rem;
	max-width:60%
	}
	}
	
	.date-calculator-container .date-input-container:focus-within .date-display {
	border-color:var(--accent-color);
	box-shadow:0 0 0 2px #5e6eec4d
	}
	
	@media (max-width: 600px) {
	.date-calculator-container .date-display {
	padding:.5rem .6rem
	}
	
	.date-calculator-container .date-group {
	flex-direction:column;
	align-items:anchor-center;
	gap:.25rem
	}
	
	.date-calculator-container .date-group label {
	min-width:150px;
	margin-bottom:.3rem
	}
	}
	
	.date-calculator-container .date-input-container {
	max-width:150px;
	position:relative;
	overflow:visible
	}
	
	.date-calculator-container .flatpickr-calendar {
	position:absolute!important;
	top:calc(100% + 4px)!important;
	left:0!important;
	margin:0!important;
	z-index:9999!important
	}
	
	.date-calculator-container .date-input-container .flatpickr-calendar {
	position:absolute!important;
	top:100%!important;
	left:0!important;
	margin:4px 0 0!important;
	z-index:9999!important;
	bottom:auto!important
	}

\n/* Language Switcher */\n.lang-switcher{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px 0;}\n.lang-switcher a{display:inline-block;padding:3px 7px;font-size:12px;font-weight:600;text-decoration:none;border-radius:4px;color:var(--text-color,#333);border:1px solid var(--border-color,#ddd);transition:background .2s,color .2s;line-height:1.4;}\n.lang-switcher a:hover,.lang-switcher a.active{background:var(--accent-color,#0073aa);color:#fff;border-color:var(--accent-color,#0073aa);}\n@media(max-width:600px){.lang-switcher a{padding:2px 5px;font-size:11px;}}\n