Create styles.css

Author: ThatSINEWAVE

styles.css

@@ -0,0 +1,147 @@
+:root {
+	--bg-dark: #1a202c;
+	--bg-card: #2d3748;
+	--text-primary: #ffffff;
+	--text-secondary: #cbd5e0;
+	--accent-color: #4299e1;
+	--error-color: #f56565;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	background-color: var(--bg-dark);
+	color: var(--text-primary);
+	line-height: 1.6;
+}
+
+.container {
+	max-width: 600px;
+	margin: 0 auto;
+	padding: 20px;
+}
+
+h1 {
+	text-align: center;
+	margin-bottom: 30px;
+	color: var(--text-primary);
+}
+
+.card {
+	background-color: var(--bg-card);
+	border-radius: 10px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	padding: 20px;
+}
+
+.tabs .tab-headers {
+	display: flex;
+	margin-bottom: 20px;
+}
+
+.tab-header {
+	flex: 1;
+	padding: 10px;
+	background-color: var(--bg-dark);
+	border: none;
+	color: var(--text-secondary);
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+}
+
+.tab-header.active {
+	background-color: var(--accent-color);
+	color: var(--text-primary);
+}
+
+.tab-content {
+	display: none;
+}
+
+.tab-content.active {
+	display: block;
+}
+
+.input-group {
+	margin-bottom: 15px;
+}
+
+.input-group label {
+	display: block;
+	margin-bottom: 5px;
+	color: var(--text-secondary);
+}
+
+.input-wrapper {
+	display: flex;
+	gap: 10px;
+}
+
+input,
+select {
+	width: 100%;
+	padding: 10px;
+	background-color: var(--bg-dark);
+	border: 1px solid #4a5568;
+	color: var(--text-primary);
+	border-radius: 5px;
+}
+
+select {
+	max-width: 150px;
+}
+
+.primary-btn {
+	width: 100%;
+	padding: 12px;
+	background-color: var(--accent-color);
+	color: var(--text-primary);
+	border: none;
+	border-radius: 5px;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+}
+
+.primary-btn:hover {
+	background-color: #3182ce;
+}
+
+.error-message {
+	color: var(--error-color);
+	margin-top: 10px;
+}
+
+.matches-section {
+	margin-top: 20px;
+	background-color: var(--bg-dark);
+	padding: 15px;
+	border-radius: 5px;
+}
+
+.matches-section h3 {
+	margin-bottom: 10px;
+	color: var(--text-secondary);
+}
+
+#matches-list {
+	max-height: 200px;
+	overflow-y: auto;
+}
+
+.match-item {
+	background-color: rgba(66, 153, 225, 0.1);
+	padding: 8px;
+	margin-bottom: 5px;
+	border-radius: 3px;
+}
+
+.coming-soon {
+	text-align: center;
+	color: var(--text-secondary);
+	padding: 50px 0;
+}