.hapyo-header { text-align: center; margin-bottom: 20px; }
.hapyo-header h2 { color: var(--inuzuka-red); margin: 0; }
.textarea-container textarea {
    width: 100%; height: 200px; padding: 15px;
    border-radius: 10px; border: 2px solid var(--card-border);
    background: var(--input-bg); color: var(--text-dark);
    font-size: 1rem; resize: none; margin-bottom: 15px; box-sizing: border-box;
}
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; color: var(--inuzuka-brown);}
.form-group select { width: 100%; padding: 12px; border-radius: 8px; border: 2px solid var(--card-border); background: var(--input-bg); color: var(--text-dark); }
.btn-primary { width: 100%; background: var(--inuzuka-red); color: white; border: none; padding: 15px; border-radius: 10px; font-weight: bold; cursor: pointer; transition: 0.3s; margin-bottom: 10px;}
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { width: 100%; background: var(--inuzuka-brown); color: white; border: none; padding: 15px; border-radius: 10px; font-weight: bold; cursor: pointer; transition: 0.3s;}
.tes-area { 
    background: var(--menu-bg); padding: 20px; border-radius: 10px; 
    border: 2px solid var(--card-border); font-size: 1.1rem; line-height: 1.8;
    white-space: pre-wrap; font-family: monospace; min-height: 200px; margin-bottom: 20px;
}
.hidden-word {
    display: inline-block; background: #ddd; color: transparent;
    border-bottom: 2px solid var(--inuzuka-dark); border-radius: 3px;
    user-select: none;
}
body.dark-mode .hidden-word { background: #444; border-bottom: 2px solid #aaa; }