body { 
    background: #000; 
    color: #0ff; 
    font-family: 'Courier New', monospace; 
    margin: 0; 
    height: 100vh; 
    overflow: hidden; 
    display: flex; 
    flex-direction: row; 
}
aside { 
    width: 200px; 
    background: #111; 
    border-right: 0.125rem solid #0ff; 
    padding: 1.5rem; /* Upped padding for breathing room */
    height: 100%; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
}
aside h1 { 
    color: #0ff; 
    text-shadow: 0 0 0.25rem #0ff; 
    font-size: 1.5rem; 
    margin-bottom: 1.5rem; /* More space below title */
}
aside label { 
    color: #0ff; 
    text-shadow: 0 0 0.125rem #0ff; 
    font-size: 0.9rem; 
    margin-bottom: 0.5rem; /* Space before input */
}
aside input, aside select { 
    background: #222; 
    color: #0ff; 
    border: 0.0625rem solid #0ff; 
    padding: 0.5rem; 
    margin-bottom: 1rem; /* Upped gap between inputs */
    width: 100%; 
    box-sizing: border-box; 
}
aside button { 
    background: #0ff; 
    color: #000; 
    border: none; 
    padding: 0.5rem 1rem; 
    cursor: pointer; 
    width: 100%; 
    margin-bottom: 1rem; /* Upped gap between buttons */
}
aside button:hover { 
    background: #fff; 
    box-shadow: 0 0 0.25rem #0ff; 
}
aside .grok-link { 
    color: #0ff; 
    text-decoration: none; 
    text-align: center; 
    padding: 0.5rem 0; 
    margin-top: auto; 
    margin-bottom: 3rem; /* Space above bottom edge */
}
aside .grok-link:hover { 
    background: #0ff; 
    color: #000; 
}
main { 
    flex: 1; 
    padding: 1rem; 
    display: flex; 
    flex-direction: column; 
}
#rant-output { 
    background: #222; 
    border: 0.0625rem solid #0ff; 
    padding: 0.5rem; 
    flex: 1; 
    overflow-y: auto; 
}
.desc { 
    color: #0ff; 
    text-shadow: 0 0 0.125rem #0ff; 
    font-size: 0.9rem; 
    text-align: center; 
    padding: 0.5rem 0; 
}
#copy-feedback, #export-feedback { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: #111; 
    border: 0.125rem solid #0ff; 
    padding: 1.5rem; 
    box-shadow: 0 0 0.5rem #0ff; 
    z-index: 1000; 
    color: #0ff; 
    text-shadow: 0 0 0.25rem #0ff; 
    font-size: 1.2rem; 
    text-align: center; 
}

/* Mobile Styles */
@media (max-width: 768px) {
    body { flex-direction: column; }
    aside { 
        width: 100%; 
        height: auto; 
        position: static; 
        border-right: none; 
        border-bottom: 0.125rem solid #0ff; 
        padding: 1rem; /* Adjusted for mobile */
    }
    aside h1 { margin-bottom: 1rem; }
    aside label { margin-bottom: 0.25rem; }
    aside input, aside select { margin-bottom: 0.75rem; }
    aside button { margin-bottom: 0.75rem; }
    aside .grok-link { padding-bottom: 0.75rem; }
    main { padding: 0.5rem; }
    #rant-output { height: auto; flex: none; min-height: 50vh; }
}