:root {
  --bg:#f0f4f8; --card:#fff; --text:#333; --primary:#4cafef;
  --accent:#ff9800; --success:#4caf50; --danger:#ff5c5c;
}

body {margin:0;font-family:'Segoe UI',sans-serif;background:var(--bg);color:var(--text);transition:0.3s;}
.app-container{max-width:900px;margin:auto;padding:20px;}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
header h1{color:var(--primary);}

.card{
  background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
  padding:20px;border-radius:15px;margin-bottom:20px;
  box-shadow:0 6px 20px rgba(0,0,0,0.1);transition:0.3s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,0.15);}

input, select, button{
  width:100%;margin:6px 0;padding:10px;border-radius:10px;border:1px solid #ccc;font-size:14px;
}

button{background:var(--primary);color:white;border:none;cursor:pointer;transition:0.3s;}
button:hover{opacity:0.9;}

ul{list-style:none;padding:0;}
li{background:#f1f5f9;padding:12px;margin:6px 0;border-radius:10px;display:flex;justify-content:space-between;}

.progress-container{background:#ddd;border-radius:20px;height:18px;margin:10px 0;}
.progress-bar{background:var(--success);width:0%;height:100%;border-radius:20px;transition:0.5s;}

.ai-buttons button{margin:5px 5px 5px 0;font-size:12px;}

body.dark{--bg:#121212;--card:#1e1e1e;--text:#f4f4f4;}