/* حساب فرق العمر — v1.0.1 */
.hao-diff-calculator{
 --hao-green:#0B5B4A;--hao-green-dark:#073F35;--hao-green-mid:#126B58;--hao-orange:#FF681A;--hao-orange-dark:#E9570D;
 --hao-ink:#0B2530;--hao-text:#56656A;--hao-muted:#7B8B8B;--hao-surface:#FFFFFF;--hao-surface-2:#FAFBF9;
 --hao-soft-green:#EFF7F0;--hao-soft-orange:#FFF3E5;--hao-soft-blue:#EEF6FC;--hao-border:#E4E8E5;--hao-border-strong:#CAD5D1;
 --hao-danger:#B42318;--hao-danger-soft:#FFF1F0;--hao-success:#0B5B4A;--hao-shadow:0 20px 55px rgba(7,63,53,.10);--hao-shadow-soft:0 10px 28px rgba(11,37,48,.06);
 --hao-radius:20px;--hao-radius-sm:14px;font-family:"Tajawal",Arial,sans-serif;color:var(--hao-ink);direction:rtl;line-height:1.6;width:100%;max-width:100%;box-sizing:border-box;
}
.hao-diff-calculator *{box-sizing:border-box}
.hao-diff-calculator button,.hao-diff-calculator input,.hao-diff-calculator select{font:inherit}
.hao-diff-calculator button{appearance:none;-webkit-appearance:none}
.hao-diff-intro{padding:0 0 18px;text-align:center}
.hao-diff-intro p{margin:0;color:var(--hao-muted);font-size:14px}
.hao-diff-intro h2{margin:4px 0 5px;font-size:28px;line-height:1.3;color:var(--hao-ink)}
.hao-diff-startup{margin:0 0 12px;padding:10px 12px;border-radius:11px;background:var(--hao-soft-orange);color:var(--hao-orange-dark);font-size:13px;text-align:center}
.hao-diff-form{display:flex;flex-direction:column;gap:16px}
.hao-diff-people{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:stretch}
.hao-diff-person{min-width:0;padding:18px;border:1px solid var(--hao-border);border-radius:18px;background:var(--hao-surface);box-shadow:var(--hao-shadow-soft)}
.hao-diff-person-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.hao-diff-person-title{display:flex;align-items:center;gap:9px;font-weight:850;color:var(--hao-ink);font-size:18px}
.hao-diff-person-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--hao-soft-green);color:var(--hao-green);font-weight:900}
.hao-diff-person:nth-child(3) .hao-diff-person-icon{background:var(--hao-soft-orange);color:var(--hao-orange-dark)}
.hao-diff-name{margin-bottom:13px}
.hao-diff-label{display:block;margin:0 0 6px;color:var(--hao-ink);font-size:13px;font-weight:800}
.hao-diff-calculator input,.hao-diff-calculator select{width:100%;height:50px;border:1px solid var(--hao-border-strong);border-radius:12px;background:var(--hao-surface);color:var(--hao-ink);padding:0 13px;outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;font-size:15px}
.hao-diff-calculator input:focus,.hao-diff-calculator select:focus{border-color:var(--hao-green);box-shadow:0 0 0 3px rgba(11,91,74,.10)}
.hao-diff-calculator input::placeholder{color:#9AA8A5}
.hao-diff-segmented{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;border-radius:13px;background:var(--hao-surface-2);border:1px solid var(--hao-border);margin-bottom:13px}
.hao-diff-segment{min-height:44px;border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;color:var(--hao-muted)!important;font-weight:800!important;cursor:pointer!important;box-shadow:none!important;padding:8px 12px!important;font-size:14px!important}
.hao-diff-segment.is-active{background:var(--hao-green)!important;color:#fff!important;border-color:var(--hao-green)!important}
.hao-diff-segment:hover{color:var(--hao-green-dark)!important}
.hao-diff-segment.is-active:hover{color:#fff!important;background:var(--hao-green-dark)!important}
.hao-diff-calendar-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.hao-diff-fields{display:grid;grid-template-columns:.85fr 1.35fr 1fr;gap:9px}
.hao-diff-field{min-width:0}
.hao-diff-field-error{display:block;min-height:16px;margin-top:4px;color:var(--hao-danger);font-size:11px;line-height:1.45;font-weight:700}
.hao-diff-range{margin:7px 0 0;color:var(--hao-muted);font-size:11px;line-height:1.65}
.hao-diff-card-error{min-height:0;color:var(--hao-danger);font-size:12px;font-weight:750;margin-top:6px}
.hao-diff-person.has-error{border-color:#F0B5AF;background:linear-gradient(180deg,var(--hao-surface),var(--hao-danger-soft))}
.hao-diff-swap-wrap{display:flex;align-items:center;justify-content:center}
.hao-diff-swap{width:56px!important;min-width:56px!important;max-width:56px!important;height:56px!important;min-height:56px!important;max-height:56px!important;aspect-ratio:1/1!important;border-radius:999px!important;border:1px solid #F2CDAE!important;background:var(--hao-soft-orange)!important;color:var(--hao-orange-dark)!important;font-size:24px!important;font-weight:900!important;cursor:pointer!important;box-shadow:0 8px 20px rgba(233,87,13,.09)!important;transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle!important;line-height:1!important;padding:0!important;flex:0 0 56px!important;text-align:center!important}
.hao-diff-swap:hover{background:#FFE6D0!important;transform:rotate(180deg);box-shadow:0 12px 24px rgba(233,87,13,.15)!important}
.hao-diff-swap:focus-visible{outline:3px solid rgba(255,104,26,.18);outline-offset:2px}
.hao-diff-swap span{display:inline-flex;align-items:center;justify-content:center;line-height:1;transform:translateY(-1px)}
.hao-diff-global-error{margin:0;padding:10px 12px;border:1px solid #F3C1BC;border-radius:11px;background:var(--hao-danger-soft);color:var(--hao-danger);font-size:13px;font-weight:750;text-align:center}
.hao-diff-global-error[hidden]{display:none!important}
.hao-diff-primary{min-height:58px;border:1px solid var(--hao-orange)!important;border-radius:16px!important;background:var(--hao-orange)!important;color:#fff!important;font-size:19px!important;font-weight:900!important;cursor:pointer!important;box-shadow:0 10px 24px rgba(255,104,26,.16)!important;transition:background .18s ease,transform .18s ease,box-shadow .18s ease!important}
.hao-diff-primary:hover{background:var(--hao-orange-dark)!important;border-color:var(--hao-orange-dark)!important;color:#fff!important;transform:translateY(-1px);box-shadow:0 14px 28px rgba(233,87,13,.2)!important}
.hao-diff-primary:focus-visible{outline:3px solid rgba(255,104,26,.18);outline-offset:2px}
.hao-diff-contract{margin:4px 0 0;color:var(--hao-muted);font-size:14px;line-height:1.9;text-align:center}
.hao-diff-output{margin-top:18px;padding:26px;border:1px solid var(--hao-border);border-radius:20px;background:var(--hao-surface);box-shadow:var(--hao-shadow)}
.hao-diff-output[hidden]{display:none!important}
.hao-diff-result-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.hao-diff-result-title{margin:0;color:var(--hao-ink);font-size:clamp(28px,2vw,36px);line-height:1.25;font-weight:900;outline:none}
.hao-diff-reference{padding:8px 14px;border-radius:999px;background:var(--hao-soft-green);color:var(--hao-green-dark);font-size:14px;font-weight:800;white-space:nowrap}
.hao-diff-lead{margin:0 0 16px;padding:15px 18px;border-radius:15px;background:var(--hao-soft-green);color:var(--hao-green-dark);font-size:18px;line-height:1.9;font-weight:850;text-align:center}
.hao-diff-main-result{padding:22px;border-radius:17px;background:linear-gradient(135deg,var(--hao-green),var(--hao-green-dark));color:#fff;text-align:center}
.hao-diff-main-result span{display:block;font-size:16px;opacity:.85;font-weight:750}
.hao-diff-main-result strong{display:block;margin-top:4px;font-size:clamp(34px,2.6vw,48px);line-height:1.45;font-weight:900}
.hao-diff-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.hao-diff-stat{padding:18px 14px;border:1px solid var(--hao-border);border-radius:15px;background:var(--hao-surface-2);text-align:center}
.hao-diff-stat span{display:block;color:var(--hao-muted);font-size:14px;font-weight:750;line-height:1.7}
.hao-diff-stat strong{display:block;margin-top:6px;color:var(--hao-ink);font-size:clamp(19px,1.5vw,28px);line-height:1.6;font-weight:900;overflow-wrap:anywhere}
.hao-diff-stat:nth-child(1) strong{color:var(--hao-orange-dark)}
.hao-diff-stat:nth-child(2) strong,.hao-diff-stat:nth-child(4) strong{color:var(--hao-green-dark)}
.hao-diff-person-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.hao-diff-person-result{min-width:0;padding:18px;border:1px solid var(--hao-border);border-radius:15px;background:var(--hao-surface-2)}
.hao-diff-person-result-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.hao-diff-person-result h4{margin:0;color:var(--hao-ink);font-size:28px;line-height:1.3}
.hao-diff-role{padding:6px 10px;border-radius:999px;background:var(--hao-soft-blue);color:#166084;font-size:12px;font-weight:850}
.hao-diff-role.is-older{background:var(--hao-soft-green);color:var(--hao-green-dark)}
.hao-diff-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hao-diff-detail{min-width:0;padding:14px;border:1px solid var(--hao-border);border-radius:12px;background:var(--hao-surface)}
.hao-diff-detail span{display:block;color:var(--hao-muted);font-size:12px;font-weight:750;line-height:1.6}
.hao-diff-detail strong{display:block;margin-top:4px;color:var(--hao-ink);font-size:19px;line-height:1.75;font-weight:850;overflow-wrap:anywhere}
.hao-diff-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.hao-diff-action{min-height:50px;border:1px solid var(--hao-border-strong)!important;border-radius:999px!important;background:var(--hao-surface)!important;color:var(--hao-green-dark)!important;font-size:17px!important;font-weight:850!important;cursor:pointer!important;box-shadow:none!important}
.hao-diff-action:hover{background:var(--hao-soft-green)!important;border-color:var(--hao-green)!important}
.hao-diff-action-primary{background:var(--hao-green)!important;color:#fff!important;border-color:var(--hao-green)!important}
.hao-diff-action-primary:hover{background:var(--hao-green-dark)!important;color:#fff!important}
.hao-diff-action-reset{color:var(--hao-orange-dark)!important}
.hao-diff-action-reset:hover{background:var(--hao-soft-orange)!important;border-color:#F0C6A3!important}
.hao-diff-status{min-height:0;margin:0;text-align:center;color:var(--hao-success);font-size:14px;font-weight:750}
.hao-diff-status.has-message{margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--hao-soft-green)}
@media(max-width:1100px){
 .hao-diff-stat strong{font-size:22px}
 .hao-diff-detail strong{font-size:17px}
}
@media(max-width:900px){
 .hao-diff-people{grid-template-columns:1fr}
 .hao-diff-swap-wrap{margin:-4px 0}
 .hao-diff-swap{transform:rotate(90deg)!important}
 .hao-diff-swap:hover{transform:rotate(270deg)!important}
 .hao-diff-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hao-diff-result-title{font-size:30px}
 .hao-diff-main-result strong{font-size:36px}
}
@media(max-width:767px){
 .hao-diff-person{padding:15px}
 .hao-diff-fields{grid-template-columns:.8fr 1.2fr}
 .hao-diff-field-year{grid-column:1/-1}
 .hao-diff-output{padding:18px}
 .hao-diff-result-head{flex-direction:column}
 .hao-diff-reference{white-space:normal;font-size:13px}
 .hao-diff-person-results{grid-template-columns:1fr}
 .hao-diff-actions{grid-template-columns:1fr 1fr}
 .hao-diff-action-reset{grid-column:1/-1}
 .hao-diff-result-title{font-size:28px}
 .hao-diff-lead{font-size:16px;padding:14px}
 .hao-diff-main-result span{font-size:14px}
 .hao-diff-main-result strong{font-size:29px}
 .hao-diff-stat{padding:16px 12px}
 .hao-diff-stat span{font-size:13px}
 .hao-diff-stat strong{font-size:20px}
 .hao-diff-person-result h4{font-size:22px}
 .hao-diff-detail strong{font-size:16px}
 .hao-diff-primary{font-size:17px!important;min-height:54px}
 .hao-diff-contract{font-size:13px}
}
@media(max-width:420px){
 .hao-diff-fields{grid-template-columns:1fr}
 .hao-diff-field-year{grid-column:auto}
 .hao-diff-stats,.hao-diff-detail-grid,.hao-diff-actions{grid-template-columns:1fr}
 .hao-diff-action-reset{grid-column:auto}
 .hao-diff-segment{font-size:12px!important;padding:7px 8px!important}
 .hao-diff-result-title{font-size:24px}
 .hao-diff-lead{font-size:15px}
 .hao-diff-main-result strong{font-size:25px}
 .hao-diff-stat strong{font-size:18px}
 .hao-diff-person-result h4{font-size:20px}
 .hao-diff-detail strong{font-size:15px}
 .hao-diff-reference{font-size:12px}
}
html.hao-dark .hao-diff-calculator{--hao-ink:#F4F8F6;--hao-text:#C5D0CD;--hao-muted:#9AAEAA;--hao-surface:#102122;--hao-surface-2:#0D1C1D;--hao-soft-green:#173532;--hao-soft-orange:#382820;--hao-soft-blue:#132B35;--hao-border:#29413D;--hao-border-strong:#3B5B54;--hao-danger:#FF8C86;--hao-danger-soft:#351F1E;--hao-success:#7DD6C2;--hao-shadow:0 24px 65px rgba(0,0,0,.28);--hao-shadow-soft:0 10px 30px rgba(0,0,0,.2);color-scheme:dark}
html.hao-dark .hao-diff-segment.is-active{background:#16735F!important}
html.hao-dark .hao-diff-primary{color:#fff!important}
html.hao-dark .hao-diff-person.has-error{background:linear-gradient(180deg,#102122,#351F1E)}
html.hao-dark .hao-diff-swap{background:#382820!important;border-color:#5B3B29!important;color:#FFAA76!important}
@media(prefers-reduced-motion:reduce){.hao-diff-calculator *,.hao-diff-calculator *::before,.hao-diff-calculator *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}