:root{--primary-color:#2c3e50;--secondary-color:#3498db;--light-bg:#ecf0f1;--dark-text:#34495e;--white-color:#fff;--danger-color:#e74c3c;}
*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif;}
body{background-color:var(--light-bg);color:var(--dark-text);overflow-x:hidden;}
#app-container{display:flex;min-height:100vh;}
#sidebar-menu{width:220px;background:var(--primary-color);color:var(--white-color);padding-top:20px;transition:transform 0.3s ease;position:fixed;height:100%;z-index:1000;}
#sidebar-menu a{display:block;color:var(--white-color);padding:12px 15px;text-decoration:none;border-left:3px solid transparent;}
#sidebar-menu a:hover{background:rgba(255,255,255,0.1);}
#sidebar-menu a.active{border-left-color:var(--secondary-color);background:var(--secondary-color);}
#app-content{flex-grow:1;padding:20px;padding-bottom:80px;margin-left:220px;transition:margin-left 0.3s ease;}
#menu-toggle-btn{display:none;position:fixed;top:10px;left:10px;z-index:1001;background:var(--primary-color);color:var(--white-color);border:none;font-size:24px;padding:5px 10px;cursor:pointer;}
@media(max-width:768px){
#sidebar-menu{transform:translateX(-100%);}
#sidebar-menu.open{transform:translateX(0);}
#app-content{margin-left:0;}
#menu-toggle-btn{display:block;}
}
.btn{background-color:var(--secondary-color);color:var(--white-color);border:none;padding:8px 12px;border-radius:4px;cursor:pointer;transition:background-color 0.2s;margin:0 4px;}
.btn:hover{background-color:#2980b9;}
.delete-btn{background-color:var(--danger-color);}
.delete-btn:hover{background-color:#c0392b;}
h2,h3{color:var(--primary-color);margin-bottom:1rem;}
section{background:var(--white-color);padding:20px;border-radius:5px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
table{width:100%;border-collapse:collapse;}
th,td{padding:10px;border-bottom:1px solid #ddd;text-align:left;}
th{background:#f2f2f2;}
input[type="text"],input[type="password"],textarea,select{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;margin-bottom:10px;}
.edit-panel{background:var(--white-color);padding:20px;border-radius:5px;}
#floating-player-bar{position:fixed;bottom:0;left:0;width:100%;background:var(--primary-color);color:var(--white-color);display:flex;align-items:center;justify-content:space-between;padding:10px 20px;box-shadow:0 -2px 5px rgba(0,0,0,0.2);z-index:999;}
#player-track-info{flex-basis:30%;}
#player-controls{display:flex;justify-content:center;flex-basis:40%;}
#player-volume-control{display:flex;align-items:center;justify-content:flex-end;flex-basis:30%;}
#player-volume{width:100px;margin:0 5px;}
#playlist-items li{display:flex;justify-content:space-between;align-items:center;padding:10px;cursor:pointer;border-bottom:1px solid #eee;}
#playlist-items li:hover{background-color:#f9f9f9;}
#playlist-items li.playing{background-color:#e3f2fd;font-weight:bold;}
.playlist-controls .btn{padding:2px 6px;font-size:12px;}
.text-preview{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#test-voice {
width: 100%;
margin-bottom: 10px;
}
#test-rate, #test-pitch {
width: 200px;
margin-right: 10px;
}
#test-tts-btn {
margin-top: 15px;
display: block;
width: 100%;
padding: 10px;
}
.form-group {
margin-bottom: 15px;
}
.drag-handle {
cursor: move;
margin-right: 10px;
}
.notification {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background-color: var(--secondary-color);
color: white;
padding: 10px 20px;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000;
animation: fadeIn 0.3s;
}

@keyframes fadeIn {
from { opacity: 0; bottom: 50px; }
to { opacity: 1; bottom: 80px; }
}
#rate-value, #pitch-value {
    display: inline-block;
    min-width: 30px;
    text-align: center;
    font-weight: bold;
    color: var(--primary-color);
}