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

	body {
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		background: linear-gradient(135deg, #dddee0 0%, #68666a 100%);
		min-height: 100vh;
		padding: 0px;
	}

	.site-header {
		background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
		padding: 15px 0;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
		/* position: sticky; */
		top: 0;
		z-index: 1000;
	}

	.header-content {
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 20px;
	}

	.site-logo {
		display: flex;
		align-items: center;
		gap: 15px;
		text-decoration: none;
		color: white;
	}

	.logo-icon {
		width: 100px;
		height: 100px;
		background-color: white;
		/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		transition: transform 0.3s ease;
	}

	.site-logo:hover .logo-icon {
		transform: rotate(5deg) scale(1.05);
	}

	.logo-text {
		display: flex;
		flex-direction: column;
	}

	.logo-title {
		font-size: 1.5em;
		font-weight: 700;
		line-height: 1.2;
	}

	.logo-subtitle {
		font-size: 0.8em;
		opacity: 0.9;
		font-weight: 400;
	}

	.site-footer {
			background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
			color: white;
			padding: 40px 20px 20px;
			margin-top: 10px;
		}

		.footer-content {
			max-width: 1400px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 30px;
			padding: 0px;
			margin-bottom: 10px;
		}

		.footer-section h3 {
			margin-bottom: 15px;
			font-size: 1.2em;
		}

		.footer-section p,
		.footer-section ul {
			opacity: 0.9;
			line-height: 1.8;
		}

		.footer-section ul {
			list-style: none;
		}

		.footer-section a a:link, a:visited {
			color: white;
			text-decoration: none;
			opacity: 0.9;
			transition: opacity 0.3s ease;
		}



		.footer-section a:hover {
			opacity: 1;
			text-decoration: underline;
		}

		.footer-bottom {
			border-top: 1px solid rgba(255, 255, 255, 0.2);
			padding-top: 20px;
			text-align: center;
			opacity: 0.8;
			font-size: 0.9em;
		}

		.footer-logo {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 15px;
		}

		.footer-logo-icon {
			font-size: 2em;
		}

	.feature-image {
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 50%;
		max-height: 500px;
		border-radius: 15px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
		background-color: white;
		margin-top: 20px;
		transition: transform 0.3s ease;
		transform: scale(.8);
	}


	.container:hover .feature-image {
		transform: rotate(5deg) scale(1);
	}

	.site-nav {
		display: flex;
		gap: 10px;
		align-items: center;
		flex-wrap: wrap;
	}

	.nav-btn {
		padding: 10px 20px;
		background: rgba(255, 255, 255, 0.1);
		border: 2px solid rgba(255, 255, 255, 0.3);
		color: white;
		border-radius: 8px;
		cursor: pointer;
		font-size: 14px;
		font-weight: 600;
		transition: all 0.3s ease;
		text-decoration: none;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.nav-btn:hover {
		background: rgba(255, 255, 255, 0.2);
		border-color: rgba(255, 255, 255, 0.5);
		transform: translateY(-2px);
	}

	.nav-btn.active {
		background: white;
		color: #1e3c72;
		border-color: white;
	}

	.mobile-menu-toggle {
		display: none;
		background: rgba(255, 255, 255, 0.1);
		border: 2px solid rgba(255, 255, 255, 0.3);
		color: white;
		padding: 10px 15px;
		border-radius: 8px;
		cursor: pointer;
		font-size: 24px;
	}

	@media (max-width: 768px) {
		.site-nav {
			display: none;
			width: 100%;
			flex-direction: column;
		}

		.site-nav.mobile-open {
			display: flex;
		}

		.mobile-menu-toggle {
			display: block;
		}

		.nav-btn {
			width: 100%;
			justify-content: center;
		}
	}

	.page-wrapper {
		padding-top: 10px;
	}

	.container {
		max-width: 1400px;
		margin: 0 auto;
		background: lightgray;
		/* background: rgba(255, 255, 255, 0.98); */
		border-radius: 20px;
		padding: 30px;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
	}

	h1 {
		color: #000000;
		text-align: center;
		margin-bottom: 10px;
		font-size: 2.5em;
	}

	.subtitle {
		text-align: center;
		color: #666;
		margin-bottom: 30px;
		font-size: 1.1em;
	}

	.search-container {
		max-width: 600px;
		margin: 0 auto 40px;
	}

	.search-box {
		position: relative;
		margin-bottom: 20px;
	}

	.search-box input {
		max-width: 100%;
		padding: 18px 50px 18px 20px;
		border: 3px solid #667eea;
		border-radius: 50px;
		font-size: 18px;
		transition: all 0.3s ease;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.search-box input:focus {
		outline: none;
		box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
		transform: translateY(-2px);
	}

	.search-icon {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 24px;
		color: #667eea;
	}

	.tabs {
		display: flex;
		gap: 10px;
		justify-content: center;
		margin-bottom: 30px;
		flex-wrap: wrap;
	}

	.tab {
		flex: 1;
		min-width: 150px;
		padding: 15px 20px;
		background: #f0f0f0;
		border: none;
		border-radius: 10px;
		cursor: pointer;
		font-size: 16px;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.tab:hover {
		background: #e0e0e0;
		transform: translateY(-2px);
	}

		.tab.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
	}


	.tab-btn {
		padding: 12px 24px;
		background: #f0f0f0;
		border: 2px solid #ddd;
		border-radius: 25px;
		cursor: pointer;
		font-size: 16px;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.tab-btn:hover {
		background: #e0e0e0;
		transform: translateY(-2px);
	}

	.tab-btn.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border-color: #667eea;
	}

	.content-section {
		display: none;
		animation: fadeIn 0.4s ease;
	}

	.content-section.active {
		display: block;
	}

	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(20px); }
		to { opacity: 1; transform: translateY(0); }
	}

	.result-card {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 30px;
		border-radius: 15px;
		margin-bottom: 30px;
		box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
		/* display: none; */
	}

	.result-card.show {
		display: block;
		animation: slideIn 0.5s ease;
	}

	@keyframes slideIn {
		from { opacity: 0; transform: translateX(-30px); }
		to { opacity: 1; transform: translateX(0); }
	}

	.result-card h2 {
		font-size: 2em;
		margin-bottom: 15px;
		border-bottom: 2px solid rgba(255, 255, 255, 0.3);
		padding-bottom: 10px;
	}

	.result-info {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 15px;
		margin-top: 20px;
	}

	.info-item {
		background: rgba(255, 255, 255, 0.2);
		padding: 15px;
		border-radius: 10px;
		backdrop-filter: blur(10px);
	}

	.info-label {
		font-size: 0.9em;
		opacity: 0.9;
		margin-bottom: 5px;
	}

	.info-value {
		font-size: 1.3em;
		font-weight: 600;
	}

	.country-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 20px;
		margin-top: 20px;
	}

	.country-card {
		background: white;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		cursor: pointer;
		border: 2px solid transparent;
	}

	.country-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
		border-color: #667eea;
	}

	.country-name {
		font-size: 1.3em;
		font-weight: 600;
		color: #667eea;
		margin-bottom: 10px;
	}

	.prefix-list {
		color: #666;
		font-size: 0.95em;
		line-height: 1.6;
	}

	.continent-header {
		background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
		color: white;
		padding: 15px 25px;
		border-radius: 10px;
		margin: 30px 0 20px;
		font-size: 1.5em;
		font-weight: 600;
	}

	.filter-section {
		display: flex;
		gap: 15px;
		justify-content: center;
		margin-bottom: 25px;
		flex-wrap: wrap;
	}

	.filter-btn {
		padding: 10px 20px;
		background: white;
		border: 2px solid #667eea;
		border-radius: 20px;
		cursor: pointer;
		font-weight: 600;
		color: #667eea;
		transition: all 0.3s ease;
	}

	.filter-btn:hover,
	.filter-btn.active {
		background: #667eea;
		color: white;
	}

	.info-box {
		background: #e8f4f8;
		border-left: 4px solid #3498db;
		padding: 20px;
		margin: 20px 0;
		border-radius: 8px;
	}

	.info-box h3 {
		color: #2c3e50;
		margin-bottom: 10px;
	}

	.info-box ul {
		margin-left: 20px;
		line-height: 1.8;
	}

	@media (max-width: 768px) {
		h1 {
			font-size: 1.8em;
		}

		.country-grid {
			grid-template-columns: 1fr;
		}
	}

		.antenna-content {
			display: none;
		}

		.antenna-content.active {
			display: block;
			animation: fadeIn 0.3s ease;
		}

		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(10px); }
			to { opacity: 1; transform: translateY(0); }
		}

		.input-group {
			margin-bottom: 25px;
		}

		label {
			display: block;
			margin-bottom: 8px;
			color: #333;
			font-weight: 600;
		}

		input, select {
			width: 100%;
			padding: 12px;
			border: 2px solid #ddd;
			border-radius: 8px;
			font-size: 16px;
			transition: border-color 0.3s ease;
		}

		input:focus, select:focus {
			outline: none;
			border-color: #667eea;
		}

		.btn {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 15px 30px;
			border: none;
			border-radius: 10px;
			font-size: 18px;
			font-weight: 600;
			cursor: pointer;
			width: 100%;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}

		.btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
		}

		.results {
			margin-top: 30px;
			padding: 25px;
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			border-radius: 15px;
			display: none;
		}

		.results.show {
			display: block;
			animation: slideIn 0.5s ease;
		}

		@keyframes slideIn {
			from { opacity: 0; transform: translateX(-20px); }
			to { opacity: 1; transform: translateX(0); }
		}

		.result-item {
			margin-bottom: 15px;
			padding: 15px;
			background: white;
			border-radius: 10px;
			border-left: 4px solid #667eea;
		}

		.coax-result-label {
			font-weight: 600;
			color: #667eea;
			margin-bottom: 5px;
			color: white;
		}

		.result-value {
			font-size: 1.2em;
			color: #333;
		}

		.antenna-diagram {
			margin-top: 20px;
			padding: 20px;
			background: white;
			border-radius: 10px;
			text-align: center;
		}

		.diagram-svg {
			max-width: 100%;
			height: auto;
		}

		.warning-box {
			background: #fff3cd;
			border: 2px solid #ffc107;
			border-radius: 10px;
			padding: 15px;
			margin-bottom: 20px;
		}

		.warning-box h3 {
			color: #856404;
			margin-bottom: 10px;
		}

		.warning-box p {
			color: #856404;
			line-height: 1.6;
		}

		.grid-2col {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			padding-left: auto;
			padding-right: auto;
			gap: 20px;
		}

		.grid-3col {
			display: grid;
			grid-template-columns: auto auto auto;
			/* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
			padding-left: auto;
			padding-right: auto;
			gap: 20px;
		}



		/* Table Styles */
	   table {        
			width: 100%;
			border-collapse: collapse;
			background-color: white;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			margin-bottom: 20px;
		}
		th {
			background-color: #2c5282;
			color: white;
			padding: 12px;
			text-align: left;
			font-weight: bold;
		}
		td {
			padding: 10px 12px;
			border-bottom: 1px solid #e2e8f0;
			vertical-align: middle;
		}
		.callsign {
			font-weight: bold;
			color: #2c5282;
			font-size: 1.05em;
			white-space: nowrap;
		}
		.flag-cell {
			text-align: center;
			width: 60px;
		}
		.flag-img {
			width: 45px;
			height: auto;
			border: 1px solid #ddd;
		}
		.zone-cell {
			text-align: center;
			/* width: 60px; */
		}

		tbody tr:nth-child(4n+1) {
			background-color: #e6f2ff;
		}
		tbody tr:nth-child(4n+2) {
			background-color: #fff0e6;
		}
		tbody tr:nth-child(4n+3) {
			background-color: #e6ffe6;
		}
		tbody tr:nth-child(4n+4) {
			background-color: #ffe6f0;
		}
		tr:hover {
			opacity: 0.8;
		}
		tr:last-child td {
			border-bottom: none;
		}
		.info-note {
			background-color: #d1ecf1;
			border: 2px solid #17a2b8;
			border-radius: 5px;
			padding: 15px;
			margin-top: 20px;
		}
		.info-note h3 {
			margin-top: 0;
			color: #0c5460;
		}

	 .license-legend {
			display: flex;
			justify-content: center;
			gap: 20px;
			margin-bottom: 30px;
			flex-wrap: wrap;
			padding: 15px;
			background: #f8f9fa;
			border-radius: 10px;
		}

		.legend-item {
			display: flex;
			align-items: center;
			gap: 8px;
			font-weight: 600;
		}

		.legend-color {
			width: 25px;
			height: 25px;
			border-radius: 5px;
			border: 2px solid #333;
		}

		.tech { background: #ffd93d; }
		.general { background: #6bcf7f; }
		.extra { background: #74b9ff; }

		.band-selector {
			display: flex;
			gap: 10px;
			margin-bottom: 25px;
			flex-wrap: wrap;
			justify-content: center;
		}

		.band-btn {
			padding: 10px 20px;
			background: #f0f0f0;
			border: 2px solid #ddd;
			border-radius: 8px;
			cursor: pointer;
			font-size: 14px;
			font-weight: 600;
			transition: all 0.3s ease;
		}

		.band-btn:hover {
			background: #e0e0e0;
			transform: translateY(-2px);
		}

		.band-btn.active {
			background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
			color: white;
			border-color: #1e3c72;
		}

		.band-section {
			display: none;
			animation: fadeIn 0.4s ease;
		}

		.band-section.active {
			display: block;
		}

		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(10px); }
			to { opacity: 1; transform: translateY(0); }
		}

		.band-header {
			background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
			color: white;
			padding: 20px;
			border-radius: 10px;
			margin-bottom: 20px;
		}

		.band-header h2 {
			margin-bottom: 5px;
		}

		.band-header p {
			opacity: 0.9;
			font-size: 0.95em;
		}

		.segment-table {
			width: 100%;
			border-collapse: collapse;
			margin-bottom: 30px;
			background: white;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		}

		.segment-table thead {
			background: #2c3e50;
			color: white;
		}

		.segment-table th {
			padding: 15px;
			text-align: left;
			font-weight: 600;
		}

		.segment-table td {
			padding: 12px 15px;
			border-bottom: 1px solid #ecf0f1;
		}

		.segment-table tr:last-child td {
			border-bottom: none;
		}

		.segment-table tr:hover {
			background: #f8f9fa;
		}

		.freq-range {
			font-weight: 600;
			color: #1e3c72;
			white-space: nowrap;
		}

		.mode-badge {
			display: inline-block;
			padding: 4px 10px;
			border-radius: 5px;
			font-size: 0.85em;
			font-weight: 600;
			margin: 2px;
			white-space: nowrap;
		}

		.cw { background: #ffeaa7; color: #2d3436; }
		.phone { background: #a29bfe; color: white; }
		.digital { background: #fd79a8; color: white; }
		.image { background: #fdcb6e; color: #2d3436; }
		.all-modes { background: #00b894; color: white; }

        

		.notes {
			background: #e8f4f8;
			border-left: 4px solid #3498db;
			padding: 15px;
			margin-top: 20px;
			border-radius: 5px;
		}

		.notes h3 {
			color: #2c3e50;
			margin-bottom: 10px;
		}

		.notes ul {
			margin-left: 20px;
			line-height: 1.8;
		}

		@media (max-width: 768px) {
			.segment-table {
				font-size: 0.9em;
			}
            
			.segment-table th,
			.segment-table td {
				padding: 10px 8px;
			}

			h1 {
				font-size: 1.8em;
			}
		}

		.stats-banner {
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			padding: 20px;
			border-radius: 15px;
			margin-bottom: 30px;
			text-align: center;
		}

		.stats-banner h3 {
			color: #2c3e50;
			margin-bottom: 10px;
		}

		.stats-banner p {
			color: #666;
			font-size: 1.1em;
		}

        .category-filter {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 30px;
        }

        .category-btn {
            padding: 10px 20px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border: 2px solid #ddd;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
            color: #2c3e50;
            transition: all 0.3s ease;
        }

        .category-btn:hover,
        .category-btn.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
            transform: translateY(-2px);
        }

        .terms-container {
            display: grid;
            gap: 20px;
        }

        .term-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-left: 5px solid #667eea;
            transition: all 0.3s ease;
        }

        .term-card:hover {
            transform: translateX(5px);
            box-shadow: 0 6px 12px rgba(102, 126, 234, 0.2);
        }

        .term-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .term-name {
            font-size: 1.8em;
            font-weight: 700;
            color: #667eea;
        }

        .term-category {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: 600;
            color: white;
        }

        .cat-basics { background: #3498db; }
        .cat-operating { background: #e74c3c; }
        .cat-technical { background: #9b59b6; }
        .cat-modes { background: #f39c12; }
        .cat-equipment { background: #1abc9c; }
        .cat-abbreviations { background: #34495e; }
        .cat-phonetic { background: #e67e22; }

        .term-definition {
            font-size: 1.1em;
            line-height: 1.8;
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .term-example {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border-left: 3px solid #667eea;
            font-style: italic;
            color: #555;
            margin-top: 10px;
        }

        .term-aka {
            margin-top: 10px;
            font-size: 0.95em;
            color: #666;
        }

        .term-aka strong {
            color: #667eea;
        }

        .stats-banner {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 30px;
            text-align: center;
        }

        .stats-banner h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .no-results {
            text-align: center;
            padding: 60px 20px;
            color: #95a5a6;
        }

        .no-results-icon {
            font-size: 4em;
            margin-bottom: 20px;
        }



        .term-name {
            font-size: 1.4em;
        }


        .alphabet-filter {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px;
            margin-bottom: 30px;
        }

        .letter-btn {
            padding: 10px 15px;
            background: white;
            border: 2px solid #667eea;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            color: #667eea;
            transition: all 0.3s ease;
            min-width: 45px;
            text-align: center;
        }

        .letter-btn:hover,
        .letter-btn.active {
            background: #667eea;
            color: white;
            transform: translateY(-2px);
        }



		 .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 1.1em;
        }

        .calculator-section {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 30px;
        }

        .input-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .input-group label {
            font-weight: 600;
            color: #2c3e50;
        }

        .input-group select,
        .input-group input {
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        .input-group select:focus,
        .input-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .btn-calculate {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 40px;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            max-width: 300px;
            margin: 0 auto;
            display: block;
        }

        .btn-calculate:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        .results-section {
            display: none;
            background: white;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .results-section.show {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .results-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .results-header h2 {
            color: #667eea;
            font-size: 2em;
            margin-bottom: 10px;
        }

        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .result-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .result-label {
            font-size: 0.9em;
            opacity: 0.9;
            margin-bottom: 10px;
        }

        .coax-result-value {
            font-size: 2em;
            font-weight: 700;
        }

        .result-unit {
            font-size: 0.7em;
            opacity: 0.9;
        }

        .power-chart {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        }

        .power-bar-container {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            gap: 15px;
        }

        .power-label {
            min-width: 120px;
            font-weight: 600;
            color: #2c3e50;
        }

        .power-bar {
            flex: 1;
            height: 30px;
            background: #e0e0e0;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
        }

        .power-fill {
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 5px;
            transition: width 0.5s ease;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10px;
            color: white;
            font-weight: 600;
        }

        .info-box {
            background: #e8f4f8;
            border-left: 4px solid #3498db;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
        }

        .info-box h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .info-box ul {
            margin-left: 20px;
            line-height: 1.8;
        }

        .warning-box {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
        }

        .warning-box h3 {
            color: #856404;
            margin-bottom: 10px;
        }

        .coax-comparison {
            margin-top: 40px;
        }

        .coax-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .coax-table thead {
            background: #2c3e50;
            color: white;
        }

        .coax-table th,
        .coax-table td {
            padding: 15px;
            text-align: left;
        }

        .coax-table tbody tr:nth-child(even) {
            background: #f8f9fa;
        }

        .coax-table tbody tr:hover {
            background: #e3f2fd;
        }

        .loss-good { color: #27ae60; font-weight: 600; }
        .loss-fair { color: #f39c12; font-weight: 600; }
        .loss-poor { color: #e74c3c; font-weight: 600; }