/* نمایش بصری هجاها (UI-02) */
.syl-scroll { overflow-x: auto; padding-bottom: 4px; text-align: center; }
.syl-grid { display: inline-grid; gap: 3px; justify-content: center; margin: 6px auto 2px; padding: 6px; }
.foot-box { background: #e9ecef; border: 1px solid #ced4da; border-radius: 8px; margin: -5px; }
.syl-word { text-align: center; font-size: 15px; color: #223; background: #fff; border: 1px solid #d5dbe6; border-radius: 4px; padding: 1px 4px; white-space: nowrap; position: relative; }
.syl-foot-name { text-align: center; font-size: 12px; color: #445; font-weight: bold; white-space: nowrap; position: relative; }
.syl { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 46px;
       border-radius: 6px; border: 1px solid #9fb3c8; font-size: 20px; line-height: 1.1; font-family: 'Times New Roman', serif; cursor: default; position: relative; }
.syl small { font-size: 9px; color: #667; font-family: monospace; }
.syl.long { min-width: 34px; background: #d7ebff; }
.syl.short { min-width: 24px; background: #e4f6e4; }
.syl.license { background: #fff3cd; border-color: #e0a800; }
.syl.wrong { background: #f8d7da; border-color: #dc3545; color: #721c24; font-weight: bold; }
.syl-legend { font-size: 12px; color: #555; margin-top: 6px; }
.syl-legend .syl { height: 20px; min-width: 22px; font-size: 13px; vertical-align: middle; }
@media (max-width: 576px) {
  .syl { height: 40px; font-size: 16px; }
  .syl.long { min-width: 26px; } .syl.short { min-width: 20px; }
  .syl small { font-size: 8px; } .syl-word { font-size: 12px; } .syl-foot-name { font-size: 10px; }
}
/* نتیجه‌ی اصلی (UI-03) */
.meter-title { font-size: 1.25rem; font-weight: bold; margin: 0 0 2px; }
.meter-title .arkan { font-weight: normal; color: #444; }
.meter-symbol { direction: ltr; font-family: monospace; letter-spacing: 3px; color: #777; font-size: 0.85rem; margin: 0; }
.rf-box { border: 1px solid #b9dcc0; background: #eaf6ec; border-radius: 6px; padding: 6px 8px; height: 100%; }
.rf-box .rf-label { font-size: 12px; color: #4a6; display: block; }
.alt-box { font-size: 13px; background: #f1f2f4; border: 1px solid #dde; border-radius: 6px; padding: 4px 10px; display: inline-block; text-align: right; }
.footnote { font-size: 12px; color: #666; text-align: right; margin-top: 8px; border-top: 1px solid #ddd; padding-top: 4px; }
.detail-toggle { text-align: right; font-weight: bold; }

/* اشتراک‌گذاری و امتیازدهی (FEAT-10 / UI-05) */
.share-box { margin-top: 18px; padding: 10px 12px; border: 1px dashed #9fb3c8; border-radius: 8px; text-align: center; }
.share-box .sb-title { font-size: 13px; color: #556; margin-bottom: 6px; }
.share-box .btn { margin: 2px; }
#fb-fix { display: none; margin-top: 8px; }
#fb-fix select { max-width: 420px; display: inline-block; }

/* انتخاب تلفظ (FEAT-04) */
.syl-word.pron { cursor: pointer; border-bottom: 2px dotted #1ca4df; }
.syl-word.pron:hover, .syl-word.pron:focus { background: #e3f4fc; outline: none; }
.syl-word.pron-on { background: #fff3cd; border-color: #e0a800; }
#pron-pop { position: absolute; z-index: 1050; background: #fff; border: 1px solid #9fb3c8; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: 6px; min-width: 220px; text-align: right; font-size: 13px; }
#pron-pop button { display: block; width: 100%; text-align: right; border: 0; background: none; padding: 5px 8px; border-radius: 5px; cursor: pointer; }
#pron-pop button:hover { background: #eef6fb; }
#pron-pop button.sel { background: #fff3cd; font-weight: bold; }