/* 1.8.1 · "you came from Mr & Miss Iran" note on IPN sign-in / sign-up */
.au-shs { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(212,175,55,.16), rgba(225,29,72,.10)); border: 1px solid rgba(212,175,55,.45); }
.au-shs__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #B8892B; color: #fff; }
.au-shs__ic .ic { width: 20px; height: 20px; }
.au-shs strong { display: block; font-size: 14.5px; }
.au-shs small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; opacity: .85; }
/* 1.8.2 · Mr & Miss Iran items in the sidebar + "your vote of this stage" card */
.ac-nav__sub--shs { border-inline-start-color: color-mix(in srgb, #D97706 55%, transparent); }
.ac-nav__n { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #E11D48; color: #fff; font-size: 11.5px; display: grid; place-items: center; }
.ac-nav__dot { margin-inline-start: auto; width: 9px; height: 9px; border-radius: 50%; background: #E11D48; box-shadow: 0 0 0 4px color-mix(in srgb, #E11D48 22%, transparent); animation: acDot 1.8s ease-in-out infinite; }
@keyframes acDot { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, #E11D48 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ac-nav__dot { animation: none; } }
.shs-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; border: 1px solid color-mix(in srgb, #E11D48 35%, transparent); background: linear-gradient(135deg, color-mix(in srgb, #E11D48 10%, var(--a-card, transparent)), color-mix(in srgb, #D97706 10%, var(--a-card, transparent))); }
.shs-vote > div { flex: 1 1 260px; } .shs-vote h3 { margin: 0 0 4px; font-size: 17px; } .shs-vote p { margin: 0; line-height: 1.65; opacity: .9; }
.shs-vote__ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #E11D48, #D97706); color: #fff; }
.shs-vote__ic .ic { width: 24px; height: 24px; }
.shs-vote.is-done { border-color: color-mix(in srgb, #059669 40%, transparent); background: color-mix(in srgb, #059669 9%, var(--a-card, transparent)); }
.shs-vote.is-done .shs-vote__ic { background: #059669; }
/* 1.8.2 · overview: every box uses the full width; programs and raffles share one row */
.ac-grid--full { grid-template-columns: minmax(0, 1fr); }
.ac-grid--full > .ac-span2, .ac-grid--full > .ac-card { grid-column: 1 / -1; }
.ac-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.ac-grid--full .ac-evgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* 1.8.3 · Mr & Miss Iran inside the account: entry form + that site's pages in a frame */
.cx-hero { margin-bottom: 18px; }
.cx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0 0 16px; padding: 0; counter-reset: s; }
.cx-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--a-card, #fff); border: 1px solid var(--a-line, rgba(0,0,0,.08)); font-weight: 700; font-size: 13.5px; opacity: .75; }
.cx-steps li b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--a-line, rgba(0,0,0,.08)); font-size: 13px; }
.cx-steps li.is-on { opacity: 1; border-color: color-mix(in srgb, #D97706 50%, transparent); }
.cx-steps li.is-on b { background: linear-gradient(135deg, #D97706, #E11D48); color: #fff; }
.cx-lead { line-height: 1.8; } .cx-us { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #B45309; } .cx-us .ic { width: 14px; height: 14px; }
html[data-mode="dark"] .cx-us { color: #FBBF24; }
.cx-as { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 16px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, #059669 10%, transparent); color: inherit; font-weight: 700; font-size: 13.5px; }
.cx-as .ic { width: 17px; height: 17px; color: #059669; }
.cx-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; }
.cx-opts legend { margin-bottom: 8px; font-weight: 700; font-size: 13.5px; }
.cx-opt { position: relative; cursor: pointer; }
.cx-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cx-opt > span { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--a-line, rgba(0,0,0,.12)); background: var(--a-card, #fff); transition: border-color .15s, box-shadow .15s; }
.cx-opt > span .ic { grid-row: span 2; width: 22px; height: 22px; color: #B45309; }
.cx-opt b { font-size: 14.5px; } .cx-opt small { opacity: .75; font-size: 12.5px; }
.cx-opt input:checked + span { border-color: #D97706; box-shadow: 0 0 0 4px color-mix(in srgb, #D97706 18%, transparent); }
.cx-opt input:focus-visible + span { outline: 2px solid #D97706; outline-offset: 2px; }
.cx-check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.7; font-size: 14px; }
.cx-check input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: #D97706; }
.cx-check a { color: #B45309; font-weight: 700; } html[data-mode="dark"] .cx-check a { color: #FBBF24; }
.cx-go { display: flex; justify-content: flex-end; }
.cx-tabs { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.cx-tabs a { display: inline-flex; align-items: center; gap: 6px; color: #B45309; font-weight: 700; text-decoration: none; } html[data-mode="dark"] .cx-tabs a { color: #FBBF24; }
.cx-tabs .ic { width: 16px; height: 16px; }
.cx-frame { position: relative; border-radius: 20px; overflow: hidden; background: var(--a-card, #fff); border: 1px solid var(--a-line, rgba(0,0,0,.08)); min-height: 420px; }
.cx-frame iframe { display: block; width: 100%; height: 640px; border: 0; background: transparent; opacity: 0; transition: opacity .25s; }
.cx-frame.is-ready iframe { opacity: 1; }
.cx-frame__wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; font-weight: 700; opacity: .8; }
.cx-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid color-mix(in srgb, #D97706 25%, transparent); border-top-color: #D97706; animation: cxSpin .8s linear infinite; }
@keyframes cxSpin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .cx-steps { grid-template-columns: 1fr 1fr; } .cx-opts { grid-template-columns: 1fr; } .cx-frame { border-radius: 14px; } }