/* Most of this code was generated by Github Copilot for the purposes of using AI as an accelerant and speeding up workflow */

*{box-sizing:border-box}
html,body{height:100%}
body {
		font-family: 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
		background: linear-gradient(-45deg, #001da1, #8000ff, #ff9011, #ff00d0);
		background-size: 400% 400%;
		animation: gradientShift 15s ease infinite;
		color: #1a1a2e;
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px;
}

.container{
		width: 100%;
		max-width: 1300px;
		text-align: center;
		margin: 0 auto;
}

.header{
		margin-bottom: 40px;
		animation: fadeIn 0.6s ease;
		grid-column: 1 / -1;
}

.header h1{
		font-size: 2.5rem;
		font-weight: 700;
		margin-bottom: 8px;
		color: white;
		text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.header p{
		font-size: 1.1rem;
		color: rgba(255,255,255,0.9);
}

.hidden{display:none !important}

.main-container{
		display: grid;
		grid-template-columns: 2fr 2fr;
		gap: 20px;
		margin-bottom: 20px;
}

.your-notes-section, .loading-section, .results-section {
		background: rgba(255,255,255,0.75);
		border-radius: 16px;
		border: 1px solid rgba(255,255,255,0.4);
		padding: 32px;
		box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
}

.your-notes-section h2, .results-section h2{
		font-size: 1.5rem;
		font-weight:700;
		color: #1a1a2e;
		text-align: center;
		margin-bottom: 12px;
}

.results-section-header{ text-align:left; margin-bottom:20px }
.results-section-header h2{ font-size:1.5rem; font-weight:700; color:#1a1a2e; margin-bottom:4px }

.card-subtitle{
		display:block;
		font-size:0.95rem;
		color: #666666;
		font-weight:400;
		margin-bottom:16px !important;
}

textarea{
		width:100%;
		padding:16px;
		border:1.5px solid #e0e0e0;
		border-radius:10px;
		font-family: 'Monaco', 'Menlo', monospace;
		font-size:14px;
		color:#1a1a2e;
		resize:vertical;
		background: rgba(255,255,255,0.8);
		transition: border-color .2s, background-color .2s;
		outline:none;
}

textarea:focus{ border-color:#667eea; background: white }

.notes-input{ min-height:280px; text-align:left }
.study-output{ min-height:350px; text-align:left; background:#f8f9ff }

.loading-spinner{
		width:60px; height:60px; margin:0 auto 20px;
		border:5px solid rgba(102,126,234,0.2);
		border-top-color:#667eea; border-radius:50%; animation: spin 1s linear infinite;
}

.loading-section h2{ font-size:1.4rem; color:#1a1a2e; margin-bottom:8px }
.loading-section p{ color:#666; font-size:0.95rem }

.generate-button, .copy-button{
		background: linear-gradient(135deg,#667eea,#764ba2);
		color:white; width:100%; padding:12px 28px; border:none; border-radius:8px;
		font-family: inherit; font-size:15px; font-weight:600; cursor:pointer; transition: all .2s; margin-top:20px;
}

.generate-button:hover, .copy-button:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(102,126,234,0.3) }
.generate-button:active, .copy-button:active{ transform:translateY(0) }

@media (max-width:900px){
		.main-container{ grid-template-columns:1fr }
		.your-notes-section, .results-section{ padding:20px }
}

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

@keyframes gradientShift{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

@keyframes spin{ to{ transform:rotate(360deg) } }