*{box-sizing:border-box}body{display:flex;justify-content:center;background:linear-gradient(to right,#8e9eab,#eef2f3);color:#333;margin:0;padding:20px;min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.emotion-form{background-color:#fff;width:100%;max-width:700px;padding:30px 25px;border-radius:16px;box-shadow:0 8px 24px #0000001a;text-align:center}h1{font-size:28px;margin-bottom:20px;color:#2c3e50}h2{margin:10px 0}textarea{width:100%;min-height:120px;padding:12px;font-size:16px;border-radius:10px;border:1px solid #ccc;margin-bottom:15px;resize:vertical}input[type=file]{width:100%;padding:10px;border:2px dashed #ccc;border-radius:10px;background-color:#fdfdfd;cursor:pointer;margin-bottom:15px;transition:border-color .3s}input[type=file]:hover{border-color:#3498db}button{padding:12px 20px;background-color:#3498db;color:#fff;font-size:16px;font-weight:500;border:none;border-radius:10px;cursor:pointer;transition:background-color .3s,transform .2s}button:hover{background-color:#2980b9;transform:scale(1.02)}.showChart{margin-top:20px;padding-top:10px;border-top:1px solid #eee}.card-container-wrapper{position:relative}.card-container{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:30px}.emotion-card{padding:15px;width:160px;border-radius:12px;text-align:center;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #00000026;transition:transform .3s,box-shadow .3s}.emotion-card:hover{transform:scale(1.05);box-shadow:0 6px 16px #0003}.emotion-card h2{font-size:36px;margin:0}.emotion-card h3{font-size:18px;margin:10px 0 5px}.emotion-card p{font-size:16px;margin:5px 0}.emotion-card small{font-weight:400;color:#ffffffd9}.sentence-box{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#fff;border-radius:10px;padding:20px;z-index:1000;box-shadow:0 4px 12px #0003;max-width:400px;width:90%}.sentence-box h3{margin-bottom:10px}.sentence-box ul{list-style:none;padding:0;margin:0}.tip-box{background-color:#fffbea;border:1px solid #f1c40f;border-radius:10px;padding:15px 20px;margin:40px;font-size:16px;color:#7a6c00;box-shadow:0 2px 6px #0000000d}@media (max-width: 768px){.emotion-form{width:95%;padding:20px 15px}.emotion-card{width:100%;max-width:280px}.card-container{gap:15px}.sentence-box{width:95%;max-width:360px}.tip-box{margin:30px auto;padding:12px 16px;width:95%;font-size:15px}textarea{font-size:15px}button{width:100%;font-size:15px}}