.ariages-widget{max-width:600px;margin:20px auto;background:#ffffff;border:1px solid #e0e0e0;border-radius:16px;box-shadow:0 8px 24px rgba(58, 58, 63, .15);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;overflow:hidden;}
.ariages-widget-header{background:linear-gradient(135deg, #3a3a3f 0%, #545459 100%);padding:24px;}
.ariages-widget-header h3{margin:0;font-size:22px;font-weight:600;color:#c8aa67;}
.ariages-widget-body{padding:32px 24px;}
.ariages-calculator-form{margin-bottom:20px;}
.ariages-form-group{margin-bottom:20px;}
.ariages-form-group label{display:block;margin-bottom:8px;font-weight:600;color:#3a3a3f;font-size:14px;}
.ariages-form-group input[type="text"],
.ariages-form-group input[type="date"],
.ariages-form-group input[type="number"],
.ariages-form-group select{width:100%;padding:12px 16px;border:2px solid #e0e0e0;border-radius:10px;font-size:16px;transition:border-color .25s, box-shadow .25s;box-sizing:border-box;background:#fafafa;color:#333;}
.ariages-form-group input:focus, .ariages-form-group select:focus{outline:none;border-color:#c8aa67;background:#fff;box-shadow:0 0 0 4px rgba(200, 170, 103, .12);}
.ariages-form-group input.ariages-field-error, .ariages-form-group select.ariages-field-error{border-color:#e74c3c;box-shadow:0 0 0 4px rgba(231, 76, 60, .1);}
.ariages-btn{display:inline-block;padding:13px 32px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s, box-shadow .2s;}
.ariages-btn-primary{background:linear-gradient(135deg, #3a3a3f 0%, #545459 100%);color:#c8aa67;}
.ariages-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(58, 58, 63, .3);}
.ariages-result{margin-top:28px;padding:24px;background:#fafafa;border-radius:12px;border-left:4px solid #c8aa67;}
.ariages-result-number{margin-bottom:24px;text-align:center;}
.ariages-result-number .ariages-label{display:block;font-size:14px;color:#666;margin-bottom:12px;font-weight:500;}
.ariages-result-number .ariages-number{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;background:linear-gradient(135deg, #3a3a3f 0%, #545459 100%);color:#c8aa67;font-size:36px;font-weight:bold;border-radius:50%;box-shadow:0 6px 20px rgba(58, 58, 63, .25);}
.ariages-result-interpretation h4{margin:0 0 14px;color:#3a3a3f;font-size:17px;}
.ariages-result-interpretation p{margin:0;line-height:1.75;color:#555;}
.ariages-compatibility-score{margin-bottom:24px;}
.ariages-score-bar{height:36px;background:#e0e0e0;border-radius:18px;overflow:hidden;margin-bottom:10px;}
.ariages-score-fill{height:100%;background:linear-gradient(135deg, #3a3a3f 0%, #545459 100%);transition:width .55s ease, background-color .55s ease;border-radius:18px;}
.ariages-score-text{display:block;text-align:center;font-size:17px;font-weight:600;color:#3a3a3f;}
.ariages-moon-display{display:flex;flex-direction:column;align-items:center;gap:24px;}
.ariages-moon-image{width:200px;height:200px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(58,58,63,.05) 0%, rgba(200,170,103,.05) 100%);border-radius:50%;padding:20px;box-shadow:0 8px 24px rgba(58, 58, 63, .1);}
.ariages-moon-circle{width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg, #f5f0e8 0%, #ebe4d6 100%);position:relative;overflow:hidden;box-shadow:0 0 40px rgba(200, 170, 103, .4), inset 0 0 20px rgba(200, 170, 103, .2);border:3px solid #c8aa67;}
.ariages-moon-shadow{position:absolute;top:0;height:100%;background:#3a3a3f;transition:width .5s ease;}
.ariages-moon-info{width:100%;max-width:500px;}
.ariages-moon-info > div{padding:14px 18px;margin-bottom:10px;background:#fff;border-radius:10px;border-left:4px solid #c8aa67;box-shadow:0 2px 8px rgba(58, 58, 63, .07);transition:transform .2s, box-shadow .2s;}
.ariages-moon-info > div:hover{transform:translateX(4px);box-shadow:0 4px 16px rgba(58, 58, 63, .14);}
.ariages-moon-info strong{display:inline-block;min-width:170px;color:#3a3a3f;font-weight:600;font-size:14px;}
.ariages-moon-info span{color:#555;font-size:15px;}
.ariages-moon-phase-name .ariages-moon-phase-value{color:#c8aa67;font-weight:600;font-size:16px;}
@media(max-width:768px){
.ariages-widget {
margin: 10px;
border-radius: 12px;
}
.ariages-widget-header {
padding: 18px;
border-radius: 12px 12px 0 0;
}
.ariages-widget-header h3 { font-size: 18px; }
.ariages-widget-body { padding: 20px 14px; }
.ariages-moon-image { width: 160px; height: 160px; }
.ariages-moon-circle { width: 120px; height: 120px; }
.ariages-moon-info strong { min-width: 130px; font-size: 13px; }
.ariages-moon-info span   { font-size: 14px; }
}