/* app.css - صفحات الأعضاء: الرأس، التبويب السفلي، البطاقات، الملف الشخصي، النماذج (يحتاج base.css) */

/* ========= الرأس ========= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
}

.site-header-inner {
    max-width: var(--max);
    /* الارتفاع الكلي للرأس (مع حدّه السفلي 1px) = --header-h بالضبط، لأن صفحة الرسائل وغيرها تحسب عليه */
    height: calc(var(--header-h) - 1px);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: 2rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.brand:hover {
    color: var(--ink);
}

.main-nav {
    display: flex;
    align-self: stretch;
    gap: 0.25rem;
}

.main-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.85rem;
    color: var(--ink-soft);
    font-weight: 500;
    text-decoration: none;
}

.main-nav a:hover {
    color: var(--ink);
}

.main-nav a[aria-current="page"] {
    color: var(--ink);
}

.main-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline-start: 0.85rem;
    inset-inline-end: 0.85rem;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--beni);
}

.header-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.icon-link {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--ink-soft);
    text-decoration: none;
}

.icon-link:hover,
.icon-link[aria-current="page"] {
    background: var(--paper);
    color: var(--ink);
}

/* flex: none و max-width: none: في رأس مزدحم (زر اللغة، AdminHub...) لا تضيق الصورة فتصبح بيضاوية */
.header-avatar {
    flex: none;
    margin-inline-end: 0.35rem;
    border-radius: 50%;
}

.header-avatar img {
    width: 36px;
    max-width: none;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--line-strong);
}

.header-avatar[aria-current="page"] img {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--beni);
}

.nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--beni);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

/* Ludo in the header: a small red seal like the 縁 logo (rounded square, inner white line), so the game is easy to spot.
   The label shows on wide screens; the badge counts game invitations waiting for an answer */
.ludo-nav {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 38px;
    height: 38px;
    margin-inline: 0.2rem;
    padding: 0 0.8rem;
    border-radius: 10px;
    background: var(--beni);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 4px 12px rgba(var(--beni-rgb), 0.28);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ludo-nav i {
    font-size: 1.05rem;
}

.ludo-nav:hover,
.ludo-nav:focus-visible {
    background: var(--beni-deep);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), 0 6px 16px rgba(var(--beni-rgb), 0.35);
}

.ludo-nav[aria-current="page"] {
    background: var(--beni-deep);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 3px var(--beni-wash);
}

.ludo-nav .nav-badge {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    min-width: 19px;
    height: 19px;
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--surface);
    font-size: 0.68rem;
    animation: ludo-nav-call 1.6s ease-out 3;
}

@keyframes ludo-nav-call {
    0% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px rgba(35, 28, 43, 0.45); }
    100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 10px rgba(35, 28, 43, 0); }
}

@media (max-width: 1100px) {
    .ludo-nav {
        padding: 0;
    }

    .ludo-nav-label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ludo-nav,
    .ludo-nav .nav-badge {
        transition: none;
        animation: none;
    }
}

/* عدد الطلبات فوق أيقونة المشرف */
.icon-link-badge {
    position: relative;
}

.icon-link-badge .nav-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 0;
    min-width: 18px;
    height: 18px;
    font-size: 0.68rem;
}

/* ========= شارة "موثّق": ختم صغير بعلامة صح ========= */
/* ختم دائري بعلامة صح وحلقة داخلية فاتحة (مثل ختم الشعار): يُقرأ "موثّق" وليس مربع اختيار */
.verified-badge {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.1em;
    height: 1.1em;
    margin-inline-start: 0.35em;
    vertical-align: -0.12em;
    border-radius: 50%;
    background: var(--beni);
    color: #fff;
    font-size: 0.9em;
    box-shadow: inset 0 0 0 1.5px var(--beni), inset 0 0 0 2.5px rgba(255, 255, 255, 0.6);
}

.verified-badge i {
    font-size: 0.55em;
}

/* داخل عنوان كبير بخط المينتشو: حجم ثابت أصغر */
h1 .verified-badge {
    font-size: 0.5em;
    vertical-align: 0.35em;
}

.verified-badge-lg {
    width: 56px;
    height: 56px;
    margin: 0;
    font-size: 26px;
    border-radius: 12px;
    flex: none;
}

/* ========= القائمة الرئيسية المضغوطة (الحاسوب) =========
   حين لا يتسع الرأس (خمسة روابط مع Discover، أسماء طويلة مثل Знакомства أو Profilbesuche، زر AdminHub لفريق الإدارة)
   يضيف includes/nav.php الصنف is-compact قبل أول رسم: اسم الموقع يختفي (يبقى الختم) وكل رابط يصبح أيقونة فوق نص صغير،
   مثل الشريط السفلي للهاتف. النص لا يلتف أبداً */
.main-nav a {
    white-space: nowrap;
}

@media (min-width: 901px) {
    .site-header.is-compact .site-header-inner {
        gap: 1rem;
    }

    .site-header.is-compact .brand-name {
        display: none;
    }

    .site-header.is-compact .main-nav a {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding: 0 0.6rem;
        font-size: 0.75rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    .site-header.is-compact .main-nav a i {
        font-size: 1.05rem;
    }

    .site-header.is-compact .main-nav a[aria-current="page"]::after {
        inset-inline-start: 0.4rem;
        inset-inline-end: 0.4rem;
    }

    .site-header.is-compact .main-nav .nav-badge {
        position: absolute;
        top: 8px;
        inset-inline-start: calc(50% + 5px);
    }
}

/* ========= التبويب السفلي (الهاتف) ========= */
.tabbar {
    display: none;
}

@media (max-width: 900px) {
    .main-nav,
    .header-avatar {
        display: none;
    }

    /* بدون القائمة الرئيسية لا حاجة للفراغ الكبير، واسم الموقع يتقلص بدل أن يدفع الأزرار خارج الشاشة */
    .site-header-inner {
        gap: 0.75rem;
    }

    .brand {
        min-width: 0;
    }

    .brand-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tabbar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        inset-inline-start: 0;
        inset-inline-end: 0;
        bottom: 0;
        z-index: 50;
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--surface);
        border-top: 1px solid var(--line);
    }

    .tabbar a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--ink-faint);
        font-size: 0.6875rem;
        font-weight: 500;
        text-decoration: none;
    }

    .tabbar a i {
        font-size: 1.2rem;
    }

    .tabbar a[aria-current="page"] {
        color: var(--beni);
    }

    .tabbar a[aria-current="page"] i {
        font-weight: 900; /* أيقونة ممتلئة للتبويب الحالي */
    }

    .tabbar .nav-badge {
        position: absolute;
        top: 7px;
        inset-inline-start: calc(50% + 4px);
    }

    /* ستة تبويبات (مع Discover): النص لا يلتف ولا يخرج من عموده في أي لغة */
    .tabbar.has-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    /* سطر واحد أصغر قليلاً: كل الأسماء تتسع من 390px؛ على أصغر الهواتف تُختصر الكلمة الطويلة جداً (Nachrichten) بنقاط
       بدل أن تنكسر في وسطها */
    .tabbar.has-6 a > span {
        max-width: 100%;
        padding: 0 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.625rem;
        letter-spacing: -0.01em;
        line-height: 1.3;
    }

    body.app {
        padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) {
    .brand {
        gap: 0.5rem;
        font-size: 1.05rem;
    }
}

/* ========= تخطيط الصفحة ========= */
/* التذييل يبقى أسفل الشاشة حتى في الصفحات القصيرة */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.page {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(1.25rem, 2.5vw, 2rem) var(--gutter) 2.5rem;
}

.page-narrow {
    max-width: 920px;
}

.page-title {
    margin-bottom: 0.4rem;
}

.page-intro {
    margin-bottom: 1.5rem;
    color: var(--ink-soft);
}

.section {
    margin-top: 2.25rem;
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
}

.section-head p {
    color: var(--ink-soft);
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

/* ========= التحية في لوحة التحكم ========= */
/* لوحة بلون الحبر مع توهج أحمر خفيف وختم 縁 كعلامة مائية: نفس هوية صفحة الدخول */
.greeting {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--r-panel);
    background:
        radial-gradient(120% 150% at 100% 0%, rgba(var(--beni-rgb), 0.45) 0%, rgba(var(--beni-rgb), 0) 55%),
        var(--ink);
    color: #fff;
}

.greeting-seal {
    position: absolute;
    top: 50%;
    inset-inline-end: clamp(-1.5rem, 1vw, 1.5rem);
    z-index: -1;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(9rem, 16vw, 13rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    transform: translateY(-50%) rotate(-8deg);
    pointer-events: none;
    user-select: none;
}

/* الصورة بحلقة حمراء وحالة التوفر الحالية */
.greeting-avatar {
    position: relative;
    display: block;
    border-radius: 50%;
}

.greeting-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--beni);
}

.greeting-avatar .status-dot-lg {
    position: absolute;
    inset-inline-end: 0;
    bottom: 2px;
    width: 16px;
    height: 16px;
    border: 3px solid var(--ink);
}

.greeting-hello {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.greeting h1 {
    margin-top: 0.1rem;
    color: #fff;
    font-size: var(--step-4);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.greeting-sub {
    margin-top: 0.4rem;
    color: rgba(255, 255, 255, 0.75);
}

.greeting-sub a {
    margin-inline-start: 0.2rem;
    color: #fff;
    font-weight: 700;
    text-decoration-color: rgba(255, 255, 255, 0.45);
}

/* مفتاح حالة التوفر: ثلاثة خيارات متجاورة، المختار أبيض */
.status-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.9rem;
}

.status-switch fieldset {
    display: inline-flex;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.05);
}

.status-chip {
    position: relative;
    cursor: pointer;
}

.status-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.status-chip > span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 32px;
    padding: 0 0.85rem;
    border-radius: var(--r-pill);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.status-chip:hover > span {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.status-chip input:checked + span {
    background: #fff;
    color: var(--ink);
    font-weight: 700;
}

.status-chip input:focus-visible + span {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.status-chip .status-dot-lg {
    width: 9px;
    height: 9px;
}

.status-switch-msg {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

/* نص مختصر للهاتف فقط ("Offline" بدل "Appear offline") */
.status-chip-short {
    display: none;
}

.greeting-edit {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.greeting-edit:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.greeting a:focus-visible {
    outline-color: rgba(255, 255, 255, 0.85);
}

/* أرقام سريعة: كل رقم رابط لصفحته */
.greeting-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.greeting-stats a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.greeting-stats a:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.greeting-stats strong {
    font-family: var(--font-display);
    font-size: 1.625rem;
    line-height: 1.1;
}

.greeting-stats span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}

.greeting-stats i {
    width: 1.1em;
    color: rgba(255, 255, 255, 0.5);
}

/* رسائل جديدة: بارزة بالأحمر */
.greeting-stats .has-news {
    border-color: var(--beni);
    background: rgba(var(--beni-rgb), 0.25);
}

.greeting-stats .has-news i,
.greeting-stats .has-news span {
    color: #fff;
}

.completeness {
    grid-column: 1 / -1;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.completeness p {
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
}

.completeness strong,
.completeness a {
    color: #fff;
    font-weight: 700;
}

.greeting .meter {
    background: rgba(255, 255, 255, 0.15);
}

.greeting .meter-goal {
    background: #fff;
}

.meter {
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--line);
    overflow: hidden;
}

.meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--beni);
}

.form-section.completeness-card > p {
    margin-bottom: 0.75rem;
    color: var(--ink);
}

/* علامة الهدف (الحد الأدنى للدردشة) على شريط الاكتمال */
.meter-with-goal {
    position: relative;
    overflow: visible;
}

.meter-goal {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 14px;
    border-radius: 1px;
    background: var(--ink);
}

@media (max-width: 600px) {
    /* بطاقة الترحيب مختصرة: زر التعديل أيقونة دائرية بجانب الاسم بدل زر بعرض الشاشة */
    /* الهاتف: الصورة والتحية والاسم وزر التعديل في صف، والجملة الوصفية بعرض البطاقة تحتها */
    .greeting {
        gap: 0 0.9rem;
    }

    .greeting-text {
        display: contents;
    }

    .greeting-avatar {
        grid-row: 1 / span 2;
    }

    .greeting-hello {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .greeting h1 {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        font-size: var(--step-3);
    }

    .greeting-edit {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .greeting-sub {
        grid-column: 1 / -1;
        margin-top: 0.9rem;
        font-size: 0.95rem;
    }

    /* الهاتف: الخيارات الثلاثة بعرض البطاقة وبأحجام متساوية */
    .status-switch {
        grid-column: 1 / -1;
    }

    .status-switch fieldset {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    /* كل خيار يملأ ثلثه بالضبط */
    .status-chip > span {
        display: flex;
        justify-content: center;
        width: 100%;
        min-height: 38px;
        padding: 0 0.4rem;
        font-size: 0.8rem;
    }

    /* "Appear offline" طويلة لثلث الشاشة: "Offline" ظاهرة، والنص الكامل لقارئ الشاشة */
    .status-chip-short {
        display: inline;
    }

    .status-chip:has(.status-chip-short) .status-chip-full,
    .status-switch-msg {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .greeting-stats,
    .completeness {
        margin-top: 1rem;
    }

    .greeting-avatar img {
        width: 56px;
        height: 56px;
    }

    .greeting-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .greeting-stats a {
        padding: 0.65rem 0.8rem;
    }

    .greeting-stats strong {
        font-size: 1.375rem;
    }

    .greeting-edit {
        width: var(--control-h);
        min-height: var(--control-h);
        padding: 0;
    }

    .greeting-edit-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .completeness {
        padding-top: 1rem;
    }
}

/* ========= شريط البحث ========= */
/* لوحة البحث المشتركة (صفحة البحث + لوحة التحكم): includes/search_console.php */
.search-console {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
}

/* حقول صفحة البحث: صف واحد بأعمدة متساوية (4 أو 3 حسب القسم)، عمودان على اللوحي، وعمود على الهاتف */
.filter-fields {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: 1rem;
}

@media (max-width: 1000px) {
    .filter-fields {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* الحقل الأخير وحده في صفه يأخذ العرض كاملاً بدل ترك فراغ بجانبه */
    .filter-fields > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .filter-fields {
        grid-template-columns: 1fr;
    }
}

/* الشريط السفلي: الخيارات السريعة يساراً، وإعادة الضبط والتطبيق يميناً */
.filter-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

/* على اللمس: مساحة لمس مريحة لخيارات الفلاتر بدل سطر نص بارتفاع 23px */
@media (pointer: coarse) {
    .filter-footer .filter-toggles label {
        min-height: 44px;
    }

    .filter-footer .filter-toggles input {
        width: 20px;
        height: 20px;
    }
}

.filter-submit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
}

.age-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* الحقول الرقمية لها عرض افتراضي كبير؛ بدون هذا تخرج الصفحة عن الشاشة على الهاتف */
.filter-fields > *,
.age-range input {
    min-width: 0;
}

.age-range input {
    flex: 1;
}

.age-range span {
    color: var(--ink-faint);
    font-size: 0.9rem;
}

.filter-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.filter-toggles label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

@media (max-width: 560px) {
    /* على الهاتف: زر التطبيق بعرض الشاشة، وإعادة الضبط تحته */
    .filter-submit {
        flex-direction: column-reverse;
        align-items: stretch;
        width: 100%;
        margin-inline-start: 0;
    }
}

/* لوحة التحكم: لوحة البحث نفسها ثم صفوف الاكتشاف (أفضل التطابقات، المتصلون، الجدد) */
.dash-search {
    margin-top: 1.25rem;
}

.dash-search .search-console {
    margin-bottom: 0;
}

/* العنوان و"See all" في سطر واحد على كل الشاشات، والوصف تحتهما */
.dash-row-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 1rem;
    margin-bottom: 1.25rem;
}

.dash-row-head p {
    grid-column: 1 / -1;
}

.dash-row-head h2 i {
    font-size: 0.7em;
    color: var(--beni);
    vertical-align: 0.1em;
}

.dash-row-head p {
    margin-top: 0.25rem;
    color: var(--ink-soft);
    font-size: 0.925rem;
}

.dash-row .fa-circle-dot {
    color: var(--matcha);
}

.dash-row-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    font-weight: 700;
    white-space: nowrap;
}
/* ========= صفحة البحث ========= */
/* أقسام البحث في رأس لوحة البحث: أيقونة فوق الاسم، وخط أحمر تحت القسم الحالي.
   الحاسوب: الأقسام التسعة في صف واحد متساوٍ؛ الشاشات الأصغر: الصف نفسه يُمرَّر أفقياً داخل اللوحة مع تلاشٍ عند الحواف */
.search-console {
    margin-bottom: 1.75rem;
    overflow: hidden;
}

.page-title + .search-console {
    margin-top: 1.25rem;
}

/* هامش اللوحة يكفي؛ هامش .section الافتراضي فوقه كان يضاعف الفراغ قبل النتائج */
.search-console + .search-results {
    margin-top: 0;
}

.search-tabs {
    position: relative;
    border-bottom: 1px solid var(--line);
}

.search-tabs-track {
    display: grid;
    grid-auto-flow: column;
    /* every section at least as wide as its name (never wrapped, so the space above the icon always equals the space
       under the name), sharing the free width equally; when they don't all fit, the strip scrolls (arrows from search.js) */
    grid-auto-columns: minmax(max-content, 1fr);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.search-tabs-track::-webkit-scrollbar {
    display: none;
}

.search-tabs a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* icon on top, name on one line under it (the section widens to its name, see .search-tabs-track): the space above
       the icon equals the space under the name, and all icons stay on one line */
    justify-content: flex-start;
    gap: 0.4rem;
    min-height: 68px;
    padding: 0.9rem 0.7rem 0.75rem;
    color: var(--ink-soft);
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.search-tabs a i {
    font-size: 1.05rem;
    color: var(--ink-faint);
    transition: color 0.15s ease, transform 0.15s ease;
}

.search-tabs a:hover {
    background: var(--paper);
    color: var(--ink);
}

.search-tabs a:hover i {
    color: var(--ink-soft);
}

.search-tabs a:focus-visible {
    outline: 3px solid rgba(var(--beni-rgb), 0.45);
    outline-offset: -3px;
}

/* القسم الحالي: نص وأيقونة بالأحمر، وخط تحته */
.search-tabs a[aria-current="page"] {
    color: var(--beni-deep);
    font-weight: 700;
}

.search-tabs a[aria-current="page"] i {
    color: var(--beni);
}

.search-tabs a[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline-start: 16%;
    inset-inline-end: 16%;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--beni);
}

/* "متصل الآن" بلون حالة "متاح" */
.search-tabs .tab-online i,
.search-tabs .tab-online:hover i {
    color: var(--matcha);
}

/* تلاشٍ عند الحافة التي يوجد بعدها أقسام أخرى (تضيفه search.js) */
.search-tabs::before,
.search-tabs::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.search-tabs::before {
    left: 0;
    background: linear-gradient(to right, var(--surface), rgba(255, 255, 255, 0));
}

.search-tabs::after {
    right: 0;
    background: linear-gradient(to left, var(--surface), rgba(255, 255, 255, 0));
}

.search-tabs.fade-start::before,
.search-tabs.fade-end::after {
    opacity: 1;
}

/* أسهم التمرير للفأرة: في عمودين خاصين بجانب الشريط (وليس فوق الأقسام)، فالنقر على سهم معطّل
   لا يصل أبداً إلى قسم تحته. تظهر فقط عندما يكون الشريط قابلاً للتمرير (is-scrollable من search.js).
   على اللمس لا حاجة لها: السحب بالإصبع طبيعي، والقسم الظاهر جزئياً عند الحافة يدل على التمرير */
.tabs-scroll {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .search-tabs.is-scrollable {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 40px;
    }

    .search-tabs.is-scrollable .search-tabs-track {
        grid-column: 2;
        grid-row: 1;
    }

    .search-tabs.is-scrollable .tabs-scroll {
        display: grid;
        place-items: center;
        grid-row: 1;
        padding: 0;
        border: 0;
        background: var(--surface);
        color: var(--ink-soft);
        font-size: 0.85rem;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .search-tabs.is-scrollable .tabs-scroll-prev {
        grid-column: 1;
        border-inline-end: 1px solid var(--line);
    }

    .search-tabs.is-scrollable .tabs-scroll-next {
        grid-column: 3;
        border-inline-start: 1px solid var(--line);
    }

    .search-tabs.is-scrollable .tabs-scroll:hover:not(:disabled) {
        background: var(--paper);
        color: var(--ink);
    }

    .search-tabs.is-scrollable .tabs-scroll:disabled {
        color: var(--line-strong);
        cursor: default;
    }

    /* التلاشي يبدأ عند حافة الشريط، بعد عمود السهم */
    .search-tabs.is-scrollable::before {
        inset-inline-start: 41px;
    }

    .search-tabs.is-scrollable::after {
        inset-inline-end: 41px;
    }
}

/* سحب الشريط بالفأرة */
.search-tabs-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

/* الفلاتر داخل اللوحة */
.search-filters {
    padding: 1.25rem;
}

.filters-toggle {
    display: none;
}

@media (max-width: 700px) {
    .page-title + .search-console {
        margin-top: 1rem;
    }

    .search-console {
        margin-bottom: 1.5rem;
    }

    /* حوالي 4.5 أقسام ظاهرة على أي هاتف: نصف القسم التالي عند الحافة دلالة على إمكانية التمرير */
    .search-tabs-track {
        /* each section as wide as its name, at least ~1/4.5 of the screen (the cut one shows the strip scrolls) */
        grid-auto-columns: max-content;
    }

    .search-tabs a {
        min-width: clamp(60px, calc((100vw - 2 * var(--gutter) - 2px) / 4.5), 92px);
        min-height: 68px;
        padding: 0.9rem 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .search-filters {
        padding: 0.75rem;
    }

    /* على الهاتف: الفلاتر مطوية خلف زر حتى تظهر النتائج مباشرة (فقط مع JavaScript، وإلا تبقى ظاهرة) */
    .js .filters-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: var(--control-h);
        padding: 0 0.85rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-input);
        background: var(--surface);
        color: var(--ink);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .filters-toggle > span {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
    }

    .filters-toggle i {
        color: var(--ink-soft);
    }

    .filters-count {
        display: inline-grid;
        place-items: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: var(--r-pill);
        background: var(--beni);
        color: #fff;
        font-size: 0.75rem;
    }

    .filters-chevron {
        transition: transform 0.2s ease;
    }

    .search-console.is-expanded .filters-chevron {
        transform: rotate(180deg);
    }

    .js .filter-body {
        margin-top: 1rem;
    }

    /* مطوية افتراضياً من أول رسم؛ search.js يضيف is-expanded عند الفتح */
    .js .search-console:not(.is-expanded) .filter-body {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-tabs-track {
        scroll-behavior: auto;
    }
}

/* الفلاتر الإضافية: لوحتها بين الحقول والشريط السفلي، وزرها في الشريط السفلي (لا سطر خاص به)
   تُطوى فقط مع JavaScript؛ بدونه تبقى ظاهرة */
.more-filters-panel {
    margin-top: 1rem;
}

.js .more-filters-panel:not(.is-open) {
    display: none;
}

.more-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.more-toggle {
    display: none;
}

.js .more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

.more-toggle:hover {
    color: var(--ink);
}

.more-toggle-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.more-toggle[aria-expanded="true"] .more-toggle-chevron {
    transform: rotate(180deg);
}

.results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.results-head h2 i {
    font-size: 0.7em;
    color: var(--beni);
    vertical-align: 0.1em;
}

.results-help {
    margin-top: 0.3rem;
    max-width: 70ch;
    color: var(--ink-soft);
    font-size: 0.925rem;
}

.results-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

.sort-form select {
    min-height: 40px;
    width: auto;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.925rem;
}

.prefs-summary {
    margin: -0.25rem 0 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--beni-wash);
    font-size: 0.925rem;
}

.prefs-summary i {
    margin-inline-end: 0.35rem;
    color: var(--beni-deep);
}

.prefs-summary a {
    margin-inline-start: 0.3rem;
    font-weight: 700;
}

.location-prompt p + p {
    margin-top: 0.6rem;
}

.location-prompt .btn {
    max-width: 100%;
    margin-top: 1.25rem;
    padding-block: 0.6rem;
    /* نص الزر طويل: يلتف على الشاشات الضيقة (320px) بدل أن يخرج الزر عن الشاشة */
    white-space: normal;
    text-align: center;
}

/* أحدث الصور */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.25rem 1rem;
}

.photo-tile-media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--r-photo);
    overflow: hidden;
    background: #EDE8F1;
}

.photo-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.photo-tile-media:hover img {
    transform: scale(1.03);
}

.photo-tile-body {
    padding: 0.55rem 0.15rem 0;
    font-weight: 700;
}

.photo-tile {
    position: relative;
}

.photo-tile-body a {
    color: var(--ink);
    text-decoration: none;
}

/* مثل بطاقة العضو: الاسم والعمر والختم في سطر واحد، والاسم الطويل يُختصر */
.photo-tile-name {
    display: flex;
    align-items: center;
    min-width: 0;
}

.photo-tile-name a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* البطاقة كلها (الصورة والاسم) قابلة للنقر عبر رابط الاسم، مثل بطاقات الأعضاء */
.photo-tile-body a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.photo-tile-body a:focus-visible {
    outline: none;
}

.photo-tile-body a:focus-visible::after {
    outline: 3px solid rgba(var(--beni-rgb), 0.45);
    outline-offset: 3px;
    border-radius: var(--r-photo);
}

.photo-tile-time {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-faint);
}

@media (max-width: 600px) {
    .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 0.75rem;
    }

    .results-meta {
        width: 100%;
        justify-content: space-between;
    }
}

/* ========= بطاقات الأعضاء ========= */
.member-grid {
    display: grid;
    /* 170px: ست بطاقات في الصف على الحاسوب (حاوية 1280px) بدل خمس بطاقات كبيرة */
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.5rem 1.1rem;
}

@media (max-width: 600px) {
    .member-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 0.9rem;
    }
}

/* البطاقات في الصف بارتفاع واحد، والأزرار دائماً في أسفلها مهما اختلف طول النص */
.member-card {
    position: relative;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

/* بطاقة ضيقة (هواتف 320-360): الزرّان أيقونتان فقط بعرض متساوٍ (الاسم الكامل يبقى لقارئ الشاشة) */
@container (max-width: 165px) {
    .member-actions .member-action {
        padding: 0;
    }

    .member-action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

.member-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-photo);
    overflow: hidden;
    background: #EDE8F1;
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.member-card:hover .member-photo img {
    transform: scale(1.03);
}

/* حالة التوفر فوق الصورة: متاح (أخضر) أو مشغول (كهرماني) */
.presence-pill {
    position: absolute;
    inset-inline-start: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    padding-inline-start: 8px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
}

.presence-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--matcha);
}

.presence-pill.is-busy {
    color: var(--busy-text);
}

.presence-pill.is-busy::before {
    background: var(--busy);
}

/* نقطة الحالة (الإعدادات، الرأس، الملف الشخصي) */
.status-dot-lg {
    display: inline-block;
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--matcha);
}

.status-dot-lg.is-busy {
    background: var(--busy);
}

.status-dot-lg.is-offline {
    background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--offline);
}

.header-avatar {
    position: relative;
}

.header-avatar .status-dot-lg {
    position: absolute;
    inset-inline-end: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--surface);
}

.header-avatar .status-dot-lg.is-offline {
    box-shadow: inset 0 0 0 2px var(--offline);
}

.own-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    order: 3;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.own-status a {
    font-weight: 700;
}

/* اختيار الحالة في الإعدادات */
.status-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.status-option .radio-content {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.7rem;
    height: 100%;
    padding: 0.85rem 0.9rem;
    text-align: start;
}

.status-option .status-dot-lg {
    margin-top: 4px;
}

.status-option-text {
    display: grid;
    gap: 0.2rem;
}

.status-option-text span {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-soft);
}

@media (max-width: 760px) {
    .status-options {
        grid-template-columns: 1fr;
    }
}

.favorite-btn {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(35, 28, 43, 0.14);
    transition: color 0.15s ease;
}

.favorite-btn:hover,
.favorite-btn.active {
    color: var(--beni);
}

.favorite-btn.active i {
    animation: heart-pop 0.3s ease;
}

@keyframes heart-pop {
    50% { transform: scale(1.3); }
}

.member-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0.15rem 0;
}

/* الاسم والعمر والختم في سطر واحد: الاسم الطويل يُختصر بـ "…" والختم يبقى بجانبه */
.member-name {
    display: flex;
    align-items: center;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
}

.member-name a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    text-decoration: none;
}

/* البطاقة كلها قابلة للنقر عبر رابط الاسم */
.member-name a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.member-name a:focus-visible {
    outline: none;
}

.member-name a:focus-visible::after {
    outline: 3px solid rgba(var(--beni-rgb), 0.45);
    outline-offset: 3px;
    border-radius: var(--r-photo);
}

.member-age {
    flex: none;
    font-weight: 400;
    white-space: nowrap;
    color: var(--ink-soft);
}

/* أزرار البطاقة فوق الرابط الممتد للبطاقة، في أسفل البطاقة دائماً */
.member-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.6rem;
}

/* زرّان بعرض متساوٍ تماماً (لا يتحدد العرض بطول النص) */
.member-action {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 34px;
    padding: 0 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.member-action:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.member-action-primary {
    border-color: var(--beni);
    background: var(--beni);
    color: #fff;
}

.member-action-primary:hover {
    border-color: var(--beni-deep);
    background: var(--beni-deep);
    color: #fff;
}

.member-meta,
.member-note {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

/* سطران كحد أقصى حتى تبقى البطاقات متقاربة الارتفاع */
.member-note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--ink-faint);
}

/* ========= الحالات الفارغة والترقيم ========= */
.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-panel);
}

.empty-state i {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 2rem;
    color: var(--beni);
}

.empty-state p {
    max-width: 46ch;
    margin: 0 auto;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
    color: var(--ink-soft);
}

/* ========= الملف الشخصي ========= */
.profile-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.profile-gallery {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
}

.gallery-main {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-panel);
    overflow: hidden;
    background: #EDE8F1;
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.gallery-main .presence-pill {
    inset-inline-start: 14px;
    bottom: 14px;
}

.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.gallery-thumb {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #EDE8F1;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumb[aria-current="true"] {
    border-color: var(--beni);
}

.gallery-thumb.empty {
    display: grid;
    place-items: center;
    color: var(--ink-faint);
    border: 1px dashed var(--line-strong);
    background: var(--surface);
    text-decoration: none;
}

.gallery-thumb.empty:hover {
    color: var(--beni);
    border-color: var(--beni);
}

.hidden-photos-note {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.hidden-photos-note i {
    margin-inline-end: 0.3rem;
}

.hidden-photos-note a {
    font-weight: 700;
}

.profile-heading h1 {
    font-size: var(--step-4);
}

.profile-age {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.7em;
    color: var(--ink-soft);
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: 0.6rem;
    color: var(--ink-soft);
}

.profile-meta i {
    width: 1.1em;
    margin-inline-end: 0.3rem;
    color: var(--ink-faint);
}

.profile-meta .status-dot {
    font-size: 0.6em;
    vertical-align: 0.2em;
}

.presence-text.is-available i {
    color: var(--matcha);
}

.presence-text.is-busy {
    color: var(--busy-text);
}

.presence-text.is-busy i {
    color: var(--busy);
}

.verified-note {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: var(--beni-deep);
}

.verified-note i {
    margin-inline-end: 0.3rem;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 1.5rem 0 2rem;
}

.chat-hint-inline {
    order: 3;
    width: 100%;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.chat-hint-inline i {
    color: var(--beni);
    margin-inline-end: 0.3rem;
}

.chat-hint-inline a {
    font-weight: 700;
}

#favoriteBtn.active {
    border-color: var(--beni);
    background: var(--beni-wash);
    color: var(--beni-deep);
}

.profile-actions .safety {
    position: relative;
    margin-inline-start: auto;
}

.safety-menu {
    display: flex;
    gap: 0.25rem;
}

/* زر "⋯" يظهر فقط على اللوحي والهاتف */
.safety-toggle {
    display: none;
}

/* زر الحظر يحمل الصنف btn-block (حظر عضو)، وهو نفس اسم "زر بعرض كامل" في base.css */
.profile-actions .safety .btn {
    width: auto;
}

.profile-about {
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
}

.profile-about h2,
.detail-group h2 {
    font-size: var(--step-2);
    margin-bottom: 0.75rem;
}

.profile-about p {
    max-width: 65ch;
    font-size: 1.0625rem;
    line-height: 1.75;
}

.detail-group {
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
}

.detail-group dl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.detail-group dt {
    font-size: var(--step--1);
    color: var(--ink-faint);
}

.detail-group dd {
    margin: 0.1rem 0 0;
    font-weight: 500;
}

@media (max-width: 800px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-gallery {
        position: static;
        max-width: 460px;
        width: 100%;
        margin: 0 auto;
    }

    .profile-actions .btn {
        flex: 1 1 auto;
    }

    /* الإبلاغ والحظر خلف زر "⋯" في صف الأزرار نفسه، بدل سطر منفصل في المنتصف */
    .profile-actions .safety {
        flex: none;
        margin-inline-start: 0;
    }

    .profile-actions .safety .safety-toggle {
        display: inline-flex;
        width: var(--control-h);
        padding: 0;
        font-size: 1.1rem;
    }

    .safety-menu {
        position: absolute;
        top: calc(100% + 6px);
        inset-inline-end: 0;
        z-index: 20;
        flex-direction: column;
        gap: 2px;
        min-width: 190px;
        padding: 6px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: var(--shadow-pop);
    }

    .safety:not(.is-open) .safety-menu {
        display: none;
    }

    .profile-actions .safety-menu .btn {
        flex: none;
        justify-content: flex-start;
        width: 100%;
        min-height: 44px;
        border-radius: 10px;
        font-weight: 500;
    }

    .safety-menu .btn-block {
        color: var(--danger);
    }
}

/* هاتف: المفضلة أيقونة قلب حتى تتسع الأزرار الثلاثة في صف واحد */
@media (max-width: 560px) {
    .profile-actions #favoriteBtn {
        flex: none;
        width: var(--control-h);
        padding: 0;
    }

    .profile-actions #favoriteBtn .label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* ========= النماذج (تعديل الملف، الإعدادات) ========= */
.form-section {
    margin-bottom: 1rem;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
}

.form-section h2 {
    font-size: var(--step-2);
    margin-bottom: 0.35rem;
}

.form-section > :last-child,
.form-section > .dual-column:last-child .form-group {
    margin-bottom: 0;
}

.form-section > p {
    margin-bottom: 1.25rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.form-section h2 + .form-group,
.form-section h2 + .dual-column,
.form-section h2 + form,
.form-section h2 + .photo-manager {
    margin-top: 1.25rem;
}

.form-group {
    margin-bottom: 1.1rem;
}

.form-group > label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.dual-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
}

@media (max-width: 640px) {
    .dual-column {
        grid-template-columns: 1fr;
    }
}

.char-counter {
    display: block;
    margin-top: 0.3rem;
    text-align: end;
    font-size: var(--step--1);
    color: var(--ink-faint);
}

.multi-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 0.35rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
}

.language-option:has(input:checked) {
    background: var(--beni-wash);
}

.language-option label {
    font-size: 0.925rem;
    cursor: pointer;
}

/* شريط الحفظ يبقى ظاهراً أثناء التمرير في النموذج الطويل */
.form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin: 1.5rem calc(var(--gutter) * -1) 0;
    padding: 0.85rem var(--gutter);
    background: rgba(246, 244, 247, 0.94);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
    .form-actions {
        bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    }

    .form-actions .btn {
        flex: 1;
    }
}

/* إدارة الصور */
.photo-manager {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.9rem;
}

.photo-item {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: #EDE8F1;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-badge {
    position: absolute;
    inset-inline-start: 8px;
    bottom: 8px;
    padding: 1px 9px;
    border-radius: var(--r-pill);
    background: var(--beni);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.photo-actions {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    display: flex;
    gap: 6px;
}

.photo-actions button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
}

.photo-actions .set-avatar-btn:hover,
.photo-actions .visibility-btn:hover {
    color: var(--beni);
}

/* صورة مخفية: باهتة مع شارة، يراها صاحبها فقط */
.photo-item.is-hidden img {
    opacity: 0.45;
    filter: grayscale(0.6);
}

.photo-badge-hidden {
    background: var(--ink);
}

.photo-actions .delete-photo-btn:hover {
    color: var(--danger);
}

.upload-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    aspect-ratio: 4 / 5;
    padding: 0.75rem;
    border: 1.5px dashed var(--line-strong);
    border-radius: 12px;
    color: var(--ink-soft);
    font-size: 0.85rem;
    text-align: center;
    cursor: pointer;
}

.upload-tile i {
    font-size: 1.5rem;
    color: var(--beni);
}

.upload-tile:hover,
.upload-tile:focus-within {
    border-color: var(--beni);
    color: var(--ink);
}

/* المعاينات تصبح عناصر في شبكة الصور نفسها */
.preview-container {
    display: contents;
}

.upload-tile[hidden] {
    display: none;
}

.preview-image {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    outline: 2px solid var(--beni);
    outline-offset: -2px;
}

.preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-btn {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(35, 28, 43, 0.75);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
}

/* الإعدادات */
.blocked-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.blocked-list li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
}

.blocked-list li:last-child {
    border-bottom: 0;
}

.blocked-list img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.blocked-list .btn {
    margin-inline-start: auto;
    min-height: 38px;
}

.danger-zone {
    border-color: #F4C2BD;
}

.danger-zone h2 {
    color: var(--danger);
}

/* مشاركة الموقع التقريبي */
.location-setting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: var(--paper);
}

.location-setting > div:first-child {
    flex: 1 1 280px;
}

.location-actions {
    display: flex;
    gap: 0.4rem;
}

/* البيانات الموثّقة المقفلة في صفحة تعديل الملف */
.locked-identity {
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
}

.locked-identity-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.locked-identity-head .verified-badge {
    margin-inline-start: 0;
}

.locked-identity dl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0 0 0.85rem;
}

.locked-identity dt {
    font-size: var(--step--1);
    color: var(--ink-faint);
}

.locked-identity dd {
    margin: 0.1rem 0 0;
    font-weight: 500;
}

.locked-identity-note {
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.locked-identity-note i {
    margin-inline-end: 0.3rem;
    color: var(--ink-faint);
}

.locked-identity-note a {
    font-weight: 700;
}

/* ========= التحقق من الملف الشخصي ========= */
.verify-status {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.verify-status h2 + p {
    margin-bottom: 1rem;
}

.verify-status-body {
    flex: 1;
    min-width: 0;
}

.identity-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem 1.25rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.identity-list dt {
    font-size: var(--step--1);
    color: var(--ink-faint);
}

.identity-list dt i {
    margin-inline-end: 0.2rem;
    font-size: 0.85em;
}

.identity-list dd {
    margin: 0.1rem 0 0;
    font-weight: 500;
}

.change-list {
    margin: 0.5rem 0 0.75rem;
    padding-inline-start: 1.25rem;
}

.change-list s {
    color: var(--ink-faint);
}

/* طلب التصحيح: مطوي حتى يحتاجه العضو */
.correction {
    margin-bottom: 1.25rem;
}

.correction > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
    cursor: pointer;
    list-style: none;
}

.correction > summary::-webkit-details-marker {
    display: none;
}

.correction > summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--ink-faint);
    transition: transform 0.2s ease;
}

.correction[open] > summary {
    margin-bottom: 1.25rem;
}

.correction[open] > summary::after {
    transform: rotate(180deg);
}

.verify-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--beni-wash);
    color: var(--beni-deep);
    font-size: 24px;
}

.verify-steps {
    margin: 1.25rem 0;
    padding-inline-start: 1.25rem;
    display: grid;
    gap: 0.9rem;
    line-height: 1.6;
}

.doc-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.doc-options .radio-content {
    flex-direction: column;
    min-height: 92px;
    padding: 0.75rem;
}

.doc-options .radio-content i {
    font-size: 1.4rem;
}

.doc-uploads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 260px));
    gap: 1rem;
}

/* مربع رفع بنسبة البطاقة البنكية/الهوية */
.doc-upload .upload-tile {
    position: relative;
    aspect-ratio: 1.586;
    overflow: hidden;
}

.upload-tile.has-file {
    border-style: solid;
    border-color: var(--beni);
}

.upload-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-tile.has-file .upload-label {
    position: absolute;
    inset-inline-start: 8px;
    bottom: 8px;
    padding: 1px 9px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font-weight: 700;
}

.upload-tile.has-file > i {
    display: none;
}

.privacy-note ul {
    margin: 0.75rem 0 1.5rem;
    padding-inline-start: 1.25rem;
    display: grid;
    gap: 0.4rem;
    color: var(--ink-soft);
}

@media (max-width: 560px) {
    .doc-options {
        grid-template-columns: 1fr;
    }

    .doc-options .radio-content {
        flex-direction: row;
        min-height: 52px;
        justify-content: flex-start;
    }

    .doc-uploads {
        grid-template-columns: 1fr;
    }

    .privacy-note .btn {
        width: 100%;
    }
}

/* صفحة المراجعة (المشرف) */
.review-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
}

.review-head h2 a {
    color: var(--ink);
    text-decoration: none;
}

.review-code {
    padding: 0.25rem 0.8rem;
    border-radius: var(--r-pill);
    background: var(--beni-wash);
    color: var(--beni-deep);
    font-weight: 700;
}

.review-compare {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
}

.review-compare figure {
    margin: 0;
}

/* الوثيقة بنسبتها الحقيقية وكاملة دون قص، والسيلفي بإطار مميز */
.review-compare .is-document .review-photo {
    aspect-ratio: 1.586;
    object-fit: contain;
    background: var(--ink);
}

.review-compare .is-selfie .review-photo {
    outline: 3px solid var(--beni);
    outline-offset: -3px;
}

.review-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 12px;
    background: #EDE8F1;
    cursor: zoom-in;
}

.review-compare figcaption {
    margin-top: 0.35rem;
    font-size: var(--step--1);
    color: var(--ink-soft);
}

.review-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.review-code-correction {
    background: var(--ink);
    color: #fff;
}

.review-correction {
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: var(--paper);
}

.review-reason {
    margin: 0;
    color: var(--ink-soft);
}

.review-identity {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.review-identity legend {
    margin-bottom: 0.6rem;
    padding: 0;
    font-weight: 700;
    font-size: 0.875rem;
}

.review-identity .dual-column {
    gap: 0 1rem;
}

.review-checklist {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    display: grid;
    gap: 0.45rem;
}

.review-checklist legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-weight: 700;
    font-size: 0.875rem;
}

.review-checklist label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.925rem;
    cursor: pointer;
}

.review-checklist input {
    flex: none;
    margin-top: 3px;
}

.review-reject {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

@media (max-width: 760px) {
    .review-actions {
        grid-template-columns: 1fr;
    }

    .review-actions .btn {
        width: 100%;
    }

    .review-reject {
        align-items: stretch;
    }
}

/* ========= نافذة الإبلاغ ========= */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: var(--gutter);
    background: rgba(35, 28, 43, 0.55);
    overflow-y: auto;
}

.modal-content {
    position: relative;
    max-width: 480px;
    margin: 10vh auto 0;
    padding: 1.75rem;
    background: var(--surface);
    border-radius: var(--r-panel);
    box-shadow: var(--shadow-pop);
}

.modal-content h3 {
    font-size: var(--step-2);
}

.modal-content .close {
    position: absolute;
    top: 0.75rem;
    inset-inline-end: 1rem;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink-faint);
    cursor: pointer;
}

.modal-hint {
    margin: 0.5rem 0 1rem;
    color: var(--ink-soft);
    font-size: 0.925rem;
}

.modal-content textarea {
    min-height: 120px;
}

.modal-content button[type="submit"] {
    margin-top: 0.9rem;
}

/* ========= الصفحات القانونية ========= */
.legal-page {
    max-width: 72ch;
}

.legal-page h1 {
    margin-bottom: 0.4rem;
}

.legal-page h2 {
    margin: 2.25rem 0 0.6rem;
    font-size: var(--step-2);
}

.legal-page p,
.legal-page li {
    line-height: 1.75;
}

.legal-page p + p {
    margin-top: 0.75rem;
}

.legal-page ul {
    padding-inline-start: 1.25rem;
}

/* ========= التذييل ========= */
.site-footer {
    margin-top: 2rem;
    border-top: 1px solid var(--line);
}

.site-footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 1.75rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2rem;
    font-size: 0.9rem;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-weight: 700;
}

.footer-brand .seal {
    width: 26px;
    height: 26px;
    font-size: 15px;
    border-radius: 6px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.footer-links a {
    color: var(--ink-soft);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.footer-copy {
    margin-inline-start: auto;
    color: var(--ink-faint);
}

@media (max-width: 700px) {
    .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-copy {
        margin-inline-start: 0;
    }
}

/* ========= التوافق والاهتمامات ========= */
/* نسبة التوافق فوق صورة البطاقة */
.match-chip {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
}

.match-chip.is-high {
    background: var(--beni);
    color: #fff;
}

/* لوحة التوافق في الملف الشخصي: حلقة النسبة + الأسباب */
.compat-panel {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
}

.compat-score {
    flex: none;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--surface) 78%, transparent 79%),
        conic-gradient(var(--beni) calc(var(--p) * 1%), var(--line) 0);
}

.compat-score strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.compat-body h2 {
    font-size: var(--step-2);
}

.compat-note {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.compat-note a {
    font-weight: 700;
}

.compat-list {
    display: grid;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.compat-list li {
    display: flex;
    gap: 0.55rem;
    align-items: baseline;
}

.compat-list i {
    width: 1rem;
    font-size: 0.8rem;
    text-align: center;
}

.compat-list .is-match i {
    color: var(--matcha);
}

.compat-list .is-diff {
    color: var(--ink-soft);
}

.compat-list .is-diff i {
    color: var(--ink-faint);
}

@media (max-width: 480px) {
    .compat-panel {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .compat-list li {
        justify-content: center;
    }
}

/* الاهتمامات في الملف الشخصي (المشتركة مميزة) */
.interest-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.interest-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    font-size: 0.9rem;
}

.interest-list i {
    color: var(--ink-faint);
}

.interest-list .is-shared {
    border-color: var(--beni);
    background: var(--beni-wash);
    color: var(--beni-deep);
    font-weight: 700;
}

.interest-list .is-shared i {
    color: var(--beni);
}

.detail-hint {
    margin: -0.4rem 0 0.75rem;
    font-size: 0.9rem;
    color: var(--beni-deep);
    font-weight: 700;
}

.private-tag {
    margin-inline-start: 0.3rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ink-faint);
    white-space: nowrap;
}

/* اختيار الاهتمامات والخيارات المتعددة (تعديل الملف، الإعدادات) */
.interest-picker,
.choice-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.interest-picker + .field-hint {
    margin-top: 0.75rem;
}

.interest-chip {
    position: relative;
    cursor: pointer;
}

.interest-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.interest-chip span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: 0.9rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.interest-chip i {
    color: var(--ink-faint);
}

.interest-chip:hover span {
    border-color: var(--ink-soft);
}

.interest-chip input:checked + span {
    border-color: var(--beni);
    background: var(--beni-wash);
    color: var(--beni-deep);
    font-weight: 700;
}

.interest-chip input:checked + span i {
    color: var(--beni);
}

.interest-chip input:focus-visible + span {
    outline: 3px solid rgba(var(--beni-rgb), 0.45);
    outline-offset: 2px;
}

.interest-chip input:disabled + span {
    opacity: 0.45;
    cursor: not-allowed;
}

.form-subhead {
    margin: 1.5rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
}

.form-check {
    display: flex;
    align-items: flex-end;
}

.form-check label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: var(--control-h);
    font-weight: 500;
    cursor: pointer;
}

/* الخصوصية في الإعدادات */
.switch-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    cursor: pointer;
}

.switch-row input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--beni);
}

.switch-row > span {
    display: grid;
    gap: 0.2rem;
}

.switch-row > span span {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.private-fields {
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.private-fields legend {
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.private-fields .field-hint {
    margin-bottom: 0.75rem;
}

.privacy-links {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: var(--paper);
    font-size: 0.9rem;
    list-style: none;
}

.privacy-links i {
    width: 1.2rem;
    margin-inline-end: 0.35rem;
    color: var(--ink-faint);
    text-align: center;
}

.privacy-links a {
    margin-inline-start: 0.25rem;
    font-weight: 700;
}

/* إعدادات التنبيهات: تجربة الصوت وإشعارات سطح المكتب */
.notify-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: -0.75rem 0 1.5rem;
    margin-inline-start: 2rem;
    font-size: 0.875rem;
}

.notify-tools .btn {
    min-height: 34px;
    padding: 0 0.9rem;
    font-size: 0.8125rem;
}

.notify-desktop {
    margin: 0 0 1.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: var(--paper);
    font-size: 0.9rem;
}

.notify-desktop p + p {
    margin-top: 0.5rem;
}

/* ========= التنبيهات المنبثقة ========= */
/* أسفل اليمين على الحاسوب؛ أسفل الرأس على الهاتف لأن التبويب السفلي يشغل الأسفل */
.toast-stack {
    position: fixed;
    inset-inline-end: 20px;
    bottom: 20px;
    z-index: 60;
    display: grid;
    gap: 0.6rem;
    width: min(360px, calc(100vw - 40px));
    pointer-events: none;
}

.toast {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--beni);
    border-radius: 14px;
    box-shadow: var(--shadow-pop);
    pointer-events: auto;
    animation: toast-in 0.24s ease-out;
}

.toast.is-view {
    border-inline-start-color: var(--ink);
}

.toast.is-leaving {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
}

.toast-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0;
    padding-inline-start: 0.85rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: 14px 0 0 14px;
}

.toast-link:hover {
    color: var(--ink);
}

.toast-avatar {
    position: relative;
    flex: none;
}

.toast-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

/* نوع التنبيه: ختم صغير على الصورة */
.toast-type {
    position: absolute;
    inset-inline-end: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--beni);
    color: #fff;
    font-size: 0.6rem;
    box-shadow: 0 0 0 2px var(--surface);
}

.toast.is-view .toast-type {
    background: var(--ink);
}

.toast-text {
    min-width: 0;
    display: grid;
    gap: 1px;
    line-height: 1.35;
}

.toast-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
}

.toast-text span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.toast-close {
    flex: none;
    align-self: flex-start;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-faint);
}

.toast-close:hover {
    background: var(--paper);
    color: var(--ink);
}

@media (max-width: 900px) {
    .toast-stack {
        top: calc(var(--header-h) + 8px);
        bottom: auto;
        inset-inline-start: 12px;
        inset-inline-end: 12px;
        width: auto;
    }

    @keyframes toast-in {
        from { opacity: 0; transform: translateY(-10px); }
    }
}

/* ========= "جديد" على بطاقات الإعجابات والزيارات ========= */
.new-chip {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: var(--beni);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ========= تبويبات صفحة المفضلة: من أضفتهم / من أضافني ========= */
.page-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

.page-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0 0.9rem;
    color: var(--ink-soft);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.page-tabs a:hover {
    color: var(--ink);
}

.page-tabs a[aria-current="page"] {
    color: var(--ink);
    font-weight: 700;
}

.page-tabs a[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline-start: 0.9rem;
    inset-inline-end: 0.9rem;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--beni);
}

.page-tabs .tab-count {
    color: var(--ink-faint);
    font-weight: 500;
}

/* ========= إشعارات الإدارة للعضو (مخالفة، تجميد، قرار) ========= */
.member-notices {
    display: grid;
    gap: 0.5rem;
    width: 100%;
    max-width: var(--max);
    margin: 0.75rem auto 0;
    padding: 0 var(--gutter);
}

.member-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid #F4C2BD;
    border-inline-start: 3px solid var(--danger);
    border-radius: 12px;
    background: var(--danger-wash);
    font-size: 0.9rem;
}

.member-notice > i {
    margin-top: 3px;
    color: var(--danger);
}

.member-notice > div {
    flex: 1;
    min-width: 0;
}

.member-notice p {
    margin-top: 0.25rem;
    color: var(--ink-soft);
}

.member-notice .btn {
    flex: none;
}

.member-notice.is-unfreeze,
.member-notice.is-violation_removed,
.member-notice.is-appeal_accepted {
    border-color: #B6E0CA;
    border-inline-start-color: var(--success);
    background: var(--success-wash);
}

.member-notice.is-unfreeze > i,
.member-notice.is-violation_removed > i,
.member-notice.is-appeal_accepted > i {
    color: var(--success);
}

/* تأكيد البريد وتذكير إكمال الملف: طلب لطيف، ليس تحذيراً */
.member-notice.is-email,
.member-notice.is-profile {
    border-color: var(--line);
    border-inline-start-color: var(--beni);
    background: var(--beni-wash);
}

.member-notice.is-email > i,
.member-notice.is-profile > i {
    color: var(--beni);
}

/* إشعارات الارتباط: خبر، ليس تحذيراً */
.member-notice.is-relationship,
.member-notice.is-relationship_request,
.member-notice.is-relationship_ended,
.member-notice.is-journey,
.member-notice.is-story,
.member-notice.is-ludo {
    border-color: var(--line);
    border-inline-start-color: var(--beni);
    background: var(--beni-wash);
}

.member-notice.is-relationship > i,
.member-notice.is-relationship_request > i,
.member-notice.is-relationship_ended > i,
.member-notice.is-journey > i,
.member-notice.is-story > i,
.member-notice.is-ludo > i {
    color: var(--beni);
}

/* Ludo invitation pop-ups (js/notify.js) */
.toast.is-ludo {
    border-inline-start-color: var(--beni);
}

.toast.is-ludo .toast-type {
    background: var(--beni);
}

.notice-actions,
.notice-dismiss {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: none;
}

@media (max-width: 600px) {
    .member-notice {
        flex-wrap: wrap;
    }

    .member-notice .btn,
    .member-notice form {
        margin-inline-start: calc(1rem + 0.75rem);
    }

    /* صف الأزرار يُزاح مرة واحدة ويلتف داخل عرض الشاشة؛ أزراره لا تُزاح مرة أخرى */
    .member-notice .notice-actions,
    .member-notice .notice-dismiss {
        flex: 1 1 100%;
        min-width: 0;
    }

    .member-notice form .btn {
        margin-inline-start: 0;
    }
}

/* سبب منع الحفظ بفلتر الكلمات */
.rule-notice {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid #F4C2BD;
    color: var(--ink);
}

/* ========= صفحة حالة الحساب (المخالفات وطلب المراجعة) ========= */
.acct-page {
    max-width: 1080px;
}

/* البطاقة الرئيسية: الحالة + سلّم المخالفات (أختام) + ما يبقى متاحاً */
.acct-hero {
    --state: var(--success);
    --state-wash: var(--success-wash);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-top: 4px solid var(--state);
    border-radius: var(--r-panel);
    background: var(--surface);
}

.acct-hero.is-warned {
    --state: var(--busy-text);
    --state-wash: #FDF3E3;
}

.acct-hero.is-frozen {
    --state: var(--danger);
    --state-wash: var(--danger-wash);
}

.acct-pill {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: var(--r-pill);
    background: var(--state-wash);
    color: var(--state);
    font-size: var(--step--1);
    font-weight: 700;
}

.acct-hero h2 {
    margin-bottom: 0.5rem;
    font-size: var(--step-4);
}

.acct-hero-text p:last-child {
    max-width: 56ch;
    color: var(--ink-soft);
}

.ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ladder-slot,
.ladder-more {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 2px dashed var(--line-strong);
    border-radius: 50%;
    color: var(--ink-faint);
    font-family: var(--font-display);
    font-weight: 700;
}

.ladder-slot.is-freeze {
    border-style: solid;
    border-color: var(--ink-faint);
    font-size: 0.9rem;
}

/* المخالفة المؤكدة: ختم أحمر مائل قليلاً كختم الهانكو */
.ladder-slot.is-filled {
    border: 2px solid var(--beni);
    background: var(--beni-wash);
    color: var(--beni-deep);
    transform: rotate(-8deg);
}

.ladder-slot.is-filled:nth-child(even) {
    transform: rotate(6deg);
}

.ladder-slot.is-freeze.is-filled {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
}

.ladder-more {
    border-style: solid;
    color: var(--ink-soft);
}

.ladder-caption {
    margin-top: 0.6rem;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.acct-access {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.acct-access h3 {
    margin-bottom: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.acct-access ul {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
}

.acct-access li {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}

.acct-access li i {
    width: 1rem;
    color: var(--success);
}

.acct-access .is-paused li {
    color: var(--ink-soft);
}

.acct-access .is-paused li i {
    color: var(--danger);
}

/* المحتوى + عمود جانبي بالخطوات */
.acct-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.5rem;
    align-items: start;
}

.acct-aside {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.acct-aside .form-section h2,
.acct-block h2 {
    font-size: var(--step-2);
}

.acct-block {
    margin-bottom: 1.5rem;
}

.acct-block h2 {
    margin-bottom: 1rem;
}

.check-list {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: flex;
    gap: 0.65rem;
    align-items: baseline;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: var(--danger-wash);
}

.check-list li > i {
    color: var(--danger);
}

.check-list span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.check-list mark {
    padding: 0 0.25rem;
    border-radius: 4px;
    background: #F9D0CC;
    color: var(--ink);
}

.check-list small {
    display: block;
    color: var(--ink-soft);
}

.form-section > p.check-ok {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    margin: 0.5rem 0 0;
    color: var(--success);
    font-weight: 500;
}

.request-tips {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--paper);
    font-size: 0.95rem;
}

.request-tips p {
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.request-tips ul {
    margin: 0;
    padding-inline-start: 1.2rem;
    color: var(--ink-soft);
}

.request-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.35rem 0 1rem;
}

.request-count {
    font-variant-numeric: tabular-nums;
}

.request-count.is-short {
    color: var(--busy-text);
}

.request-sent {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-top: 0.75rem;
}

.request-sent > i {
    margin-top: 0.2rem;
    color: var(--busy-text);
    font-size: 1.25rem;
}

.request-sent > div {
    min-width: 0;
}

.request-sent blockquote,
.timeline-card blockquote {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.85rem;
    border-inline-start: 3px solid var(--line-strong);
    border-radius: 0 8px 8px 0;
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

/* سجل المخالفات: التاريخ بخط العناوين على اليسار وبطاقة القاعدة على اليمين */
.acct-timeline {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acct-timeline > li {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1rem;
}

.timeline-date {
    display: grid;
    align-content: start;
    padding-top: 1rem;
    color: var(--ink-faint);
    font-size: var(--step--1);
    text-align: end;
}

.timeline-date span {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
}

.timeline-card {
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--beni);
    border-radius: 0 14px 14px 0;
    background: var(--surface);
}

.timeline-card h3 {
    font-family: var(--font-body);
    font-size: var(--step-1);
}

.timeline-source {
    color: var(--ink-faint);
    font-size: var(--step--1);
}

.timeline-card dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3rem 0.75rem;
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
}

.timeline-card dt {
    font-weight: 700;
}

.timeline-card dd {
    margin: 0;
    color: var(--ink-soft);
}

.request-history {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.request-history li {
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.request-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.4rem;
}

.request-status {
    font-weight: 700;
}

.request-history .is-accepted .request-status {
    color: var(--success);
}

.request-history .is-rejected .request-status {
    color: var(--danger);
}

.request-history .is-open .request-status {
    color: var(--busy-text);
}

.request-text {
    color: var(--ink-soft);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.request-answer {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--line);
    font-size: 0.95rem;
}

.rules-short {
    display: grid;
    gap: 0.75rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.rules-short li {
    display: grid;
    gap: 0.15rem;
}

.rules-short span {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

/* خطوات متتابعة فعلاً: رقم في دائرة، والخط بينها يربطها */
.steps {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps li {
    position: relative;
    display: grid;
    gap: 0.15rem;
    padding: 0 0 1.1rem;
    padding-inline-start: 2.6rem;
    counter-increment: step;
    font-size: 0.9rem;
}

.steps li:last-child {
    padding-bottom: 0;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    inset-inline-start: 0;
    top: -0.1rem;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-soft);
    font-weight: 700;
    font-size: 0.8rem;
}

.steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(0.9rem - 1px);
    top: 1.8rem;
    bottom: 0.1rem;
    width: 2px;
    background: var(--line);
}

.steps span {
    color: var(--ink-soft);
}

.steps .is-current::before {
    border-color: var(--beni);
    background: var(--beni);
    color: #fff;
}

.steps .is-done::before {
    content: "\2713";
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.steps .is-done strong {
    color: var(--ink-soft);
}

.acct-help p {
    margin-bottom: 0.75rem;
}

.acct-help p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .acct-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .acct-aside {
        position: static;
    }

    .acct-hero {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .acct-access {
        grid-template-columns: minmax(0, 1fr);
    }

    .acct-timeline > li {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }

    .timeline-date {
        display: block;
        padding-top: 0;
        text-align: start;
    }

    .timeline-date span {
        margin-inline-end: 0.35rem;
    }

    .ladder-slot,
    .ladder-more {
        width: 38px;
        height: 38px;
    }
}

/* ========= نافذة الإبلاغ: سبب من قائمة + تفاصيل ========= */
.report-reasons {
    display: grid;
    gap: 0.4rem;
    margin: 0.75rem 0;
    padding: 0;
    border: 0;
}

.report-reasons legend {
    margin-bottom: 0.4rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.report-reasons label {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    min-height: 40px;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.9rem;
    cursor: pointer;
}

.report-reasons label:has(input:checked) {
    border-color: var(--beni);
    background: var(--beni-wash);
}

/* ========= نافذة الاتصال (js/call.js) ========= */
.call-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(24, 18, 30, 0.72);
}

body.call-open {
    overflow: hidden;
}

.call-panel {
    display: grid;
    gap: 1rem;
    width: min(440px, 100%);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 1.5rem;
    border-radius: var(--r-panel);
    background: #231C2B;
    color: #fff;
    box-shadow: var(--shadow-pop);
}

.call-overlay.has-video .call-panel,
.call-overlay[data-kind="video"][data-phase="live"] .call-panel {
    width: min(760px, 100%);
}

.call-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
    border-radius: 16px;
    overflow: hidden;
    background: #2E2538;
}

.call-remote {
    display: none;
    width: 100%;
    max-height: 60dvh;
    background: #000;
    object-fit: contain;
}

.call-overlay.has-video .call-remote {
    display: block;
}

.call-local {
    display: none;
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline-end: 0.75rem;
    width: 28%;
    max-width: 160px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    background: #000;
    transform: scaleX(-1);
}

.call-overlay[data-kind="video"]:is([data-phase="outgoing"], [data-phase="connecting"], [data-phase="live"]) .call-local {
    display: block;
}

.call-person {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: 1.5rem 1rem;
    text-align: center;
}

.call-overlay.has-video .call-person {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    padding: 0.75rem;
    background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
}

.call-overlay.has-video .call-avatar {
    display: none;
}

.call-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.25);
}

.call-overlay[data-phase="incoming"] .call-avatar,
.call-overlay[data-phase="outgoing"] .call-avatar {
    animation: call-pulse 1.6s ease-in-out infinite;
}

@keyframes call-pulse {
    50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
    .call-overlay .call-avatar {
        animation: none !important;
    }
}

.call-name {
    color: #fff;
    font-size: var(--step-2, 1.5rem);
}

.call-status,
.call-timer {
    color: rgba(255, 255, 255, 0.82);
    unicode-bidi: plaintext;
    font-variant-numeric: tabular-nums;
}

.call-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1rem;
}

.call-btn {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    min-width: 72px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
}

.call-btn i {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.2rem;
}

.call-btn:hover i,
.call-btn:focus-visible i {
    background: rgba(255, 255, 255, 0.24);
}

.call-btn:focus-visible {
    outline: none;
}

.call-btn:focus-visible i {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.call-btn.is-off i {
    background: #fff;
    color: #231C2B;
}

.call-accept i,
.call-accept-video i {
    background: #1F7A4F;
}

.call-decline i,
.call-hangup i {
    background: #C42B1C;
}

.call-accept:hover i,
.call-accept-video:hover i {
    background: #186640;
}

.call-decline:hover i,
.call-hangup:hover i {
    background: #A32317;
}

.call-btn:hover,
.call-btn:focus-visible {
    color: #fff;
}

/* الأزرار الظاهرة حسب المرحلة */
.call-overlay .call-btn {
    display: none;
}

.call-overlay[data-phase="incoming"] :is(.call-decline, .call-accept),
.call-overlay[data-phase="incoming"][data-kind="video"] .call-accept-video,
.call-overlay:is([data-phase="outgoing"], [data-phase="connecting"], [data-phase="live"]) :is(.call-mute, .call-hangup),
.call-overlay[data-kind="video"]:is([data-phase="outgoing"], [data-phase="connecting"], [data-phase="live"]) .call-camera,
.call-overlay[data-phase="ended"] :is(.call-report, .call-close) {
    display: grid;
}

.call-note {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    text-align: center;
}

.call-overlay:not([data-phase="incoming"]):not([data-phase="outgoing"]) .call-note {
    display: none;
}

@media (max-width: 560px) {
    .call-overlay {
        padding: 0;
    }

    .call-panel {
        width: 100%;
        height: 100dvh;
        max-height: none;
        align-content: center;
        border-radius: 0;
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }

    .call-overlay.has-video .call-panel {
        align-content: stretch;
        grid-template-rows: 1fr auto;
    }

    .call-overlay.has-video .call-remote {
        height: 100%;
        max-height: none;
    }
}

/* ========= الصفحات العامة: روابط الرأس (AdminHub > Pages) ========= */
body.public .site-header-inner {
    height: auto;
    min-height: calc(var(--header-h) - 1px);
}

.public-nav {
    display: flex;
    align-self: stretch;
    gap: 0.25rem;
}

.public-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    color: var(--ink-soft);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.public-nav a:hover,
.public-nav a[aria-current="page"] {
    color: var(--ink);
}

.public-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--beni);
}

@media (max-width: 900px) {
    body.public .site-header-inner {
        flex-wrap: wrap;
        column-gap: 1rem;
        padding-top: 0.6rem;
    }

    /* الروابط في سطر ثانٍ تحت الشعار، تمرر أفقياً إن ضاقت */
    .public-nav {
        order: 3;
        flex: 1 0 100%;
        min-height: 44px;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: calc(var(--gutter) - 0.75rem);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .public-nav::-webkit-scrollbar {
        display: none;
    }
}

/* نص الصفحات المكتوب في المحرر */
.page-text h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: var(--step-1);
}

.page-text h4 {
    margin: 1.25rem 0 0.4rem;
    font-size: 1rem;
}

.page-text ol {
    padding-inline-start: 1.5rem;
}

.page-text li + li {
    margin-top: 0.3rem;
}

.page-text blockquote {
    margin: 1.25rem 0;
    padding: 0.25rem 1rem;
    border-inline-start: 3px solid var(--beni);
    color: var(--ink-soft);
}

.page-text hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.page-text p:first-child {
    margin-top: 0;
}

.legal-page .page-text > h2:first-child {
    margin-top: 1.5rem;
}

/* معاينة المسودة (للفريق فقط) */
.alert.preview-banner {
    background: #FFF6E5;
    border-color: #F2D49B;
    color: var(--busy-text);
    font-weight: 700;
}

/* ========= التواصل مع الدعم ========= */
.support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: start;
}

.support-head h1 {
    margin-bottom: 0.6rem;
}

.support-intro {
    max-width: 68ch;
    margin-bottom: 1.5rem;
    color: var(--ink-soft);
}

.support-intro p + p {
    margin-top: 0.5rem;
}

.support-form .field {
    margin-bottom: 1.15rem;
}

.support-form .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 1rem;
}

.support-form input[type="file"] {
    display: block;
    max-width: 100%;
    font: inherit;
    font-size: 0.9375rem;
}

.support-form .btn-primary {
    margin-top: 0.75rem;
}

/* حقل لا يراه إلا البرامج الآلية */
.hp-field {
    position: absolute;
    inset-inline-start: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.support-who {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    margin-bottom: 1.15rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--r-input);
    background: var(--paper);
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.support-safety-hint {
    padding: 0.6rem 0.8rem;
    border-radius: var(--r-input);
    background: var(--beni-wash);
    color: var(--beni-deep);
}

.char-count {
    float: inline-end;
    font-variant-numeric: tabular-nums;
}

.support-form .captcha-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.support-form .captcha-box img {
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #F6F2F7;
    max-width: calc(100% - 52px);
    height: auto;
}

.support-form .captcha-refresh {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-soft);
}

.support-form #captcha {
    max-width: 220px;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-weight: 700;
}

.support-aside {
    display: grid;
    gap: 1.25rem;
}

.support-aside h2 {
    margin-bottom: 0.75rem;
    font-size: var(--step-2);
}

.ticket-list,
.quick-answers {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticket-list li + li,
.quick-answers li + li {
    border-top: 1px solid var(--line);
}

.ticket-list a {
    display: grid;
    gap: 0.3rem;
    padding: 0.7rem 0;
    color: var(--ink);
    text-decoration: none;
}

.ticket-list a:hover .ticket-subject {
    text-decoration: underline;
}

.ticket-list .is-unread .ticket-subject {
    font-weight: 700;
}

.ticket-subject {
    overflow-wrap: anywhere;
}

.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    font-size: var(--step--1);
}

.ticket-new {
    color: var(--beni-deep);
}

.quick-answers {
    margin-bottom: 1rem;
}

.quick-answers a {
    display: block;
    padding: 0.6rem 0;
    text-decoration: none;
}

.quick-answers a:hover {
    text-decoration: underline;
}

/* حالة طلب الدعم (اسم مستقل: .status-chip هو مبدّل حالة الدردشة في لوحة الأعضاء) */
.ticket-status {
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border-radius: var(--r-pill);
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 700;
    white-space: nowrap;
}

.ticket-status.is-new {
    background: var(--beni-wash);
    border-color: #F1C6D1;
    color: var(--beni-deep);
}

.ticket-status.is-awaiting_reply {
    background: #FFF6E5;
    border-color: #F2D49B;
    color: var(--busy-text);
}

.ticket-status.is-resolved {
    background: var(--success-wash);
    border-color: #B6E0CA;
    color: var(--success);
}

/* طلب واحد: المراسلة */
.support-back {
    margin-bottom: 1rem;
}

.support-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.ticket-head {
    max-width: 760px;
    margin-bottom: 1.5rem;
}

.ticket-head h1 {
    margin-bottom: 0.6rem;
    overflow-wrap: anywhere;
}

.ticket-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.ticket-thread {
    display: grid;
    gap: 1rem;
    max-width: 760px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticket-msg {
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
}

.ticket-msg.is-staff {
    border-inline-start: 3px solid var(--beni);
    background: #FFFCFD;
}

.ticket-msg-who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.ticket-msg-who time {
    margin-inline-start: auto;
    color: var(--ink-faint);
    font-size: var(--step--1);
}

.seal.seal-sm {
    width: 22px;
    height: 22px;
    font-size: 13px;
    border-radius: 5px;
}

.ticket-msg-body {
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.ticket-file {
    margin-top: 0.75rem;
}

.ticket-file img {
    max-width: min(280px, 100%);
    max-height: 280px;
    border: 1px solid var(--line);
    border-radius: 12px;
    object-fit: contain;
    background: var(--paper);
}

.ticket-file a:not(:has(img)) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    overflow-wrap: anywhere;
}

.ticket-reply {
    max-width: 760px;
    margin-top: 1.5rem;
}

.ticket-reply h2 {
    margin-bottom: 0.75rem;
    font-size: var(--step-2);
}

.ticket-resolve {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.support-missing {
    max-width: 560px;
    margin: 2rem auto;
    text-align: center;
}

.support-missing h1 {
    margin-bottom: 0.75rem;
    font-size: var(--step-3);
}

.support-missing p + p,
.support-missing .help-search {
    margin-top: 1rem;
}

.support-missing .support-actions {
    justify-content: center;
}

@media (max-width: 900px) {
    .support-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ========= مركز المساعدة ========= */
.help-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border-radius: var(--r-panel);
    background:
        radial-gradient(120% 150% at 100% 0%, rgba(var(--beni-rgb), 0.45) 0%, rgba(var(--beni-rgb), 0) 55%),
        var(--ink);
    color: #fff;
}

[dir="rtl"] .help-hero {
    background:
        radial-gradient(120% 150% at 0% 0%, rgba(var(--beni-rgb), 0.45) 0%, rgba(var(--beni-rgb), 0) 55%),
        var(--ink);
}

.help-hero h1 {
    color: #fff;
    margin-bottom: 0.5rem;
}

.help-hero-intro {
    max-width: 60ch;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 1.5rem;
}

/* ختم 縁 كعلامة مائية، كما في التحية ولوحة الدخول */
.help-hero-seal {
    position: absolute;
    z-index: -1;
    inset-inline-end: -0.05em;
    bottom: -0.25em;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(9rem, 22vw, 15rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.help-search {
    position: relative;
    display: flex;
    gap: 0.5rem;
    max-width: 640px;
}

.help-search > i {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    pointer-events: none;
}

.help-search input[type="search"] {
    min-height: 48px;
    padding-inline-start: 2.6rem;
    border-radius: var(--r-pill);
}

.help-search .btn {
    min-height: 48px;
}

.help-hero .help-search input[type="search"] {
    border-color: transparent;
}

.help-section {
    margin-top: 2.5rem;
}

.help-section > h2 {
    margin-bottom: 1rem;
}

.help-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-topics a {
    display: flex;
    gap: 0.9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.help-topics a:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

.help-topics a:hover strong {
    color: var(--beni-deep);
}

.help-cat-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--beni-wash);
    color: var(--beni-deep);
}

.help-topic-text {
    display: grid;
    gap: 0.2rem;
    align-content: start;
}

.help-topic-text span {
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.help-topic-text small {
    color: var(--ink-faint);
    font-size: var(--step--1);
}

.help-faq {
    max-width: 820px;
    border-top: 1px solid var(--line);
}

.help-faq details {
    border-bottom: 1px solid var(--line);
}

.help-faq summary {
    position: relative;
    padding: 1rem 2rem 1rem 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

[dir="rtl"] .help-faq summary {
    padding: 1rem 0 1rem 2rem;
}

.help-faq summary::-webkit-details-marker {
    display: none;
}

.help-faq summary::after {
    content: "+";
    position: absolute;
    inset-inline-end: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--beni);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
}

.help-faq details[open] summary::after {
    content: "−";
}

.help-faq summary:hover {
    color: var(--beni-deep);
}

.help-faq details > div,
.help-faq details > p {
    padding-bottom: 1rem;
    color: var(--ink-soft);
    line-height: 1.7;
}

.help-faq details > div p + p {
    margin-top: 0.5rem;
}

.help-faq ul {
    padding-inline-start: 1.25rem;
}

.help-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 3rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
}

.help-contact h2 {
    font-size: var(--step-2);
    margin-bottom: 0.2rem;
}

.help-contact p {
    color: var(--ink-soft);
}

.help-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
    color: var(--ink-faint);
    font-size: 0.9rem;
}

.help-crumbs a {
    text-decoration: none;
}

.help-crumbs a:hover {
    text-decoration: underline;
}

.help-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 72ch) minmax(240px, 300px);
    gap: 3rem;
    align-items: start;
}

.help-article h1 {
    margin-bottom: 1rem;
}

.help-related {
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
    display: grid;
    gap: 1.25rem;
}

.help-related h2 {
    font-size: var(--step-1);
}

.help-related ul {
    margin: -0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.help-related li {
    border-bottom: 1px solid var(--line);
}

.help-related li a {
    display: block;
    padding: 0.6rem 0;
    text-decoration: none;
}

.help-related li a:hover {
    text-decoration: underline;
}

.help-related .help-search input[type="search"],
.help-related .help-search .btn {
    min-height: var(--control-h);
}

.help-results {
    display: grid;
    gap: 0.75rem;
    max-width: 820px;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.help-results a {
    display: grid;
    gap: 0.3rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}

.help-results a:hover {
    border-color: var(--line-strong);
}

.help-results a:hover strong {
    color: var(--beni-deep);
}

.help-result-cat {
    color: var(--beni-deep);
    font-size: var(--step--1);
    font-weight: 700;
}

.help-result-text {
    color: var(--ink-soft);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.help-count {
    margin-top: 1rem;
    color: var(--ink-soft);
}

.help-page > h1 {
    margin-bottom: 1rem;
}

.help-cat-head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.help-cat-head .help-cat-icon {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
}

.help-cat-head h1 {
    margin-bottom: 0.3rem;
}

@media (max-width: 900px) {
    .help-article-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .help-related {
        position: static;
    }
}

@media (max-width: 520px) {
    .help-search {
        flex-wrap: wrap;
    }

    .help-search .btn {
        flex: 1 0 100%;
    }

    .help-contact .btn {
        width: 100%;
    }
}

/* ========= صفحة غير موجودة ========= */
.not-found .not-found-code {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 12vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--beni);
    margin-bottom: 0.5rem;
}

.not-found .help-search {
    margin-inline: auto;
}

/* ========= الارتباط ========= */
/* شارة "In a Relationship": حبر الختم الأحمر على خلفيته الفاتحة، بلا لمعان؛ ليست ختم توثيق */
.rel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem 0.3rem 0.6rem;
    border: 1px solid #F1C6D1;
    border-radius: var(--r-pill);
    background: var(--beni-wash);
    color: var(--beni-deep);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.rel-badge i {
    color: var(--beni);
}

.rel-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.85rem;
}

.rel-partner {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.95rem;
}

.rel-partner img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--beni);
}

.rel-partner:hover strong,
.rel-partner:focus-visible strong {
    color: var(--beni-deep);
    text-decoration: underline;
}

.rel-since-small {
    color: var(--ink-faint);
    font-size: 0.85rem;
}

/* إطار الصورة: حلقة رفيعة متدرجة داخل الحافة + ختم قلب صغير في الزاوية */
.gallery-main.is-partnered::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 4px;
    border-radius: inherit;
    background: linear-gradient(140deg, var(--beni) 0%, #E9A3B5 45%, var(--beni-deep) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.gallery-main.is-partnered {
    box-shadow: 0 10px 30px rgba(var(--beni-rgb), 0.14);
}

.rel-photo-heart {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--beni);
    font-size: 1.05rem;
    box-shadow: 0 4px 14px rgba(35, 28, 43, 0.18);
}

.btn-rel.is-sent {
    color: var(--ink-soft);
}

/* تنبيه قصير (سبب عدم إمكانية الطلب أو الاتصال) */
.rel-callout {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid #F3D9A4;
    border-radius: 12px;
    background: #FFF7E6;
    font-size: 0.95rem;
}

/* علامة الشريك في رأس المحادثة */
.rel-chip {
    display: inline-grid;
    place-items: center;
    margin-inline-start: 0.35em;
    color: var(--beni);
    font-size: 0.85em;
}

/* صفحة الارتباط */
.rel-page {
    max-width: 860px;
}

.rel-page .stack {
    display: grid;
    gap: 0.85rem;
}

.rel-couple {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 2.25rem);
    margin-bottom: 1.25rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid #F1C6D1;
    border-radius: var(--r-panel);
    background: linear-gradient(160deg, var(--surface) 55%, var(--beni-wash));
}

.rel-couple-photos {
    flex: none;
    display: flex;
    align-items: center;
}

.rel-couple-photos img {
    width: clamp(68px, 14vw, 92px);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--beni);
}

.rel-couple-photos img:last-child {
    margin-inline-start: -14px;
}

.rel-couple-heart {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-inline: -10px -6px;
    border-radius: 50%;
    background: var(--beni);
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 0 0 3px var(--surface);
}

.rel-couple-body {
    min-width: 0;
}

.rel-couple-body h2 {
    margin: 0.6rem 0 0.2rem;
    font-size: var(--step-3);
}

.rel-couple-body h2 a {
    color: inherit;
}

.rel-since {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.rel-since .status-dot {
    margin-inline-end: 0.3rem;
    font-size: 0.6em;
    vertical-align: 0.2em;
}

.rel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.rel-panel {
    margin-bottom: 1.25rem;
}

.rel-panel h2 {
    font-size: var(--step-2);
    margin-bottom: 0.4rem;
}

.rel-panel > p {
    color: var(--ink-soft);
    margin-bottom: 1rem;
}

.rel-shows {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.rel-shows .switch-row,
.rel-answer .switch-row {
    margin: 0;
}

.rel-end summary {
    cursor: pointer;
    color: var(--danger);
    font-weight: 700;
}

.rel-end[open] summary {
    margin-bottom: 1rem;
}

.rel-end-list {
    display: grid;
    gap: 0.35rem;
    padding-inline-start: 1.25rem;
    color: var(--ink-soft);
}

.rel-confirm {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    cursor: pointer;
    font-weight: 500;
}

.rel-confirm input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--danger);
}

.rel-section {
    margin-top: 2rem;
}

.rel-section h2 {
    font-size: var(--step-2);
    margin-bottom: 0.85rem;
}

.rel-section h2 .tab-count {
    color: var(--ink-faint);
    font-weight: 500;
}

.rel-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rel-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.rel-item.is-highlight {
    border-color: var(--beni);
    box-shadow: 0 0 0 3px var(--beni-wash);
}

.rel-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
}

.rel-person img {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.rel-person small {
    display: block;
    color: var(--ink-faint);
    font-size: 0.85rem;
}

.rel-person:hover strong {
    color: var(--beni-deep);
}

.rel-answer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.rel-answer-buttons {
    display: flex;
    gap: 0.5rem;
}

.rel-item-note {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.rel-empty p + p {
    margin-top: 0.5rem;
}

.rel-history {
    margin-top: 2rem;
    color: var(--ink-soft);
}

.rel-history summary {
    cursor: pointer;
    font-weight: 500;
}

.rel-history ul {
    display: grid;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.rel-history small {
    color: var(--ink-faint);
}

@media (max-width: 640px) {
    .rel-couple {
        flex-direction: column;
        text-align: center;
    }

    .rel-actions {
        justify-content: center;
    }

    .rel-actions .btn {
        flex: 1 1 100%;
    }

    .rel-item,
    .rel-answer,
    .rel-answer-buttons {
        width: 100%;
    }

    .rel-answer-buttons .btn {
        flex: 1;
    }

    .rel-item > form:not(.rel-answer) .btn {
        width: 100%;
    }

    .rel-item > form:not(.rel-answer) {
        width: 100%;
    }
}

/* ========= Our Journey ========= */
/* مساحة الطرفين: نفس حبر الختم الأحمر، مع خط زمني رفيع للمحطات وبطاقات صور للذكريات */
.journey-page {
    max-width: 920px;
}

.journey-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 2.5rem);
    margin-bottom: 1.5rem;
    padding: clamp(1.4rem, 4vw, 2.25rem);
    border-radius: var(--r-panel);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(var(--beni-rgb), 0.42) 0%, rgba(var(--beni-rgb), 0) 58%),
        var(--ink);
    color: #fff;
}

.journey-hero::after {
    content: var(--brand-mark);
    position: absolute;
    inset-inline-end: -0.5rem;
    bottom: -2.6rem;
    z-index: -1;
    font-family: var(--font-display);
    font-size: 11rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.journey-hero-photos {
    flex: none;
    display: flex;
    align-items: center;
}

.journey-hero-photos img {
    width: clamp(72px, 15vw, 104px);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--beni-light);
}

.journey-hero-heart {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-inline: -12px -8px;
    border-radius: 50%;
    background: var(--beni);
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 0 0 3px var(--ink);
}

.journey-hero-text {
    min-width: 0;
}

.journey-hero h1 {
    color: #fff;
    font-size: var(--step-4);
    line-height: 1.1;
}

.journey-names {
    margin-top: 0.35rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
}

.journey-names a {
    color: #fff;
    text-decoration: none;
}

.journey-names a:hover,
.journey-names a:focus-visible {
    text-decoration: underline;
}

.journey-names span[aria-hidden] {
    margin-inline: 0.35rem;
    color: var(--beni-light);
}

.journey-since {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-top: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
}

.journey-duration {
    padding: 0.1rem 0.65rem;
    border: 1px solid rgba(240, 138, 162, 0.55);
    border-radius: var(--r-pill);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
}

.journey-private {
    margin-top: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
}

.journey-tabs {
    margin-bottom: 1.25rem;
}

.journey-form {
    margin-bottom: 1.5rem;
}

.journey-form summary {
    cursor: pointer;
    color: var(--beni-deep);
    font-weight: 700;
}

.journey-form[open] summary {
    margin-bottom: 0.5rem;
}

.journey-form > .field-hint {
    margin-bottom: 1rem;
}

.journey-fields {
    display: grid;
    gap: 0.25rem;
}

.journey-fields .field {
    margin-bottom: 0.85rem;
}

.journey-fields input[type="text"],
.journey-fields textarea,
.journey-fields select {
    width: 100%;
}

.journey-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 1rem;
}

.journey-visibility {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.journey-visibility legend {
    margin-bottom: 0.4rem;
}

.journey-remove-photo {
    margin-top: 0.6rem;
}

.journey-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.journey-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.journey-item {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.journey-item.is-personal {
    border-style: dashed;
    border-color: var(--line-strong);
}

.journey-item-body {
    padding: 1rem 1.15rem;
}

.journey-item-title {
    font-size: var(--step-1);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.journey-date {
    color: var(--beni-deep);
    font-size: 0.875rem;
    font-weight: 700;
}

.journey-text {
    margin-top: 0.5rem;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.journey-meta {
    margin-top: 0.6rem;
    color: var(--ink-faint);
    font-size: 0.85rem;
}

.journey-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.6rem;
    border-radius: var(--r-pill);
    background: var(--paper);
    color: var(--ink-soft);
    font-weight: 700;
}

.journey-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

/* المحطات: خط زمني عمودي، النقطة على الخط والتاريخ فوق العنوان */
.journey-list-milestone {
    position: relative;
    display: grid;
    gap: 1rem;
    padding-inline-start: 2rem;
}

.journey-list-milestone::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    inset-inline-start: 0.6rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(var(--beni), #E9A3B5);
}

.journey-list-milestone .journey-item::before {
    content: "";
    position: absolute;
    top: 1.15rem;
    inset-inline-start: calc(-2rem + 0.6rem - 6px);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 3px var(--beni);
}

/* الذكريات: شبكة بطاقات بصورة */
.journey-list-memory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.journey-photo {
    display: block;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: var(--paper);
}

.journey-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* الاستعداد للزواج: قائمة مهام بحالتها */
.journey-list-task {
    display: grid;
    gap: 0.75rem;
}

.journey-task-icon {
    margin-inline-end: 0.35rem;
    color: var(--beni);
}

.journey-item.is-done .journey-item-title {
    color: var(--ink-soft);
}

.journey-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.journey-status select {
    width: auto;
    min-width: 11rem;
}

.journey-empty,
.journey-closed {
    margin-top: 0.5rem;
}

.journey-closed p + p {
    margin-top: 0.5rem;
}

.journey-foot {
    margin-top: 2rem;
    font-size: 0.875rem;
}

.rel-stories-link {
    margin-top: 1.5rem;
}

/* ========= قصص النجاح ========= */
.stories-page {
    max-width: 1080px;
}

.story-back {
    margin-bottom: 1rem;
}

.story-back a {
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 500;
}

.story-back a:hover {
    color: var(--beni-deep);
}

.stories-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 1.5rem;
    padding: clamp(1.5rem, 5vw, 3rem);
    border-radius: var(--r-panel);
    background:
        radial-gradient(110% 140% at 0% 0%, rgba(var(--beni-rgb), 0.12) 0%, rgba(var(--beni-rgb), 0) 60%),
        var(--surface);
    border: 1px solid var(--line);
    text-align: center;
}

.stories-seal {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    font-size: 38px;
    border-radius: 12px;
    transform: rotate(-6deg);
}

.stories-hero h1 {
    font-size: var(--step-4);
}

.stories-hero p {
    max-width: 58ch;
    margin: 0.75rem auto 1.25rem;
    color: var(--ink-soft);
}

.stories-tabs {
    margin-bottom: 1.25rem;
}

.story-stage {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--beni-deep);
    font-size: 0.8rem;
    font-weight: 700;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-photo);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.story-card-link:hover,
.story-card-link:focus-visible {
    border-color: #F1C6D1;
    box-shadow: 0 10px 28px rgba(var(--beni-rgb), 0.1);
}

.story-card-photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--paper);
}

.story-card-seal {
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--beni-wash), #fff 70%);
    color: var(--beni);
    font-size: 2rem;
}

.story-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.1rem 1.1rem;
}

.story-card-title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.story-card-text {
    color: var(--ink-soft);
    font-size: 0.925rem;
    overflow-wrap: anywhere;
}

.story-card-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--ink-faint);
    font-size: 0.85rem;
}

.story-card-more {
    color: var(--beni-deep);
    font-weight: 700;
}

.stories-note {
    margin-top: 2rem;
    font-size: 0.875rem;
    text-align: center;
}

/* القصة كاملة: عمود قراءة مريح */
.story-article {
    max-width: 720px;
    margin: 0 auto;
}

.story-head h1 {
    margin-top: 0.5rem;
    font-size: var(--step-4);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.story-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-top: 0.75rem;
    color: var(--ink-soft);
}

.story-byline i {
    color: var(--beni);
}

.story-photos {
    display: grid;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.story-photos img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--r-photo);
    object-fit: cover;
    background: var(--paper);
}

.story-photos-1 img {
    max-height: 520px;
}

.story-photos-2 {
    grid-template-columns: 1fr 1fr;
}

.story-photos-2 img,
.story-photos-3 img {
    aspect-ratio: 4 / 3;
}

.story-photos-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.story-photos-3 img:first-child {
    grid-row: span 2;
    aspect-ratio: auto;
}

.story-lede {
    margin: 1.25rem 0 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.5;
}

.story-body {
    margin-top: 1rem;
    font-size: 1.0625rem;
    line-height: 1.75;
}

.story-body p + p {
    margin-top: 1rem;
}

.story-body p {
    overflow-wrap: anywhere;
}

.story-foot {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}

.story-report summary {
    cursor: pointer;
    color: var(--ink-soft);
}

.story-report form {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.story-report fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.report-reason {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.4rem;
    cursor: pointer;
}

.story-missing h1 {
    margin-bottom: 0.5rem;
    font-size: var(--step-3);
}

/* My stories */
.my-stories {
    max-width: 860px;
}

.story-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.story-status {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    border-radius: var(--r-pill);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.story-status.is-warn { background: #FFF4DE; color: #8A5300; }
.story-status.is-accent { background: var(--beni-wash); color: var(--beni-deep); }
.story-status.is-good { background: var(--success-wash); color: var(--success); }
.story-status.is-bad { background: var(--danger-wash); color: var(--danger); }

.story-mine-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.story-your-turn {
    color: var(--beni-deep);
    font-size: 0.875rem;
}

.story-form .form-section {
    margin-bottom: 1.25rem;
}

.story-form fieldset.form-section {
    min-width: 0;
}

.story-legend {
    margin-bottom: 0.75rem;
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
}

.story-form input[type="text"],
.story-form textarea {
    width: 100%;
}

.story-partner-choice {
    display: block;
    margin-bottom: 0.6rem;
}

.story-partner-choice .radio-content {
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    text-align: start;
}

.story-partner-choice img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.story-partner-choice small {
    margin-inline-start: auto;
    color: var(--ink-faint);
    font-weight: 500;
}

.story-edit-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.story-edit-photo {
    display: grid;
    gap: 0.3rem;
    width: 120px;
    font-size: 0.85rem;
    cursor: pointer;
}

.story-edit-photo img {
    width: 120px;
    height: 90px;
    border-radius: 10px;
    object-fit: cover;
}

.story-manage-head p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.story-explain {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border-inline-start: 3px solid var(--beni);
    border-radius: 10px;
    background: var(--beni-wash);
}

.story-note {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    overflow-wrap: anywhere;
}

.story-note.is-team {
    border-color: #F3D9A4;
    background: #FFF7E6;
}

.story-preview {
    margin: 1.5rem 0;
    padding: clamp(1rem, 3vw, 1.75rem);
    border: 2px dashed #F1C6D1;
    border-radius: var(--r-panel);
    background: var(--surface);
}

.story-preview-label {
    margin-bottom: 1rem;
    color: var(--beni-deep);
    font-size: 0.9rem;
}

.story-preview-title {
    margin-top: 0.5rem;
    font-size: var(--step-3);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.story-never {
    margin-top: 1.25rem;
}

.story-action {
    margin-bottom: 1.25rem;
}

.story-action h2 {
    margin-bottom: 0.75rem;
    font-size: var(--step-2);
}

.story-action .stack,
.story-withdraw .stack {
    display: grid;
    gap: 0.85rem;
}

.story-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.story-consent input {
    accent-color: var(--beni);
}

.story-sub {
    margin: 1rem 0;
}

.story-sub summary {
    cursor: pointer;
    font-weight: 700;
}

.story-sub[open] summary {
    margin-bottom: 0.75rem;
}

.story-sub textarea {
    width: 100%;
}

@media (max-width: 640px) {
    .journey-hero {
        flex-direction: column;
        text-align: center;
    }

    .journey-since {
        justify-content: center;
    }

    .journey-hero::after {
        font-size: 8rem;
    }

    .journey-list-milestone {
        padding-inline-start: 1.6rem;
    }

    .journey-list-milestone::before {
        inset-inline-start: 0.4rem;
    }

    .journey-list-milestone .journey-item::before {
        inset-inline-start: calc(-1.6rem + 0.4rem - 6px);
    }

    .journey-status {
        flex-wrap: wrap;
    }

    .journey-status select {
        flex: 1;
    }

    .story-photos-3 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .story-photos-3 img:first-child {
        grid-column: span 2;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }

    .story-partner-choice .radio-content {
        flex-wrap: wrap;
    }

    .story-action-buttons .btn,
    .story-start .btn {
        flex: 1 1 100%;
    }
}