:root { --primary: #2563eb; --bg: #f3f4f6; --white: #fff; }
body { font-family: sans-serif; background: var(--bg); margin: 0; color: #333; }
* { box-sizing: border-box; }

.container { display: flex; flex-wrap: wrap; gap: 20px; max-width: 1000px; margin: 20px auto; padding: 20px; }
.main-content { flex: 2; min-width: 300px; }
.sidebar { flex: 1; min-width: 250px; background: var(--white); padding: 20px; border-radius: 8px; }

nav { background: #1e293b; color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center; }
.logout-link { color: #ff6b6b; text-decoration: none; margin-left: 10px; }

.auth-box { max-width: 400px; margin: 50px auto; background: var(--white); padding: 2rem; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.landing-container { text-align: center; margin-top: 100px; }

input, textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; }
textarea { height: 120px; }

.btn { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; display: inline-block; font-weight: bold; }
.btn-primary { background: var(--primary); color: white; }
.full-width { width: 100%; }

.alert { padding: 10px; margin-bottom: 15px; border-radius: 5px; }
.error { background: #fee2e2; color: #991b1b; }
.success { background: #dcfce7; color: #166534; }

#result-area { margin-top: 20px; background: #e0f2fe; padding: 15px; border-radius: 5px; }
#output-text { white-space: pre-wrap; }