/* همکاران معلم کلاس — partner pages (landing, signup form, panel).
   Builds on mkh-base.css tokens. Mobile-first; selectors are prefixed with .mkh-front so theme
   rules (Astra/Elementor input & button styles) do not override them. No external assets. */

.mkh-front { max-width: 1080px; margin: 0 auto; padding: 4px 0 40px; font-size: 15px; overflow-wrap: anywhere; container-type: inline-size; container-name: mkh; }
/* Layout follows the width of the content area (container queries), not the screen: themes differ. */
.mkh-front .mkh-grid.mkh-benefits { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.mkh-front .mkh-grid.mkh-ready-grid, .mkh-front .mkh-grid.mkh-kit-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.mkh-front .mkh-grid.mkh-tiers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.mkh-front img { max-width: 100%; height: auto; }
.mkh-front a { color: var(--mkh-ruby2); }
.mkh-front h2, .mkh-front h3, .mkh-front h4 { font-family: inherit; line-height: 1.6; }
.mkh-front p { margin: 0 0 10px; }
.mkh-front .mkh-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mkh-front [hidden] { display: none !important; }

/* Icons & bubbles */
.mkh-front .mkh-icon--sm { width: 18px; height: 18px; }
.mkh-front .mkh-icon--xs { width: 14px; height: 14px; }
.mkh-front .mkh-icon-bubble { flex: none; }
.mkh-front .mkh-icon-bubble--sm { width: 36px; height: 36px; }
.mkh-front .mkh-icon-bubble--sm .mkh-icon { width: 19px; height: 19px; }
.mkh-front .mkh-icon-bubble--lg { width: 68px; height: 68px; box-shadow: 0 0 0 6px var(--mkh-paper), 0 0 0 7.5px var(--mkh-gold); }
.mkh-front .mkh-icon-bubble--lg .mkh-icon { width: 32px; height: 32px; }

/* Buttons & actions */
.mkh-front .mkh-btn { min-height: 44px; line-height: 1.6; box-shadow: 0 4px 12px rgba(208, 16, 28, .18); }
.mkh-front .mkh-btn--ghost { box-shadow: none; background: var(--mkh-paper); }
.mkh-front .mkh-btn--sm { min-height: 40px; box-shadow: none; }
.mkh-front .mkh-btn--lg { min-height: 54px; padding: 12px 30px; font-size: 16px; border-radius: 14px; }
.mkh-front .mkh-btn[disabled], .mkh-front .mkh-btn.is-busy { opacity: .75; cursor: progress; }
.mkh-front .mkh-btn.is-done { background: var(--mkh-ok) !important; color: #fff !important; border-color: var(--mkh-ok) !important; }
.mkh-front .mkh-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mkh-front .mkh-spin { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: mkh-spin .8s linear infinite; flex: none; }
.mkh-front .mkh-linkbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; box-shadow: none; padding: 6px 2px; margin: 0; color: var(--mkh-ruby2); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--mkh-gold); min-height: 40px; }
.mkh-front .mkh-linkbtn:hover, .mkh-front .mkh-linkbtn:focus { background: none; color: var(--mkh-ruby); }
.mkh-front .mkh-linkbtn:focus-visible { outline: 3px solid var(--mkh-gold-soft); outline-offset: 2px; border-radius: 6px; }

/* Shared text helpers */
.mkh-front .mkh-muted { color: var(--mkh-muted); }
.mkh-front p.mkh-note, .mkh-front .mkh-note { display: block; font-size: 13px; color: var(--mkh-muted); text-align: center; text-align-last: center; margin: 10px 0 0; line-height: 1.8; }
.mkh-front .mkh-note .mkh-icon { vertical-align: -3px; margin-inline-end: 4px; }
.mkh-front .mkh-note .mkh-icon { color: var(--mkh-ruby2); }
.mkh-front .mkh-badge--ok { color: var(--mkh-ok); background: var(--mkh-ok-bg); display: inline-flex; align-items: center; gap: 4px; }
.mkh-front .mkh-badge--gold { color: var(--mkh-gold-text); background: var(--mkh-ivory); border: 1px solid var(--mkh-gold); }
.mkh-front .mkh-notice { display: flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.8; }
.mkh-front .mkh-notice--row { flex-wrap: wrap; }
.mkh-front .mkh-block { display: grid; gap: 12px; }
.mkh-front .mkh-card-title { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; margin: 0 0 14px; color: var(--mkh-ink); }
.mkh-front .mkh-card-title .mkh-icon { color: var(--mkh-ruby); }

/* Section headings with a gold → ruby ornament */
.mkh-front .mkh-section { margin-top: 40px; }
.mkh-front .mkh-section-title { font-size: clamp(19px, 4.6vw, 26px); margin: 0 0 10px; color: var(--mkh-ink); }
.mkh-front .mkh-section-title::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--mkh-gold), var(--mkh-ruby)); margin: 10px auto 0; }
.mkh-front .mkh-section-lead { max-width: 640px; margin: 0 auto 20px; color: var(--mkh-muted); text-align-last: center; }

/* ============================================================== Landing */
.mkh-front .mkh-hero { position: relative; text-align: center; padding: 26px 14px 24px; border-radius: 24px; border: 1px solid var(--mkh-line); background: radial-gradient(120% 90% at 50% 0%, var(--mkh-paper) 0%, var(--mkh-ivory) 48%, var(--mkh-blush) 100%); overflow: hidden; box-shadow: var(--mkh-shadow); }
.mkh-front .mkh-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--mkh-gold), var(--mkh-ruby), var(--mkh-gold)); }
.mkh-front .mkh-hero-art { display: block; width: min(300px, 82%); height: auto; margin: 0 auto 4px; }
.mkh-front .mkh-eyebrow { display: inline-block; padding: 3px 16px; border: 1.5px solid var(--mkh-gold); border-radius: 999px; background: var(--mkh-paper); color: var(--mkh-gold-text); font-weight: 700; font-size: 13px; }
.mkh-front .mkh-hero-title { font-size: clamp(22px, 5.8vw, 34px); line-height: 1.55; margin: 12px auto 10px; max-width: 18em; color: var(--mkh-wine); }
.mkh-front .mkh-hero-intro { max-width: 680px; margin: 0 auto 18px; font-size: 15.5px; }
.mkh-front .mkh-hero-intro p:last-child { margin-bottom: 0; }

.mkh-front .mkh-benefit { text-align: center; padding: 22px 18px; transition: transform .2s, box-shadow .2s; }
.mkh-front .mkh-benefit:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(110, 20, 35, .10); }
.mkh-front .mkh-benefit h3 { font-size: 17px; margin: 12px 0 6px; }
.mkh-front .mkh-benefit p { margin: 0; font-size: 14px; text-align-last: center; }
@container mkh (max-width: 480px) {
  .mkh-front .mkh-hero-intro p, .mkh-front .mkh-benefit p, .mkh-front .mkh-section-lead, .mkh-front .mkh-cta-band p { text-align: center; }
}

.mkh-front .mkh-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
.mkh-front .mkh-step { position: relative; text-align: center; padding: 0 12px 40px; }
.mkh-front .mkh-step:last-child { padding-bottom: 0; }
.mkh-front .mkh-step-dot { position: relative; z-index: 1; width: 66px; height: 66px; border-radius: 50%; background: var(--mkh-paper); border: 2px solid var(--mkh-gold); color: var(--mkh-ruby); display: inline-grid; place-items: center; box-shadow: var(--mkh-shadow); }
.mkh-front .mkh-step-dot .mkh-icon { width: 28px; height: 28px; }
.mkh-front .mkh-step-dot b { position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--mkh-ruby); color: #fff; font-size: 13px; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--mkh-paper); }
.mkh-front .mkh-step h3, .mkh-front .mkh-step h4 { font-size: 16px; margin: 10px 0 4px; text-align: center; }
.mkh-front .mkh-step p { margin: 0 auto; max-width: 320px; font-size: 14px; color: var(--mkh-muted); text-align: center; }
.mkh-front .mkh-step:not(:last-child)::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 2px; height: 26px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--mkh-gold) 0 5px, transparent 5px 10px); }
@container mkh (min-width: 560px) {
  .mkh-front .mkh-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mkh-front .mkh-step { padding-bottom: 0; }
  .mkh-front .mkh-step:not(:last-child)::after { bottom: auto; top: 32px; width: auto; height: 2px; transform: none; right: calc(50% + 42px); left: calc(-50% + 42px); background: repeating-linear-gradient(to left, var(--mkh-gold) 0 6px, transparent 6px 12px); }
}
@container mkh (min-width: 560px) and (max-width: 699px) {
  .mkh-front .mkh-step { padding-inline: 6px; }
  .mkh-front .mkh-step p { font-size: 13px; }
}
.mkh-front .mkh-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.mkh-front .mkh-steps--3 .mkh-step { padding: 0 4px; }
.mkh-front .mkh-steps--3 .mkh-step-dot { width: 56px; height: 56px; }
.mkh-front .mkh-steps--3 .mkh-step-dot .mkh-icon { width: 24px; height: 24px; }
.mkh-front .mkh-steps--3 .mkh-step h4 { font-size: 15px; margin-top: 8px; }
.mkh-front .mkh-steps--3 .mkh-step p { font-size: 12.5px; line-height: 1.8; }
.mkh-front .mkh-steps--3 .mkh-step:not(:last-child)::after { bottom: auto; top: 27px; width: auto; height: 2px; transform: none; right: calc(50% + 36px); left: calc(-50% + 36px); background: repeating-linear-gradient(to left, var(--mkh-gold) 0 6px, transparent 6px 12px); }
@container mkh (min-width: 560px) {
  .mkh-front .mkh-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mkh-front .mkh-steps--3 .mkh-step-dot { width: 66px; height: 66px; }
  .mkh-front .mkh-steps--3 .mkh-step:not(:last-child)::after { top: 32px; right: calc(50% + 42px); left: calc(-50% + 42px); }
  .mkh-front .mkh-steps--3 .mkh-step p { font-size: 14px; }
}

.mkh-front .mkh-audience { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mkh-front .mkh-audience li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 5px 5px 16px; background: var(--mkh-paper); border: 1px solid var(--mkh-line); border-radius: 999px; font-weight: 600; color: var(--mkh-ink); font-size: 14px; box-shadow: var(--mkh-shadow); }

.mkh-front .mkh-faq { max-width: 760px; margin: 18px auto 0; display: grid; gap: 10px; }
.mkh-front .mkh-faq-item { background: var(--mkh-paper); border: 1px solid var(--mkh-line); border-radius: 14px; }
.mkh-front .mkh-faq-item[open] { border-color: var(--mkh-gold); }
.mkh-front .mkh-faq-item summary, .mkh-front .mkh-collapse summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; min-height: 52px; font-weight: 700; color: var(--mkh-ink); }
.mkh-front .mkh-faq-item summary::-webkit-details-marker, .mkh-front .mkh-collapse summary::-webkit-details-marker { display: none; }
.mkh-front .mkh-faq-arrow { color: var(--mkh-ruby); transform: rotate(-90deg); transition: transform .2s; }
.mkh-front details[open] > summary .mkh-faq-arrow { transform: rotate(90deg); }
.mkh-front .mkh-faq-item p { padding: 0 16px 14px; margin: 0; }

.mkh-front .mkh-cta-band { margin-top: 40px; text-align: center; padding: 30px 18px; background: linear-gradient(135deg, var(--mkh-blush), var(--mkh-ivory)); border: 1.5px solid var(--mkh-gold); }
.mkh-front .mkh-cta-band h2 { margin: 16px 0 6px; font-size: clamp(19px, 4.6vw, 24px); }
.mkh-front .mkh-cta-band p { max-width: 560px; margin: 0 auto 18px; text-align-last: center; }

/* ============================================================== Signup head */
.mkh-front .mkh-form-head { text-align: center; margin-bottom: 18px; }
.mkh-front .mkh-form-head h2 { margin: 16px 0 4px; font-size: clamp(20px, 5vw, 26px); }
.mkh-front .mkh-form-head p { max-width: 620px; margin: 0 auto 16px; text-align-last: center; }
.mkh-front .mkh-mini-steps { list-style: none; margin: 0 auto; padding: 0; display: flex; max-width: 560px; }
.mkh-front .mkh-mini-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; font-size: 12px; color: var(--mkh-muted); line-height: 1.5; }
.mkh-front .mkh-mini-steps li:not(:last-child)::after { content: ""; position: absolute; top: 16px; right: calc(50% + 20px); left: calc(-50% + 20px); height: 2px; background: var(--mkh-line); }
.mkh-front .mkh-mini-steps li.is-done::after { background: var(--mkh-ok); }
.mkh-front .mkh-mini-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--mkh-paper); border: 2px solid var(--mkh-line); font-weight: 700; color: var(--mkh-muted); }
.mkh-front .is-done .mkh-mini-dot { background: var(--mkh-ok); border-color: var(--mkh-ok); color: #fff; }
.mkh-front .is-current .mkh-mini-dot { background: var(--mkh-ruby); border-color: var(--mkh-ruby); color: #fff; box-shadow: 0 0 0 4px var(--mkh-blush); }
.mkh-front .is-current .mkh-mini-label { color: var(--mkh-ink); font-weight: 700; }

/* ============================================================== Forms */
.mkh-front .mkh-form { display: grid; gap: 16px; }
.mkh-front .mkh-fs { padding: 18px 16px 8px; }
.mkh-front .mkh-fs-title { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; margin: 0 0 16px; color: var(--mkh-ink); }
.mkh-front p.mkh-fs-help { text-align: center; color: var(--mkh-muted); font-size: 13px; margin: -8px 0 14px; }
.mkh-front .mkh-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; }
@container mkh (min-width: 600px) {
  .mkh-front .mkh-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkh-front .mkh-w-full { grid-column: 1 / -1; }
}
.mkh-front .mkh-field { margin-bottom: 14px; min-width: 0; }
.mkh-front .mkh-label { display: block; font-weight: 700; color: var(--mkh-ink); font-size: 14px; margin: 0 0 6px; line-height: 1.7; }
.mkh-front .mkh-req { color: var(--mkh-ruby); margin-inline-start: 3px; font-weight: 800; }

.mkh-front .mkh-input { display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 14px; border: 1.5px solid var(--mkh-line); border-radius: 12px; background: #fff; color: var(--mkh-ink); font: inherit; font-size: 15px; line-height: 1.6; box-shadow: none; transition: border-color .15s, box-shadow .15s, background .15s; -webkit-appearance: none; appearance: none; }
.mkh-front .mkh-input::placeholder { color: #A99593; opacity: 1; }
.mkh-front .mkh-input:focus { outline: none; border-color: var(--mkh-ruby2); box-shadow: 0 0 0 3px var(--mkh-blush); background: #fff; }
.mkh-front .mkh-input[dir="ltr"] { text-align: right; }
.mkh-front .mkh-input[dir="ltr"]:focus { text-align: left; }
.mkh-front .mkh-input[readonly] { background: var(--mkh-sand); }
.mkh-front textarea.mkh-input { min-height: 112px; resize: vertical; }
.mkh-front select.mkh-input { padding-left: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376605F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; background-size: 18px; cursor: pointer; }
.mkh-front select.mkh-input:disabled { opacity: .6; cursor: not-allowed; }

.mkh-front p.mkh-help { font-size: 12.5px; color: var(--mkh-muted); margin: 6px 0 0; line-height: 1.8; text-align: right; }
.mkh-front input[type="checkbox"], .mkh-front input[type="radio"] { accent-color: var(--mkh-ruby); }
.mkh-front p.mkh-help--ok { color: var(--mkh-ok); display: flex; gap: 4px; align-items: center; }
.mkh-front p.mkh-help--lock { color: var(--mkh-warn); display: flex; gap: 4px; align-items: center; }
.mkh-front p.mkh-err { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--mkh-ruby2); font-weight: 600; margin: 6px 0 0; line-height: 1.7; text-align: right; }
.mkh-front p.mkh-err::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A50E24' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") no-repeat center / contain; }
.mkh-front .is-invalid .mkh-input, .mkh-front .is-invalid .mkh-pill span, .mkh-front .is-invalid .mkh-chip span, .mkh-front .is-invalid .mkh-drop, .mkh-front .is-invalid .mkh-check { border-color: var(--mkh-ruby); }
.mkh-front .is-invalid .mkh-input { background: #FFFAFA; }

/* Pills (radio, yes/no) and chips (checkbox) */
.mkh-front .mkh-pills, .mkh-front .mkh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mkh-front .mkh-pill, .mkh-front .mkh-chip { position: relative; margin: 0; cursor: pointer; }
.mkh-front .mkh-pill input, .mkh-front .mkh-chip input, .mkh-front .mkh-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.mkh-front .mkh-pill span, .mkh-front .mkh-chip span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--mkh-line); background: #fff; color: var(--mkh-text); font-weight: 600; font-size: 14px; line-height: 1.6; transition: background .15s, border-color .15s, color .15s; user-select: none; }
.mkh-front .mkh-pill:hover span, .mkh-front .mkh-chip:hover span { border-color: var(--mkh-ruby2); }
.mkh-front .mkh-pill input:checked + span { background: var(--mkh-ruby); border-color: var(--mkh-ruby); color: #fff; }
.mkh-front .mkh-chip span { gap: 0; }
.mkh-front .mkh-chip span .mkh-icon { width: 0; opacity: 0; transition: width .15s, opacity .15s, margin .15s; }
.mkh-front .mkh-chip input:checked + span { background: var(--mkh-blush); border-color: var(--mkh-ruby2); color: var(--mkh-ruby2); }
.mkh-front .mkh-chip input:checked + span .mkh-icon { width: 16px; opacity: 1; margin-inline-end: 6px; }
.mkh-front .mkh-pill input:focus-visible + span, .mkh-front .mkh-chip input:focus-visible + span { outline: 3px solid var(--mkh-gold-soft); outline-offset: 2px; }
.mkh-front .mkh-pills--yesno { flex-wrap: nowrap; }
.mkh-front .mkh-pills--yesno .mkh-pill { flex: 1 1 0; }
.mkh-front .mkh-pills--yesno .mkh-pill span { width: 100%; }
.mkh-front .mkh-pills--yesno .mkh-pill:last-child input:checked + span { background: var(--mkh-seal); border-color: var(--mkh-seal); }

/* Jalali date: روز / ماه / سال */
.mkh-front .mkh-date { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr); gap: 8px; }
.mkh-front .mkh-date .mkh-input { padding-right: 10px; padding-left: 30px; background-position: left 8px center; background-size: 16px; }

/* Read-only account mobile */
.mkh-front .mkh-readonly { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; border-radius: 12px; background: var(--mkh-sand); border: 1.5px dashed var(--mkh-line); color: var(--mkh-ink); }
.mkh-front .mkh-readonly > .mkh-icon { color: var(--mkh-ruby2); }
.mkh-front .mkh-readonly-val { font-weight: 700; letter-spacing: .5px; }
.mkh-front span.mkh-readonly-val { font-weight: 500; letter-spacing: 0; font-size: 14px; }

/* Terms checkbox */
.mkh-front .mkh-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; padding: 12px 14px; border-radius: 12px; background: var(--mkh-ivory); border: 1.5px solid var(--mkh-gold); }
.mkh-front .mkh-check-box { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 8px; border: 2px solid var(--mkh-ruby2); background: #fff; color: #fff; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.mkh-front .mkh-check-box .mkh-icon { opacity: 0; }
.mkh-front .mkh-check input:checked + .mkh-check-box { background: var(--mkh-ruby); border-color: var(--mkh-ruby); }
.mkh-front .mkh-check input:checked + .mkh-check-box .mkh-icon { opacity: 1; }
.mkh-front .mkh-check input:focus-visible + .mkh-check-box { outline: 3px solid var(--mkh-gold-soft); outline-offset: 2px; }
.mkh-front .mkh-check-text { font-weight: 600; color: var(--mkh-ink); line-height: 1.8; }

/* Uploads */
.mkh-front .mkh-upload { display: grid; gap: 10px; }
.mkh-front .mkh-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mkh-front .mkh-files:empty { display: none; }
.mkh-front .mkh-file { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0; border: 1px solid var(--mkh-line); border-radius: 12px; background: #fff; }
.mkh-front .mkh-file.is-queued { border-style: dashed; background: var(--mkh-ivory); }
.mkh-front .mkh-file.is-uploading { opacity: .8; }
.mkh-front .mkh-file-thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--mkh-blush); color: var(--mkh-ruby); display: grid; place-items: center; text-decoration: none; }
.mkh-front .mkh-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkh-front .mkh-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.6; }
.mkh-front .mkh-file-name { color: var(--mkh-ink); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.mkh-front .mkh-file-meta small { color: var(--mkh-muted); font-size: 12px; }
.mkh-front .mkh-file .mkh-progress { height: 6px; margin-top: 4px; }
.mkh-front .mkh-file-del { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 10px; border: 1px solid var(--mkh-line); background: var(--mkh-paper); color: var(--mkh-ruby2); display: grid; place-items: center; cursor: pointer; box-shadow: none; }
.mkh-front .mkh-file-del:hover, .mkh-front .mkh-file-del:focus { background: var(--mkh-blush); color: var(--mkh-ruby2); border-color: var(--mkh-ruby2); }
.mkh-front .mkh-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 16px; min-height: 104px; text-align: center; border: 2px dashed var(--mkh-gold); border-radius: 14px; background: var(--mkh-ivory); cursor: pointer; transition: background .15s, border-color .15s; }
.mkh-front .mkh-drop:hover, .mkh-front .mkh-drop.is-drag { background: var(--mkh-blush); border-color: var(--mkh-ruby2); }
.mkh-front .mkh-drop:focus-within { outline: 3px solid var(--mkh-gold-soft); outline-offset: 2px; }
.mkh-front .mkh-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.mkh-front .mkh-drop-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--mkh-paper); color: var(--mkh-ruby); display: grid; place-items: center; box-shadow: var(--mkh-shadow); }
.mkh-front .mkh-drop-title { color: var(--mkh-ruby2); font-size: 15px; }
.mkh-front .mkh-drop small { color: var(--mkh-muted); font-size: 12px; line-height: 1.7; }
.mkh-front .mkh-upload-progress { display: grid; gap: 4px; }
.mkh-front .mkh-upload-status { font-size: 12px; color: var(--mkh-muted); text-align: center; }

/* Form footer */
.mkh-front .mkh-form-actions { display: flex; justify-content: center; padding: 4px 0; }
.mkh-front .mkh-sticky { position: sticky; bottom: 0; z-index: 5; padding: 16px 0 12px; background: linear-gradient(to top, var(--mkh-bg) 72%, rgba(255, 246, 245, 0)); }
.mkh-front .mkh-form-actions .mkh-btn { min-width: min(320px, 100%); }
.mkh-front p.mkh-terms-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 0; color: var(--mkh-muted); font-size: 13px; text-align: center; }
.mkh-front p.mkh-form-foot, .mkh-front p.mkh-hero-note { display: block; color: var(--mkh-muted); font-size: 13px; text-align: center; text-align-last: center; }
.mkh-front p.mkh-form-foot { margin: 0; }
.mkh-front p.mkh-hero-note { margin: 14px 0 0; }
.mkh-front p.mkh-form-foot .mkh-icon, .mkh-front p.mkh-hero-note .mkh-icon { vertical-align: -3px; margin-inline-end: 4px; }
.mkh-front .mkh-form-msg { margin: 0; }

/* ============================================================== Panel */
.mkh-front .mkh-panel-head { position: relative; text-align: center; padding: 24px 16px 18px; overflow: hidden; background: linear-gradient(160deg, var(--mkh-paper), var(--mkh-ivory) 58%, var(--mkh-blush)); }
.mkh-front .mkh-panel-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--mkh-gold), var(--mkh-ruby), var(--mkh-gold)); }
.mkh-front .mkh-avatar { width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center; overflow: hidden; background: var(--mkh-blush); color: var(--mkh-ruby); border: 3px solid var(--mkh-paper); box-shadow: 0 0 0 2px var(--mkh-gold); }
.mkh-front .mkh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mkh-front .mkh-avatar .mkh-icon { width: 36px; height: 36px; }
.mkh-front .mkh-panel-hello { font-size: clamp(19px, 4.8vw, 24px); margin: 2px 0 0; color: var(--mkh-wine); }
.mkh-front p.mkh-panel-sub { text-align: center; color: var(--mkh-muted); margin: 0 0 10px; font-size: 14px; }
.mkh-front .mkh-panel-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.mkh-front .mkh-code-chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 12px; border-radius: 999px; border: 1.5px solid var(--mkh-gold); background: var(--mkh-paper); color: var(--mkh-gold-text); font-size: 12px; font-weight: 700; line-height: 1.9; }
.mkh-front .mkh-code-chip bdi { color: var(--mkh-ink); letter-spacing: 1px; }
.mkh-front .mkh-welcome { margin-top: 12px; }
.mkh-front--panel > .mkh-status, .mkh-front--panel > .mkh-block, .mkh-front--panel > .mkh-collapse { margin-top: 16px; }

.mkh-front .mkh-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin: 16px 0 14px; padding: 4px 2px 8px; }
.mkh-front .mkh-tab { min-width: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; text-align: center; padding: 8px 12px; border-radius: 14px; background: var(--mkh-paper); border: 1px solid var(--mkh-line); color: var(--mkh-text); text-decoration: none !important; font-weight: 700; font-size: 13px; line-height: 1.5; transition: background .15s, color .15s, box-shadow .15s; }
.mkh-front .mkh-tab .mkh-icon { color: var(--mkh-ruby2); }
.mkh-front .mkh-tab:hover { background: var(--mkh-blush); color: var(--mkh-ink); }
.mkh-front .mkh-tab.is-active { background: var(--mkh-ruby); border-color: var(--mkh-ruby); color: #fff; box-shadow: 0 3px 8px rgba(208, 16, 28, .22); }
.mkh-front .mkh-tab.is-active .mkh-icon { color: #fff; }
.mkh-front .mkh-tab:focus-visible { outline: 3px solid var(--mkh-gold-soft); outline-offset: 2px; }
@container mkh (min-width: 700px) {
  .mkh-front .mkh-tabs { display: flex; flex-wrap: wrap; justify-content: center; }
  .mkh-front .mkh-tab { flex: 0 0 auto; flex-direction: row; min-height: 48px; font-size: 14px; padding: 8px 16px; }
}
.mkh-front .mkh-pane { display: grid; gap: 16px; animation: mkh-fade .25s ease; }

/* Status card in the status color */
.mkh-front .mkh-status { position: relative; overflow: hidden; text-align: center; padding: 22px 18px 18px; border-radius: var(--mkh-radius); background: var(--mkh-paper); border: 1.5px solid var(--st, var(--mkh-line)); box-shadow: var(--mkh-shadow); }
.mkh-front .mkh-status::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--st, var(--mkh-line)); }
.mkh-front .mkh-status-icon { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 4px; display: grid; place-items: center; background: var(--st-bg); color: var(--st); }
.mkh-front .mkh-status-icon .mkh-icon { width: 28px; height: 28px; }
.mkh-front .mkh-status-badge { color: var(--st); background: var(--st-bg); }
.mkh-front p.mkh-status-public { max-width: 580px; margin: 10px auto 4px; font-weight: 700; font-size: 16px; color: var(--mkh-ink); text-align: center; text-align-last: center; }
.mkh-front .mkh-status-msg { max-width: 620px; margin: 12px auto 0; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--st-bg); font-style: normal; }
.mkh-front .mkh-status-msg-title { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--st); }
.mkh-front .mkh-status-msg p { margin: 6px 0 0; color: var(--mkh-ink); text-align: center; }
.mkh-front .mkh-status-extra { max-width: 660px; margin: 10px auto 0; }
.mkh-front .mkh-status-extra p { text-align-last: center; }
.mkh-front .mkh-status-extra p:last-child { margin-bottom: 0; }
.mkh-front .mkh-status-since { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--mkh-muted); font-size: 12px; }
.mkh-front .mkh-status--approved { padding-top: 18px; }
.mkh-front .mkh-status--approved .mkh-status-icon { width: 46px; height: 46px; }

/* Link, code & QR */
.mkh-front .mkh-share-grid { display: grid; gap: 18px; align-items: center; }
@container mkh (min-width: 620px) { .mkh-front .mkh-share-grid { grid-template-columns: minmax(0, 1fr) auto; } }
.mkh-front .mkh-share-fields > p { text-align-last: center; }
.mkh-front .mkh-copyrow { display: flex; gap: 8px; align-items: stretch; margin: 0 0 12px; }
.mkh-front .mkh-copyrow .mkh-input { flex: 1; min-width: 0; font-size: 14px; text-align: left; }
.mkh-front .mkh-copyrow .mkh-btn { flex: none; }
.mkh-front .mkh-code-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; margin: 0 0 6px; border-radius: 12px; border: 2px dashed var(--mkh-gold); background: var(--mkh-paper); }
.mkh-front .mkh-code { font-size: 22px; font-weight: 800; letter-spacing: 3px; color: var(--mkh-wine); padding-inline-start: 6px; }
.mkh-front .mkh-qr-box { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mkh-front .mkh-qr { width: 172px; height: 172px; padding: 10px; background: #fff; border-radius: 14px; border: 1.5px solid var(--mkh-gold); display: grid; place-items: center; }
.mkh-front .mkh-qr svg { display: block; width: 100%; height: 100%; }
.mkh-front .mkh-qr--lg { width: 224px; height: 224px; }

/* KPI tiles */
.mkh-front .mkh-grid.mkh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container mkh (min-width: 700px) { .mkh-front .mkh-grid.mkh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mkh-front .mkh-kpi-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; }
.mkh-front .mkh-kpi-tile .mkh-icon-bubble { margin-bottom: 4px; }
.mkh-front .mkh-kpi-tile b { font-size: clamp(16px, 4.4vw, 22px); line-height: 1.5; }
.mkh-front .mkh-kpi-tile small { font-size: 11.5px; color: var(--mkh-muted); line-height: 1.6; }
.mkh-front .mkh-grid.mkh-mini-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mkh-front .mkh-mini-kpis .mkh-kpi { padding: 12px 6px; border-top-width: 4px; border-top-style: solid; }
.mkh-front .mkh-mini-kpis .mkh-kpi b { font-size: clamp(13px, 3.6vw, 18px); line-height: 1.6; }
.mkh-front .mkh-mini-kpis .mkh-kpi span { font-size: 12px; }
.mkh-front .mkh-kpi--warn { border-top-color: var(--mkh-warn); }
.mkh-front .mkh-kpi--info { border-top-color: #1E4E8C; }
.mkh-front .mkh-kpi--ok { border-top-color: var(--mkh-ok); }

/* Tiers */
.mkh-front .mkh-tier { text-align: center; padding: 22px 18px 18px; }
.mkh-front .mkh-tier-medal { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center; color: #fff; background: var(--tier, #A8643A); box-shadow: 0 0 0 4px var(--mkh-paper), 0 0 0 6px var(--tier-ring, #EBC9AE); }
.mkh-front .mkh-tier-medal .mkh-icon { width: 30px; height: 30px; }
.mkh-front .mkh-tier--0 { --tier: #A8643A; --tier-ring: #EBC9AE; }
.mkh-front .mkh-tier--1 { --tier: #7D8A96; --tier-ring: #D5DCE2; }
.mkh-front .mkh-tier--2 { --tier: #B8901C; --tier-ring: #F6DB8A; }
.mkh-front .mkh-tier--3 { --tier: #6E1423; --tier-ring: #FFE4E6; }
.mkh-front .mkh-tier h3 { margin: 4px 0 6px; font-size: 18px; }
.mkh-front .mkh-tier-track { max-width: 440px; margin: 14px auto 6px; }
.mkh-front .mkh-tier-ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--mkh-muted); }
.mkh-front p.mkh-tier-text { text-align: center; font-weight: 700; color: var(--mkh-ink); margin: 6px 0 4px; }
.mkh-front .mkh-tier-card { position: relative; text-align: center; padding: 20px 14px 16px; }
.mkh-front .mkh-tier-card.is-current { border: 2px solid var(--mkh-ruby); box-shadow: 0 8px 22px rgba(208, 16, 28, .12); }
.mkh-front .mkh-tier-card h4 { margin: 6px 0 2px; font-size: 16px; color: var(--mkh-ink); text-align: center; }
.mkh-front p.mkh-tier-need { text-align: center; font-size: 13px; color: var(--mkh-muted); margin: 0 0 6px; }
.mkh-front .mkh-tier-bonus { display: block; margin-bottom: 8px; color: var(--mkh-ruby2); }

/* Journey of a request under review */
.mkh-front .mkh-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.mkh-front .mkh-journey li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; margin: 0; }
.mkh-front .mkh-journey li:not(:last-child)::after { content: ""; position: absolute; top: 22px; right: calc(50% + 26px); left: calc(-50% + 26px); height: 2px; background: var(--mkh-line); }
.mkh-front .mkh-journey li.is-done::after { background: var(--mkh-ok); }
.mkh-front .mkh-journey-dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--mkh-paper); border: 2px solid var(--mkh-line); color: var(--mkh-muted); }
.mkh-front .is-done .mkh-journey-dot { background: var(--mkh-ok); border-color: var(--mkh-ok); color: #fff; }
.mkh-front .is-current .mkh-journey-dot { background: var(--mkh-ruby); border-color: var(--mkh-ruby); color: #fff; animation: mkh-pulse 2.4s ease-in-out infinite; }
.mkh-front .is-attention .mkh-journey-dot { background: var(--att-bg, #EFE7FA); border-color: var(--att, #6B3FA0); color: var(--att, #6B3FA0); }
.mkh-front .mkh-journey b { font-size: 12.5px; line-height: 1.6; color: var(--mkh-ink); }
.mkh-front .mkh-journey small { font-size: 11.5px; color: var(--mkh-muted); line-height: 1.5; }

/* Completeness ring */
.mkh-front .mkh-ring { position: relative; width: 120px; height: 120px; margin: 0 auto 6px; }
.mkh-front .mkh-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg) scale(1, -1); }
.mkh-front .mkh-ring circle { fill: none; stroke-width: 10; }
.mkh-front .mkh-ring-bg { stroke: var(--mkh-blush); }
.mkh-front .mkh-ring-fg { stroke: var(--mkh-ruby); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.mkh-front .mkh-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; color: var(--mkh-ink); }
.mkh-front .mkh-complete-card { text-align: center; }
.mkh-front .mkh-complete-card h3 { margin: 6px 0 4px; }
.mkh-front .mkh-complete-card p { max-width: 520px; margin: 0 auto 14px; text-align-last: center; }
.mkh-front .mkh-progress-card { display: grid; gap: 10px; align-items: center; text-align: center; }
.mkh-front .mkh-progress-card h3 { margin: 0 0 10px; }
.mkh-front .mkh-progress-card p { margin: 10px 0 0; text-align-last: center; }
@container mkh (min-width: 600px) { .mkh-front .mkh-progress-card { grid-template-columns: auto minmax(0, 1fr); gap: 22px; padding: 18px 26px; } }

/* Tables → stacked cards on phones */
.mkh-front .mkh-table-card { padding: 16px 12px; }
.mkh-front .mkh-table { margin: 0; }
.mkh-front .mkh-table tbody tr:nth-child(even) { background: rgba(251, 241, 236, .55); }
.mkh-front .mkh-table tr.is-negative td { color: var(--mkh-ruby2); }
.mkh-front .mkh-table a { text-decoration: none; font-weight: 600; }
.mkh-front .mkh-rate { display: inline-block; padding: 0 12px; border-radius: 999px; background: var(--mkh-blush); color: var(--mkh-ruby2); font-weight: 800; }
.mkh-front p.mkh-empty-row { text-align: center; color: var(--mkh-muted); margin: 12px 0 0; }
@container mkh (max-width: 600px) {
  .mkh-front .mkh-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mkh-front .mkh-table--cards, .mkh-front .mkh-table--cards tbody, .mkh-front .mkh-table--cards tr, .mkh-front .mkh-table--cards td { display: block; width: 100%; }
  .mkh-front .mkh-table--cards tr { margin: 0 0 10px; padding: 4px 12px; border: 1px solid var(--mkh-line); border-radius: 12px; background: #fff !important; }
  .mkh-front .mkh-table--cards td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--mkh-line); text-align: left; }
  .mkh-front .mkh-table--cards td:last-child { border-bottom: 0; }
  .mkh-front .mkh-table--cards td::before { content: attr(data-label); flex: none; color: var(--mkh-muted); font-size: 12.5px; font-weight: 600; text-align: right; }
  .mkh-front .mkh-table--rates tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; margin-bottom: 8px; padding: 10px 12px; }
  .mkh-front .mkh-table--rates td { display: block; width: auto; padding: 0; border: 0; text-align: right; }
  .mkh-front .mkh-table--rates td:first-child { grid-column: 1 / -1; line-height: 1.7; }
  .mkh-front .mkh-table--rates td:nth-child(2) { color: var(--mkh-muted); font-size: 13px; }
  .mkh-front .mkh-table--rates td:last-child { text-align: left; }
  .mkh-front .mkh-table--rates td::before { display: none; }
}
.mkh-front .mkh-search { position: relative; display: block; max-width: 380px; margin: 12px auto; }
.mkh-front .mkh-search .mkh-icon { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--mkh-muted); pointer-events: none; }
.mkh-front .mkh-search .mkh-input { padding-right: 42px; }
.mkh-front .mkh-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.mkh-front .mkh-pager-info { font-size: 13px; color: var(--mkh-muted); }

/* Empty states */
.mkh-front .mkh-empty { text-align: center; padding: 28px 18px; }
.mkh-front .mkh-empty h3 { margin: 16px 0 6px; font-size: 17px; }
.mkh-front .mkh-empty p { max-width: 540px; margin: 0 auto 14px; color: var(--mkh-muted); text-align-last: center; }

/* Long texts (benefits, terms) */
.mkh-front .mkh-prose h3 { font-size: 16px; margin: 18px 0 6px; color: var(--mkh-wine); }
.mkh-front .mkh-prose h3:first-child { margin-top: 0; }
.mkh-front .mkh-prose .mkh-card-title + p { text-align-last: center; }
.mkh-front .mkh-prose ol, .mkh-front .mkh-prose ul { margin: 0 0 10px; padding-inline-start: 30px; }
.mkh-front .mkh-prose ol { list-style-type: persian; }
.mkh-front .mkh-prose li { margin-bottom: 8px; text-align: justify; }
.mkh-front .mkh-terms-list li::marker { color: var(--mkh-ruby); font-weight: 700; }
.mkh-front .mkh-prose ul.mkh-rules { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.mkh-front .mkh-prose .mkh-rules li { position: relative; margin: 0; padding: 10px 42px 10px 14px; border: 1px solid var(--mkh-line); border-radius: 12px; background: var(--mkh-ivory); }
.mkh-front .mkh-rules li::before { content: ""; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%; background: var(--mkh-ruby) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 13px; }
.mkh-front .mkh-rules strong { color: var(--mkh-wine); }
@container mkh (max-width: 480px) {
  .mkh-front .mkh-prose .mkh-rules li { padding: 10px 36px 10px 10px; }
  .mkh-front .mkh-rules li::before { right: 10px; }
}
.mkh-front .mkh-figs .mkh-kpi-tile small { text-align: center; }

/* Ready texts & promo kit */
.mkh-front .mkh-ready { display: flex; flex-direction: column; gap: 10px; }
.mkh-front .mkh-ready h4 { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 15px; color: var(--mkh-ink); }
.mkh-front .mkh-ready h4 .mkh-icon { color: var(--mkh-ruby2); }
.mkh-front .mkh-ready-text { flex: 1; white-space: pre-wrap; unicode-bidi: plaintext; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--mkh-gold); background: var(--mkh-ivory); color: var(--mkh-ink); font-size: 14px; line-height: 2; text-align: right; }
.mkh-front .mkh-ready .mkh-copyrow { margin: 0; }
.mkh-front .mkh-kit-img img { display: block; width: 100%; border-radius: 12px; }
.mkh-front .mkh-linkbuilder { display: grid; gap: 10px; }
.mkh-front .mkh-linkbuilder .mkh-copyrow { margin: 0; }
.mkh-front p.mkh-note--center { justify-content: center; }

/* Read-only profile */
.mkh-front .mkh-collapse { padding: 6px 16px; }
.mkh-front .mkh-collapse summary { justify-content: center; }
.mkh-front .mkh-collapse summary .mkh-faq-arrow { margin-inline-start: auto; }
.mkh-front .mkh-collapse-body { display: grid; gap: 12px; padding: 4px 0 14px; }
.mkh-front .mkh-fs--view { padding: 0; }
.mkh-front .mkh-dl { margin: 0; }
.mkh-front .mkh-dl-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--mkh-line); }
.mkh-front .mkh-dl dt { flex: none; max-width: 45%; color: var(--mkh-muted); font-size: 13px; }
.mkh-front .mkh-dl dd { margin: 0; color: var(--mkh-ink); font-weight: 600; text-align: left; }

/* Terms dialog */
.mkh-front .mkh-modal { width: 100%; max-width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--mkh-text); }
.mkh-front .mkh-modal::backdrop { background: rgba(94, 14, 28, .45); }
.mkh-front .mkh-modal:not([open]) { display: none; }
.mkh-front .mkh-modal.is-fallback { display: block; position: fixed; inset: 16px; z-index: 99999; margin: auto; height: fit-content; }
.mkh-front .mkh-modal-box { display: flex; flex-direction: column; max-height: calc(100vh - 32px); overflow: hidden; border-radius: 18px; border: 1.5px solid var(--mkh-gold); background: var(--mkh-paper); box-shadow: 0 20px 50px rgba(94, 14, 28, .25); }
.mkh-front .mkh-modal-head { position: relative; display: flex; align-items: center; justify-content: center; padding: 14px 56px; border-bottom: 1px solid var(--mkh-line); background: var(--mkh-ivory); }
.mkh-front .mkh-modal-head h2 { margin: 0; font-size: 18px; }
.mkh-front .mkh-modal-x { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mkh-ink); display: grid; place-items: center; cursor: pointer; box-shadow: none; }
.mkh-front .mkh-modal-x:hover, .mkh-front .mkh-modal-x:focus { background: var(--mkh-blush); color: var(--mkh-ruby2); }
.mkh-front .mkh-modal-body { padding: 16px 18px; overflow-y: auto; overscroll-behavior: contain; }
.mkh-front .mkh-modal-foot { display: flex; justify-content: center; padding: 12px 16px; border-top: 1px solid var(--mkh-line); background: var(--mkh-ivory); }

/* Toast */
.mkh-front .mkh-toast { position: fixed; bottom: 92px; left: 50%; z-index: 99998; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); padding: 10px 20px; border-radius: 16px; background: var(--mkh-wine); color: #fff; font-weight: 700; font-size: 14px; text-align: center; box-shadow: 0 10px 26px rgba(94, 14, 28, .3); animation: mkh-fade .2s ease; }

@keyframes mkh-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes mkh-spin { to { transform: rotate(360deg); } }
@keyframes mkh-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--mkh-blush); } 50% { box-shadow: 0 0 0 9px rgba(255, 228, 230, .35); } }
.mkh-front .mkh-toast { animation-name: mkh-toast; }
@keyframes mkh-toast { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Theme page title above the panel: centered like the panel headings. */
body.mkh-partner-page .wp-block-post-title,
body.mkh-partner-page .entry-title,
body.mkh-partner-page .page-title { text-align: center; }

/* Cooperation rules: read and accepted inside the panel after approval. */
.mkh-front .mkh-accept { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mkh-front .mkh-accept .mkh-icon-bubble { width: 60px; height: 60px; box-shadow: 0 0 0 5px var(--mkh-paper), 0 0 0 6.5px var(--mkh-gold); }
.mkh-front .mkh-accept .mkh-icon-bubble .mkh-icon { width: 28px; height: 28px; }
.mkh-front .mkh-accept .mkh-card-title { justify-content: center; margin: 4px 0 0; }
.mkh-front .mkh-accept-lead { margin: 0; max-width: 560px; color: var(--mkh-ink); line-height: 1.9; text-align: center; }
.mkh-front .mkh-accept-text { align-self: stretch; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; margin-top: 6px; padding: 14px 16px; border: 1px solid var(--mkh-line); border-radius: 14px; background: var(--mkh-paper); text-align: justify; }
.mkh-front .mkh-accept-text p { text-align: justify; }
.mkh-front .mkh-accept .mkh-form-msg { align-self: stretch; }
.mkh-front .mkh-accept-actions { display: flex; justify-content: center; margin-top: 4px; }
@media (max-width: 600px) {
  .mkh-front .mkh-accept-text { max-height: 360px; padding: 12px; }
  .mkh-front .mkh-accept-actions .mkh-btn { width: 100%; }
}