@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700;800;900&display=swap');

/* === Consolidated source: public/css/ayin.css === */
:root {
    --ayin-navy: #061A3A;
    --ayin-deep-navy: #001B3D;
    --ayin-blue: #0B4DB3;
    --ayin-blue-soft: #EAF1FF;
    --ayin-gold: #F5C542;
    --ayin-green: #22C55E;
    --ayin-green-dark: #15803D;
    --ayin-bg: #F5F7FB;
    --ayin-white: #FFFFFF;
    --ayin-text: #111827;
    --ayin-muted: #6B7280;
    --ayin-border: #E5E7EB;
    --ayin-radius: 22px;
    --ayin-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

* {
    box-sizing: border-box;
}

html {
    direction: rtl;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Tajawal', sans-serif;
    background: var(--ayin-bg);
    color: var(--ayin-text);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font-family: inherit;
}

.ayin-page {
    min-height: 100vh;
}

.ayin-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.ayin-topbar {
    background: var(--ayin-deep-navy);
    color: white;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 12px 28px rgba(0, 27, 61, 0.16);
}

.ayin-topbar-inner {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ayin-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}

.ayin-mark {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: linear-gradient(145deg, var(--ayin-gold), #DCA927);
    color: var(--ayin-deep-navy);
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(245, 197, 66, 0.22);
}

.ayin-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.ayin-brand-text strong {
    font-size: 23px;
}

.ayin-brand-text span {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    font-weight: 500;
}

.ayin-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    color: rgba(255,255,255,0.78);
    font-weight: 600;
}

.ayin-nav a.active,
.ayin-nav a:hover {
    color: var(--ayin-gold);
}

.ayin-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ayin-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    color: white;
    display: grid;
    place-items: center;
}

.ayin-btn {
    border: 0;
    border-radius: 15px;
    min-height: 48px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.ayin-btn:hover {
    transform: translateY(-1px);
}

.ayin-btn-primary {
    background: var(--ayin-blue);
    color: white;
    box-shadow: 0 12px 24px rgba(11, 77, 179, 0.22);
}

.ayin-btn-gold {
    background: var(--ayin-gold);
    color: var(--ayin-deep-navy);
    box-shadow: 0 12px 24px rgba(245, 197, 66, 0.20);
}

.ayin-btn-light {
    background: white;
    color: var(--ayin-blue);
    border: 1px solid var(--ayin-border);
}

.ayin-card {
    background: white;
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: var(--ayin-radius);
    box-shadow: var(--ayin-shadow);
}

.ayin-section-title {
    margin: 0 0 18px;
    font-size: 23px;
    font-weight: 900;
    color: var(--ayin-text);
}

.ayin-muted {
    color: var(--ayin-muted);
}

/* Welcome */

.welcome-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 10%, rgba(245, 197, 66, 0.22), transparent 32%),
        radial-gradient(circle at 85% 20%, rgba(11, 77, 179, 0.26), transparent 34%),
        linear-gradient(135deg, #00152F, #061A3A 55%, #020B19);
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
}

.welcome-shell {
    min-height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    align-items: center;
    gap: 70px;
    padding: 70px 0;
}

.welcome-content {
    position: relative;
    z-index: 2;
}

.welcome-content h1 {
    font-size: clamp(42px, 6vw, 74px);
    line-height: 1.08;
    margin: 26px 0 18px;
    font-weight: 900;
}

.welcome-content p {
    color: rgba(255,255,255,0.76);
    font-size: 20px;
    line-height: 1.9;
    max-width: 620px;
    margin: 0 0 32px;
}

.welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 9px 15px;
    color: var(--ayin-gold);
    font-weight: 800;
}

.welcome-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.web-phone-preview {
    width: 420px;
    max-width: 100%;
    background: #F7F9FD;
    border-radius: 38px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow: 0 35px 80px rgba(0,0,0,0.30);
    justify-self: center;
}

.preview-screen {
    min-height: 680px;
    border-radius: 30px;
    background: var(--ayin-bg);
    overflow: hidden;
    color: var(--ayin-text);
}

.preview-head {
    background: var(--ayin-deep-navy);
    color: white;
    padding: 24px 22px;
}

.preview-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.preview-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(145deg, #E5E7EB, #FFFFFF);
    display: grid;
    place-items: center;
    font-weight: 900;
    color: var(--ayin-blue);
}

.preview-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
    margin-top: -8px;
}

.mini-stat {
    background: white;
    border-radius: 17px;
    padding: 14px;
    box-shadow: 0 10px 26px rgba(15,23,42,0.08);
}

.mini-stat span {
    display: block;
    color: var(--ayin-muted);
    font-size: 12px;
    margin-bottom: 8px;
}

.mini-stat strong {
    color: var(--ayin-deep-navy);
    font-size: 18px;
}

.preview-grid {
    padding: 0 16px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.preview-service {
    background: white;
    border-radius: 16px;
    min-height: 74px;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 12px;
    color: var(--ayin-text);
    box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}

.preview-service b {
    font-size: 20px;
    display: block;
}

/* Dashboard */

.dashboard-page {
    background: var(--ayin-bg);
    min-height: 100vh;
}

.dashboard-shell {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 26px;
    padding: 30px 0 44px;
}

.side-panel {
    align-self: start;
    position: sticky;
    top: 100px;
    padding: 22px;
}

.side-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ayin-border);
    margin-bottom: 18px;
}

.side-menu {
    display: grid;
    gap: 8px;
}

.side-menu a {
    padding: 13px 14px;
    border-radius: 14px;
    color: var(--ayin-muted);
    font-weight: 700;
}

.side-menu a.active,
.side-menu a:hover {
    background: var(--ayin-blue-soft);
    color: var(--ayin-blue);
}

.main-content {
    min-width: 0;
}

.hero-dashboard {
    background:
        radial-gradient(circle at 8% 15%, rgba(245,197,66,0.20), transparent 28%),
        linear-gradient(135deg, var(--ayin-deep-navy), var(--ayin-navy));
    color: white;
    border-radius: 30px;
    padding: 28px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 22px;
    box-shadow: var(--ayin-shadow);
}

.hero-dashboard h1 {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 900;
}

.hero-dashboard p {
    margin: 0;
    color: rgba(255,255,255,0.72);
    line-height: 1.8;
}

.referral-box {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 20px;
    padding: 18px;
}

.referral-code {
    background: white;
    color: var(--ayin-deep-navy);
    border-radius: 14px;
    padding: 12px;
    font-weight: 900;
    margin-top: 10px;
    direction: ltr;
    text-align: left;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 26px;
}

.stat-card {
    padding: 20px;
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--ayin-blue-soft);
    color: var(--ayin-blue);
    font-size: 22px;
    margin-bottom: 15px;
}

.stat-card span {
    color: var(--ayin-muted);
    font-weight: 700;
}

.stat-card strong {
    display: block;
    margin-top: 8px;
    font-size: 27px;
    color: var(--ayin-text);
    font-weight: 900;
}

.stat-card.green {
    background: linear-gradient(135deg, #16A34A, var(--ayin-green));
    color: white;
}

.stat-card.green span,
.stat-card.green strong {
    color: white;
}

.stat-card.green .stat-icon {
    background: rgba(255,255,255,0.18);
    color: white;
}

.stat-card.gold .stat-icon {
    background: rgba(245,197,66,0.18);
    color: #B8860B;
}

.web-grid-2 {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 22px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.service-card {
    padding: 18px 12px;
    text-align: center;
    border-radius: 18px;
    background: white;
    border: 1px solid var(--ayin-border);
    transition: .2s ease;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ayin-shadow);
}

.service-card b {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 10px;
    border-radius: 16px;
    background: var(--ayin-blue-soft);
    font-size: 22px;
}

.service-card span {
    font-weight: 800;
}

.activity-list {
    display: grid;
    gap: 12px;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ayin-border);
}

.activity-item:last-child {
    border-bottom: 0;
}

.activity-title {
    font-weight: 800;
}

.activity-date {
    color: var(--ayin-muted);
    font-size: 13px;
}

.activity-value {
    font-weight: 900;
    color: var(--ayin-green-dark);
}

/* Store */

.store-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: 18px;
}

.store-search input {
    height: 50px;
    border-radius: 16px;
    border: 1px solid var(--ayin-border);
    padding: 0 16px;
    outline: none;
    color: var(--ayin-text);
    background: #fff;
}

.store-search input:focus {
    border-color: var(--ayin-blue);
    box-shadow: 0 0 0 4px rgba(11, 77, 179, 0.10);
}

.store-search button {
    height: 50px;
    border: 0;
    border-radius: 16px;
    padding: 0 22px;
    background: var(--ayin-blue);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.store-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--ayin-bg);
    border: 1px solid var(--ayin-border);
    color: var(--ayin-muted);
    font-size: 14px;
    font-weight: 800;
}

.store-chip.active {
    background: var(--ayin-blue);
    color: #fff;
    border-color: var(--ayin-blue);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.product-card {
    overflow: hidden;
}

.product-image {
    height: 190px;
    display: grid;
    place-items: center;
    font-size: 74px;
    background: linear-gradient(145deg, #EEF4FF, #FFFFFF);
}

.product-image.phone {
    background: linear-gradient(145deg, #F0FDF4, #FFFFFF);
}

.product-image.cream {
    background: linear-gradient(145deg, #FFF7ED, #FFFFFF);
}

.product-content {
    padding: 18px;
}

.product-meta {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--ayin-blue-soft);
    color: var(--ayin-blue);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
}

.product-content h3 {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 900;
    color: var(--ayin-text);
}

.product-rating {
    color: #F59E0B;
    font-weight: 900;
    margin-bottom: 10px;
}

.product-rating span {
    color: var(--ayin-muted);
    font-size: 13px;
    margin-right: 6px;
}

.product-content p {
    color: var(--ayin-muted);
    line-height: 1.7;
    margin: 0 0 18px;
}

.product-footer {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
}

.product-price-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 2px 0;
}

.product-price-main,
.product-points-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.product-price-main {
    color: var(--ayin-deep-navy);
}

.product-price-main strong {
    display: inline-block;
    font-size: 22px;
    color: var(--ayin-deep-navy);
    font-weight: 900;
    line-height: 1;
    direction: ltr;
}

.product-price-main small {
    font-size: 15px;
    font-weight: 800;
    color: var(--ayin-deep-navy);
}

.product-points-inline span:last-child {
    color: var(--ayin-green-dark);
    font-weight: 900;
    font-size: 17px;
}

.product-slash {
    color: #94a3b8;
    font-weight: 900;
    font-size: 14px;
}

.product-card-btn {
    width: 100%;
    min-height: 42px;
    font-size: 15px;
    padding: 0 16px;
    border-radius: 14px;
}

/* Product Details */

.product-details-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 24px;
}

.product-details-image {
    min-height: 520px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 28px;
    background:
        radial-gradient(circle at 50% 35%, rgba(245, 197, 66, 0.16), transparent 34%),
        linear-gradient(145deg, #EEF4FF, #FFFFFF);
}

.big-product-icon {
    font-size: 170px;
    line-height: 1;
}

.product-image-label {
    margin-top: 18px;
    font-weight: 900;
    color: var(--ayin-deep-navy);
}

.product-details-info {
    padding: 30px;
}

.back-link {
    display: inline-flex;
    margin-bottom: 20px;
    color: var(--ayin-blue);
    font-weight: 800;
}

.product-details-info h1 {
    margin: 0 0 10px;
    font-size: 38px;
    font-weight: 900;
    color: var(--ayin-text);
}

.product-rating.big {
    font-size: 18px;
    margin-bottom: 20px;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.price-row strong {
    font-size: 34px;
    color: var(--ayin-blue);
    font-weight: 900;
}

.price-row span {
    background: rgba(34, 197, 94, 0.12);
    color: var(--ayin-green-dark);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
}

.product-details-info p {
    color: var(--ayin-muted);
    line-height: 1.9;
    font-size: 17px;
    margin-bottom: 22px;
}

.product-benefits {
    display: grid;
    gap: 10px;
    padding: 16px;
    background: var(--ayin-bg);
    border-radius: 18px;
    margin-bottom: 22px;
    font-weight: 800;
}

.quantity-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--ayin-border);
    border-radius: 18px;
    margin-bottom: 22px;
}

.quantity-box span {
    font-weight: 900;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 16px;
}

.quantity-control button {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 0;
    background: var(--ayin-blue-soft);
    color: var(--ayin-blue);
    font-size: 20px;
    font-weight: 900;
}

.product-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Cart */

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
}

.cart-items-card,
.order-summary-card {
    padding: 22px;
}

.cart-item {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ayin-border);
}

.cart-item:last-child {
    border-bottom: 0;
}

.cart-product-thumb {
    width: 86px;
    height: 86px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 40px;
    background: linear-gradient(145deg, #EEF4FF, #FFFFFF);
}

.cart-product-thumb.phone {
    background: linear-gradient(145deg, #F0FDF4, #FFFFFF);
}

.cart-product-info h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 900;
}

.cart-product-info p {
    margin: 0 0 6px;
    color: var(--ayin-muted);
    line-height: 1.6;
}

.cart-product-info span {
    color: var(--ayin-green-dark);
    font-weight: 900;
}

.cart-quantity {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ayin-bg);
    border-radius: 16px;
    padding: 8px;
}

.cart-quantity button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 12px;
    background: white;
    color: var(--ayin-blue);
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}

.cart-price {
    font-size: 20px;
    font-weight: 900;
    color: var(--ayin-deep-navy);
}

.summary-row,
.summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
}

.summary-row span {
    color: var(--ayin-muted);
    font-weight: 700;
}

.summary-row strong {
    color: var(--ayin-text);
    font-weight: 900;
}

.summary-divider {
    height: 1px;
    background: var(--ayin-border);
    margin: 12px 0;
}

.summary-total span {
    font-size: 18px;
    font-weight: 900;
}

.summary-total strong {
    font-size: 25px;
    font-weight: 900;
    color: var(--ayin-blue);
}

.checkout-btn {
    width: 100%;
    margin-top: 18px;
}

.continue-shopping {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: var(--ayin-blue);
    font-weight: 900;
}

/* Wallet */

.wallet-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}

.wallet-balance-card {
    border-radius: 28px;
    padding: 24px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: var(--ayin-shadow);
}

.wallet-balance-card.purchase {
    background:
        radial-gradient(circle at 10% 10%, rgba(245,197,66,.24), transparent 32%),
        linear-gradient(135deg, var(--ayin-blue), var(--ayin-deep-navy));
}

.wallet-balance-card.profit {
    background:
        radial-gradient(circle at 10% 10%, rgba(255,255,255,.22), transparent 32%),
        linear-gradient(135deg, #16A34A, var(--ayin-green));
}

.wallet-balance-card span {
    color: rgba(255,255,255,.74);
    font-weight: 800;
}

.wallet-balance-card strong {
    display: block;
    font-size: 34px;
    font-weight: 900;
    margin: 8px 0;
}

.wallet-balance-card p {
    margin: 0;
    color: rgba(255,255,255,.76);
}

.wallet-balance-card b {
    width: 70px;
    height: 70px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.16);
    font-size: 34px;
}

.wallet-actions-card {
    padding: 22px;
    margin-bottom: 22px;
}

.wallet-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.wallet-action {
    min-height: 110px;
    border-radius: 20px;
    background: var(--ayin-bg);
    border: 1px solid var(--ayin-border);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 14px;
    font-weight: 900;
    transition: .2s ease;
}

.wallet-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--ayin-shadow);
}

.wallet-action b {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--ayin-blue-soft);
    font-size: 22px;
    margin-bottom: 8px;
}

.wallet-action.green b {
    background: rgba(34,197,94,.14);
}

.wallet-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
}

.wallet-transactions-card,
.withdrawal-card {
    padding: 22px;
}

.wallet-transaction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ayin-border);
}

.wallet-transaction:last-child {
    border-bottom: 0;
}

.wallet-transaction strong {
    display: block;
    margin-bottom: 5px;
}

.wallet-transaction span {
    color: var(--ayin-muted);
    font-size: 14px;
}

.wallet-transaction b {
    font-weight: 900;
}

.wallet-transaction .positive {
    color: var(--ayin-green-dark);
}

.wallet-transaction .negative {
    color: #DC2626;
}

.wallet-transaction .pending {
    color: #B8860B;
}

.withdrawal-info {
    background: var(--ayin-bg);
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 16px;
}

.withdrawal-info span {
    display: block;
    color: var(--ayin-muted);
    font-weight: 800;
    margin-bottom: 8px;
}

.withdrawal-info strong {
    font-size: 30px;
    color: var(--ayin-green-dark);
    font-weight: 900;
}

.wallet-note {
    color: var(--ayin-muted);
    line-height: 1.8;
    background: rgba(245,197,66,.12);
    border: 1px solid rgba(245,197,66,.22);
    border-radius: 18px;
    padding: 14px;
}

/* Mobile nav */

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: white;
    border: 1px solid var(--ayin-border);
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(15,23,42,0.18);
    z-index: 30;
    overflow: hidden;
}

.mobile-bottom-nav a {
    flex: 1;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 9px 2px;
    color: var(--ayin-muted);
    font-size: 12px;
    font-weight: 800;
}

.mobile-bottom-nav a.active {
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
}

.mobile-bottom-nav b {
    font-size: 18px;
    line-height: 1;
}

/* Responsive */

@media (max-width: 1100px) {
    .welcome-shell {
        grid-template-columns: 1fr 400px;
        gap: 44px;
    }

    .web-phone-preview {
        width: 390px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 980px) {
    .ayin-nav {
        display: none;
    }

    .welcome-shell {
        grid-template-columns: 1fr;
        gap: 42px;
        text-align: center;
        padding: 56px 0 70px;
    }

    .welcome-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .welcome-actions {
        justify-content: center;
    }

    .web-phone-preview {
        width: min(420px, 100%);
        margin: 0 auto;
    }

    .dashboard-shell {
        grid-template-columns: 1fr;
        padding-bottom: 100px;
    }

    .side-panel {
        display: none;
    }

    .hero-dashboard {
        grid-template-columns: 1fr;
    }

    .web-grid-2,
    .cart-layout,
    .wallet-layout {
        grid-template-columns: 1fr;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-details-layout {
        grid-template-columns: 1fr;
    }

    .product-details-image {
        min-height: 360px;
    }

    .big-product-icon {
        font-size: 120px;
    }

    .wallet-cards-grid {
        grid-template-columns: 1fr;
    }

    .mobile-bottom-nav {
        display: flex;
    }
}

@media (max-width: 680px) {
    .cart-item {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .cart-quantity,
    .cart-price {
        grid-column: 2;
        justify-self: start;
    }

    .cart-product-thumb {
        width: 70px;
        height: 70px;
        border-radius: 18px;
        font-size: 32px;
    }

    .wallet-actions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .ayin-container {
        width: min(100% - 22px, 1180px);
    }

    .ayin-topbar-inner {
        height: 66px;
    }

    .ayin-brand-text span {
        display: none;
    }

    .welcome-shell {
        padding: 40px 0 54px;
    }

    .welcome-content h1 {
        font-size: 39px;
    }

    .welcome-content p {
        font-size: 17px;
        line-height: 1.8;
    }

    .welcome-actions {
        flex-direction: column;
    }

    .welcome-actions .ayin-btn {
        width: 100%;
    }

    .web-phone-preview {
        border-radius: 28px;
        padding: 12px;
    }

    .preview-screen {
        min-height: 590px;
        border-radius: 22px;
    }

    .preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-dashboard {
        padding: 22px;
        border-radius: 24px;
    }

    .hero-dashboard h1 {
        font-size: 25px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .store-search {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-price-line {
        flex-wrap: wrap;
    }

    .product-points-inline {
        width: 100%;
        justify-content: flex-start;
    }

    .product-details-info h1 {
        font-size: 28px;
    }

    .price-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-actions {
        flex-direction: column;
    }

    .product-actions .ayin-btn {
        width: 100%;
    }
}

/* Profits */

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

.hero-eyebrow,
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ayin-gold);
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 8px;
}

.section-kicker {
    color: var(--ayin-blue);
}

.profits-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.profits-ghost-btn {
    color: white;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.18);
}

.profits-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.profit-summary-card {
    min-width: 0;
    min-height: 178px;
    padding: 21px;
    border-radius: 24px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border: 1px solid var(--ayin-border);
    box-shadow: 0 14px 34px rgba(15,23,42,.08);
    background: white;
    overflow: hidden;
    position: relative;
}

.profit-summary-card::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    left: -42px;
    bottom: -48px;
    background: currentColor;
    opacity: .06;
}

.profit-summary-card.total {
    color: white;
    border-color: transparent;
    background:
        radial-gradient(circle at 5% 10%, rgba(245,197,66,.24), transparent 35%),
        linear-gradient(135deg, var(--ayin-blue), var(--ayin-deep-navy));
}

.profit-summary-card.balance {
    color: white;
    border-color: transparent;
    background:
        radial-gradient(circle at 5% 10%, rgba(255,255,255,.22), transparent 35%),
        linear-gradient(135deg, #15803D, var(--ayin-green));
}

.profit-summary-card.direct {
    background: linear-gradient(145deg, #FFFDF5, #FFFFFF);
    border-color: rgba(245,197,66,.36);
}

.profit-summary-card.pending {
    background: linear-gradient(145deg, #F8FAFC, #FFFFFF);
}

.profit-summary-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: var(--ayin-blue-soft);
    color: var(--ayin-blue);
    font-size: 21px;
    font-weight: 900;
}

.profit-summary-card.total .profit-summary-icon,
.profit-summary-card.balance .profit-summary-icon {
    background: rgba(255,255,255,.17);
    color: white;
}

.profit-summary-card.direct .profit-summary-icon {
    background: rgba(245,197,66,.20);
    color: #9A6A00;
}

.profit-summary-card.pending .profit-summary-icon {
    background: #EEF2F7;
    color: #64748B;
}

.profit-summary-card span {
    display: block;
    color: var(--ayin-muted);
    font-weight: 800;
}

.profit-summary-card.total span,
.profit-summary-card.balance span {
    color: rgba(255,255,255,.76);
}

.profit-summary-card strong {
    display: block;
    color: var(--ayin-text);
    font-size: clamp(23px, 2vw, 29px);
    line-height: 1.2;
    margin: 9px 0 8px;
    font-weight: 900;
    white-space: nowrap;
}

.profit-summary-card.total strong,
.profit-summary-card.balance strong {
    color: white;
}

.profit-summary-card strong small {
    font-size: 13px;
    font-weight: 800;
}

.profit-summary-card p {
    margin: 0;
    color: var(--ayin-muted);
    font-size: 13px;
    line-height: 1.6;
}

.profit-summary-card.total p,
.profit-summary-card.balance p {
    color: rgba(255,255,255,.72);
}

.profits-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 22px;
    margin-bottom: 22px;
}

.balance-overview-card,
.direct-profit-overview,
.profits-table-card {
    padding: 24px;
}

.profits-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.profits-section-head .ayin-section-title {
    margin-bottom: 0;
}

.profit-rate-badge,
.status-pill,
.table-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.profit-rate-badge {
    color: var(--ayin-green-dark);
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.18);
}

.branch-points-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.branch-points {
    padding: 17px;
    border-radius: 20px;
    border: 1px solid var(--ayin-border);
    background: var(--ayin-bg);
}

.branch-points-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.branch-points-head span,
.branch-points small {
    color: var(--ayin-muted);
    font-weight: 700;
}

.branch-points-head strong {
    font-size: 18px;
    font-weight: 900;
    color: var(--ayin-text);
}

.branch-points small {
    display: block;
    margin-top: 9px;
    font-size: 12px;
}

.balance-progress-track {
    height: 10px;
    border-radius: 999px;
    background: #E4EAF4;
    overflow: hidden;
}

.balance-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ayin-blue), #3B82F6);
}

.left-branch .balance-progress-track span {
    background: linear-gradient(90deg, #16A34A, var(--ayin-green));
}

.balance-calculation-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1.35fr;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
    padding: 15px;
    border-radius: 20px;
    background: #F8FAFC;
    border: 1px dashed #CDD6E4;
}

.balance-calculation-strip > div {
    min-width: 0;
    text-align: center;
}

.balance-calculation-strip span {
    display: block;
    color: var(--ayin-muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
}

.balance-calculation-strip strong {
    color: var(--ayin-text);
    font-size: 20px;
    font-weight: 900;
}

.balance-calculation-strip > b {
    color: #94A3B8;
    font-size: 22px;
}

.balance-calculation-strip .calculation-result {
    padding: 12px;
    border-radius: 16px;
    background: rgba(34,197,94,.10);
}

.balance-calculation-strip .calculation-result strong {
    color: var(--ayin-green-dark);
}

.balance-carry-note {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    margin-top: 16px;
    border-radius: 18px;
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
    border: 1px solid rgba(11,77,179,.12);
}

.balance-carry-note p {
    margin: 4px 0 0;
    color: var(--ayin-muted);
    line-height: 1.6;
    font-size: 13px;
}

.balance-carry-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: white;
    background: var(--ayin-blue);
    font-size: 22px;
    font-weight: 900;
}

.direct-profit-overview {
    color: white;
    background:
        radial-gradient(circle at 15% 0%, rgba(245,197,66,.20), transparent 34%),
        linear-gradient(145deg, var(--ayin-deep-navy), var(--ayin-navy));
    border-color: transparent;
    position: relative;
    overflow: hidden;
}

.direct-profit-mark {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 23px;
    margin-bottom: 24px;
    color: var(--ayin-deep-navy);
    background: var(--ayin-gold);
    font-size: 23px;
    font-weight: 900;
    box-shadow: 0 15px 30px rgba(245,197,66,.20);
}

.direct-profit-overview .section-kicker {
    color: var(--ayin-gold);
}

.direct-profit-overview h2 {
    margin: 0 0 10px;
    font-size: 27px;
    font-weight: 900;
}

.direct-profit-overview > p {
    margin: 0 0 20px;
    color: rgba(255,255,255,.70);
    line-height: 1.8;
}

.direct-profit-metrics {
    display: grid;
    gap: 10px;
}

.direct-profit-metrics > div {
    padding: 13px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
}

.direct-profit-metrics span,
.direct-profit-example span {
    display: block;
    color: rgba(255,255,255,.65);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
}

.direct-profit-metrics strong,
.direct-profit-example strong {
    font-size: 17px;
    font-weight: 900;
}

.direct-profit-example {
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    color: var(--ayin-deep-navy);
    background: var(--ayin-gold);
}

.direct-profit-example span {
    color: rgba(0,27,61,.65);
}

.profits-table-card {
    margin-bottom: 22px;
}

.table-card-head {
    align-items: center;
}

.table-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
    color: var(--ayin-blue);
    border: 1px solid var(--ayin-border);
    border-radius: 13px;
    background: white;
    font-size: 13px;
    font-weight: 900;
}

.table-note {
    color: #9A6A00;
    background: rgba(245,197,66,.14);
}

.profits-table-wrap {
    overflow-x: auto;
}

.profits-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
}

.profits-table th,
.profits-table td {
    padding: 15px 12px;
    text-align: right;
    border-bottom: 1px solid var(--ayin-border);
    white-space: nowrap;
}

.profits-table th {
    color: var(--ayin-muted);
    background: #F8FAFC;
    font-size: 13px;
    font-weight: 900;
}

.profits-table th:first-child {
    border-radius: 0 14px 14px 0;
}

.profits-table th:last-child {
    border-radius: 14px 0 0 14px;
}

.profits-table tbody tr:last-child td {
    border-bottom: 0;
}

.member-cell {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ayin-text);
    font-weight: 900;
}

.member-cell b {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
}

.member-id {
    direction: ltr;
    display: inline-block;
    color: var(--ayin-muted);
    font-weight: 800;
}

.rate-text {
    color: var(--ayin-blue);
}

.profit-value {
    color: var(--ayin-green-dark);
}

.status-pill.completed {
    color: var(--ayin-green-dark);
    background: rgba(34,197,94,.12);
}

.status-pill.processing {
    color: #9A6A00;
    background: rgba(245,197,66,.16);
}

.balance-history-table {
    min-width: 760px;
}

@media (max-width: 1100px) {
    .profits-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profits-main-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

@media (max-width: 980px) {
    .profits-hero,
    .profits-main-grid {
        grid-template-columns: 1fr;
    }

    .profits-header-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .profits-summary-grid,
    .branch-points-grid {
        grid-template-columns: 1fr;
    }

    .profit-summary-card {
        min-height: auto;
    }

    .balance-calculation-strip {
        grid-template-columns: 1fr;
    }

    .balance-calculation-strip > b {
        transform: rotate(90deg);
        justify-self: center;
    }

    .profits-section-head,
    .table-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .profits-header-actions {
        width: 100%;
        flex-direction: column;
    }

    .profits-header-actions .ayin-btn,
    .table-filter-btn {
        width: 100%;
    }

    .balance-overview-card,
    .direct-profit-overview,
    .profits-table-card {
        padding: 18px;
    }

    .profits-table-wrap {
        overflow: visible;
    }

    .profits-table,
    .profits-table tbody,
    .profits-table tr,
    .profits-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .profits-table thead {
        display: none;
    }

    .profits-table tbody {
        display: grid;
        gap: 13px;
    }

    .profits-table tbody tr {
        padding: 8px 14px;
        border: 1px solid var(--ayin-border);
        border-radius: 18px;
        background: #fff;
    }

    .profits-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 10px 0;
        white-space: normal;
        text-align: left;
    }

    .profits-table td::before {
        content: attr(data-label);
        color: var(--ayin-muted);
        font-size: 12px;
        font-weight: 900;
        text-align: right;
    }

    .profits-table td:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 560px) {
    .profits-summary-grid {
        gap: 12px;
    }

    .profit-summary-card {
        border-radius: 20px;
    }

    .branch-points-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}


/* Tree */
.tree-hero {
    grid-template-columns: minmax(0, 1fr) auto;
}

.tree-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.tree-ghost-btn {
    color: white;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.18);
}

.tree-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.tree-summary-card {
    min-width: 0;
    min-height: 145px;
    padding: 19px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-radius: 23px;
    background: white;
    border: 1px solid var(--ayin-border);
    box-shadow: 0 14px 34px rgba(15,23,42,.07);
    position: relative;
    overflow: hidden;
}

.tree-summary-card::after {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    left: -36px;
    bottom: -40px;
    background: currentColor;
    opacity: .05;
}

.tree-summary-icon {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--ayin-blue-soft);
    font-size: 20px;
}

.tree-summary-card small {
    display: block;
    color: var(--ayin-muted);
    font-size: 13px;
    font-weight: 800;
}

.tree-summary-card strong {
    display: block;
    margin: 8px 0 6px;
    color: var(--ayin-text);
    font-size: 25px;
    font-weight: 900;
    line-height: 1.1;
}

.tree-summary-card strong em {
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.tree-summary-card p {
    margin: 0;
    color: var(--ayin-muted);
    font-size: 12px;
    line-height: 1.55;
}

.tree-summary-card.members {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--ayin-blue), var(--ayin-deep-navy));
}

.tree-summary-card.members .tree-summary-icon {
    background: rgba(255,255,255,.15);
}

.tree-summary-card.members small,
.tree-summary-card.members p {
    color: rgba(255,255,255,.72);
}

.tree-summary-card.members strong {
    color: white;
}

.tree-summary-card.direct {
    border-color: rgba(245,197,66,.35);
    background: linear-gradient(145deg, #FFFDF6, white);
}

.tree-summary-card.direct .tree-summary-icon {
    color: #9A6A00;
    background: rgba(245,197,66,.20);
}

.tree-summary-card.right .tree-summary-icon {
    color: var(--ayin-blue);
}

.tree-summary-card.left .tree-summary-icon {
    color: var(--ayin-green-dark);
    background: rgba(34,197,94,.12);
}

.tree-placement-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 17px 19px;
    margin-bottom: 20px;
    border-color: rgba(245,197,66,.28);
    background: linear-gradient(90deg, #FFFDF7, #FFFFFF);
}

.tree-alert-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--ayin-deep-navy);
    background: var(--ayin-gold);
    box-shadow: 0 10px 22px rgba(245,197,66,.20);
}

.tree-alert-copy span {
    color: #9A6A00;
    font-size: 12px;
    font-weight: 900;
}

.tree-alert-copy strong {
    display: block;
    margin: 3px 0;
    color: var(--ayin-text);
    font-size: 15px;
}

.tree-alert-copy p {
    margin: 0;
    color: var(--ayin-muted);
    font-size: 12px;
    line-height: 1.6;
}

.tree-alert-time {
    color: var(--ayin-muted);
    font-size: 12px;
    white-space: nowrap;
}

.tree-workspace-card,
.agencies-table-card {
    padding: 23px;
    margin-bottom: 20px;
}

.tree-workspace-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.tree-workspace-head .ayin-section-title {
    margin-bottom: 5px;
}

.tree-workspace-head p {
    margin: 0;
    color: var(--ayin-muted);
    font-size: 13px;
    line-height: 1.6;
}

.tree-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.tree-search-box,
.tree-level-select {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 13px;
    border: 1px solid var(--ayin-border);
    background: #F8FAFC;
}

.tree-search-box input,
.tree-level-select select {
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--ayin-text);
    background: transparent;
    font-family: inherit;
    font-weight: 700;
}

.tree-level-select span {
    color: var(--ayin-muted);
    font-size: 11px;
    font-weight: 800;
}

.tree-zoom-controls {
    display: flex;
    direction: ltr;
    border: 1px solid var(--ayin-border);
    border-radius: 13px;
    overflow: hidden;
}

.tree-zoom-controls button {
    height: 41px;
    min-width: 41px;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid var(--ayin-border);
    color: var(--ayin-blue);
    background: white;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
}

.tree-zoom-controls button:first-child {
    border-right: 0;
}

.tree-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 11px 14px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: #F8FAFC;
    color: var(--ayin-muted);
    font-size: 12px;
    font-weight: 800;
}

.tree-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.legend-dot.root { background: var(--ayin-gold); }
.legend-dot.right { background: var(--ayin-blue); }
.legend-dot.left { background: var(--ayin-green); }

.legend-ring {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--ayin-gold);
}

.tree-desktop-view {
    direction: ltr;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 4px 22px;
    border-radius: 20px;
    border: 1px solid #E8EDF5;
    background:
        linear-gradient(rgba(11,77,179,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11,77,179,.025) 1px, transparent 1px),
        #FBFCFF;
    background-size: 26px 26px;
    scrollbar-color: #BBC7DA transparent;
}

.binary-tree {
    min-width: 1320px;
    width: max-content;
    margin: 0 auto;
    transform-origin: top center;
    transition: zoom .2s ease;
}

.binary-tree ul {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 28px 0 0;
}

.binary-tree > ul {
    padding-top: 0;
}

.binary-tree li {
    position: relative;
    list-style: none;
    text-align: center;
    padding: 28px 8px 0;
}

.binary-tree > ul > li {
    padding-top: 0;
}

.binary-tree li::before,
.binary-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 28px;
    border-top: 2px solid #C7D0DE;
}

.binary-tree li::before {
    right: 50%;
    border-right: 2px solid #C7D0DE;
    border-radius: 0 8px 0 0;
}

.binary-tree li::after {
    left: 50%;
    border-left: 2px solid #C7D0DE;
    border-radius: 8px 0 0 0;
}

.binary-tree li:only-child::before,
.binary-tree li:only-child::after,
.binary-tree > ul > li::before,
.binary-tree > ul > li::after {
    display: none;
}

.binary-tree li:only-child {
    padding-top: 0;
}

.binary-tree li:first-child::before,
.binary-tree li:last-child::after {
    border: 0;
}

.binary-tree li:last-child::before {
    border-radius: 0 8px 0 0;
}

.binary-tree li:first-child::after {
    border-radius: 8px 0 0 0;
}

.binary-tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 28px;
    border-left: 2px solid #C7D0DE;
}

.tree-node {
    direction: rtl;
    width: 154px;
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border-radius: 17px;
    border: 1px solid #DDE5F1;
    background: white;
    box-shadow: 0 9px 22px rgba(15,23,42,.07);
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.tree-node:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(15,23,42,.12);
}

.tree-node.direct-member {
    outline: 2px solid rgba(245,197,66,.75);
    outline-offset: 2px;
}

.tree-node-avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: white;
    background: var(--ayin-blue);
    font-weight: 900;
}

.left-node .tree-node-avatar {
    background: var(--ayin-green-dark);
}

.root-node {
    width: 178px;
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--ayin-blue), var(--ayin-deep-navy));
}

.root-node .tree-node-avatar {
    color: var(--ayin-deep-navy);
    background: var(--ayin-gold);
}

.tree-node-info {
    min-width: 0;
    text-align: right;
}

.tree-node-info strong,
.tree-node-info small,
.tree-node-info b {
    display: block;
}

.tree-node-info strong {
    color: var(--ayin-text);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.tree-node-info small {
    margin: 3px 0 5px;
    color: var(--ayin-muted);
    font-size: 9px;
    direction: ltr;
    text-align: right;
}

.tree-node-info b {
    width: fit-content;
    padding: 3px 7px;
    border-radius: 8px;
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
    font-size: 10px;
}

.left-node .tree-node-info b {
    color: var(--ayin-green-dark);
    background: rgba(34,197,94,.11);
}

.root-node .tree-node-info strong,
.root-node .tree-node-info b {
    color: white;
}

.root-node .tree-node-info small {
    color: rgba(255,255,255,.65);
}

.root-node .tree-node-info b {
    background: rgba(255,255,255,.12);
}

.tree-node-tag {
    position: absolute;
    top: -10px;
    left: 9px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #6C4A00;
    background: var(--ayin-gold);
    font-size: 8px;
    font-weight: 900;
    box-shadow: 0 5px 12px rgba(245,197,66,.25);
}

.compact-node {
    width: 145px;
    min-height: 84px;
}

.tree-mobile-view {
    display: none;
}

.tree-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 20px;
    margin-bottom: 20px;
}

.agency-current-card,
.tree-rules-card {
    padding: 22px;
}

.agency-current-card {
    color: white;
    border-color: transparent;
    background:
        radial-gradient(circle at 10% 0%, rgba(245,197,66,.20), transparent 34%),
        linear-gradient(140deg, var(--ayin-deep-navy), var(--ayin-navy));
}

.agency-current-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.agency-current-card .ayin-section-title {
    color: white;
}

.agency-medal {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: rgba(245,197,66,.15);
    border: 1px solid rgba(245,197,66,.28);
    font-size: 28px;
}

.agency-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 9px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 800;
}

.agency-progress-copy strong {
    color: var(--ayin-gold);
}

.agency-progress-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    overflow: hidden;
}

.agency-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #D59F1B, var(--ayin-gold));
}

.agency-current-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 17px;
}

.agency-current-metrics div {
    padding: 12px;
    border-radius: 15px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
}

.agency-current-metrics small,
.agency-current-metrics strong {
    display: block;
}

.agency-current-metrics small {
    color: rgba(255,255,255,.60);
    font-size: 10px;
    font-weight: 700;
}

.agency-current-metrics strong {
    margin-top: 5px;
    color: white;
    font-size: 13px;
    font-weight: 900;
}

.tree-rules-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tree-rules-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ayin-text);
    font-size: 13px;
    line-height: 1.5;
}

.tree-rules-list b {
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: white;
    background: var(--ayin-green);
    font-size: 12px;
}

.agencies-head {
    align-items: center;
}

.agencies-table-wrap {
    max-height: 610px;
    overflow: auto;
    border: 1px solid var(--ayin-border);
    border-radius: 17px;
}

.agencies-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.agencies-table th,
.agencies-table td {
    padding: 13px 14px;
    text-align: right;
    border-bottom: 1px solid var(--ayin-border);
    white-space: nowrap;
}

.agencies-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: white;
    background: var(--ayin-deep-navy);
    font-size: 12px;
    font-weight: 900;
}

.agencies-table td {
    color: var(--ayin-text);
    font-size: 13px;
    font-weight: 700;
}

.agencies-table tbody tr:nth-child(even) {
    background: #FAFBFD;
}

.agencies-table tbody tr:last-child td {
    border-bottom: 0;
}

.agencies-table .current-agency {
    background: rgba(245,197,66,.12) !important;
}

.current-agency td {
    color: #6C4A00;
    font-weight: 900;
}

.current-agency td b {
    display: inline-flex;
    margin-right: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--ayin-deep-navy);
    background: var(--ayin-gold);
    font-size: 9px;
}

.agency-name {
    margin-left: 7px;
    font-size: 17px;
}

.agency-name.bronze { color: #B36A2E; }
.agency-name.silver { color: #9CA3AF; }
.agency-name.gold { color: #F59E0B; }
.agency-name.platinum { color: #60A5FA; }
.agency-name.diamond { color: #2563EB; }
.agency-name.emerald { color: #10B981; }
.agency-name.ruby { color: #DC2626; }
.agency-name.sapphire { color: #1D4ED8; }
.agency-name.pearl { color: #CBD5E1; }
.agency-name.opal { color: #38BDF8; }
.agency-name.royal { color: #FBBF24; }
.agency-name.elite { color: #D97706; }
.agency-name.leaders { color: #0891B2; }
.agency-name.pioneers { color: #0F766E; }
.agency-name.purple { color: #7C3AED; }
.agency-name.glory { color: #A855F7; }
.agency-name.summit { color: #C2410C; }
.agency-name.throne { color: #EAB308; }
.agency-name.legend { color: #8B5CF6; }
.agency-name.eternity { color: #111827; }

@media (max-width: 1100px) {
    .tree-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tree-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .tree-hero {
        grid-template-columns: 1fr;
    }

    .tree-hero-actions {
        justify-content: flex-start;
    }

    .tree-workspace-head {
        flex-direction: column;
    }

    .tree-toolbar {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .tree-summary-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .tree-summary-card {
        min-height: auto;
    }

    .tree-placement-alert {
        grid-template-columns: auto 1fr;
    }

    .tree-alert-time {
        grid-column: 2;
    }

    .tree-hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .tree-hero-actions .ayin-btn {
        width: 100%;
    }

    .tree-workspace-card,
    .agencies-table-card,
    .agency-current-card,
    .tree-rules-card {
        padding: 17px;
    }

    .tree-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tree-search-box,
    .tree-level-select,
    .tree-zoom-controls {
        width: 100%;
    }

    .tree-search-box input {
        width: 100%;
    }

    .tree-zoom-controls button {
        flex: 1;
    }

    .tree-desktop-view,
    .tree-legend,
    .tree-zoom-controls {
        display: none;
    }

    .tree-mobile-view {
        display: block;
    }

    .mobile-root-card {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 14px;
        margin-bottom: 13px;
        border-radius: 18px;
        color: white;
        background: linear-gradient(135deg, var(--ayin-blue), var(--ayin-deep-navy));
    }

    .mobile-root-card .tree-node-avatar {
        color: var(--ayin-deep-navy);
        background: var(--ayin-gold);
    }

    .mobile-root-card strong,
    .mobile-root-card small {
        display: block;
    }

    .mobile-root-card strong {
        font-size: 14px;
        font-weight: 900;
    }

    .mobile-root-card small {
        margin-top: 4px;
        color: rgba(255,255,255,.66);
        font-size: 10px;
    }

    .mobile-branches-grid {
        display: grid;
        gap: 12px;
    }

    .mobile-branch-card {
        padding: 14px;
        border-radius: 18px;
        border: 1px solid var(--ayin-border);
        background: white;
    }

    .mobile-branch-card.right {
        border-top: 4px solid var(--ayin-blue);
    }

    .mobile-branch-card.left {
        border-top: 4px solid var(--ayin-green);
    }

    .mobile-branch-card header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 11px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--ayin-border);
    }

    .mobile-branch-card header small,
    .mobile-branch-card header strong {
        display: block;
    }

    .mobile-branch-card header small {
        color: var(--ayin-muted);
        font-size: 10px;
        font-weight: 800;
    }

    .mobile-branch-card header strong {
        margin-top: 3px;
        font-size: 18px;
        font-weight: 900;
    }

    .mobile-branch-card header span {
        padding: 5px 9px;
        border-radius: 999px;
        color: var(--ayin-muted);
        background: #F1F5F9;
        font-size: 10px;
        font-weight: 800;
    }

    .mobile-member-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 9px;
        padding: 10px 0;
        border-bottom: 1px solid var(--ayin-border);
    }

    .mobile-member-row b {
        width: 27px;
        height: 27px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        color: var(--ayin-blue);
        background: var(--ayin-blue-soft);
        font-size: 11px;
    }

    .mobile-branch-card.left .mobile-member-row b {
        color: var(--ayin-green-dark);
        background: rgba(34,197,94,.11);
    }

    .mobile-member-row span {
        color: var(--ayin-text);
        font-size: 12px;
        font-weight: 900;
    }

    .mobile-member-row small {
        display: block;
        margin-top: 2px;
        color: var(--ayin-muted);
        font-size: 9px;
        font-weight: 700;
    }

    .mobile-member-row.direct small {
        color: #9A6A00;
    }

    .mobile-member-row em {
        color: var(--ayin-muted);
        font-size: 11px;
        font-style: normal;
        font-weight: 900;
    }

    .mobile-branch-card button {
        width: 100%;
        min-height: 39px;
        margin-top: 11px;
        border: 0;
        border-radius: 12px;
        color: var(--ayin-blue);
        background: var(--ayin-blue-soft);
        font-family: inherit;
        font-size: 11px;
        font-weight: 900;
    }

    .mobile-branch-card.left button {
        color: var(--ayin-green-dark);
        background: rgba(34,197,94,.11);
    }

    .agency-current-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agencies-head {
        align-items: flex-start;
    }
}

@media (max-width: 460px) {
    .agency-current-metrics {
        grid-template-columns: 1fr;
    }

    .tree-placement-alert {
        padding: 15px;
    }
}

/* =========================================================
   AYIN TREE EXPLORER V2
   Lazy, collapsible, focus-based binary tree workspace
   ========================================================= */

.tree-workspace-v2 {
    position: relative;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .24);
    box-shadow: 0 20px 55px rgba(6, 26, 58, .10);
}

.tree-workspace-head-v2 {
    align-items: flex-start;
    gap: 22px;
}

.tree-toolbar-v2 {
    max-width: 760px;
    justify-content: flex-end;
}

.tree-search-box-v2 {
    min-width: 230px;
}

.tree-tool-btn,
.tree-fullscreen-btn {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--ayin-border);
    border-radius: 13px;
    color: var(--ayin-text);
    background: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    transition: .2s ease;
    white-space: nowrap;
}

.tree-tool-btn:hover,
.tree-fullscreen-btn:hover {
    color: var(--ayin-blue);
    border-color: rgba(11, 77, 179, .28);
    background: var(--ayin-blue-soft);
    transform: translateY(-1px);
}

.tree-fullscreen-btn {
    color: #7A5600;
    border-color: rgba(245, 197, 66, .42);
    background: rgba(245, 197, 66, .14);
}

.tree-breadcrumbs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid var(--ayin-border);
    border-radius: 15px;
    background: #F8FAFC;
}

.tree-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.tree-breadcrumbs button {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 0;
    border-radius: 10px;
    color: var(--ayin-muted);
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.tree-breadcrumbs button:hover,
.tree-breadcrumbs button.active {
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
}

.tree-breadcrumbs span {
    flex: 0 0 auto;
    color: #94A3B8;
    font-size: 16px;
}

.tree-lazy-note {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #506079;
    font-size: 10px;
    font-weight: 800;
}

.tree-lazy-note span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(34, 197, 94, .11);
}

.tree-legend-v2 {
    margin: 14px 0;
    padding: 0 2px;
}

.tree-explorer-message {
    margin-bottom: 12px;
    padding: 11px 14px;
    border-radius: 13px;
    color: #1E3A5F;
    background: #EAF3FF;
    border: 1px solid #C8DEFF;
    font-size: 11px;
    font-weight: 800;
}

.tree-explorer-message.success {
    color: #166534;
    border-color: #BBF7D0;
    background: #F0FDF4;
}

.tree-explorer-message.warning {
    color: #854D0E;
    border-color: #FDE68A;
    background: #FFFBEB;
}

.tree-explorer-viewport {
    position: relative;
    height: 690px;
    direction: ltr;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #DDE5EF;
    border-radius: 21px;
    background-color: #F9FBFE;
    background-image:
        linear-gradient(rgba(6, 26, 58, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 26, 58, .035) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(11, 77, 179, .07), transparent 42%);
    background-size: 28px 28px, 28px 28px, 100% 100%;
    cursor: grab;
    scrollbar-color: #B8C5D6 #EDF2F7;
    scrollbar-width: thin;
}

.tree-explorer-viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.tree-explorer-viewport::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.tree-explorer-viewport::-webkit-scrollbar-track {
    background: #EDF2F7;
    border-radius: 999px;
}

.tree-explorer-viewport::-webkit-scrollbar-thumb {
    border: 2px solid #EDF2F7;
    border-radius: 999px;
    background: #B8C5D6;
}

.tree-stage {
    position: relative;
    min-width: 100%;
    min-height: 100%;
}

.tree-stage-content {
    position: absolute;
    top: 0;
    left: 0;
    direction: rtl;
    transform-origin: top left;
}

.tree-connections,
.tree-nodes-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.tree-connections {
    overflow: visible;
    pointer-events: none;
}

.tree-connection {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .68;
}

.tree-connection.right {
    stroke: #3B82F6;
}

.tree-connection.left {
    stroke: #22C55E;
}

.tree-explorer-node {
    position: absolute;
    width: 232px;
    min-height: 190px;
    padding: 13px;
    border: 1px solid #D9E2EC;
    border-top: 4px solid #94A3B8;
    border-radius: 19px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 14px 32px rgba(6, 26, 58, .10);
    transition: box-shadow .2s ease, transform .2s ease;
    box-sizing: border-box;
}

.tree-explorer-node:hover {
    z-index: 3;
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(6, 26, 58, .16);
}

.tree-explorer-node.right-node {
    border-top-color: var(--ayin-blue);
}

.tree-explorer-node.left-node {
    border-top-color: var(--ayin-green);
}

.tree-explorer-node.root-node {
    color: white;
    border-color: rgba(245, 197, 66, .55);
    border-top-color: var(--ayin-gold);
    background:
        radial-gradient(circle at 15% 0%, rgba(245, 197, 66, .18), transparent 42%),
        linear-gradient(145deg, var(--ayin-deep-navy), #07336E);
}

.tree-explorer-node.direct-member::after {
    content: '';
    position: absolute;
    inset: -5px;
    z-index: -1;
    border: 1px solid rgba(245, 197, 66, .78);
    border-radius: 23px;
    pointer-events: none;
}

.tree-node-v2-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 22px;
}

.tree-node-v2-side,
.tree-node-v2-direct {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
}

.tree-node-v2-side {
    color: #475569;
    background: #F1F5F9;
}

.right-node .tree-node-v2-side {
    color: #0753B9;
    background: #EAF2FF;
}

.left-node .tree-node-v2-side {
    color: #15803D;
    background: #ECFDF3;
}

.root-node .tree-node-v2-side {
    color: var(--ayin-deep-navy);
    background: var(--ayin-gold);
}

.tree-node-v2-direct {
    color: #7A5600;
    background: rgba(245, 197, 66, .17);
}

.root-node .tree-node-v2-direct {
    color: var(--ayin-gold);
    background: rgba(245, 197, 66, .12);
}

.tree-node-v2-person {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
}

.tree-node-v2-person .tree-node-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 15px;
}

.tree-node-v2-person strong,
.tree-node-v2-person small {
    display: block;
}

.tree-node-v2-person strong {
    color: var(--ayin-text);
    font-size: 13px;
    font-weight: 900;
}

.tree-node-v2-person small {
    margin-top: 3px;
    color: var(--ayin-muted);
    font-size: 9px;
    font-weight: 700;
}

.root-node .tree-node-v2-person strong {
    color: white;
}

.root-node .tree-node-v2-person small {
    color: rgba(255, 255, 255, .62);
}

.tree-node-v2-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 11px;
}

.tree-node-v2-metrics div {
    min-width: 0;
    padding: 8px;
    border-radius: 11px;
    background: #F6F8FB;
}

.tree-node-v2-metrics small,
.tree-node-v2-metrics b {
    display: block;
}

.tree-node-v2-metrics small {
    color: var(--ayin-muted);
    font-size: 8px;
    font-weight: 800;
}

.tree-node-v2-metrics b {
    margin-top: 3px;
    overflow: hidden;
    color: var(--ayin-text);
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
}

.root-node .tree-node-v2-metrics div {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .08);
}

.root-node .tree-node-v2-metrics small {
    color: rgba(255, 255, 255, .58);
}

.root-node .tree-node-v2-metrics b {
    color: white;
}

.tree-node-v2-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.tree-node-v2-actions button {
    min-height: 31px;
    padding: 0 9px;
    border: 0;
    border-radius: 9px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}

.tree-node-toggle {
    flex: 1;
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
}

.left-node .tree-node-toggle {
    color: var(--ayin-green-dark);
    background: rgba(34, 197, 94, .11);
}

.root-node .tree-node-toggle {
    color: var(--ayin-deep-navy);
    background: var(--ayin-gold);
}

.tree-node-focus {
    color: #526075;
    background: #EEF2F7;
}

.root-node .tree-node-focus {
    color: white;
    background: rgba(255, 255, 255, .12);
}

.tree-node-depth-note {
    flex: 1;
    overflow: hidden;
    color: #7C8798;
    font-size: 8px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.root-node .tree-node-depth-note {
    color: rgba(255, 255, 255, .62);
}

.tree-workspace-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    color: var(--ayin-muted);
    font-size: 10px;
    font-weight: 800;
}

.tree-workspace-status span:first-child {
    color: var(--ayin-blue);
}

body.tree-modal-open {
    overflow: hidden;
}

.tree-workspace-v2.is-fullscreen {
    position: fixed;
    inset: 12px;
    z-index: 9999;
    margin: 0;
    padding: 22px;
    overflow: auto;
    border-radius: 24px;
    background: white;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .35);
}

.tree-workspace-v2.is-fullscreen .tree-explorer-viewport {
    height: calc(100vh - 255px);
    min-height: 520px;
}

.tree-workspace-v2.is-fullscreen .tree-workspace-head-v2 {
    position: sticky;
    top: -22px;
    z-index: 20;
    padding: 18px 0 12px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
}

@media (max-width: 1180px) {
    .tree-workspace-head-v2 {
        flex-direction: column;
    }

    .tree-toolbar-v2 {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .tree-workspace-v2 {
        padding: 16px;
    }

    .tree-toolbar-v2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tree-search-box-v2,
    .tree-zoom-controls {
        grid-column: 1 / -1;
        width: 100%;
    }

    .tree-tool-btn,
    .tree-fullscreen-btn {
        width: 100%;
        padding-inline: 8px;
    }

    .tree-breadcrumbs-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .tree-lazy-note {
        white-space: normal;
    }

    .tree-legend-v2 {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .tree-legend-v2 span {
        flex: 0 0 auto;
    }

    .tree-explorer-viewport {
        height: 590px;
        border-radius: 17px;
    }

    .tree-workspace-status {
        align-items: flex-start;
        flex-direction: column;
    }

    .tree-workspace-v2.is-fullscreen {
        inset: 6px;
        padding: 14px;
        border-radius: 18px;
    }

    .tree-workspace-v2.is-fullscreen .tree-explorer-viewport {
        height: calc(100vh - 330px);
        min-height: 430px;
    }
}

@media (max-width: 480px) {
    .tree-toolbar-v2 {
        grid-template-columns: 1fr;
    }

    .tree-search-box-v2,
    .tree-zoom-controls {
        grid-column: auto;
    }

    .tree-explorer-viewport {
        height: 540px;
    }
}

/* Profile page */

.profile-page .main-content {
    display: grid;
    gap: 22px;
}

.profile-hero {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    padding: 30px;
    border-radius: 30px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    align-items: center;
    gap: 28px;
    color: white;
    background:
        radial-gradient(circle at 8% 10%, rgba(245, 197, 66, .24), transparent 27%),
        radial-gradient(circle at 92% 88%, rgba(11, 77, 179, .48), transparent 34%),
        linear-gradient(135deg, var(--ayin-deep-navy), var(--ayin-navy));
    box-shadow: var(--ayin-shadow);
}

.profile-hero::after {
    content: '';
    position: absolute;
    inset-inline-end: -70px;
    top: -90px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    box-shadow:
        0 0 0 28px rgba(255, 255, 255, .025),
        0 0 0 58px rgba(255, 255, 255, .018);
}

.profile-hero-copy,
.profile-completion-card {
    position: relative;
    z-index: 1;
}

.profile-hero h1 {
    margin: 8px 0 8px;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 900;
}

.profile-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    line-height: 1.85;
}

.profile-completion-card {
    min-height: 132px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 23px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, .085);
    backdrop-filter: blur(12px);
}

.profile-completion-ring {
    --profile-progress: 86;
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    position: relative;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--ayin-gold) calc(var(--profile-progress) * 1%), rgba(255, 255, 255, .12) 0);
}

.profile-completion-ring::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    background: var(--ayin-deep-navy);
}

.profile-completion-ring strong {
    position: relative;
    z-index: 1;
    color: white;
    font-size: 18px;
    font-weight: 900;
}

.profile-completion-card > div:last-child {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.profile-completion-card span,
.profile-completion-card small {
    color: rgba(255, 255, 255, .66);
}

.profile-completion-card b {
    color: white;
    font-size: 17px;
}

.profile-completion-card small {
    line-height: 1.5;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 22px;
    align-items: start;
}

.profile-main-column,
.profile-side-column {
    min-width: 0;
}

.profile-side-column {
    display: grid;
    gap: 18px;
}

.profile-tabs-card {
    overflow: hidden;
}

.profile-tabs {
    padding: 10px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--ayin-border);
    background: #FBFCFE;
}

.profile-tab {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 13px;
    flex: 0 0 auto;
    color: var(--ayin-muted);
    background: transparent;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.profile-tab:hover,
.profile-tab.active {
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
}

.profile-tab-panel {
    padding: 26px;
}

.profile-tab-panel[hidden] {
    display: none !important;
}

.profile-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.profile-section-heading h2 {
    margin: 5px 0 0;
    color: var(--ayin-text);
    font-size: 24px;
    font-weight: 900;
}

.profile-status-badge {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8B6914;
    background: #FFF8D9;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.profile-status-badge.verified {
    color: var(--ayin-green-dark);
    background: rgba(34, 197, 94, .12);
}

.profile-status-badge.warning {
    color: #A16207;
    background: #FEF3C7;
}

.profile-avatar-editor {
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid var(--ayin-border);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #FCFDFE;
}

.profile-avatar-large,
.profile-avatar-xl {
    overflow: hidden;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .26), transparent 25%),
        linear-gradient(145deg, var(--ayin-blue), var(--ayin-deep-navy));
    box-shadow: 0 12px 30px rgba(6, 26, 58, .18);
    font-weight: 900;
}

.profile-avatar-large {
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
    font-size: 34px;
    background-size: cover;
    background-position: center;
}

.profile-avatar-large.has-image {
    border: 3px solid white;
}

.profile-avatar-copy {
    min-width: 0;
    flex: 1;
}

.profile-avatar-copy strong {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
}

.profile-avatar-copy p {
    margin: 0;
    color: var(--ayin-muted);
    font-size: 13px;
    line-height: 1.7;
}

.profile-avatar-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-upload-btn {
    min-height: 40px;
    padding-inline: 16px;
    font-size: 12px;
}

.profile-text-btn {
    padding: 0;
    border: 0;
    color: #B91C1C;
    background: transparent;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}

.profile-form {
    display: grid;
    gap: 22px;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.profile-field {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.profile-field-wide {
    grid-column: 1 / -1;
}

.profile-field > span {
    color: #364153;
    font-size: 13px;
    font-weight: 800;
}

.profile-field input,
.profile-field select,
.profile-field textarea {
    width: 100%;
    min-height: 49px;
    padding: 0 14px;
    border: 1px solid #DDE3EC;
    border-radius: 14px;
    outline: 0;
    color: var(--ayin-text);
    background: #FAFBFD;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.profile-field textarea {
    min-height: 112px;
    padding-top: 13px;
    resize: vertical;
    line-height: 1.7;
}

.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus {
    border-color: rgba(11, 77, 179, .5);
    background: white;
    box-shadow: 0 0 0 4px rgba(11, 77, 179, .08);
}

.profile-form-footer {
    padding-top: 18px;
    border-top: 1px solid var(--ayin-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.profile-form-footer > span {
    color: var(--ayin-muted);
    font-size: 12px;
    line-height: 1.7;
}

.profile-copy-grid {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 16px;
}

.profile-copy-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--ayin-border);
    border-radius: 18px;
    background: #FBFCFE;
}

.profile-copy-card > span {
    display: block;
    margin-bottom: 9px;
    color: var(--ayin-muted);
    font-size: 12px;
    font-weight: 700;
}

.profile-copy-value {
    min-width: 0;
    min-height: 48px;
    padding: 7px 8px 7px 12px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: white;
    box-shadow: inset 0 0 0 1px #E8ECF2;
}

.profile-copy-value strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ayin-deep-navy);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-copy-value button {
    min-height: 34px;
    padding: 0 11px;
    border: 0;
    border-radius: 10px;
    flex: 0 0 auto;
    color: white;
    background: var(--ayin-blue);
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.profile-info-note {
    margin-top: 18px;
    padding: 17px 18px;
    border: 1px solid rgba(245, 197, 66, .38);
    border-radius: 18px;
    color: #6E5510;
    background: linear-gradient(135deg, #FFFBEA, #FFF8D8);
}

.profile-info-note.blue-note {
    margin-top: 0;
    margin-bottom: 20px;
    border-color: rgba(11, 77, 179, .16);
    color: #17427F;
    background: #F1F6FF;
}

.profile-info-note b {
    display: block;
    margin-bottom: 4px;
}

.profile-info-note p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
}

.profile-verification-heading {
    margin-top: 28px;
}

.verification-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.verification-step {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--ayin-border);
    border-radius: 17px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    background: #FAFBFD;
}

.verification-step > span {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: white;
    background: #AAB3C2;
    font-weight: 900;
}

.verification-step div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.verification-step strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verification-step small {
    color: var(--ayin-muted);
    font-size: 10px;
}

.verification-step > b {
    font-size: 17px;
    text-align: center;
}

.verification-step.done {
    border-color: rgba(34, 197, 94, .2);
    background: rgba(34, 197, 94, .055);
}

.verification-step.done > span,
.verification-step.done > b {
    color: white;
    background: var(--ayin-green);
}

.verification-step.done > b {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
}

.verification-step.current {
    border-color: rgba(245, 197, 66, .35);
    background: #FFFBEA;
}

.verification-step.current > span {
    color: var(--ayin-deep-navy);
    background: var(--ayin-gold);
}

.verification-step.current > b {
    color: #B8860B;
}

.verification-upload-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.verification-upload-box {
    min-height: 150px;
    padding: 18px;
    border: 1.5px dashed #C8D0DC;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    text-align: center;
    background: #FBFCFE;
    cursor: pointer;
    transition: .2s ease;
}

.verification-upload-box:hover {
    border-color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
    transform: translateY(-2px);
}

.verification-upload-box b {
    font-size: 28px;
}

.verification-upload-box strong {
    font-size: 12px;
}

.verification-upload-box span {
    color: var(--ayin-muted);
    font-size: 10px;
}

.payout-summary-strip {
    padding: 16px;
    border: 1px solid var(--ayin-border);
    border-radius: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    background: #F8FAFC;
}

.payout-summary-strip div {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 13px;
    display: grid;
    gap: 5px;
    background: white;
}

.payout-summary-strip span {
    color: var(--ayin-muted);
    font-size: 10px;
    font-weight: 700;
}

.payout-summary-strip strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-password-field {
    position: relative;
}

.profile-password-field input {
    padding-inline-end: 48px;
}

.password-toggle {
    position: absolute;
    inset-inline-end: 7px;
    top: 50%;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #EEF2F7;
    transform: translateY(-50%);
    cursor: pointer;
}

.security-options-list {
    margin-top: 24px;
    display: grid;
    gap: 12px;
}

.security-option {
    min-height: 82px;
    padding: 16px;
    border: 1px solid var(--ayin-border);
    border-radius: 18px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: #FCFDFE;
}

.security-option-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--ayin-blue-soft);
    font-size: 20px;
}

.security-option strong {
    display: block;
    margin-bottom: 3px;
}

.security-option p {
    margin: 0;
    color: var(--ayin-muted);
    font-size: 12px;
    line-height: 1.6;
}

.ayin-switch {
    position: relative;
    width: 48px;
    height: 27px;
    cursor: pointer;
}

.ayin-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ayin-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #CBD2DC;
    transition: .22s ease;
}

.ayin-switch span::after {
    content: '';
    position: absolute;
    top: 4px;
    inset-inline-start: 4px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .18);
    transition: .22s ease;
}

.ayin-switch input:checked + span {
    background: var(--ayin-green);
}

.ayin-switch input:checked + span::after {
    transform: translateX(-21px);
}

.profile-outline-danger {
    min-height: 39px;
    padding: 0 13px;
    border: 1px solid rgba(185, 28, 28, .22);
    border-radius: 11px;
    color: #B91C1C;
    background: #FFF5F5;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.profile-identity-card {
    overflow: hidden;
}

.profile-identity-cover {
    height: 92px;
    background:
        radial-gradient(circle at 15% 20%, rgba(245, 197, 66, .34), transparent 33%),
        linear-gradient(135deg, var(--ayin-deep-navy), var(--ayin-blue));
}

.profile-identity-content {
    padding: 0 20px 20px;
    text-align: center;
}

.profile-avatar-xl {
    width: 96px;
    height: 96px;
    margin: -50px auto 12px;
    border: 5px solid white;
    font-size: 36px;
}

.profile-identity-content h2 {
    margin: 0 0 5px;
    font-size: 21px;
}

.profile-identity-content .member-id {
    display: inline-flex;
}

.profile-account-state {
    width: fit-content;
    margin: 12px auto 0;
    padding: 7px 10px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ayin-green-dark);
    background: rgba(34, 197, 94, .1);
    font-size: 11px;
    font-weight: 900;
}

.profile-account-state i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ayin-green);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.profile-agency-box {
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    text-align: right;
    background: #F8FAFC;
}

.profile-agency-box > span,
.profile-agency-box > small {
    color: var(--ayin-muted);
    font-size: 10px;
}

.profile-agency-box strong {
    display: block;
    margin: 4px 0;
    color: var(--ayin-deep-navy);
    font-size: 15px;
}

.profile-agency-progress {
    height: 8px;
    margin-top: 11px;
    border-radius: 999px;
    overflow: hidden;
    background: #E6EBF2;
}

.profile-agency-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ayin-gold), #DFAE28);
}

.profile-agency-box p {
    margin: 8px 0 0;
    color: var(--ayin-muted);
    font-size: 10px;
    line-height: 1.6;
}

.profile-network-card,
.profile-quick-links-card {
    padding: 20px;
}

.profile-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.profile-side-heading h3,
.profile-quick-links-card h3 {
    margin: 0;
    font-size: 16px;
}

.profile-side-heading a {
    color: var(--ayin-blue);
    font-size: 11px;
    font-weight: 900;
}

.profile-network-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.profile-network-stats div {
    min-width: 0;
    padding: 13px;
    border-radius: 14px;
    display: grid;
    gap: 4px;
    background: #F8FAFC;
}

.profile-network-stats span {
    color: var(--ayin-muted);
    font-size: 9px;
    font-weight: 700;
}

.profile-network-stats strong {
    font-size: 16px;
}

.profile-network-stats .right-stat {
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
}

.profile-network-stats .left-stat {
    color: var(--ayin-green-dark);
    background: rgba(34, 197, 94, .09);
}

.profile-quick-links-card {
    display: grid;
    gap: 9px;
}

.profile-quick-links-card h3 {
    margin-bottom: 6px;
}

.profile-quick-links-card a {
    min-height: 45px;
    padding: 0 13px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #465469;
    background: #F8FAFC;
    font-size: 12px;
    font-weight: 800;
    transition: .2s ease;
}

.profile-quick-links-card a:hover {
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
    transform: translateX(-2px);
}

.profile-quick-links-card b {
    font-size: 18px;
}

.profile-toast {
    position: fixed;
    inset-inline-start: 24px;
    bottom: 24px;
    z-index: 10000;
    min-width: 240px;
    max-width: min(420px, calc(100vw - 48px));
    padding: 14px 18px;
    border-radius: 15px;
    color: white;
    background: var(--ayin-deep-navy);
    box-shadow: 0 18px 44px rgba(0, 27, 61, .25);
    font-size: 13px;
    font-weight: 800;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: .25s ease;
}

.profile-toast.show {
    opacity: 1;
    transform: translateY(0);
}

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

    .profile-copy-grid {
        grid-template-columns: 1fr;
    }
}

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

    .profile-completion-card {
        max-width: 520px;
    }

    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-side-column {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }

    .profile-side-column > * {
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .profile-hero {
        min-height: 0;
        padding: 22px;
        border-radius: 24px;
    }

    .profile-tab-panel {
        padding: 20px 16px;
    }

    .profile-section-heading,
    .profile-form-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-form-footer .ayin-btn {
        width: 100%;
    }

    .profile-form-grid,
    .verification-steps,
    .verification-upload-grid,
    .payout-summary-strip {
        grid-template-columns: 1fr;
    }

    .profile-field-wide {
        grid-column: auto;
    }

    .profile-side-column {
        grid-template-columns: 1fr;
    }

    .profile-identity-card {
        order: -1;
    }

    .profile-avatar-editor {
        align-items: flex-start;
    }

    .security-option {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .security-option > :last-child {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .security-option .ayin-switch {
        justify-self: start;
    }

    .profile-outline-danger {
        width: 100%;
    }

    .profile-toast {
        inset-inline: 16px;
        bottom: 92px;
        max-width: none;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .profile-completion-card,
    .profile-avatar-editor {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .profile-avatar-actions {
        justify-content: center;
    }

    .profile-tabs {
        padding-inline: 6px;
    }

    .profile-tab {
        padding-inline: 12px;
        font-size: 11px;
    }
}

/* AYIN Login Page V1 */
.auth-page {
    min-height: 100vh;
    background: #EDF2F8;
}

.auth-page main {
    min-height: 100vh;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(480px, .9fr) minmax(620px, 1.1fr);
    direction: rtl;
}

.auth-form-side {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px clamp(28px, 5vw, 78px);
    background: #FFFFFF;
}

.auth-form-wrap {
    width: min(100%, 500px);
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ayin-deep-navy);
    margin-bottom: 52px;
}

.auth-brand .ayin-brand-text span {
    color: #7A8798;
}

.auth-heading {
    margin-bottom: 30px;
}

.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--ayin-blue);
    font-size: 12px;
    font-weight: 900;
}

.auth-kicker::before {
    content: '';
    width: 23px;
    height: 3px;
    border-radius: 999px;
    background: var(--ayin-gold);
}

.auth-heading h1 {
    margin: 0 0 10px;
    color: var(--ayin-deep-navy);
    font-size: clamp(29px, 2.7vw, 38px);
    line-height: 1.25;
    font-weight: 900;
}

.auth-heading p {
    max-width: 470px;
    margin: 0;
    color: #687588;
    font-size: 14px;
    line-height: 1.9;
}

.auth-form {
    display: grid;
    gap: 20px;
}

.auth-field {
    display: grid;
    gap: 9px;
}

.auth-label {
    color: #26354A;
    font-size: 13px;
    font-weight: 800;
}

.auth-input-wrap {
    min-height: 58px;
    padding: 0 16px;
    border: 1px solid #DCE3EC;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FBFCFE;
    color: #8692A2;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.auth-input-wrap:focus-within {
    border-color: rgba(11, 77, 179, .55);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(11, 77, 179, .08);
}

.auth-input-wrap > svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.auth-input-wrap input {
    min-width: 0;
    flex: 1;
    height: 56px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ayin-text);
    font-size: 14px;
    font-weight: 600;
}

.auth-input-wrap input::placeholder {
    color: #A1AAB7;
    font-weight: 500;
}

.auth-password-toggle {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #7C8898;
    background: transparent;
    cursor: pointer;
}

.auth-password-toggle:hover {
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
}

.auth-password-toggle svg {
    width: 21px;
    height: 21px;
}

.auth-password-toggle .eye-closed,
.auth-password-toggle.is-visible .eye-open {
    display: none;
}

.auth-password-toggle.is-visible .eye-closed {
    display: block;
}

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: -2px;
    font-size: 12px;
}

.auth-options > a {
    color: var(--ayin-blue);
    font-weight: 900;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #5D6979;
    cursor: pointer;
    font-weight: 700;
}

.auth-remember input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ayin-blue);
}

.auth-submit {
    width: 100%;
    min-height: 58px;
    margin-top: 2px;
    border-radius: 16px;
    font-size: 15px;
}

.auth-submit svg {
    width: 21px;
    height: 21px;
    transform: scaleX(-1);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #96A0AD;
    font-size: 11px;
    font-weight: 800;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: #E5EAF0;
}

.auth-create-account {
    min-height: 66px;
    padding: 12px 15px;
    border: 1px solid #E1E7EF;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #697688;
    background: #F9FBFD;
    transition: .2s ease;
}

.auth-create-account:hover {
    border-color: rgba(11, 77, 179, .28);
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
    transform: translateY(-1px);
}

.auth-create-account span {
    display: grid;
    gap: 3px;
    font-size: 11px;
    line-height: 1.5;
}

.auth-create-account b {
    color: var(--ayin-deep-navy);
    font-size: 13px;
}

.auth-create-account svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.auth-security-note {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #8290A1;
    font-size: 11px;
    font-weight: 700;
}

.auth-security-note svg {
    width: 18px;
    height: 18px;
    color: var(--ayin-green-dark);
}

.auth-showcase {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: white;
    background:
        linear-gradient(145deg, rgba(0, 27, 61, .98), rgba(6, 26, 58, .97) 56%, rgba(2, 14, 32, .99));
}

.auth-showcase-inner {
    position: relative;
    z-index: 3;
    width: min(720px, calc(100% - 96px));
    margin: 0 auto;
    padding: 68px 0;
}

.auth-showcase-badge {
    width: fit-content;
    margin-bottom: 22px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .06);
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(10px);
}

.auth-showcase-badge span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ayin-gold);
    box-shadow: 0 0 0 5px rgba(245, 197, 66, .12);
}

.auth-showcase h2 {
    max-width: 650px;
    margin: 0 0 15px;
    font-size: clamp(32px, 3.2vw, 46px);
    line-height: 1.28;
    font-weight: 900;
}

.auth-showcase-inner > p {
    max-width: 640px;
    margin: 0 0 30px;
    color: rgba(255, 255, 255, .68);
    font-size: 15px;
    line-height: 1.9;
}

.auth-preview-card {
    position: relative;
    overflow: hidden;
    max-width: 640px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 25px;
    background: rgba(255, 255, 255, .085);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .22);
    backdrop-filter: blur(20px);
}

.auth-preview-card::after {
    content: '';
    position: absolute;
    width: 230px;
    height: 230px;
    inset: auto -90px -120px auto;
    border-radius: 50%;
    background: rgba(11, 77, 179, .24);
    filter: blur(4px);
}

.auth-preview-head,
.auth-preview-balance,
.auth-preview-grid {
    position: relative;
    z-index: 2;
}

.auth-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 17px;
}

.auth-preview-head > div:first-child {
    display: grid;
    gap: 4px;
}

.auth-preview-head span,
.auth-preview-balance > span,
.auth-preview-grid span {
    color: rgba(255, 255, 255, .6);
    font-size: 10px;
    font-weight: 700;
}

.auth-preview-head strong {
    font-size: 17px;
}

.auth-preview-avatar {
    width: 43px;
    height: 43px;
    border: 2px solid rgba(245, 197, 66, .45);
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: var(--ayin-deep-navy);
    background: var(--ayin-gold);
    font-weight: 900;
}

.auth-preview-balance {
    margin-bottom: 14px;
    padding: 17px;
    border-radius: 18px;
    display: grid;
    gap: 5px;
    background: linear-gradient(135deg, rgba(11, 77, 179, .98), rgba(9, 59, 137, .92));
}

.auth-preview-balance strong {
    font-size: 29px;
    line-height: 1.1;
}

.auth-preview-balance small {
    font-size: 11px;
    font-weight: 700;
}

.auth-preview-balance b {
    width: fit-content;
    margin-top: 4px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #C8F7D6;
    background: rgba(34, 197, 94, .17);
    font-size: 9px;
}

.auth-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.auth-preview-grid > div {
    min-width: 0;
    padding: 13px 11px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 15px;
    display: grid;
    gap: 4px;
    background: rgba(0, 0, 0, .11);
}

.auth-preview-grid strong {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
}

.auth-preview-grid small {
    color: var(--ayin-gold);
    font-size: 8px;
    font-weight: 800;
}

.auth-benefits {
    max-width: 640px;
    margin-top: 23px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.auth-benefits > div {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 17px;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 9px;
    background: rgba(255, 255, 255, .045);
}

.auth-benefits > div > span {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--ayin-deep-navy);
    background: var(--ayin-gold);
    font-size: 12px;
    font-weight: 900;
}

.auth-benefits p {
    margin: 0;
    color: rgba(255, 255, 255, .58);
    font-size: 9px;
    line-height: 1.65;
}

.auth-benefits b {
    display: block;
    margin-bottom: 2px;
    color: #FFFFFF;
    font-size: 11px;
}

.auth-orb {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(3px);
    pointer-events: none;
}

.auth-orb-one {
    width: 360px;
    height: 360px;
    inset: -100px -90px auto auto;
    background: rgba(11, 77, 179, .27);
}

.auth-orb-two {
    width: 330px;
    height: 330px;
    inset: auto auto -140px -80px;
    background: rgba(245, 197, 66, .11);
}

.auth-pattern {
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: .14;
    background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

@media (max-width: 1120px) {
    .auth-shell {
        grid-template-columns: minmax(430px, .9fr) minmax(520px, 1.1fr);
    }

    .auth-showcase-inner {
        width: calc(100% - 60px);
    }

    .auth-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auth-benefits {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .auth-shell {
        grid-template-columns: 1fr;
        min-height: 100vh;
    }

    .auth-form-side {
        min-height: 100vh;
        padding: 36px 24px;
        background:
            radial-gradient(circle at 15% 0%, rgba(245, 197, 66, .13), transparent 28%),
            #FFFFFF;
    }

    .auth-form-wrap {
        width: min(100%, 540px);
    }

    .auth-brand {
        margin-bottom: 38px;
    }

    .auth-showcase {
        display: none;
    }
}

@media (max-width: 520px) {
    .auth-form-side {
        align-items: flex-start;
        padding: 24px 17px 36px;
    }

    .auth-brand {
        margin-bottom: 34px;
    }

    .auth-brand .ayin-mark {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        font-size: 23px;
    }

    .auth-heading h1 {
        font-size: 32px;
    }

    .auth-heading p {
        font-size: 13px;
    }

    .auth-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }

    .auth-submit {
        min-height: 56px;
    }

    .auth-create-account {
        align-items: flex-start;
    }

    .auth-security-note {
        text-align: center;
        line-height: 1.7;
    }
}


/* AYIN Register Page V1 */
.auth-shell-register {
    grid-template-columns: minmax(590px, 1.08fr) minmax(520px, .92fr);
}

.register-form-side {
    padding-block: 32px;
}

.register-form-wrap {
    width: min(100%, 650px);
}

.register-form-wrap .auth-brand {
    margin-bottom: 30px;
}

.register-form-wrap .auth-heading {
    margin-bottom: 22px;
}

.register-form-wrap .auth-heading p {
    max-width: 610px;
}

.register-progress {
    margin-bottom: 23px;
    padding: 13px 16px;
    border: 1px solid #E1E7EF;
    border-radius: 17px;
    display: grid;
    grid-template-columns: auto minmax(55px, 1fr) auto;
    align-items: center;
    gap: 12px;
    background: #F9FBFD;
}

.register-progress-step {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8793A2;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.register-progress-step b {
    width: 30px;
    height: 30px;
    border: 1px solid #D9E1EB;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #7B8797;
    background: #FFFFFF;
    font-size: 12px;
    transition: .2s ease;
}

.register-progress-step.is-active {
    color: var(--ayin-blue);
}

.register-progress-step.is-active b {
    border-color: transparent;
    color: #FFFFFF;
    background: var(--ayin-blue);
    box-shadow: 0 7px 18px rgba(11, 77, 179, .22);
}

.register-progress-step.is-done {
    color: var(--ayin-green-dark);
}

.register-progress-step.is-done b {
    border-color: transparent;
    color: #FFFFFF;
    background: var(--ayin-green);
}

.register-progress-line {
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: #E5EAF1;
}

.register-progress-line span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ayin-blue), var(--ayin-green));
    transition: width .25s ease;
}

.register-progress.is-step-two .register-progress-line span {
    width: 100%;
}

.register-step {
    display: grid;
    gap: 18px;
}

.register-step[hidden] {
    display: none;
}

.register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.register-grid .auth-field-wide {
    grid-column: 1 / -1;
}

.auth-input-wrap select {
    min-width: 0;
    flex: 1;
    height: 56px;
    border: 0;
    outline: 0;
    appearance: none;
    background: transparent;
    color: var(--ayin-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.auth-input-wrap select:invalid {
    color: #A1AAB7;
    font-weight: 500;
}

.register-invite-note {
    padding: 14px 15px;
    border: 1px solid rgba(245, 197, 66, .42);
    border-radius: 16px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    background: linear-gradient(135deg, #FFF9E8, #FFFCF3);
}

.register-invite-note > span {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #6C4B00;
    background: var(--ayin-gold);
    font-size: 18px;
    font-weight: 900;
}

.register-invite-note p {
    margin: 0;
    color: #6F6247;
    font-size: 11px;
    line-height: 1.8;
}

.register-invite-note b {
    display: block;
    margin-bottom: 2px;
    color: var(--ayin-deep-navy);
    font-size: 13px;
}

.register-help {
    margin-top: -3px;
    color: #8A95A4;
    font-size: 10px;
    line-height: 1.7;
    font-weight: 600;
}

.register-terms {
    padding: 13px 14px;
    border: 1px solid #E1E7EF;
    border-radius: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #667386;
    background: #F9FBFD;
    font-size: 11px;
    line-height: 1.8;
    font-weight: 700;
    cursor: pointer;
}

.register-terms input {
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    flex: 0 0 auto;
    accent-color: var(--ayin-blue);
}

.register-terms a {
    color: var(--ayin-blue);
    font-weight: 900;
}

.register-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.register-actions .ayin-btn {
    min-height: 56px;
    border-radius: 16px;
}

.register-actions .register-next,
.register-actions .register-submit {
    flex: 1;
}

.register-back {
    min-width: 126px;
    border: 1px solid #DCE3EC;
    color: #657184;
    background: #FFFFFF;
}

.register-back:hover {
    color: var(--ayin-blue);
    border-color: rgba(11, 77, 179, .3);
    background: var(--ayin-blue-soft);
}

.register-error {
    display: none;
    margin: -5px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    color: #B42318;
    background: #FFF1F0;
    font-size: 11px;
    font-weight: 800;
}

.register-error.is-visible {
    display: block;
}

.register-login-link {
    margin-top: 1px;
}

.register-showcase-inner {
    width: min(650px, calc(100% - 76px));
}

.register-showcase-inner > p {
    margin-bottom: 24px;
}

.register-journey {
    max-width: 600px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 24px;
    background: rgba(255, 255, 255, .075);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .2);
    backdrop-filter: blur(18px);
}

.register-journey-head {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.register-journey-head div {
    display: grid;
    gap: 3px;
}

.register-journey-head span {
    color: rgba(255, 255, 255, .56);
    font-size: 10px;
    font-weight: 700;
}

.register-journey-head strong {
    font-size: 16px;
}

.register-journey-badge {
    padding: 7px 10px;
    border-radius: 999px;
    color: #FFEAA8;
    background: rgba(245, 197, 66, .13);
    font-size: 9px;
    font-weight: 900;
}

.register-journey-list {
    display: grid;
    gap: 10px;
}

.register-journey-item {
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    background: rgba(0, 0, 0, .1);
}

.register-journey-item > b {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--ayin-deep-navy);
    background: var(--ayin-gold);
    font-size: 13px;
}

.register-journey-item div {
    display: grid;
    gap: 3px;
}

.register-journey-item strong {
    font-size: 12px;
}

.register-journey-item span {
    color: rgba(255, 255, 255, .57);
    font-size: 9px;
    line-height: 1.6;
}

.register-journey-item > small {
    padding: 5px 8px;
    border-radius: 999px;
    color: #C9E0FF;
    background: rgba(11, 77, 179, .22);
    font-size: 8px;
    font-weight: 900;
}

.register-referral-card {
    max-width: 600px;
    margin-top: 15px;
    padding: 16px;
    border: 1px solid rgba(34, 197, 94, .2);
    border-radius: 18px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    background: rgba(34, 197, 94, .08);
}

.register-referral-card > span {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #DDFBE5;
    background: rgba(34, 197, 94, .2);
    font-size: 21px;
}

.register-referral-card p {
    margin: 0;
    color: rgba(255, 255, 255, .63);
    font-size: 10px;
    line-height: 1.75;
}

.register-referral-card b {
    display: block;
    margin-bottom: 3px;
    color: #FFFFFF;
    font-size: 12px;
}

@media (max-width: 1180px) {
    .auth-shell-register {
        grid-template-columns: minmax(540px, 1.05fr) minmax(450px, .95fr);
    }

    .register-showcase-inner {
        width: calc(100% - 50px);
    }
}

@media (max-width: 900px) {
    .auth-shell-register {
        grid-template-columns: 1fr;
    }

    .register-form-side {
        min-height: 100vh;
    }

    .register-form-wrap {
        width: min(100%, 650px);
    }
}

@media (max-width: 620px) {
    .register-grid {
        grid-template-columns: 1fr;
    }

    .register-grid .auth-field-wide {
        grid-column: auto;
    }

    .register-progress {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .register-progress-line {
        height: 2px;
    }

    .register-progress-step:last-child {
        justify-self: end;
    }

    .register-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .register-actions .ayin-btn,
    .register-back {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .register-form-side {
        padding-top: 22px;
    }

    .register-form-wrap .auth-brand {
        margin-bottom: 27px;
    }

    .register-invite-note {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .register-invite-note > span {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }
}

/* =========================================================
   AYIN Admin Preview
   ========================================================= */
.admin-preview-page {
    min-height: 100vh;
    background: #f3f6fb;
    color: #111827;
}

.admin-preview-page main {
    min-height: 100vh;
}

.admin-preview-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    direction: rtl;
}

.admin-preview-sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 70;
    width: 292px;
    height: 100vh;
    padding: 22px 18px 18px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    color: #fff;
    background:
        radial-gradient(circle at 30% 5%, rgba(245, 197, 66, .14), transparent 28%),
        linear-gradient(180deg, #031b3d 0%, #00152f 62%, #000f23 100%);
    box-shadow: -18px 0 50px rgba(2, 18, 42, .12);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

.admin-preview-sidebar-head {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.admin-preview-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.admin-preview-brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #061a3a;
    background: linear-gradient(145deg, #f8d15e, #eab52c);
    box-shadow: 0 14px 30px rgba(245, 197, 66, .22);
    font-size: 24px;
    font-weight: 900;
}

.admin-preview-brand > span:last-child {
    display: grid;
    gap: 2px;
}

.admin-preview-brand b {
    font-size: 21px;
    letter-spacing: 1.5px;
}

.admin-preview-brand small {
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
    font-weight: 600;
}

.admin-preview-sidebar-close {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;
    display: none;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    cursor: pointer;
    font-size: 25px;
}

.admin-preview-owner-card {
    margin: 24px 0 18px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 10px;
    align-items: center;
    gap: 11px;
    background: rgba(255, 255, 255, .06);
}

.admin-preview-owner-avatar {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #061a3a;
    background: #f5c542;
    font-weight: 900;
}

.admin-preview-owner-card > div {
    display: grid;
    gap: 2px;
}

.admin-preview-owner-card strong {
    font-size: 13px;
}

.admin-preview-owner-card small {
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
}

.admin-preview-online-dot {
    width: 9px;
    height: 9px;
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .10);
}

.admin-preview-nav {
    display: grid;
    gap: 18px;
}

.admin-preview-nav-group {
    display: grid;
    gap: 5px;
}

.admin-preview-nav-label {
    padding: 0 11px 5px;
    color: rgba(255, 255, 255, .38);
    font-size: 10px;
    font-weight: 800;
}

.admin-preview-nav a {
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 13px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .69);
    font-size: 12px;
    font-weight: 700;
    transition: .2s ease;
}

.admin-preview-nav a > span {
    color: rgba(255, 255, 255, .52);
    font-size: 16px;
    text-align: center;
}

.admin-preview-nav a > b {
    min-width: 24px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #c8dbf8;
    background: rgba(255, 255, 255, .08);
    font-size: 8px;
    text-align: center;
}

.admin-preview-nav a > b.warning {
    color: #2b2103;
    background: #f5c542;
}

.admin-preview-nav a:hover,
.admin-preview-nav a.active {
    border-color: rgba(72, 135, 233, .25);
    color: #fff;
    background: linear-gradient(90deg, rgba(11, 77, 179, .42), rgba(11, 77, 179, .18));
}

.admin-preview-nav a.active::before {
    content: '';
    position: absolute;
    right: -18px;
    width: 4px;
    height: 24px;
    border-radius: 5px 0 0 5px;
    background: #f5c542;
}

.admin-preview-nav a {
    position: relative;
}

.admin-preview-nav a.active > span {
    color: #f5c542;
}

.admin-preview-sidebar-footer {
    margin-top: auto;
    padding-top: 22px;
    display: grid;
    gap: 12px;
}

.admin-preview-system-state {
    padding: 12px;
    border: 1px solid rgba(34, 197, 94, .14);
    border-radius: 15px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    background: rgba(34, 197, 94, .06);
}

.admin-preview-system-state > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .11);
}

.admin-preview-system-state div {
    display: grid;
    gap: 2px;
}

.admin-preview-system-state b {
    font-size: 10px;
}

.admin-preview-system-state small {
    color: rgba(255, 255, 255, .48);
    font-size: 8px;
}

.admin-preview-return-link {
    padding: 9px 11px;
    color: rgba(255, 255, 255, .56);
    font-size: 10px;
    font-weight: 700;
}

.admin-preview-workspace {
    grid-column: 2;
    min-width: 0;
}

.admin-preview-topbar {
    position: sticky;
    top: 0;
    z-index: 45;
    min-height: 78px;
    padding: 13px 30px;
    border-bottom: 1px solid #e7ebf2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 25px rgba(20, 37, 63, .04);
    backdrop-filter: blur(16px);
}

.admin-preview-topbar-title,
.admin-preview-topbar-actions,
.admin-preview-top-user,
.admin-preview-page-head,
.admin-preview-head-actions,
.admin-preview-panel-head,
.admin-preview-mode-note > div,
.admin-preview-chart-summary,
.admin-preview-chart-legend {
    display: flex;
    align-items: center;
}

.admin-preview-topbar-title {
    gap: 13px;
}

.admin-preview-topbar-title > div {
    display: grid;
    gap: 2px;
}

.admin-preview-topbar-title span {
    color: #94a0b2;
    font-size: 10px;
    font-weight: 700;
}

.admin-preview-topbar-title strong {
    color: #071a35;
    font-size: 18px;
}

.admin-preview-menu-toggle {
    width: 42px;
    height: 42px;
    border: 1px solid #e3e8f0;
    border-radius: 13px;
    display: none;
    place-items: center;
    color: #061a3a;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
}

.admin-preview-topbar-actions {
    gap: 10px;
}

.admin-preview-search {
    width: min(330px, 31vw);
    height: 46px;
    padding: 0 13px;
    border: 1px solid #e1e7ef;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: #8a97aa;
    background: #f8fafc;
}

.admin-preview-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #111827;
    background: transparent;
    font-size: 11px;
}

.admin-preview-search input::placeholder {
    color: #9aa5b5;
}

.admin-preview-search kbd {
    padding: 4px 6px;
    border: 1px solid #e0e6ee;
    border-radius: 7px;
    color: #7b8798;
    background: #fff;
    font-family: inherit;
    font-size: 8px;
}

.admin-preview-action-btn {
    position: relative;
    width: 43px;
    height: 43px;
    border: 1px solid #e1e7ef;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #4b5c73;
    background: #fff;
    cursor: pointer;
    font-weight: 900;
}

.admin-preview-action-btn i {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #ef4444;
    font-size: 7px;
    font-style: normal;
}

.admin-preview-top-user {
    min-width: 155px;
    padding-right: 8px;
    gap: 9px;
}

.admin-preview-top-user > span {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #061a3a;
    background: #f5c542;
    font-weight: 900;
}

.admin-preview-top-user > div {
    display: grid;
    gap: 1px;
}

.admin-preview-top-user b {
    color: #17243a;
    font-size: 11px;
}

.admin-preview-top-user small {
    color: #8995a7;
    font-size: 8px;
}

.admin-preview-top-user em {
    margin-right: auto;
    color: #8e9aac;
    font-style: normal;
}

.admin-preview-content {
    width: min(1540px, calc(100% - 56px));
    margin: 0 auto;
    padding: 25px 0 34px;
}

.admin-preview-mode-note {
    min-height: 49px;
    margin-bottom: 20px;
    padding: 8px 14px;
    border: 1px solid rgba(11, 77, 179, .13);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: #315477;
    background: #edf4ff;
}

.admin-preview-mode-note > div {
    gap: 9px;
}

.admin-preview-mode-note > div > span {
    width: 29px;
    height: 29px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #0b4db3;
    background: rgba(11, 77, 179, .10);
}

.admin-preview-mode-note p {
    margin: 0;
    font-size: 10px;
    line-height: 1.6;
}

.admin-preview-mode-note button {
    border: 0;
    color: #0b4db3;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
}

.admin-preview-page-head {
    margin-bottom: 22px;
    justify-content: space-between;
    gap: 20px;
}

.admin-preview-kicker {
    display: block;
    margin-bottom: 5px;
    color: #0b4db3;
    font-size: 10px;
    font-weight: 800;
}

.admin-preview-page-head h1 {
    margin: 0 0 5px;
    color: #071a35;
    font-size: clamp(25px, 2.3vw, 35px);
    line-height: 1.25;
}

.admin-preview-page-head p {
    margin: 0;
    color: #7d899b;
    font-size: 11px;
}

.admin-preview-head-actions {
    gap: 9px;
}

.admin-preview-primary-btn,
.admin-preview-secondary-btn {
    min-height: 44px;
    padding: 0 17px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
}

.admin-preview-primary-btn {
    border: 1px solid #0b4db3;
    color: #fff;
    background: #0b4db3;
    box-shadow: 0 10px 20px rgba(11, 77, 179, .16);
}

.admin-preview-secondary-btn {
    border: 1px solid #dce3ec;
    color: #34455c;
    background: #fff;
}

.admin-preview-kpi-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.admin-preview-kpi {
    position: relative;
    min-height: 180px;
    padding: 18px;
    border: 1px solid #e5eaf1;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 32px rgba(20, 36, 61, .06);
}

.admin-preview-kpi::after {
    content: '';
    position: absolute;
    left: -38px;
    bottom: -48px;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    opacity: .08;
    background: currentColor;
}

.admin-preview-kpi.blue { color: #0b4db3; }
.admin-preview-kpi.green { color: #149447; }
.admin-preview-kpi.gold { color: #b58105; }
.admin-preview-kpi.violet { color: #7456c8; }

.admin-preview-kpi-head {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-preview-kpi-icon {
    width: 41px;
    height: 41px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: currentColor;
    background: color-mix(in srgb, currentColor 11%, white);
    font-size: 18px;
    font-weight: 900;
}

.admin-preview-kpi-head > b {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 8px;
}

.admin-preview-kpi-head > b.positive {
    color: #15803d;
    background: #e6f8ed;
}

.admin-preview-kpi-head > b.neutral {
    color: #735711;
    background: #fff5d7;
}

.admin-preview-kpi > span {
    display: block;
    margin-bottom: 4px;
    color: #7b8798;
    font-size: 10px;
    font-weight: 700;
}

.admin-preview-kpi > strong {
    display: block;
    color: #101d33;
    font-size: clamp(25px, 2vw, 31px);
    line-height: 1.1;
}

.admin-preview-kpi > strong small {
    color: #7c899a;
    font-size: 9px;
}

.admin-preview-kpi > small {
    display: block;
    margin-top: 6px;
    color: #9aa4b3;
    font-size: 8px;
}

.admin-preview-spark-bars {
    position: absolute;
    left: 18px;
    bottom: 18px;
    width: 72px;
    height: 37px;
    display: flex;
    align-items: end;
    gap: 4px;
    direction: ltr;
}

.admin-preview-spark-bars i {
    width: 6px;
    border-radius: 5px 5px 2px 2px;
    background: currentColor;
    opacity: .28;
}

.admin-preview-spark-bars i:last-child {
    opacity: .85;
}

.admin-preview-panel {
    border: 1px solid #e4e9f0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(25, 42, 68, .055);
}

.admin-preview-panel-head {
    min-height: 62px;
    padding: 17px 20px 11px;
    justify-content: space-between;
    gap: 15px;
}

.admin-preview-panel-head > div:first-child {
    display: grid;
    gap: 2px;
}

.admin-preview-panel-head span {
    color: #0b4db3;
    font-size: 8px;
    font-weight: 800;
}

.admin-preview-panel-head h2 {
    margin: 0;
    color: #0c1c35;
    font-size: 17px;
}

.admin-preview-panel-head > a,
.admin-preview-text-btn {
    border: 0;
    color: #0b4db3;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
}

.admin-preview-analytics-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(310px, .72fr);
    gap: 15px;
}

.admin-preview-revenue-panel {
    padding-bottom: 14px;
    overflow: hidden;
}

.admin-preview-period-tabs {
    padding: 4px;
    border-radius: 11px;
    display: flex;
    gap: 3px;
    background: #f1f4f8;
}

.admin-preview-period-tabs button {
    min-width: 52px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    color: #7b8798;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 8px;
    font-weight: 800;
}

.admin-preview-period-tabs button.active {
    color: #0b4db3;
    background: #fff;
    box-shadow: 0 5px 14px rgba(28, 48, 78, .08);
}

.admin-preview-chart-summary {
    padding: 8px 20px 2px;
    gap: 35px;
}

.admin-preview-chart-summary > div {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 7px;
}

.admin-preview-chart-summary span {
    grid-column: 1 / -1;
    color: #8a96a7;
    font-size: 8px;
}

.admin-preview-chart-summary strong {
    color: #14243a;
    font-size: 15px;
}

.admin-preview-chart-summary small {
    font-size: 8px;
}

.admin-preview-chart-summary .positive {
    color: #149447;
}

.admin-preview-line-chart {
    height: 267px;
    padding: 6px 12px 0;
    direction: ltr;
}

.admin-preview-line-chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.admin-preview-chart-grid line {
    stroke: #edf0f4;
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.admin-preview-area.revenue { fill: url(#adminRevenueFill); }
.admin-preview-area.profit { fill: url(#adminProfitFill); }

.admin-preview-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3.2;
}

.admin-preview-line.revenue { stroke: #0b4db3; }
.admin-preview-line.profit { stroke: #22c55e; stroke-width: 2.4; }

.admin-preview-chart-points circle {
    fill: #fff;
    stroke: #0b4db3;
    stroke-width: 3;
}

.admin-preview-chart-labels text {
    fill: #98a3b2;
    font-family: 'Tajawal', sans-serif;
    font-size: 9px;
    text-anchor: middle;
}

.admin-preview-chart-legend {
    padding: 0 21px;
    justify-content: center;
    gap: 18px;
    color: #778497;
    font-size: 8px;
}

.admin-preview-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-preview-chart-legend i {
    width: 18px;
    height: 3px;
    border-radius: 5px;
}

.admin-preview-chart-legend i.revenue { background: #0b4db3; }
.admin-preview-chart-legend i.profit { background: #22c55e; }

.admin-preview-network-panel {
    padding-bottom: 17px;
}

.admin-preview-network-total {
    margin: 2px 20px 15px;
    padding: 17px;
    border-radius: 17px;
    display: grid;
    gap: 3px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 20%, rgba(245, 197, 66, .20), transparent 30%),
        linear-gradient(135deg, #061a3a, #0b3e7f);
}

.admin-preview-network-total span,
.admin-preview-network-total small {
    color: rgba(255, 255, 255, .62);
    font-size: 8px;
}

.admin-preview-network-total strong {
    font-size: 29px;
}

.admin-preview-side-comparison {
    padding: 0 20px;
    display: grid;
    gap: 14px;
}

.admin-preview-side-comparison > div > div:first-child {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-preview-side-comparison span {
    color: #68768a;
    font-size: 9px;
    font-weight: 700;
}

.admin-preview-side-comparison b {
    color: #17243a;
    font-size: 12px;
}

.admin-preview-side-comparison small {
    display: block;
    margin-top: 4px;
    color: #9aa4b3;
    font-size: 7px;
}

.admin-preview-progress {
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: #eef2f7;
}

.admin-preview-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.admin-preview-side-comparison .right-side i { background: linear-gradient(90deg, #0b4db3, #397ce2); }
.admin-preview-side-comparison .left-side i { background: linear-gradient(90deg, #22c55e, #63d98c); }

.admin-preview-balance-card {
    margin: 16px 20px;
    padding: 13px;
    border: 1px solid #dce9ff;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    background: #f0f6ff;
}

.admin-preview-balance-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #0b4db3;
    background: #dceaff;
}

.admin-preview-balance-card > div {
    display: grid;
    gap: 2px;
}

.admin-preview-balance-card span,
.admin-preview-balance-card small {
    color: #708096;
    font-size: 8px;
}

.admin-preview-balance-card strong {
    color: #0b4db3;
    font-size: 14px;
}

.admin-preview-network-foot {
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.admin-preview-network-foot div {
    padding: 10px 7px;
    border: 1px solid #edf0f4;
    border-radius: 12px;
    display: grid;
    gap: 3px;
    text-align: center;
}

.admin-preview-network-foot span {
    color: #8c98a8;
    font-size: 7px;
}

.admin-preview-network-foot b {
    color: #14243a;
    font-size: 11px;
}

.admin-preview-operations-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr);
    gap: 15px;
}

.admin-preview-orders-panel {
    min-width: 0;
    overflow: hidden;
}

.admin-preview-table-wrap {
    overflow-x: auto;
}

.admin-preview-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 9px;
}

.admin-preview-table th {
    padding: 11px 13px;
    color: #8995a6;
    background: #f7f9fc;
    font-size: 8px;
    text-align: right;
}

.admin-preview-table td {
    padding: 12px 13px;
    border-top: 1px solid #edf0f4;
    color: #46556a;
    vertical-align: middle;
}

.admin-preview-table td > strong,
.admin-preview-table td > b {
    color: #18263b;
}

.admin-preview-table td > small {
    color: #97a2b2;
    font-size: 7px;
}

.admin-preview-table td > button {
    border: 0;
    color: #8793a5;
    background: transparent;
    cursor: pointer;
}

.admin-preview-member {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-preview-member > span {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #0b4db3;
    background: #eaf1ff;
    font-size: 10px;
    font-weight: 900;
}

.admin-preview-member > div {
    display: grid;
    gap: 2px;
}

.admin-preview-member b {
    color: #17243a;
    font-size: 9px;
}

.admin-preview-member small {
    color: #97a2b2;
    font-size: 7px;
}

.admin-preview-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 900;
}

.admin-preview-status.success { color: #15803d; background: #e5f8ec; }
.admin-preview-status.warning { color: #8a6504; background: #fff3ce; }
.admin-preview-status.info { color: #0b4db3; background: #e8f0ff; }
.admin-preview-status.danger { color: #b4232c; background: #feecef; }

.admin-preview-withdrawals-panel {
    padding-bottom: 15px;
}

.admin-preview-count-badge {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #805d00 !important;
    background: #fff1c2;
    font-size: 10px !important;
}

.admin-preview-withdrawal-list {
    padding: 0 18px;
    display: grid;
}

.admin-preview-withdrawal-list article {
    padding: 12px 0;
    border-top: 1px solid #edf0f4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
}

.admin-preview-withdrawal-list article:first-child {
    border-top: 0;
}

.admin-preview-withdrawal-list article > div:nth-child(2) {
    display: grid;
    gap: 2px;
    text-align: left;
}

.admin-preview-withdrawal-list article > div:nth-child(2) b {
    color: #17243a;
    font-size: 9px;
}

.admin-preview-withdrawal-list article > div:nth-child(2) small {
    color: #9ba6b4;
    font-size: 7px;
}

.admin-preview-withdrawal-list article > button {
    height: 29px;
    padding: 0 9px;
    border: 1px solid #dce7f8;
    border-radius: 9px;
    color: #0b4db3;
    background: #f4f8ff;
    cursor: pointer;
    font-family: inherit;
    font-size: 7px;
    font-weight: 900;
}

.admin-preview-withdrawal-summary {
    margin: 10px 18px 0;
    padding: 13px;
    border-radius: 14px;
    display: grid;
    gap: 2px;
    background: #f7f9fc;
}

.admin-preview-withdrawal-summary span,
.admin-preview-withdrawal-summary small {
    color: #8b97a8;
    font-size: 7px;
}

.admin-preview-withdrawal-summary strong {
    color: #17243a;
    font-size: 13px;
}

.admin-preview-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(280px, .68fr);
    gap: 15px;
}

.admin-preview-product-list,
.admin-preview-timeline,
.admin-preview-health-list {
    padding: 0 18px 16px;
}

.admin-preview-product-list {
    display: grid;
}

.admin-preview-product-list article {
    padding: 11px 0;
    border-top: 1px solid #edf0f4;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
}

.admin-preview-product-list article:first-child {
    border-top: 0;
}

.product-thumb {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 17px;
}

.product-thumb.blue { color: #0b4db3; background: #eaf1ff; }
.product-thumb.green { color: #15803d; background: #e8f8ed; }
.product-thumb.gold { color: #996e00; background: #fff4d2; }

.admin-preview-product-list article > div {
    display: grid;
    gap: 2px;
}

.admin-preview-product-list article > div b {
    color: #17243a;
    font-size: 9px;
}

.admin-preview-product-list article > div small {
    color: #9aa5b4;
    font-size: 7px;
}

.admin-preview-product-list article > strong {
    color: #17243a;
    font-size: 9px;
}

.admin-preview-timeline {
    display: grid;
}

.admin-preview-timeline article {
    position: relative;
    min-height: 57px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
}

.admin-preview-timeline article:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 35px;
    bottom: 3px;
    width: 1px;
    background: #e6eaf0;
}

.admin-preview-timeline article > span {
    z-index: 1;
    width: 31px;
    height: 31px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 900;
}

.admin-preview-timeline article > span.green { color: #15803d; background: #e7f8ed; }
.admin-preview-timeline article > span.blue { color: #0b4db3; background: #eaf1ff; }
.admin-preview-timeline article > span.gold { color: #8c6500; background: #fff3cc; }
.admin-preview-timeline article > span.violet { color: #7456c8; background: #f0ecff; }

.admin-preview-timeline article > div {
    padding-top: 2px;
}

.admin-preview-timeline p {
    margin: 0 0 3px;
    color: #455469;
    font-size: 8px;
    line-height: 1.65;
}

.admin-preview-timeline p b {
    color: #17243a;
}

.admin-preview-timeline small {
    color: #9aa5b3;
    font-size: 7px;
}

.admin-preview-health-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #15803d !important;
    background: #e9f8ee;
}

.admin-preview-health-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
}

.admin-preview-health-score {
    padding: 2px 18px 14px;
    display: grid;
    place-items: center;
}

.admin-preview-health-ring {
    width: 126px;
    height: 126px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background:
        radial-gradient(circle at center, #fff 56%, transparent 57%),
        conic-gradient(#22c55e 0 99.9%, #e9edf3 99.9% 100%);
    box-shadow: inset 0 0 0 7px #f6f8fb;
}

.admin-preview-health-ring strong {
    color: #112039;
    font-size: 21px;
}

.admin-preview-health-ring span {
    color: #8d98a8;
    font-size: 8px;
}

.admin-preview-health-list {
    display: grid;
}

.admin-preview-health-list div {
    padding: 9px 0;
    border-top: 1px solid #edf0f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-preview-health-list span {
    color: #7e8a9c;
    font-size: 8px;
}

.admin-preview-health-list b {
    color: #25354a;
    font-size: 8px;
}

.admin-preview-health-list b.success {
    color: #15803d;
}

.admin-preview-footer {
    margin-top: 25px;
    padding: 18px 3px 0;
    border-top: 1px solid #e2e7ee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #99a3b1;
    font-size: 8px;
}

.admin-preview-overlay {
    display: none;
}

@media (max-width: 1320px) {
    .admin-preview-shell {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .admin-preview-sidebar {
        width: 260px;
    }

    .admin-preview-content {
        width: calc(100% - 38px);
    }

    .admin-preview-topbar {
        padding-inline: 22px;
    }

    .admin-preview-top-user {
        min-width: 128px;
    }

    .admin-preview-search {
        width: 260px;
    }
}

@media (max-width: 1180px) {
    .admin-preview-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-preview-bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-preview-health-panel {
        grid-column: 1 / -1;
    }

    .admin-preview-health-panel {
        display: grid;
        grid-template-columns: minmax(200px, .6fr) minmax(0, 1fr);
        align-items: center;
    }

    .admin-preview-health-panel .admin-preview-panel-head {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1020px) {
    .admin-preview-shell {
        display: block;
    }

    .admin-preview-workspace {
        grid-column: auto;
    }

    .admin-preview-sidebar {
        transform: translateX(105%);
        transition: transform .25s ease;
    }

    .admin-preview-shell.sidebar-open .admin-preview-sidebar {
        transform: translateX(0);
    }

    .admin-preview-sidebar-close,
    .admin-preview-menu-toggle {
        display: grid;
    }

    .admin-preview-overlay {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(0, 13, 31, .55);
        backdrop-filter: blur(2px);
        transition: .25s ease;
    }

    .admin-preview-shell.sidebar-open .admin-preview-overlay {
        visibility: visible;
        opacity: 1;
    }

    .admin-preview-search {
        width: min(280px, 34vw);
    }

    .admin-preview-analytics-grid,
    .admin-preview-operations-grid {
        grid-template-columns: 1fr;
    }

    .admin-preview-network-panel,
    .admin-preview-withdrawals-panel {
        min-height: auto;
    }
}

@media (max-width: 760px) {
    .admin-preview-topbar {
        min-height: 68px;
        padding: 10px 14px;
    }

    .admin-preview-topbar-title span,
    .admin-preview-top-user,
    .admin-preview-search,
    .admin-preview-action-btn:last-of-type {
        display: none;
    }

    .admin-preview-content {
        width: calc(100% - 24px);
        padding-top: 15px;
    }

    .admin-preview-mode-note {
        align-items: flex-start;
    }

    .admin-preview-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-preview-head-actions {
        width: 100%;
    }

    .admin-preview-head-actions button {
        flex: 1;
    }

    .admin-preview-bottom-grid {
        grid-template-columns: 1fr;
    }

    .admin-preview-health-panel {
        grid-column: auto;
        display: block;
    }

    .admin-preview-table {
        min-width: 790px;
    }

    .admin-preview-line-chart {
        height: 235px;
    }
}

@media (max-width: 520px) {
    .admin-preview-sidebar {
        width: min(292px, calc(100% - 38px));
    }

    .admin-preview-topbar-title strong {
        font-size: 15px;
    }

    .admin-preview-page-head h1 {
        font-size: 25px;
    }

    .admin-preview-page-head p {
        font-size: 10px;
        line-height: 1.7;
    }

    .admin-preview-kpi-grid {
        grid-template-columns: 1fr;
    }

    .admin-preview-kpi {
        min-height: 158px;
    }

    .admin-preview-mode-note p {
        font-size: 9px;
    }

    .admin-preview-head-actions {
        flex-direction: column-reverse;
    }

    .admin-preview-head-actions button {
        width: 100%;
    }

    .admin-preview-panel-head {
        padding-inline: 15px;
    }

    .admin-preview-chart-summary {
        padding-inline: 15px;
        gap: 18px;
    }

    .admin-preview-chart-summary strong {
        font-size: 13px;
    }

    .admin-preview-line-chart {
        height: 210px;
        padding-inline: 3px;
    }

    .admin-preview-network-total,
    .admin-preview-side-comparison,
    .admin-preview-network-foot {
        margin-inline: 15px;
        padding-inline: 0;
    }

    .admin-preview-balance-card {
        margin-inline: 15px;
    }

    .admin-preview-network-foot {
        grid-template-columns: 1fr;
    }

    .admin-preview-withdrawal-list article {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .admin-preview-withdrawal-list article > button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .admin-preview-product-list article {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    .admin-preview-product-list article .admin-preview-status {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .admin-preview-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}


/* =========================================================
   AYIN Frontend Finalization V1
   Notifications, Support, Checkout, Legal and Link Audit
   ========================================================= */

button,
input,
select,
textarea {
    font-family: inherit;
}

.ayin-notification-link {
    position: relative;
}

.ayin-notification-link > span {
    position: absolute;
    top: -5px;
    left: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #EF4444;
    color: white;
    border: 2px solid var(--ayin-deep-navy);
    display: grid;
    place-items: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
}

.service-card-disabled {
    position: relative;
    opacity: .68;
    cursor: not-allowed;
    filter: grayscale(.12);
}

.service-card-disabled small {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #FFF7D6;
    color: #8A6500;
    font-size: 9px;
    font-weight: 900;
}

.wallet-action {
    border: 0;
    width: 100%;
    font-family: inherit;
    cursor: pointer;
}

#withdrawal-request,
#direct-profit-log {
    scroll-margin-top: 100px;
}

.ayin-demo-toast {
    position: fixed;
    z-index: 9999;
    right: 50%;
    bottom: 28px;
    transform: translate(50%, 18px);
    width: min(520px, calc(100% - 28px));
    padding: 15px 18px;
    border-radius: 16px;
    background: var(--ayin-deep-navy);
    color: white;
    box-shadow: 0 20px 50px rgba(0, 27, 61, .28);
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease, transform .24s ease;
}

.ayin-demo-toast.show {
    opacity: 1;
    transform: translate(50%, 0);
}

.utility-hero {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    border-radius: 30px;
    padding: 30px;
    margin-bottom: 22px;
    background:
        radial-gradient(circle at 8% 10%, rgba(245, 197, 66, .22), transparent 30%),
        linear-gradient(135deg, var(--ayin-deep-navy), var(--ayin-navy));
    color: white;
    box-shadow: var(--ayin-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.utility-hero::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    left: -90px;
    bottom: -130px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    pointer-events: none;
}

.utility-hero > * {
    position: relative;
    z-index: 1;
}

.utility-hero h1 {
    margin: 6px 0 9px;
    font-size: clamp(31px, 4vw, 45px);
    line-height: 1.15;
    font-weight: 900;
}

.utility-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,.72);
    line-height: 1.9;
    font-size: 14px;
}

.utility-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.utility-section-head h2 {
    margin: 5px 0 0;
    color: var(--ayin-text);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 900;
}

.utility-section-head .section-kicker {
    color: var(--ayin-blue);
    font-size: 11px;
    font-weight: 900;
}

/* Notifications */

.notification-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.notification-summary-card {
    min-height: 135px;
    padding: 22px;
    border-radius: 22px;
    background: white;
    border: 1px solid var(--ayin-border);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.notification-summary-card span {
    color: var(--ayin-muted);
    font-size: 13px;
    font-weight: 800;
}

.notification-summary-card strong {
    font-size: 32px;
    line-height: 1;
    color: var(--ayin-text);
}

.notification-summary-card small {
    color: #9CA3AF;
    font-size: 11px;
}

.notification-summary-card.blue {
    background: linear-gradient(145deg, #0B4DB3, #07347B);
    border-color: transparent;
}

.notification-summary-card.blue span,
.notification-summary-card.blue strong,
.notification-summary-card.blue small {
    color: white;
}

.notification-summary-card.green strong {
    color: var(--ayin-green-dark);
}

.notification-summary-card.gold strong {
    color: #A87700;
}

.notifications-panel {
    padding: 24px;
}

.notification-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.notification-filters button {
    border: 1px solid var(--ayin-border);
    background: white;
    color: var(--ayin-muted);
    padding: 8px 13px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.notification-filters button.active {
    background: var(--ayin-blue-soft);
    color: var(--ayin-blue);
    border-color: #C9D9F7;
}

.notification-list {
    display: grid;
    gap: 12px;
}

.notification-item {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 15px;
    align-items: start;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--ayin-border);
    background: white;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.notification-item:hover {
    transform: translateY(-1px);
    border-color: #C9D9F7;
}

.notification-item.unread {
    background: #F4F8FF;
    border-color: #C9D9F7;
}

.notification-item.unread::before {
    content: "";
    position: absolute;
    top: 17px;
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ayin-blue);
}

.notification-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--ayin-blue-soft);
    font-size: 22px;
}

.notification-icon.tree {
    background: #E8F9EF;
}

.notification-icon.wallet {
    background: #FFF7D6;
}

.notification-icon.orders {
    background: #EEF2FF;
}

.notification-icon.profit {
    background: #EAF9EF;
    color: var(--ayin-green-dark);
    font-weight: 900;
}

.notification-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.notification-title-row h3 {
    margin: 0;
    color: var(--ayin-text);
    font-size: 15px;
    font-weight: 900;
}

.notification-title-row time {
    color: #9CA3AF;
    font-size: 10px;
    white-space: nowrap;
}

.notification-copy p {
    margin: 7px 0 10px;
    color: var(--ayin-muted);
    line-height: 1.8;
    font-size: 12px;
}

.notification-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.notification-meta span,
.notification-meta a {
    padding: 5px 9px;
    border-radius: 999px;
    background: #F4F6FA;
    color: #6B7280;
    font-size: 9px;
    font-weight: 800;
}

.notification-meta a {
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
}

.notification-read-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #C9D9F7;
    border-radius: 12px;
    background: white;
    color: var(--ayin-blue);
    cursor: pointer;
    font-weight: 900;
}

.notification-empty {
    padding: 55px 20px;
    text-align: center;
    color: var(--ayin-muted);
}

.notification-empty span {
    display: block;
    font-size: 42px;
    margin-bottom: 10px;
}

.notification-empty strong {
    display: block;
    color: var(--ayin-text);
    font-size: 18px;
}

.notification-empty p {
    margin: 6px 0 0;
    font-size: 12px;
}

/* Support */

.support-status {
    min-width: 245px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    display: flex;
    align-items: center;
    gap: 12px;
}

.support-status > span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ayin-green);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, .15);
}

.support-status div {
    display: grid;
    gap: 3px;
}

.support-status strong {
    font-size: 13px;
}

.support-status small {
    color: rgba(255,255,255,.65);
    font-size: 10px;
}

.support-channel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.support-channel-card {
    min-height: 190px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid var(--ayin-border);
    background: white;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-content: start;
}

.support-channel-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--ayin-blue-soft);
    font-size: 21px;
}

.support-channel-card > div:nth-child(2) {
    display: grid;
    gap: 5px;
}

.support-channel-card span {
    color: var(--ayin-blue);
    font-size: 10px;
    font-weight: 900;
}

.support-channel-card strong {
    color: var(--ayin-text);
    font-size: 14px;
}

.support-channel-card p {
    margin: 0;
    color: var(--ayin-muted);
    line-height: 1.7;
    font-size: 10px;
}

.support-channel-card button {
    grid-column: 1 / -1;
    align-self: end;
    min-height: 40px;
    border: 1px solid #C9D9F7;
    border-radius: 12px;
    background: #F6F9FF;
    color: var(--ayin-blue);
    font-weight: 900;
    cursor: pointer;
}

.support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr);
    gap: 20px;
    align-items: start;
}

.support-ticket-card,
.support-faq-card {
    padding: 24px;
}

.support-form-grid,
.checkout-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.support-form label,
.checkout-form-grid label {
    display: grid;
    gap: 8px;
}

.support-form label > span,
.checkout-form-grid label > span {
    color: var(--ayin-text);
    font-size: 11px;
    font-weight: 900;
}

.support-form input,
.support-form select,
.support-form textarea,
.checkout-form-grid input,
.checkout-form-grid select,
.checkout-form-grid textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid #DDE2EA;
    border-radius: 14px;
    background: #FBFCFE;
    color: var(--ayin-text);
    padding: 12px 14px;
    outline: none;
    font-size: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.support-form textarea,
.checkout-form-grid textarea {
    resize: vertical;
    min-height: 100px;
}

.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus,
.checkout-form-grid input:focus,
.checkout-form-grid select:focus,
.checkout-form-grid textarea:focus {
    border-color: #8FB1EA;
    box-shadow: 0 0 0 4px rgba(11, 77, 179, .08);
}

.support-field-wide,
.checkout-field-wide {
    grid-column: 1 / -1;
}

.support-upload {
    min-height: 100px;
    padding: 18px;
    border: 1px dashed #BAC8DB;
    border-radius: 16px;
    background: #F8FAFD;
    cursor: pointer;
    align-content: center;
}

.support-upload input {
    display: none;
}

.support-upload > span {
    color: var(--ayin-blue) !important;
}

.support-upload small {
    color: #8B95A5;
    font-size: 9px;
}

.support-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ayin-border);
}

.support-form-footer p {
    margin: 0;
    color: var(--ayin-muted);
    font-size: 10px;
    line-height: 1.7;
}

.support-ticket-id {
    padding: 6px 10px;
    border-radius: 999px;
    background: #FFF7D6;
    color: #8A6500;
    font-size: 9px;
    font-weight: 900;
}

.support-faq-list {
    display: grid;
    gap: 10px;
}

.support-faq-list details {
    border: 1px solid var(--ayin-border);
    border-radius: 15px;
    background: #FBFCFE;
    overflow: hidden;
}

.support-faq-list summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 15px 16px 15px 42px;
    color: var(--ayin-text);
    font-size: 11px;
    font-weight: 900;
}

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

.support-faq-list summary::after {
    content: "+";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ayin-blue);
    font-size: 20px;
    line-height: 1;
}

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

.support-faq-list p {
    margin: 0;
    padding: 0 16px 16px;
    color: var(--ayin-muted);
    line-height: 1.9;
    font-size: 10px;
}

/* Checkout */

.checkout-progress {
    min-width: 360px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.checkout-progress span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.55);
    font-size: 10px;
    font-weight: 800;
}

.checkout-progress span::first-letter {
    color: inherit;
}

.checkout-progress span {
    width: 62px;
    height: 38px;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
}

.checkout-progress span b {
    display: none;
}

.checkout-progress span.active,
.checkout-progress span.done {
    color: white;
    background: rgba(255,255,255,.1);
}

.checkout-progress span.done {
    color: var(--ayin-gold);
}

.checkout-progress i {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,.18);
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr);
    gap: 20px;
    align-items: start;
}

.checkout-main-column {
    display: grid;
    gap: 20px;
}

.checkout-section-card,
.checkout-summary {
    padding: 24px;
}

.checkout-text-btn {
    border: 0;
    background: transparent;
    color: var(--ayin-blue);
    cursor: pointer;
    font-size: 10px;
    font-weight: 900;
}

.checkout-payment-options {
    display: grid;
    gap: 12px;
}

.checkout-payment-option {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 30px;
    gap: 13px;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--ayin-border);
    border-radius: 17px;
    background: #FBFCFE;
    cursor: pointer;
}

.checkout-payment-option.active {
    border-color: #8FB1EA;
    background: #F3F7FF;
    box-shadow: 0 0 0 3px rgba(11, 77, 179, .06);
}

.checkout-payment-option input {
    position: absolute;
    opacity: 0;
}

.checkout-payment-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: white;
    border: 1px solid var(--ayin-border);
    font-size: 21px;
}

.checkout-payment-option > span:nth-child(3) {
    display: grid;
    gap: 4px;
}

.checkout-payment-option strong {
    color: var(--ayin-text);
    font-size: 12px;
}

.checkout-payment-option small {
    color: var(--ayin-muted);
    font-size: 9px;
}

.checkout-payment-option > b {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #E5E7EB;
    color: white;
    font-size: 11px;
}

.checkout-payment-option.active > b {
    background: var(--ayin-blue);
}

.checkout-summary {
    position: sticky;
    top: 100px;
}

.checkout-summary .utility-section-head a {
    color: var(--ayin-blue);
    font-size: 10px;
    font-weight: 900;
}

.checkout-product {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--ayin-border);
}

.checkout-product-image {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: #F3F6FA;
    font-size: 24px;
}

.checkout-product > div:nth-child(2) {
    display: grid;
    gap: 4px;
}

.checkout-product strong {
    color: var(--ayin-text);
    font-size: 11px;
}

.checkout-product span {
    color: var(--ayin-muted);
    font-size: 9px;
}

.checkout-product > b {
    color: var(--ayin-text);
    font-size: 10px;
    white-space: nowrap;
}

.checkout-summary-lines {
    display: grid;
    gap: 11px;
    padding: 18px 0;
}

.checkout-summary-lines div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--ayin-muted);
    font-size: 10px;
}

.checkout-summary-lines strong {
    color: var(--ayin-text);
}

.checkout-free {
    color: var(--ayin-green-dark) !important;
}

.checkout-total {
    padding: 17px;
    border-radius: 17px;
    background: var(--ayin-deep-navy);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.checkout-total span {
    font-size: 11px;
    font-weight: 800;
}

.checkout-total strong {
    font-size: 19px;
}

.checkout-total small {
    font-size: 9px;
}

.checkout-agreement {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0;
    color: var(--ayin-muted);
    line-height: 1.7;
    font-size: 9px;
}

.checkout-agreement input {
    margin-top: 3px;
    accent-color: var(--ayin-blue);
}

.checkout-submit {
    width: 100%;
}

.checkout-demo-note {
    margin: 10px 0 0;
    color: #9CA3AF;
    text-align: center;
    line-height: 1.6;
    font-size: 8px;
}

/* Forgot Password */

.forgot-auth-shell .auth-form-wrap {
    max-width: 520px;
}

.forgot-auth-shell .auth-heading h1 {
    font-size: clamp(35px, 4vw, 51px);
}

.forgot-back-link {
    margin-top: 18px;
}

.forgot-showcase h2 {
    max-width: 620px;
}

.forgot-steps {
    display: grid;
    gap: 13px;
    margin-top: 30px;
}

.forgot-steps article {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 15px;
    border-radius: 17px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.11);
}

.forgot-steps article > span {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--ayin-gold);
    color: var(--ayin-deep-navy);
    font-size: 18px;
    font-weight: 900;
}

.forgot-steps article div {
    display: grid;
    gap: 4px;
}

.forgot-steps strong {
    color: white;
    font-size: 13px;
}

.forgot-steps p {
    margin: 0 !important;
    color: rgba(255,255,255,.62) !important;
    font-size: 10px !important;
}

/* Legal */

.legal-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 8%, rgba(245, 197, 66, .13), transparent 30%),
        var(--ayin-bg);
}

.legal-shell {
    width: min(980px, calc(100% - 30px));
    margin: 0 auto;
    padding: 28px 0 60px;
}

.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.legal-header .ayin-brand-text span {
    color: var(--ayin-muted);
}

.legal-back-link {
    padding: 10px 14px;
    border: 1px solid var(--ayin-border);
    border-radius: 13px;
    background: white;
    color: var(--ayin-blue);
    font-size: 10px;
    font-weight: 900;
}

.legal-card {
    overflow: hidden;
    border-radius: 28px;
    background: white;
    border: 1px solid var(--ayin-border);
    box-shadow: var(--ayin-shadow);
}

.legal-title {
    padding: 36px;
    background:
        radial-gradient(circle at 12% 15%, rgba(245, 197, 66, .18), transparent 25%),
        linear-gradient(135deg, var(--ayin-deep-navy), var(--ayin-navy));
    color: white;
}

.legal-title > span {
    color: var(--ayin-gold);
    font-size: 10px;
    font-weight: 900;
}

.legal-title h1 {
    margin: 9px 0 8px;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
}

.legal-title p {
    max-width: 730px;
    margin: 0;
    color: rgba(255,255,255,.68);
    line-height: 1.9;
    font-size: 12px;
}

.legal-content {
    display: grid;
    gap: 0;
    padding: 10px 36px;
}

.legal-content section {
    padding: 24px 0;
    border-bottom: 1px solid var(--ayin-border);
}

.legal-content section:last-child {
    border-bottom: 0;
}

.legal-content h2 {
    margin: 0 0 8px;
    color: var(--ayin-text);
    font-size: 17px;
    font-weight: 900;
}

.legal-content p {
    margin: 0;
    color: var(--ayin-muted);
    line-height: 2;
    font-size: 12px;
}

.legal-note {
    margin: 0 36px 36px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #FFF8DD;
    color: #7B5A00;
    border: 1px solid #F3E1A0;
    line-height: 1.8;
    font-size: 10px;
    font-weight: 700;
}

/* Final responsive audit */

@media (max-width: 1180px) {
    .notification-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-channel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-channel-card:last-child {
        grid-column: 1 / -1;
    }

    .checkout-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
    }
}

@media (max-width: 980px) {
    .utility-hero {
        min-height: auto;
    }

    .support-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }

    .support-faq-card {
        order: -1;
    }
}

@media (max-width: 760px) {
    .utility-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
    }

    .utility-hero .ayin-btn,
    .support-status {
        width: 100%;
    }

    .utility-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .notification-summary-grid,
    .support-channel-grid {
        grid-template-columns: 1fr;
    }

    .support-channel-card:last-child {
        grid-column: auto;
    }

    .notification-item {
        grid-template-columns: 45px minmax(0, 1fr);
        padding: 15px;
    }

    .notification-icon {
        width: 45px;
        height: 45px;
        border-radius: 14px;
        font-size: 19px;
    }

    .notification-read-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .notification-title-row {
        display: grid;
        gap: 5px;
    }

    .support-form-grid,
    .checkout-form-grid {
        grid-template-columns: 1fr;
    }

    .support-field-wide,
    .checkout-field-wide {
        grid-column: auto;
    }

    .support-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .support-form-footer .ayin-btn {
        width: 100%;
    }

    .checkout-progress {
        min-width: 0;
        width: 100%;
    }

    .legal-title,
    .legal-content {
        padding-left: 22px;
        padding-right: 22px;
    }

    .legal-note {
        margin-left: 22px;
        margin-right: 22px;
    }
}

@media (max-width: 520px) {
    .ayin-notification-link > span {
        top: -3px;
        left: -3px;
    }

    .utility-hero h1 {
        font-size: 31px;
    }

    .notifications-panel,
    .support-ticket-card,
    .support-faq-card,
    .checkout-section-card,
    .checkout-summary {
        padding: 18px;
    }

    .notification-filters {
        width: 100%;
    }

    .notification-filters button {
        flex: 1;
    }

    .notification-item {
        grid-template-columns: 1fr;
    }

    .notification-icon {
        width: 42px;
        height: 42px;
    }

    .notification-title-row h3 {
        font-size: 14px;
    }

    .notification-title-row time {
        white-space: normal;
    }

    .notification-copy p {
        font-size: 11px;
    }

    .support-channel-card {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 18px;
    }

    .support-channel-icon {
        width: 44px;
        height: 44px;
    }

    .checkout-product {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .checkout-product > b {
        grid-column: 2;
        justify-self: start;
    }

    .checkout-total {
        align-items: flex-start;
        flex-direction: column;
    }

    .checkout-progress i {
        min-width: 14px;
    }

    .legal-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .legal-back-link {
        width: 100%;
        text-align: center;
    }

    .legal-title {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .legal-title h1 {
        font-size: 33px;
    }

    .legal-content h2 {
        font-size: 15px;
    }

    .legal-content p {
        font-size: 11px;
    }
}

/* AYIN backend foundation v1 */
.auth-server-alert {
    display: grid;
    gap: 5px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.7;
}

.auth-server-alert strong {
    color: inherit;
    font-size: 14px;
}

.auth-server-alert.error {
    color: #991b1b;
    border-color: #fecaca;
    background: #fff1f2;
}

.auth-server-alert.success {
    color: #166534;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.referral-owner-note {
    margin-top: -4px;
}

.ayin-flash {
    margin-top: 18px;
    padding: 13px 18px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
}

.ayin-flash-success {
    color: #166534;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

.ayin-logout-form {
    display: inline-flex;
    margin: 0;
}

.ayin-logout-form button {
    font-family: inherit;
    cursor: pointer;
}

.ayin-account-link {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ayin-simple-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 22px;
}

.ayin-simple-pagination a,
.ayin-simple-pagination span,
.ayin-simple-pagination b {
    padding: 8px 13px;
    border-radius: 10px;
    font-size: 12px;
}

.ayin-simple-pagination a {
    color: #0b4db3;
    border: 1px solid #cbd5e1;
    background: #fff;
}

.ayin-simple-pagination span {
    color: #94a3b8;
    background: #f8fafc;
}

.ayin-simple-pagination b {
    color: #334155;
}

.notification-item > form {
    align-self: center;
}

@media (max-width: 900px) {
    .ayin-account-link {
        display: none;
    }
}


/* =========================================================
   AYIN Login Submit Loading State
   ========================================================= */
.auth-submit {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.auth-submit-default,
.auth-submit-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.auth-submit-loading {
    display: none;
}

.auth-submit.is-loading {
    cursor: wait;
    pointer-events: none;
    opacity: .94;
    transform: translateY(0);
}

.auth-submit.is-loading .auth-submit-default {
    display: none;
}

.auth-submit.is-loading .auth-submit-loading {
    display: inline-flex;
}

.auth-submit-spinner {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2.5px solid rgba(255, 255, 255, .38);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ayin-login-spin .72s linear infinite;
}

@keyframes ayin-login-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-submit-spinner {
        animation-duration: 1.3s;
    }
}


/* =========================================================
   AYIN Global Action Feedback + Catalog/Cart Backend V1
   ========================================================= */
.ayin-action-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    white-space: nowrap;
}

.ayin-action-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2.5px solid rgba(255, 255, 255, .38);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ayin-action-spin .72s linear infinite;
}

button.is-ayin-loading,
a.is-ayin-loading {
    cursor: wait !important;
    pointer-events: none;
    opacity: .92;
    transform: none !important;
}

.ayin-icon-btn .ayin-action-spinner,
.notification-read-btn .ayin-action-spinner {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
}

@keyframes ayin-action-spin {
    to { transform: rotate(360deg); }
}

.ayin-action-alert {
    margin-bottom: 18px;
    padding: 14px 17px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
}

.ayin-action-alert.error {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fff1f2;
}

.store-filter-card {
    padding: 22px;
    margin-bottom: 22px;
}

.store-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.store-filter-head .ayin-section-title {
    margin: 0;
}

.store-category-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.store-category-links .store-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.store-category-links .store-chip small {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    color: #64748b;
    background: rgba(148, 163, 184, .14);
}

.store-category-links .store-chip.active small {
    color: #fff;
    background: rgba(255, 255, 255, .18);
}

.catalog-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 52px 24px;
    text-align: center;
}

.catalog-empty > span {
    font-size: 52px;
}

.catalog-empty h2,
.catalog-empty p {
    margin: 0;
}

.catalog-empty p {
    color: #64748b;
}

.product-stock-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -2px 0 14px;
    font-size: 11px;
}

.product-stock-line .in-stock {
    color: #15803d;
    font-weight: 800;
}

.product-stock-line .out-stock {
    color: #b91c1c;
    font-weight: 800;
}

.product-stock-line small {
    color: #94a3b8;
}

.quantity-control input,
.cart-quantity input {
    width: 58px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font: inherit;
    font-weight: 900;
    text-align: center;
    appearance: textfield;
}

.quantity-control input::-webkit-outer-spin-button,
.quantity-control input::-webkit-inner-spin-button,
.cart-quantity input::-webkit-outer-spin-button,
.cart-quantity input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

.product-actions button {
    border: 0;
    font-family: inherit;
}

.cart-update-form {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.cart-update-btn,
.cart-remove-btn {
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.cart-update-btn {
    padding: 7px 13px;
    color: #0b4db3;
    background: #eaf2ff;
}

.cart-remove-btn {
    padding: 7px 12px;
    color: #b91c1c;
    background: #fee2e2;
}

.cart-item-end {
    display: grid;
    justify-items: end;
    gap: 12px;
}

.cart-product-info a {
    color: inherit;
    text-decoration: none;
}

.cart-product-info small {
    display: block;
    margin-top: 6px;
    color: #94a3b8;
    font-size: 10px;
}

@media (max-width: 760px) {
    .store-filter-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .store-category-links {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .store-category-links .store-chip {
        flex: 0 0 auto;
    }

    .cart-update-form,
    .cart-item-end {
        justify-items: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ayin-action-spinner {
        animation-duration: 1.3s;
    }
}


/* =========================================================
   AYIN Orders Backend V1
   ========================================================= */
.orders-hero {
    margin-bottom: 22px;
}

.orders-list-card {
    padding: 12px 22px 22px;
    overflow-x: auto;
}

.orders-table-head,
.orders-table-row {
    min-width: 880px;
    display: grid;
    grid-template-columns: 1.2fr 1.15fr .7fr .9fr 1fr .8fr .55fr;
    gap: 14px;
    align-items: center;
}

.orders-table-head {
    padding: 16px 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    border-bottom: 1px solid #e5e7eb;
}

.orders-table-row {
    padding: 18px 12px;
    border-bottom: 1px solid #eef2f7;
    color: #334155;
    font-size: 13px;
}

.orders-table-row:last-child {
    border-bottom: 0;
}

.orders-table-row > strong {
    color: var(--ayin-deep-navy);
    font-weight: 900;
}

.orders-table-row > a {
    color: var(--ayin-blue);
    font-weight: 900;
    text-decoration: none;
}

.order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.order-status.pending {
    color: #92400e;
    background: #fff7d6;
}

.order-status.confirmed {
    color: #1d4ed8;
    background: #dbeafe;
}

.order-status.processing {
    color: #6d28d9;
    background: #ede9fe;
}

.order-status.completed {
    color: #15803d;
    background: #dcfce7;
}

.order-status.cancelled {
    color: #b91c1c;
    background: #fee2e2;
}

.order-success-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 25px;
    margin-bottom: 22px;
    border: 1px solid #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.order-success-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: var(--ayin-green);
    font-size: 28px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(34, 197, 94, .23);
}

.order-success-card span:first-child {
    color: #15803d;
    font-size: 12px;
    font-weight: 900;
}

.order-success-card h1 {
    margin: 4px 0 6px;
    color: var(--ayin-deep-navy);
    font-size: 28px;
    font-weight: 900;
}

.order-success-card p {
    margin: 0;
    color: #64748b;
}

.order-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}

.order-items-panel,
.order-summary-panel {
    padding: 22px;
}

.order-detail-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 15px;
    padding: 16px 0;
    border-bottom: 1px solid #eef2f7;
}

.order-detail-item:last-child {
    border-bottom: 0;
}

.order-detail-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #eff6ff;
    font-size: 28px;
}

.order-detail-item strong {
    display: block;
    color: var(--ayin-deep-navy);
    font-weight: 900;
}

.order-detail-item span,
.order-detail-item small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
}

.order-detail-item > b {
    color: var(--ayin-deep-navy);
    white-space: nowrap;
}

.order-summary-panel > h2 {
    margin: 0 0 15px;
    color: var(--ayin-deep-navy);
}

.order-summary-panel > div:not(.order-address-block) {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    color: #64748b;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
}

.order-summary-panel > div strong {
    color: var(--ayin-deep-navy);
}

.order-summary-total {
    font-size: 16px !important;
}

.order-summary-total strong {
    color: var(--ayin-green-dark) !important;
    font-size: 20px;
}

.order-address-block {
    margin-top: 18px;
    padding: 16px;
    border-radius: 16px;
    background: #f8fafc;
}

.order-address-block > span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.order-address-block p {
    margin: 8px 0;
    color: #475569;
    line-height: 1.7;
}

.order-address-block small {
    color: #64748b;
}

@media (max-width: 980px) {
    .order-details-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .order-success-card {
        grid-template-columns: auto 1fr;
    }

    .order-success-card > .order-status {
        grid-column: 1 / -1;
    }

    .order-detail-item {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .order-detail-item > span,
    .order-detail-item > b {
        grid-column: 2;
    }
}


/* AYIN Wallet + Direct Profits Backend V1 */
.wallet-live-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.wallet-live-card{min-height:170px;padding:22px;border-radius:24px;border:1px solid #e7edf6;background:#fff;box-shadow:var(--ayin-shadow)}.wallet-live-card span{color:#64748b;font-size:13px;font-weight:800}.wallet-live-card strong{display:block;margin:14px 0 9px;color:var(--ayin-deep-navy);font-size:27px;font-weight:900;white-space:nowrap}.wallet-live-card strong small{font-size:13px}.wallet-live-card p{margin:0;color:#94a3b8;font-size:12px;line-height:1.7}.wallet-live-card.purchase{background:linear-gradient(145deg,#0b4db3,#082f72)}.wallet-live-card.profit{background:linear-gradient(145deg,#22c55e,#15803d)}.wallet-live-card.purchase span,.wallet-live-card.purchase strong,.wallet-live-card.purchase p,.wallet-live-card.profit span,.wallet-live-card.profit strong,.wallet-live-card.profit p{color:#fff}.wallet-live-card.held{background:linear-gradient(145deg,#fffaf0,#fff);border-color:#fde68a}.wallet-live-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;align-items:start}.wallet-live-transaction{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid #eef2f7}.wallet-live-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;font-weight:900}.wallet-live-icon.credit{color:#15803d;background:#dcfce7}.wallet-live-icon.debit{color:#b91c1c;background:#fee2e2}.wallet-live-transaction strong{display:block;color:var(--ayin-deep-navy);font-size:13px}.wallet-live-transaction span{display:block;margin-top:5px;color:#94a3b8;font-size:10px}.wallet-live-transaction>b{white-space:nowrap}.wallet-live-transaction>b.credit{color:#15803d}.wallet-live-transaction>b.debit{color:#b91c1c}.withdrawal-live-card{padding:22px}.withdrawal-live-card h2{margin:6px 0 8px;color:var(--ayin-deep-navy)}.withdrawal-live-card>p{margin:0 0 18px;color:#64748b;line-height:1.7}.withdrawal-live-card form{display:grid;gap:13px}.withdrawal-live-card label{display:grid;gap:7px}.withdrawal-live-card label>span{color:#334155;font-size:11px;font-weight:900}.withdrawal-live-card input,.withdrawal-live-card select,.withdrawal-live-card textarea{width:100%;min-height:45px;padding:10px 13px;border:1px solid #dce4ef;border-radius:13px;background:#fff;font:inherit;outline:none}.withdrawals-history-card{margin-top:22px;padding:22px}.withdrawal-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid #eef2f7}.withdrawal-history-row strong,.withdrawal-history-row span{display:block}.withdrawal-history-row>div>span{margin-top:4px;color:#94a3b8;font-size:10px}.profits-empty-row{padding:34px!important;color:#64748b;text-align:center}.admin-orders-container{max-width:1500px;padding-top:30px;padding-bottom:50px}.admin-order-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}.admin-order-filters a{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border-radius:12px;color:#475569;background:#fff;box-shadow:0 6px 18px rgba(15,23,42,.06);text-decoration:none;font-size:12px;font-weight:900}.admin-order-filters a.active{color:#fff;background:var(--ayin-blue)}.admin-order-filters small{display:inline-grid;place-items:center;min-width:21px;height:21px;border-radius:999px;background:rgba(148,163,184,.15)}.admin-orders-card{padding:12px 22px}.admin-order-row{display:grid;grid-template-columns:minmax(190px,1.3fr) repeat(3,minmax(105px,.65fr)) auto minmax(270px,1fr);gap:15px;align-items:center;padding:18px 0;border-bottom:1px solid #eef2f7}.admin-order-row>div>span{display:block;margin-bottom:5px;color:#94a3b8;font-size:10px}.admin-order-row>div>strong{color:var(--ayin-deep-navy)}.admin-order-row form{display:grid;grid-template-columns:minmax(120px,1fr) auto;gap:8px}.admin-order-row select{min-height:43px;padding:0 12px;border:1px solid #dce4ef;border-radius:12px;background:#fff;font:inherit}.admin-order-row .ayin-btn{min-height:43px;padding:0 15px;font-size:12px}@media(max-width:1150px){.wallet-live-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-order-row{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-order-row form{grid-column:1/-1}}@media(max-width:900px){.wallet-live-layout{grid-template-columns:1fr}}@media(max-width:620px){.wallet-live-summary{grid-template-columns:1fr}.wallet-live-transaction{grid-template-columns:38px minmax(0,1fr)}.wallet-live-transaction>b{grid-column:2}.withdrawal-history-row{grid-template-columns:1fr auto}.admin-order-row{grid-template-columns:1fr}.admin-order-row form{grid-template-columns:1fr}}


/* =========================================================
   AYIN Admin Readability + Cart Layout Refine V1
   ========================================================= */

/* ---------- Admin preview readability ---------- */
.admin-preview-page {
    font-size: 15px;
}

.admin-preview-brand small {
    font-size: 12px;
}

.admin-preview-owner-card strong {
    font-size: 15px;
}

.admin-preview-owner-card small {
    font-size: 12px;
}

.admin-preview-nav-label {
    font-size: 12px;
}

.admin-preview-nav a {
    min-height: 48px;
    font-size: 14px;
}

.admin-preview-nav a > span {
    font-size: 18px;
}

.admin-preview-nav a > b {
    min-width: 27px;
    font-size: 10px;
}

.admin-preview-system-state b {
    font-size: 12px;
}

.admin-preview-system-state small,
.admin-preview-return-link {
    font-size: 11px;
}

.admin-preview-topbar-title span {
    font-size: 12px;
}

.admin-preview-topbar-title strong {
    font-size: 22px;
}

.admin-preview-search input {
    font-size: 13px;
}

.admin-preview-search kbd {
    font-size: 10px;
}

.admin-preview-top-user b {
    font-size: 13px;
}

.admin-preview-top-user small {
    font-size: 11px;
}

.admin-preview-mode-note p,
.admin-preview-mode-note button {
    font-size: 12px;
}

.admin-preview-kicker {
    font-size: 12px;
}

.admin-preview-page-head p {
    font-size: 13px;
}

.admin-preview-primary-btn,
.admin-preview-secondary-btn {
    min-height: 46px;
    font-size: 13px;
}

.admin-preview-kpi-head > b {
    font-size: 10px;
}

.admin-preview-kpi > span {
    font-size: 13px;
}

.admin-preview-kpi > strong {
    font-size: clamp(29px, 2.25vw, 35px);
}

.admin-preview-kpi > strong small {
    font-size: 12px;
}

.admin-preview-kpi > small {
    font-size: 11px;
}

.admin-preview-panel-head span {
    font-size: 11px;
}

.admin-preview-panel-head h2 {
    font-size: 21px;
}

.admin-preview-panel-head > a,
.admin-preview-text-btn {
    font-size: 12px;
}

.admin-preview-period-tabs button {
    min-width: 58px;
    height: 34px;
    font-size: 11px;
}

.admin-preview-chart-summary span {
    font-size: 11px;
}

.admin-preview-chart-summary strong {
    font-size: 18px;
}

.admin-preview-chart-summary small,
.admin-preview-chart-legend {
    font-size: 10px;
}

.admin-preview-chart-labels text {
    font-size: 11px;
}

.admin-preview-network-total span,
.admin-preview-network-total small {
    font-size: 11px;
}

.admin-preview-side-comparison span {
    font-size: 12px;
}

.admin-preview-side-comparison b {
    font-size: 15px;
}

.admin-preview-side-comparison small {
    font-size: 10px;
}

.admin-preview-balance-card span,
.admin-preview-balance-card small {
    font-size: 11px;
}

.admin-preview-balance-card strong {
    font-size: 17px;
}

.admin-preview-network-foot span {
    font-size: 10px;
}

.admin-preview-network-foot b {
    font-size: 13px;
}

.admin-preview-table {
    font-size: 12px;
}

.admin-preview-table th {
    font-size: 11px;
}

.admin-preview-table td {
    padding-top: 14px;
    padding-bottom: 14px;
}

.admin-preview-table td > small,
.admin-preview-member small {
    font-size: 10px;
}

.admin-preview-member b {
    font-size: 12px;
}

.admin-preview-status {
    min-height: 28px;
    font-size: 10px;
}

.admin-preview-withdrawal-list article > div:nth-child(2) b {
    font-size: 12px;
}

.admin-preview-withdrawal-list article > div:nth-child(2) small {
    font-size: 10px;
}

.admin-preview-withdrawal-list article > button {
    height: 33px;
    font-size: 10px;
}

.admin-preview-withdrawal-summary span,
.admin-preview-withdrawal-summary small {
    font-size: 10px;
}

.admin-preview-withdrawal-summary strong {
    font-size: 16px;
}

.admin-preview-product-list article > div b,
.admin-preview-product-list article > strong {
    font-size: 12px;
}

.admin-preview-product-list article > div small {
    font-size: 10px;
}

.admin-preview-timeline p {
    font-size: 11px;
}

.admin-preview-timeline small {
    font-size: 10px;
}

.admin-preview-health-ring span,
.admin-preview-health-list span,
.admin-preview-health-list b {
    font-size: 11px;
}

/* ---------- Cart product rows ---------- */
.cart-items-card {
    padding: 24px;
}

.cart-items-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.cart-items-card-head .ayin-section-title {
    margin: 0;
}

.cart-items-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--ayin-blue);
    background: var(--ayin-blue-soft);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.cart-item {
    grid-template-columns: minmax(0, 1fr) 230px 155px;
    gap: 20px;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid #e7edf5;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
}

.cart-item:last-child {
    margin-bottom: 0;
    border-bottom: 1px solid #e7edf5;
}

.cart-item-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
}

.cart-product-thumb {
    width: 78px;
    height: 78px;
    border-radius: 19px;
    font-size: 36px;
}

.cart-product-info h3 {
    margin-bottom: 5px;
    font-size: 19px;
    line-height: 1.35;
}

.cart-product-info p {
    display: -webkit-box;
    margin-bottom: 9px;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cart-product-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cart-product-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 999px;
    color: #64748b;
    background: #f5f7fb;
    font-size: 10px;
    font-weight: 800;
}

.cart-product-meta span.points {
    color: #15803d;
    background: #ecfdf3;
}

.cart-item-controls {
    align-self: stretch;
    padding: 13px;
    border-radius: 17px;
    display: grid;
    align-content: center;
    gap: 10px;
    background: #f7f9fc;
}

.cart-item-label {
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
}

.cart-update-form {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.cart-quantity {
    width: 100%;
    min-height: 45px;
    padding: 5px;
    gap: 6px;
    justify-content: space-between;
    border: 1px solid #e4e9f1;
    background: #fff;
}

.cart-quantity button {
    width: 33px;
    height: 33px;
    border-radius: 10px;
    background: #edf4ff;
}

.cart-quantity input {
    width: 45px;
    font-size: 14px;
}

.cart-update-btn {
    min-width: 66px;
    min-height: 43px;
    padding: 0 11px;
    font-size: 11px;
}

.cart-item-summary {
    align-self: stretch;
    padding: 13px 0 13px 14px;
    border-right: 1px solid #edf1f6;
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 7px;
}

.cart-item-summary .cart-item-label {
    width: 100%;
    text-align: left;
}

.cart-price {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 22px;
    white-space: nowrap;
}

.cart-price small {
    font-size: 12px;
}

.cart-item-points-total {
    color: #15803d;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.cart-item-summary form {
    margin-top: 3px;
}

.cart-remove-btn {
    min-height: 32px;
    padding: 0 12px;
}

@media (max-width: 1120px) {
    .cart-item {
        grid-template-columns: minmax(0, 1fr) 210px;
    }

    .cart-item-summary {
        grid-column: 1 / -1;
        padding: 12px 0 0;
        border-top: 1px solid #edf1f6;
        border-right: 0;
        grid-template-columns: auto 1fr auto auto;
        align-items: center;
        justify-items: start;
    }

    .cart-item-summary .cart-item-label {
        width: auto;
        text-align: right;
    }
}

@media (max-width: 720px) {
    .cart-items-card {
        padding: 16px;
    }

    .cart-item {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 15px;
    }

    .cart-item-main {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .cart-product-thumb {
        width: 68px;
        height: 68px;
        border-radius: 17px;
        font-size: 31px;
    }

    .cart-item-controls {
        padding: 11px;
    }

    .cart-update-form {
        grid-template-columns: minmax(0, 1fr) 72px;
    }

    .cart-item-summary {
        grid-column: auto;
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
        justify-items: start;
    }

    .cart-item-summary .cart-item-label,
    .cart-item-summary form {
        grid-column: auto;
    }

    .cart-price,
    .cart-item-points-total {
        justify-self: end;
    }
}


/* =========================================================
   AYIN Admin + Cart UI Refine V2
   Stronger readability and exact 3-column cart layout
   ========================================================= */

/* ---------- Admin preview: clearly readable typography ---------- */
.admin-preview-page {
    font-size: 16px !important;
}

.admin-preview-brand b {
    font-size: 22px !important;
}

.admin-preview-brand small,
.admin-preview-owner-card small,
.admin-preview-top-user small,
.admin-preview-system-state small,
.admin-preview-return-link {
    font-size: 12px !important;
}

.admin-preview-owner-card strong,
.admin-preview-top-user b {
    font-size: 15px !important;
}

.admin-preview-nav-label {
    font-size: 12px !important;
    letter-spacing: 0 !important;
}

.admin-preview-nav a {
    min-height: 50px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}

.admin-preview-nav a > span {
    font-size: 19px !important;
}

.admin-preview-nav a > b,
.admin-preview-count-badge {
    min-width: 28px !important;
    min-height: 22px !important;
    font-size: 10px !important;
}

.admin-preview-system-state b {
    font-size: 13px !important;
}

.admin-preview-topbar-title span,
.admin-preview-kicker,
.admin-preview-mode-note p,
.admin-preview-mode-note button {
    font-size: 12.5px !important;
}

.admin-preview-topbar-title strong {
    font-size: 23px !important;
}

.admin-preview-search input {
    font-size: 13.5px !important;
}

.admin-preview-search kbd {
    font-size: 10px !important;
}

.admin-preview-page-head h1 {
    font-size: clamp(31px, 3vw, 42px) !important;
}

.admin-preview-page-head p {
    font-size: 14px !important;
    line-height: 1.75 !important;
}

.admin-preview-primary-btn,
.admin-preview-secondary-btn {
    min-height: 48px !important;
    font-size: 14px !important;
}

.admin-preview-kpi > span {
    font-size: 14px !important;
}

.admin-preview-kpi > strong {
    font-size: clamp(31px, 2.45vw, 38px) !important;
}

.admin-preview-kpi > strong small {
    font-size: 13px !important;
}

.admin-preview-kpi > small {
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.admin-preview-kpi-head > b {
    font-size: 11px !important;
}

.admin-preview-panel-head span,
.admin-preview-chart-summary span,
.admin-preview-network-total span,
.admin-preview-balance-card span,
.admin-preview-withdrawal-summary span {
    font-size: 12px !important;
}

.admin-preview-panel-head h2 {
    font-size: 23px !important;
}

.admin-preview-panel-head > a,
.admin-preview-text-btn,
.admin-preview-period-tabs button {
    font-size: 12px !important;
}

.admin-preview-chart-summary strong {
    font-size: 20px !important;
}

.admin-preview-chart-summary small,
.admin-preview-chart-legend {
    font-size: 11px !important;
}

.admin-preview-chart-labels text {
    font-size: 13px !important;
}

.admin-preview-network-total strong {
    font-size: 30px !important;
}

.admin-preview-network-total small,
.admin-preview-balance-card small,
.admin-preview-side-comparison small,
.admin-preview-network-foot span {
    font-size: 11px !important;
}

.admin-preview-side-comparison span {
    font-size: 13px !important;
}

.admin-preview-side-comparison b {
    font-size: 17px !important;
}

.admin-preview-balance-card strong {
    font-size: 19px !important;
}

.admin-preview-network-foot b {
    font-size: 14px !important;
}

.admin-preview-table {
    font-size: 13px !important;
}

.admin-preview-table th {
    font-size: 12px !important;
}

.admin-preview-table td {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.admin-preview-member b {
    font-size: 13px !important;
}

.admin-preview-member small,
.admin-preview-table td > small {
    font-size: 11px !important;
}

.admin-preview-status {
    min-height: 30px !important;
    padding-inline: 11px !important;
    font-size: 11px !important;
}

.admin-preview-withdrawal-list article > div:nth-child(2) b,
.admin-preview-product-list article > div b,
.admin-preview-product-list article > strong {
    font-size: 13px !important;
}

.admin-preview-withdrawal-list article > div:nth-child(2) small,
.admin-preview-product-list article > div small {
    font-size: 11px !important;
}

.admin-preview-withdrawal-list article > button {
    min-width: 66px !important;
    height: 35px !important;
    font-size: 11px !important;
}

.admin-preview-withdrawal-summary strong {
    font-size: 18px !important;
}

.admin-preview-timeline p {
    font-size: 13px !important;
    line-height: 1.65 !important;
}

.admin-preview-timeline small {
    font-size: 11px !important;
}

.admin-preview-health-score {
    font-size: 27px !important;
}

.admin-preview-health-ring span,
.admin-preview-health-list span,
.admin-preview-health-list b {
    font-size: 12px !important;
}

.admin-preview-footer {
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.admin-preview-footer span,
.admin-preview-footer small,
.admin-preview-footer p {
    font-size: 12px !important;
}

/* ---------- Cart: exact three-column product block ---------- */
.cart-items-card {
    padding: 24px !important;
}

.cart-item-v3 {
    direction: rtl;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 208px;
    gap: 20px;
    align-items: stretch;
    min-height: 168px;
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid #e4eaf3;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 9px 28px rgba(15, 23, 42, .05);
}

.cart-item-v3:last-child {
    margin-bottom: 0;
}

.cart-v3-image-column {
    display: grid;
    place-items: center;
    min-width: 0;
}

.cart-v3-image {
    width: 96px;
    height: 112px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e7edf5;
    border-radius: 20px;
    background: linear-gradient(145deg, #eef4ff, #ffffff);
    font-size: 44px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}

.cart-v3-image.phone {
    background: linear-gradient(145deg, #effdf4, #ffffff);
}

.cart-v3-image.cream {
    background: linear-gradient(145deg, #fff8ed, #ffffff);
}

.cart-v3-content-column {
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
    padding-block: 3px;
}

.cart-v3-copy {
    min-width: 0;
}

.cart-v3-copy a {
    color: inherit;
    text-decoration: none;
}

.cart-v3-copy h3 {
    margin: 0 0 8px;
    color: var(--ayin-deep-navy);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.4;
}

.cart-v3-copy p {
    display: -webkit-box;
    max-width: 620px;
    margin: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cart-v3-finance-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-top: 12px;
    border-top: 1px solid #eef2f7;
}

.cart-v3-total,
.cart-v3-points {
    display: grid;
    gap: 5px;
}

.cart-v3-total {
    justify-items: start;
}

.cart-v3-points {
    justify-items: end;
    text-align: left;
}

.cart-v3-total span,
.cart-v3-points span {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
}

.cart-v3-total strong {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--ayin-deep-navy);
    font-size: 22px;
    font-weight: 900;
    white-space: nowrap;
}

.cart-v3-total strong small {
    font-size: 12px;
}

.cart-v3-points strong {
    color: #15803d;
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

.cart-v3-actions-column {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 13px;
    padding-right: 18px;
    border-right: 1px solid #edf1f6;
}

.cart-v3-quantity-block {
    display: grid;
    align-content: center;
    gap: 9px;
}

.cart-v3-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}

.cart-v3-update-form {
    display: grid;
    gap: 9px;
}

.cart-v3-quantity {
    width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: 38px minmax(42px, 1fr) 38px;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid #dfe6f0;
    border-radius: 15px;
    background: #f7f9fc;
}

.cart-v3-quantity button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    color: var(--ayin-blue);
    background: #eaf2ff;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}

.cart-v3-quantity input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--ayin-deep-navy);
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    appearance: textfield;
}

.cart-v3-quantity input::-webkit-inner-spin-button,
.cart-v3-quantity input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

.cart-v3-update-btn {
    width: 100%;
    min-height: 36px;
    border: 0;
    border-radius: 11px;
    color: var(--ayin-blue);
    background: #eaf2ff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.cart-v3-delete-form {
    width: 100%;
}

.cart-v3-delete-btn {
    width: 100%;
    min-height: 39px;
    border: 0;
    border-radius: 12px;
    color: #b91c1c;
    background: #fee2e2;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 1050px) {
    .cart-item-v3 {
        grid-template-columns: 92px minmax(0, 1fr) 180px;
        gap: 15px;
    }

    .cart-v3-image {
        width: 86px;
        height: 104px;
    }

    .cart-v3-actions-column {
        padding-right: 14px;
    }
}

@media (max-width: 760px) {
    .cart-item-v3 {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 14px;
        min-height: 0;
        padding: 15px;
    }

    .cart-v3-image {
        width: 78px;
        height: 92px;
        font-size: 36px;
    }

    .cart-v3-content-column {
        gap: 11px;
    }

    .cart-v3-copy h3 {
        font-size: 17px;
    }

    .cart-v3-copy p {
        font-size: 11px;
    }

    .cart-v3-finance-row {
        gap: 10px;
    }

    .cart-v3-total strong {
        font-size: 18px;
    }

    .cart-v3-points strong {
        font-size: 14px;
    }

    .cart-v3-actions-column {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) 120px;
        grid-template-rows: auto;
        align-items: end;
        gap: 10px;
        padding: 13px 0 0;
        border-top: 1px solid #edf1f6;
        border-right: 0;
    }
}

@media (max-width: 480px) {
    .cart-item-v3 {
        grid-template-columns: 70px minmax(0, 1fr);
        padding: 13px;
    }

    .cart-v3-image {
        width: 66px;
        height: 80px;
        border-radius: 16px;
        font-size: 31px;
    }

    .cart-v3-finance-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .cart-v3-points {
        justify-items: start;
        text-align: right;
    }

    .cart-v3-actions-column {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   AYIN Admin + Cart UI Refine V3
   Stronger admin readability + compact side-by-side cart buttons
   ========================================================= */

/* ---------- Admin typography bump for all remaining tiny texts ---------- */
.admin-preview-page .admin-preview-mode-note,
.admin-preview-page .admin-preview-mode-note p,
.admin-preview-page .admin-preview-mode-note button,
.admin-preview-page .admin-preview-system-state,
.admin-preview-page .admin-preview-system-state small,
.admin-preview-page .admin-preview-kpi > span,
.admin-preview-page .admin-preview-kpi > small,
.admin-preview-page .admin-preview-kpi-head > b,
.admin-preview-page .admin-preview-chart-summary span,
.admin-preview-page .admin-preview-chart-summary small,
.admin-preview-page .admin-preview-chart-legend,
.admin-preview-page .admin-preview-chart-labels text,
.admin-preview-page .admin-preview-network-total span,
.admin-preview-page .admin-preview-network-total small,
.admin-preview-page .admin-preview-side-comparison span,
.admin-preview-page .admin-preview-side-comparison small,
.admin-preview-page .admin-preview-balance-card span,
.admin-preview-page .admin-preview-balance-card small,
.admin-preview-page .admin-preview-network-foot span,
.admin-preview-page .admin-preview-network-foot b,
.admin-preview-page .admin-preview-withdrawal-list article > div:nth-child(2) small,
.admin-preview-page .admin-preview-withdrawal-summary span,
.admin-preview-page .admin-preview-withdrawal-summary small,
.admin-preview-page .admin-preview-member small,
.admin-preview-page .admin-preview-table td > small,
.admin-preview-page .admin-preview-table th,
.admin-preview-page .admin-preview-status,
.admin-preview-page .admin-preview-timeline p,
.admin-preview-page .admin-preview-timeline small,
.admin-preview-page .admin-preview-product-list article > div small,
.admin-preview-page .admin-preview-health-ring span,
.admin-preview-page .admin-preview-health-list span,
.admin-preview-page .admin-preview-health-list b,
.admin-preview-page .admin-preview-footer,
.admin-preview-page .admin-preview-footer span,
.admin-preview-page .admin-preview-footer small,
.admin-preview-page .admin-preview-footer p {
    font-size: 13px !important;
    line-height: 1.65 !important;
}

.admin-preview-page .admin-preview-topbar-title span,
.admin-preview-page .admin-preview-kicker,
.admin-preview-page .admin-preview-nav-label,
.admin-preview-page .admin-preview-owner-card small,
.admin-preview-page .admin-preview-top-user small,
.admin-preview-page .admin-preview-brand small,
.admin-preview-page .admin-preview-search kbd {
    font-size: 12.5px !important;
}

.admin-preview-page .admin-preview-count-badge,
.admin-preview-page .admin-preview-nav a > b {
    font-size: 11px !important;
}

.admin-preview-page .admin-preview-table {
    font-size: 14px !important;
}

.admin-preview-page .admin-preview-table td {
    line-height: 1.7 !important;
}

.admin-preview-page .admin-preview-withdrawal-list article > div:nth-child(2) b,
.admin-preview-page .admin-preview-product-list article > div b,
.admin-preview-page .admin-preview-product-list article > strong,
.admin-preview-page .admin-preview-member b {
    font-size: 14px !important;
}

.admin-preview-page .admin-preview-health-score {
    font-size: 29px !important;
}

.admin-preview-page .admin-preview-withdrawal-summary strong,
.admin-preview-page .admin-preview-balance-card strong,
.admin-preview-page .admin-preview-side-comparison b,
.admin-preview-page .admin-preview-chart-summary strong {
    font-size: 20px !important;
}

.admin-preview-page .admin-preview-network-total strong {
    font-size: 31px !important;
}

/* ---------- Compact cart product block ---------- */
.cart-item-v3 {
    grid-template-columns: 90px minmax(0, 1fr) 180px !important;
    gap: 16px !important;
    min-height: 146px !important;
    padding: 14px 16px !important;
    border-radius: 20px !important;
}

.cart-v3-image {
    width: 82px !important;
    height: 98px !important;
    border-radius: 18px !important;
    font-size: 38px !important;
}

.cart-v3-content-column {
    gap: 10px !important;
    padding-block: 1px !important;
}

.cart-v3-copy h3 {
    margin-bottom: 5px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
}

.cart-v3-copy p {
    font-size: 11px !important;
    line-height: 1.65 !important;
    -webkit-line-clamp: 2 !important;
}

.cart-v3-finance-row {
    gap: 12px !important;
    padding-top: 9px !important;
}

.cart-v3-total span,
.cart-v3-points span {
    font-size: 10px !important;
}

.cart-v3-total strong {
    font-size: 19px !important;
}

.cart-v3-total strong small {
    font-size: 11px !important;
}

.cart-v3-points strong {
    font-size: 14px !important;
}

.cart-v3-actions-column {
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    padding-right: 14px !important;
}

.cart-v3-quantity-block {
    gap: 7px !important;
}

.cart-v3-label {
    font-size: 10px !important;
}

.cart-v3-quantity {
    min-height: 43px !important;
    grid-template-columns: 34px minmax(40px, 1fr) 34px !important;
    padding: 4px !important;
    border-radius: 14px !important;
}

.cart-v3-quantity button {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
}

.cart-v3-quantity input {
    font-size: 13px !important;
}

.cart-v3-buttons-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
}

.cart-v3-update-form,
.cart-v3-delete-form {
    margin: 0 !important;
}

.cart-v3-update-btn,
.cart-v3-delete-btn {
    width: 100% !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
}

@media (max-width: 900px) {
    .cart-item-v3 {
        grid-template-columns: 80px minmax(0, 1fr) 164px !important;
        gap: 13px !important;
        padding: 13px !important;
    }

    .cart-v3-image {
        width: 74px !important;
        height: 88px !important;
        font-size: 35px !important;
    }
}

@media (max-width: 760px) {
    .cart-item-v3 {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .cart-v3-image {
        width: 68px !important;
        height: 80px !important;
        font-size: 31px !important;
    }

    .cart-v3-copy h3 {
        font-size: 16px !important;
    }

    .cart-v3-finance-row {
        flex-direction: row !important;
        align-items: flex-end !important;
    }

    .cart-v3-actions-column {
        grid-column: 1 / -1;
        padding: 11px 0 0 !important;
        border-top: 1px solid #edf1f6;
        border-right: 0 !important;
        grid-template-columns: 1fr;
    }

    .cart-v3-buttons-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .cart-item-v3 {
        grid-template-columns: 66px minmax(0, 1fr) !important;
        padding: 12px !important;
    }

    .cart-v3-image {
        width: 62px !important;
        height: 74px !important;
        font-size: 28px !important;
    }

    .cart-v3-finance-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .cart-v3-points {
        justify-items: start !important;
        text-align: right !important;
    }
}


/* =========================================================
   AYIN Admin + Cart UI Refine V4
   clearer notification badge + slimmer order summary + softer cart typography
   ========================================================= */

/* ---------- Admin preview ---------- */
.admin-preview-action-btn i {
    top: -5px !important;
    left: -5px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 5px !important;
    border-width: 2px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* ---------- Cart layout balance ---------- */
.cart-layout {
    grid-template-columns: minmax(0, 1fr) 286px !important;
    gap: 18px !important;
}

.order-summary-card {
    padding: 18px !important;
}

.order-summary-card .ayin-section-title {
    font-size: 15px !important;
    margin-bottom: 8px !important;
}

.summary-row,
.summary-total {
    gap: 10px !important;
    padding: 10px 0 !important;
}

.summary-row span,
.summary-total span {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.summary-row strong {
    color: var(--ayin-deep-navy) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.summary-total strong {
    color: var(--ayin-blue) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

.summary-divider {
    margin: 8px 0 !important;
}

.checkout-btn {
    min-height: 48px !important;
    font-size: 15px !important;
}

.continue-shopping {
    font-size: 13px !important;
}

.cart-items-card {
    padding: 20px !important;
}

/* ---------- Cart item softer typography ---------- */
.cart-item-v3 {
    grid-template-columns: 88px minmax(0, 1fr) 176px !important;
    gap: 14px !important;
    min-height: 138px !important;
    padding: 13px 14px !important;
}

.cart-v3-image {
    width: 78px !important;
    height: 92px !important;
    font-size: 35px !important;
}

.cart-v3-copy h3 {
    margin-bottom: 4px !important;
    font-size: 16px !important;
    line-height: 1.32 !important;
}

.cart-v3-copy p {
    font-size: 10.5px !important;
    line-height: 1.6 !important;
}

.cart-v3-finance-row {
    gap: 10px !important;
    padding-top: 8px !important;
}

.cart-v3-total span,
.cart-v3-points span {
    color: #94a3b8 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

.cart-v3-total strong {
    font-size: 16px !important;
    gap: 4px !important;
}

.cart-v3-total strong small {
    font-size: 10px !important;
}

.cart-v3-points strong {
    font-size: 12.5px !important;
}

.cart-v3-actions-column {
    gap: 8px !important;
    padding-right: 12px !important;
}

.cart-v3-label {
    font-size: 9px !important;
}

.cart-v3-quantity {
    min-height: 40px !important;
    grid-template-columns: 32px minmax(38px,1fr) 32px !important;
}

.cart-v3-quantity button {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
}

.cart-v3-quantity input {
    font-size: 12px !important;
}

.cart-v3-update-btn,
.cart-v3-delete-btn {
    min-height: 34px !important;
    font-size: 10.5px !important;
}

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

    .cart-item-v3 {
        grid-template-columns: 78px minmax(0, 1fr) 164px !important;
    }

    .cart-v3-image {
        width: 72px !important;
        height: 84px !important;
        font-size: 32px !important;
    }
}

@media (max-width: 760px) {
    .cart-layout {
        grid-template-columns: 1fr !important;
    }

    .order-summary-card {
        order: -1;
    }

    .cart-item-v3 {
        grid-template-columns: 68px minmax(0, 1fr) !important;
    }
}


/* =========================================================
   AYIN Checkout Typography Refine V1
   Improve readability on checkout page similar to admin tune-up
   ========================================================= */

.checkout-page {
    font-size: 15px;
}

.checkout-page .utility-hero {
    min-height: 208px !important;
    padding: 34px !important;
}

.checkout-page .hero-eyebrow,
.checkout-page .section-kicker {
    font-size: 14px !important;
}

.checkout-page .utility-hero h1 {
    font-size: clamp(36px, 4.6vw, 52px) !important;
}

.checkout-page .utility-hero p {
    font-size: 16px !important;
    line-height: 1.85 !important;
}

.checkout-page .checkout-progress {
    min-width: 390px !important;
    gap: 11px !important;
}

.checkout-page .checkout-progress span {
    font-size: 13px !important;
    gap: 7px !important;
}

.checkout-page .checkout-progress span b {
    font-size: 12px !important;
}

.checkout-page .checkout-layout {
    grid-template-columns: minmax(0, 1.42fr) minmax(330px, .78fr) !important;
    gap: 22px !important;
}

.checkout-page .checkout-section-card,
.checkout-page .checkout-summary {
    padding: 26px !important;
}

.checkout-page .utility-section-head {
    margin-bottom: 24px !important;
}

.checkout-page .utility-section-head h2 {
    font-size: 28px !important;
    line-height: 1.25 !important;
}

.checkout-page .checkout-summary .utility-section-head a,
.checkout-page .utility-section-head .section-kicker {
    font-size: 13px !important;
}

.checkout-page .checkout-form-grid {
    gap: 18px !important;
}

.checkout-page .checkout-form-grid label {
    gap: 9px !important;
}

.checkout-page .checkout-form-grid label > span {
    font-size: 14px !important;
}

.checkout-page .checkout-form-grid input,
.checkout-page .checkout-form-grid select,
.checkout-page .checkout-form-grid textarea {
    min-height: 52px !important;
    font-size: 14px !important;
    padding: 13px 15px !important;
}

.checkout-page .checkout-form-grid textarea {
    min-height: 110px !important;
}

.checkout-page .checkout-payment-options {
    gap: 14px !important;
}

.checkout-page .checkout-payment-option {
    padding: 17px !important;
}

.checkout-page .checkout-payment-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 24px !important;
}

.checkout-page .checkout-payment-option strong {
    font-size: 15px !important;
}

.checkout-page .checkout-payment-option small {
    font-size: 12px !important;
    line-height: 1.65 !important;
}

.checkout-page .checkout-payment-option > b {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
}

.checkout-page .checkout-summary {
    top: 96px !important;
}

.checkout-page .checkout-product {
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    padding: 14px 0 !important;
}

.checkout-page .checkout-product-image {
    width: 56px !important;
    height: 56px !important;
    font-size: 25px !important;
}

.checkout-page .checkout-product strong {
    font-size: 13px !important;
}

.checkout-page .checkout-product span {
    font-size: 11px !important;
}

.checkout-page .checkout-product > b {
    font-size: 12px !important;
}

.checkout-page .checkout-summary-lines {
    gap: 13px !important;
    padding: 19px 0 !important;
}

.checkout-page .checkout-summary-lines div {
    font-size: 13px !important;
}

.checkout-page .checkout-summary-lines strong {
    font-size: 14px !important;
}

.checkout-page .checkout-total {
    padding: 18px !important;
}

.checkout-page .checkout-total span {
    font-size: 13px !important;
}

.checkout-page .checkout-total strong {
    font-size: 22px !important;
}

.checkout-page .checkout-total strong small {
    font-size: 13px !important;
}

.checkout-page .checkout-agreement {
    gap: 10px !important;
    margin: 18px 0 !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
}

.checkout-page .checkout-agreement input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.checkout-page .checkout-submit {
    min-height: 54px !important;
    font-size: 16px !important;
}

.checkout-page .checkout-demo-note {
    font-size: 12px !important;
    line-height: 1.7 !important;
}

@media (max-width: 980px) {
    .checkout-page .checkout-layout {
        grid-template-columns: 1fr !important;
    }

    .checkout-page .checkout-summary {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 760px) {
    .checkout-page .utility-hero {
        padding: 24px !important;
        min-height: 0 !important;
    }

    .checkout-page .utility-hero h1 {
        font-size: 34px !important;
    }

    .checkout-page .utility-hero p {
        font-size: 14px !important;
    }

    .checkout-page .checkout-progress {
        min-width: 0 !important;
        width: 100% !important;
    }

    .checkout-page .checkout-progress span {
        font-size: 12px !important;
    }

    .checkout-page .utility-section-head h2 {
        font-size: 24px !important;
    }

    .checkout-page .checkout-form-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   AYIN Checkout Refine V2
   clearer step boxes + softer order count heading
   ========================================================= */

.checkout-page .checkout-progress {
    gap: 14px !important;
}

.checkout-page .checkout-progress span {
    width: 74px !important;
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.06) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.10) !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    backdrop-filter: blur(4px);
}

.checkout-page .checkout-progress span.active {
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.34) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.checkout-page .checkout-progress span.done {
    background: rgba(245,197,66,.14) !important;
    border-color: rgba(245,197,66,.34) !important;
    color: var(--ayin-gold) !important;
}

.checkout-page .checkout-progress i {
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.26)) !important;
}

.checkout-page .checkout-summary .utility-section-head h2 {
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.checkout-page .checkout-summary .utility-section-head .section-kicker {
    font-size: 13px !important;
}

.checkout-page .checkout-summary .utility-section-head a {
    font-size: 12px !important;
}

@media (max-width: 760px) {
    .checkout-page .checkout-progress {
        gap: 10px !important;
    }

    .checkout-page .checkout-progress span {
        width: 64px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
}


/* =========================================================
   AYIN Checkout Refine V3
   Step number emphasis + softer order count
   ========================================================= */

/* عدد القطع داخل ملخص الطلب: أصغر ووزن طبيعي */
.checkout-page .checkout-summary .utility-section-head h2 {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* تكبير جميع أرقام خطوات إتمام الطلب درجة واحدة */
.checkout-page .checkout-progress span {
    font-size: 16px !important;
    font-weight: 800 !important;
}

/* رقم الخطوة الحالية أكبر 10% من بقية الأرقام */
.checkout-page .checkout-progress span.active {
    font-size: 17.6px !important;
    font-weight: 900 !important;
}

/* منع أي نص مخفي داخل المستطيل من التأثير على حجم الرقم */
.checkout-page .checkout-progress span b {
    display: none !important;
}

@media (max-width: 760px) {
    .checkout-page .checkout-summary .utility-section-head h2 {
        font-size: 13px !important;
    }

    .checkout-page .checkout-progress span {
        font-size: 15px !important;
    }

    .checkout-page .checkout-progress span.active {
        font-size: 16.5px !important;
    }
}


/* =========================================================
   AYIN Checkout Refine V4
   Stronger checkout step styling
   ========================================================= */

/* تكبير عام لأرقام الخطوات + تحسين أبعاد المستطيلات */
.checkout-page .checkout-progress {
    gap: 16px !important;
}

.checkout-page .checkout-progress span {
    width: 82px !important;
    height: 50px !important;
    border-radius: 15px !important;
    font-size: 21px !important; /* أكبر تقريبًا 30% */
    font-weight: 900 !important;
    color: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.10) !important;
}

/* الخط الفاصل بين المستطيلات */
.checkout-page .checkout-progress i {
    height: 4px !important;
    background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.34)) !important;
}

/* الخطوة الحالية: خلفية برتقالية/ذهبية مع رقم كحلي أكبر 50% */
.checkout-page .checkout-progress span.active {
    width: 86px !important;
    height: 54px !important;
    font-size: 31.5px !important; /* أكبر 50% من 21 */
    font-weight: 900 !important;
    color: #061A3A !important;
    background: linear-gradient(180deg, #F5C542 0%, #E9B82A 100%) !important;
    border-color: rgba(245,197,66,.95) !important;
    box-shadow: 0 12px 28px rgba(245,197,66,.28), inset 0 1px 0 rgba(255,255,255,.28) !important;
    transform: translateY(-1px);
}

/* الخطوات المنتهية تبقى واضحة لكن بدون سحب التركيز من الحالية */
.checkout-page .checkout-progress span.done {
    color: rgba(255,255,255,.88) !important;
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.30) !important;
}

@media (max-width: 760px) {
    .checkout-page .checkout-progress {
        gap: 11px !important;
    }

    .checkout-page .checkout-progress span {
        width: 72px !important;
        height: 46px !important;
        font-size: 18px !important;
    }

    .checkout-page .checkout-progress span.active {
        width: 76px !important;
        height: 50px !important;
        font-size: 27px !important;
    }
}


/* =========================================================
   AYIN Register Readability Refine V1
   Enlarge small texts in the registration showcase panel
   ========================================================= */

.register-page .register-journey-head span {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.register-page .register-journey-head strong {
    font-size: 18px !important;
    line-height: 1.35 !important;
}

.register-page .register-journey-badge {
    padding: 8px 12px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
}

.register-page .register-journey-item {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 13px !important;
    padding: 14px !important;
}

.register-page .register-journey-item > b {
    width: 42px !important;
    height: 42px !important;
    font-size: 15px !important;
}

.register-page .register-journey-item strong {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.register-page .register-journey-item span {
    margin-top: 3px !important;
    font-size: 11.5px !important;
    line-height: 1.65 !important;
}

.register-page .register-journey-item > small {
    padding: 6px 9px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

.register-page .register-referral-card p {
    font-size: 12px !important;
    line-height: 1.8 !important;
}

.register-page .register-referral-card b {
    margin-bottom: 4px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.register-page .auth-benefits > div {
    padding: 15px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 10px !important;
}

.register-page .auth-benefits > div > span {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
}

.register-page .auth-benefits p {
    font-size: 11px !important;
    line-height: 1.7 !important;
}

.register-page .auth-benefits b {
    margin-bottom: 3px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

@media (max-width: 900px) {
    .register-page .register-journey-head span {
        font-size: 12px !important;
    }

    .register-page .register-journey-head strong {
        font-size: 17px !important;
    }

    .register-page .register-journey-item strong {
        font-size: 13px !important;
    }

    .register-page .register-journey-item span {
        font-size: 11px !important;
    }

    .register-page .register-referral-card p {
        font-size: 11.5px !important;
    }

    .register-page .auth-benefits p {
        font-size: 10.5px !important;
    }
}


/* =========================================================
   AYIN Register Step 2 UI Fix V1
   Fix oversized submit button and improve login-link readability
   ========================================================= */

.register-page .register-actions {
    align-items: stretch !important;
    gap: 14px !important;
}

.register-page .register-actions .register-back {
    flex: 0 0 138px !important;
    min-width: 138px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

.register-page .register-actions .register-submit {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    padding: 0 24px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.register-page .register-actions .register-submit span {
    display: inline-block !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}

.register-page .register-actions .register-submit svg {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    transform: scaleX(-1) !important;
}

.register-page .register-actions .register-submit path {
    stroke-width: 1.9 !important;
}

.register-page .register-login-link {
    padding: 14px 16px !important;
}

.register-page .register-login-link span {
    gap: 4px !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
}

.register-page .register-login-link b {
    font-size: 15px !important;
    line-height: 1.35 !important;
}

@media (max-width: 760px) {
    .register-page .register-actions {
        flex-direction: row !important;
    }

    .register-page .register-actions .register-back {
        flex: 0 0 116px !important;
        min-width: 116px !important;
        font-size: 14px !important;
    }

    .register-page .register-actions .register-submit {
        min-height: 56px !important;
        gap: 8px !important;
        padding: 0 18px !important;
    }

    .register-page .register-actions .register-submit span {
        font-size: 14px !important;
    }

    .register-page .register-login-link span {
        font-size: 12px !important;
    }

    .register-page .register-login-link b {
        font-size: 14px !important;
    }
}


/* =========================================================
   AYIN Notifications Readability Refine V1
   Improve bell badge and notification log typography
   ========================================================= */

.notifications-page .topbar-actions .notification-dot,
.notifications-page .topbar-actions .notif-count,
.notifications-page .notification-badge,
.notifications-page .header-badge {
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 19px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.notifications-page .notifications-panel {
    padding: 26px !important;
}

.notifications-page .notification-filters button {
    font-size: 12px !important;
    padding: 9px 14px !important;
}

.notifications-page .notification-item {
    gap: 16px !important;
    padding: 20px !important;
}

.notifications-page .notification-title-row h3 {
    font-size: 18px !important;
    line-height: 1.4 !important;
}

.notifications-page .notification-title-row time {
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #94a3b8 !important;
}

.notifications-page .notification-copy p {
    margin: 8px 0 12px !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
    color: #6b7280 !important;
}

.notifications-page .notification-meta {
    gap: 9px !important;
}

.notifications-page .notification-meta span,
.notifications-page .notification-meta a {
    padding: 6px 10px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

.notifications-page .notification-read-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
}

@media (max-width: 760px) {
    .notifications-page .notification-title-row {
        gap: 8px !important;
    }

    .notifications-page .notification-title-row h3 {
        font-size: 16px !important;
    }

    .notifications-page .notification-title-row time {
        font-size: 11px !important;
    }

    .notifications-page .notification-copy p {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

    .notifications-page .notification-meta span,
    .notifications-page .notification-meta a {
        font-size: 10.5px !important;
    }
}


/* =========================================================
   AYIN Notifications Summary Refine V2
   Enlarge top labels and improve lower helper text in summary cards
   ========================================================= */

.notifications-page .notification-summary-grid {
    gap: 18px !important;
}

.notifications-page .notification-summary-card {
    min-height: 148px !important;
    padding: 24px !important;
    gap: 7px !important;
}

.notifications-page .notification-summary-card span {
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 900 !important;
}

.notifications-page .notification-summary-card strong {
    font-size: 35px !important;
    line-height: 1.05 !important;
}

.notifications-page .notification-summary-card small {
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    color: #9aa4b2 !important;
}

.notifications-page .notification-summary-card.blue small {
    color: rgba(255,255,255,.88) !important;
}

@media (max-width: 760px) {
    .notifications-page .notification-summary-card {
        min-height: 136px !important;
        padding: 20px !important;
    }

    .notifications-page .notification-summary-card span {
        font-size: 14px !important;
    }

    .notifications-page .notification-summary-card strong {
        font-size: 31px !important;
    }

    .notifications-page .notification-summary-card small {
        font-size: 12px !important;
    }
}


/* =========================================================
   AYIN Admin Orders Readability Refine V1
   Improve labels and customer subline on the real admin orders page
   ========================================================= */

.admin-orders-live-page .admin-order-filters a {
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
}

.admin-orders-live-page .admin-order-filters small {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    line-height: 24px !important;
}

.admin-orders-live-page .admin-orders-card {
    padding: 16px 24px !important;
}

.admin-orders-live-page .admin-order-row {
    gap: 18px !important;
    padding: 22px 0 !important;
}

.admin-orders-live-page .admin-order-row > div > span {
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
}

.admin-orders-live-page .admin-order-row > div > strong {
    font-size: 15px !important;
    line-height: 1.45 !important;
}

.admin-orders-live-page .admin-order-row > div:first-child strong {
    font-size: 18px !important;
    line-height: 1.3 !important;
}

.admin-orders-live-page .admin-order-row > div:first-child span {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
}

.admin-orders-live-page .order-status {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
}

.admin-orders-live-page .admin-order-row form {
    grid-template-columns: minmax(138px, 1fr) auto !important;
    gap: 10px !important;
}

.admin-orders-live-page .admin-order-row select {
    min-height: 46px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.admin-orders-live-page .admin-order-row .ayin-btn {
    min-height: 46px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

@media (max-width: 1150px) {
    .admin-orders-live-page .admin-order-row > div > span {
        font-size: 11.5px !important;
    }

    .admin-orders-live-page .admin-order-row > div > strong {
        font-size: 14px !important;
    }

    .admin-orders-live-page .admin-order-row > div:first-child strong {
        font-size: 17px !important;
    }

    .admin-orders-live-page .admin-order-row > div:first-child span {
        font-size: 12px !important;
    }
}


/* =========================================================
   AYIN Admin Orders Layout Refine V2
   Shift data columns right and enlarge the status-action area
   ========================================================= */

.admin-orders-live-page .admin-order-row {
    grid-template-columns:
        minmax(205px, 1.22fr)
        minmax(135px, .72fr)
        minmax(92px, .48fr)
        minmax(175px, .86fr)
        minmax(84px, auto)
        minmax(365px, 1.55fr) !important;
    column-gap: 18px !important;
}

/* مساحة أوسع للتحكم بالحالة في الطرف الأيسر */
.admin-orders-live-page .admin-order-row form {
    grid-template-columns: minmax(175px, 1fr) 132px !important;
    gap: 16px !important;
    align-items: center !important;
}

/* تكبير القائمة والزر وتثبيت ظهورهما */
.admin-orders-live-page .admin-order-row select {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 16px 38px !important;
}

.admin-orders-live-page .admin-order-row .ayin-btn {
    width: 132px !important;
    min-width: 132px !important;
    padding-inline: 14px !important;
    white-space: nowrap !important;
}

/* دفع أعمدة الإجمالي والنقاط والدفع قليلًا إلى اليمين بصريًا */
.admin-orders-live-page .admin-order-row > div:nth-child(2),
.admin-orders-live-page .admin-order-row > div:nth-child(3),
.admin-orders-live-page .admin-order-row > div:nth-child(4),
.admin-orders-live-page .admin-order-row > .order-status {
    transform: translateX(10px);
}

/* إبقاء معلومات الطلب مرتبة دون ضغط */
.admin-orders-live-page .admin-order-row > div:first-child {
    min-width: 0 !important;
}

@media (max-width: 1250px) {
    .admin-orders-live-page .admin-order-row {
        grid-template-columns:
            minmax(190px, 1.18fr)
            minmax(125px, .68fr)
            minmax(88px, .46fr)
            minmax(160px, .8fr)
            minmax(82px, auto)
            minmax(330px, 1.45fr) !important;
        column-gap: 14px !important;
    }

    .admin-orders-live-page .admin-order-row form {
        grid-template-columns: minmax(155px, 1fr) 122px !important;
        gap: 13px !important;
    }

    .admin-orders-live-page .admin-order-row .ayin-btn {
        width: 122px !important;
        min-width: 122px !important;
    }

    .admin-orders-live-page .admin-order-row > div:nth-child(2),
    .admin-orders-live-page .admin-order-row > div:nth-child(3),
    .admin-orders-live-page .admin-order-row > div:nth-child(4),
    .admin-orders-live-page .admin-order-row > .order-status {
        transform: translateX(6px);
    }
}

@media (max-width: 1150px) {
    .admin-orders-live-page .admin-order-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .admin-orders-live-page .admin-order-row > div:nth-child(2),
    .admin-orders-live-page .admin-order-row > div:nth-child(3),
    .admin-orders-live-page .admin-order-row > div:nth-child(4),
    .admin-orders-live-page .admin-order-row > .order-status {
        transform: none !important;
    }

    .admin-orders-live-page .admin-order-row form {
        grid-column: 1 / -1 !important;
        grid-template-columns: minmax(180px, 1fr) 140px !important;
        gap: 16px !important;
    }

    .admin-orders-live-page .admin-order-row .ayin-btn {
        width: 140px !important;
        min-width: 140px !important;
    }
}

@media (max-width: 620px) {
    .admin-orders-live-page .admin-order-row {
        grid-template-columns: 1fr !important;
    }

    .admin-orders-live-page .admin-order-row form {
        grid-template-columns: 1fr !important;
    }

    .admin-orders-live-page .admin-order-row .ayin-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   AYIN Admin Orders Layout Refine V3
   Equal horizontal padding + precise RTL column alignment
   ========================================================= */

/* بيدينغ متساوٍ من اليمين واليسار داخل بوكس الطلبات */
.admin-orders-live-page .admin-orders-card {
    padding: 16px 28px !important;
}

.admin-orders-live-page .admin-order-row {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 0 !important;
    grid-template-columns:
        minmax(205px, 1.22fr)
        minmax(135px, .72fr)
        minmax(92px, .48fr)
        minmax(175px, .86fr)
        minmax(84px, auto)
        minmax(350px, 1.48fr) !important;
    column-gap: 16px !important;
}

/* تحريك الأعمدة المطلوبة باتجاه اليمين بدرجات متفاوتة */
.admin-orders-live-page .admin-order-row > div:nth-child(2) {
    transform: translateX(6px) !important;
}

.admin-orders-live-page .admin-order-row > div:nth-child(3) {
    transform: translateX(14px) !important;
}

.admin-orders-live-page .admin-order-row > div:nth-child(4) {
    transform: translateX(26px) !important;
}

.admin-orders-live-page .admin-order-row > .order-status {
    transform: translateX(26px) !important;
}

/* منطقة تغيير الحالة: تحريكها يمينًا مع قائمة أضيق وزر يأخذ الباقي */
.admin-orders-live-page .admin-order-row form {
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
    transform: translateX(24px) !important;
}

.admin-orders-live-page .admin-order-row select {
    flex: 0 0 122px !important;
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
    padding-inline: 14px 36px !important;
}

.admin-orders-live-page .admin-order-row .ayin-btn {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 145px !important;
    max-width: none !important;
    padding-inline: 20px !important;
    white-space: nowrap !important;
}

/* ضمان بقاء مسافة يسار الزر مساوية لمسافة يمين معلومات الطلب */
.admin-orders-live-page .admin-order-row form {
    margin-left: 0 !important;
}

@media (max-width: 1250px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 22px !important;
    }

    .admin-orders-live-page .admin-order-row {
        grid-template-columns:
            minmax(190px, 1.18fr)
            minmax(125px, .68fr)
            minmax(88px, .46fr)
            minmax(160px, .8fr)
            minmax(82px, auto)
            minmax(320px, 1.38fr) !important;
        column-gap: 13px !important;
    }

    .admin-orders-live-page .admin-order-row > div:nth-child(2) {
        transform: translateX(4px) !important;
    }

    .admin-orders-live-page .admin-order-row > div:nth-child(3) {
        transform: translateX(9px) !important;
    }

    .admin-orders-live-page .admin-order-row > div:nth-child(4),
    .admin-orders-live-page .admin-order-row > .order-status {
        transform: translateX(17px) !important;
    }

    .admin-orders-live-page .admin-order-row form {
        gap: 14px !important;
        transform: translateX(16px) !important;
    }

    .admin-orders-live-page .admin-order-row select {
        flex-basis: 112px !important;
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
    }
}

@media (max-width: 1150px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 20px !important;
    }

    .admin-orders-live-page .admin-order-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .admin-orders-live-page .admin-order-row > div:nth-child(2),
    .admin-orders-live-page .admin-order-row > div:nth-child(3),
    .admin-orders-live-page .admin-order-row > div:nth-child(4),
    .admin-orders-live-page .admin-order-row > .order-status {
        transform: none !important;
    }

    .admin-orders-live-page .admin-order-row form {
        grid-column: 1 / -1 !important;
        transform: none !important;
        gap: 16px !important;
    }

    .admin-orders-live-page .admin-order-row select {
        flex: 0 0 150px !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }
}

@media (max-width: 620px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 15px !important;
    }

    .admin-orders-live-page .admin-order-row {
        grid-template-columns: 1fr !important;
    }

    .admin-orders-live-page .admin-order-row form {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .admin-orders-live-page .admin-order-row select,
    .admin-orders-live-page .admin-order-row .ayin-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* =========================================================
   AYIN Admin Orders Layout Refine V4
   Perfect horizontal centering + balanced padding
   ========================================================= */

/* بيدينغ متساوٍ تمامًا من الطرفين */
.admin-orders-live-page .admin-orders-card {
    padding: 16px 30px !important;
    box-sizing: border-box !important;
}

/* توسيط صف الطلب داخل البوكس دون أي انحراف */
.admin-orders-live-page .admin-order-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns:
        minmax(205px, 1.22fr)
        minmax(135px, .72fr)
        minmax(92px, .48fr)
        minmax(175px, .86fr)
        minmax(88px, auto)
        minmax(352px, 1.48fr) !important;
    column-gap: 16px !important;
}

/* تثبيت الأعمدة المالية في مكانها المتوازن */
.admin-orders-live-page .admin-order-row > div:nth-child(2) {
    transform: translateX(4px) !important;
}

.admin-orders-live-page .admin-order-row > div:nth-child(3) {
    transform: translateX(10px) !important;
}

.admin-orders-live-page .admin-order-row > div:nth-child(4) {
    transform: translateX(18px) !important;
}

/* تحريك شارة مكتمل خطوة واحدة إضافية لليمين */
.admin-orders-live-page .admin-order-row > .order-status {
    transform: translateX(18px) !important;
}

/* إعادة توسيط منطقة التحكم وإلغاء الانحراف السابق */
.admin-orders-live-page .admin-order-row form {
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    min-width: 0 !important;
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
}

/* القائمة أعرض قليلًا من النسخة السابقة */
.admin-orders-live-page .admin-order-row select {
    flex: 0 0 142px !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    padding-inline: 14px 38px !important;
}

/* الزر يأخذ بقية المساحة مع بقاء المسافة بينه وبين القائمة */
.admin-orders-live-page .admin-order-row .ayin-btn {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 155px !important;
    max-width: none !important;
    padding-inline: 20px !important;
    white-space: nowrap !important;
}

/* توازن الطرفين على الشاشات المتوسطة */
@media (max-width: 1250px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 24px !important;
    }

    .admin-orders-live-page .admin-order-row {
        grid-template-columns:
            minmax(190px, 1.18fr)
            minmax(125px, .68fr)
            minmax(88px, .46fr)
            minmax(160px, .8fr)
            minmax(84px, auto)
            minmax(325px, 1.38fr) !important;
        column-gap: 13px !important;
    }

    .admin-orders-live-page .admin-order-row > div:nth-child(2) {
        transform: translateX(3px) !important;
    }

    .admin-orders-live-page .admin-order-row > div:nth-child(3) {
        transform: translateX(7px) !important;
    }

    .admin-orders-live-page .admin-order-row > div:nth-child(4),
    .admin-orders-live-page .admin-order-row > .order-status {
        transform: translateX(12px) !important;
    }

    .admin-orders-live-page .admin-order-row select {
        flex-basis: 132px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
    }
}

@media (max-width: 1150px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 20px !important;
    }

    .admin-orders-live-page .admin-order-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .admin-orders-live-page .admin-order-row > div:nth-child(2),
    .admin-orders-live-page .admin-order-row > div:nth-child(3),
    .admin-orders-live-page .admin-order-row > div:nth-child(4),
    .admin-orders-live-page .admin-order-row > .order-status {
        transform: none !important;
    }

    .admin-orders-live-page .admin-order-row form {
        grid-column: 1 / -1 !important;
        gap: 16px !important;
    }

    .admin-orders-live-page .admin-order-row select {
        flex: 0 0 155px !important;
        width: 155px !important;
        min-width: 155px !important;
        max-width: 155px !important;
    }
}

@media (max-width: 620px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 15px !important;
    }

    .admin-orders-live-page .admin-order-row {
        grid-template-columns: 1fr !important;
    }

    .admin-orders-live-page .admin-order-row form {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .admin-orders-live-page .admin-order-row select,
    .admin-orders-live-page .admin-order-row .ayin-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* =========================================================
   AYIN Admin Orders Layout Refine V5
   Pull highlighted controls and payment column further right
   ========================================================= */

.admin-orders-live-page .admin-order-row form {
    transform: translateX(18px) !important;
}

.admin-orders-live-page .admin-order-row select {
    transform: translateX(8px) !important;
}

.admin-orders-live-page .admin-order-row > .order-status {
    transform: translateX(32px) !important;
}

.admin-orders-live-page .admin-order-row > div:nth-child(4) {
    transform: translateX(32px) !important;
}

@media (max-width: 1250px) {
    .admin-orders-live-page .admin-order-row form {
        transform: translateX(12px) !important;
    }

    .admin-orders-live-page .admin-order-row select {
        transform: translateX(6px) !important;
    }

    .admin-orders-live-page .admin-order-row > .order-status,
    .admin-orders-live-page .admin-order-row > div:nth-child(4) {
        transform: translateX(22px) !important;
    }
}

@media (max-width: 1150px) {
    .admin-orders-live-page .admin-order-row form,
    .admin-orders-live-page .admin-order-row select,
    .admin-orders-live-page .admin-order-row > .order-status,
    .admin-orders-live-page .admin-order-row > div:nth-child(4) {
        transform: none !important;
    }
}


/* =========================================================
   AYIN Admin Orders Layout Refine V6
   Pull dropdown and green status badge a bit more to the right
   ========================================================= */

.admin-orders-live-page .admin-order-row form {
    transform: translateX(28px) !important;
}

.admin-orders-live-page .admin-order-row select {
    transform: translateX(14px) !important;
}

.admin-orders-live-page .admin-order-row > .order-status {
    transform: translateX(44px) !important;
}

@media (max-width: 1250px) {
    .admin-orders-live-page .admin-order-row form {
        transform: translateX(18px) !important;
    }

    .admin-orders-live-page .admin-order-row select {
        transform: translateX(10px) !important;
    }

    .admin-orders-live-page .admin-order-row > .order-status {
        transform: translateX(30px) !important;
    }
}

@media (max-width: 1150px) {
    .admin-orders-live-page .admin-order-row form,
    .admin-orders-live-page .admin-order-row select,
    .admin-orders-live-page .admin-order-row > .order-status {
        transform: none !important;
    }
}


/* =========================================================
   AYIN Admin Orders Layout Refine V7
   Keep dropdown position and extend save button to the far left
   ========================================================= */

/* إلغاء تحريك الفورم كاملًا حتى يصل الزر إلى أقصى اليسار */
.admin-orders-live-page .admin-order-row form {
    width: 100% !important;
    transform: none !important;
    gap: 18px !important;
}

/* الحفاظ على مكان القائمة الحالي بعد إلغاء تحريك الفورم */
.admin-orders-live-page .admin-order-row select {
    flex: 0 0 142px !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    transform: translateX(42px) !important;
}

/* الزر يأخذ كامل المساحة المتبقية حتى البيدينغ الأيسر */
.admin-orders-live-page .admin-order-row .ayin-btn {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding-inline: 22px !important;
}

/* بيدينغ متساوٍ وثابت من الجهتين */
.admin-orders-live-page .admin-orders-card {
    padding-inline: 30px !important;
}

@media (max-width: 1250px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 24px !important;
    }

    .admin-orders-live-page .admin-order-row form {
        transform: none !important;
        gap: 15px !important;
    }

    .admin-orders-live-page .admin-order-row select {
        flex-basis: 132px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        transform: translateX(28px) !important;
    }
}

@media (max-width: 1150px) {
    .admin-orders-live-page .admin-order-row select {
        transform: none !important;
    }
}

@media (max-width: 620px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 15px !important;
    }

    .admin-orders-live-page .admin-order-row form {
        gap: 10px !important;
    }

    .admin-orders-live-page .admin-order-row select,
    .admin-orders-live-page .admin-order-row .ayin-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* =========================================================
   AYIN Admin Orders Layout Refine V8
   Fixed-size save button at far left + wider status dropdown
   ========================================================= */

/* منطقة التحكم بعرض كامل، مع توزيع العنصرين على الطرفين */
.admin-orders-live-page .admin-order-row form {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    transform: none !important;
    margin: 0 !important;
}

/* توسيع القائمة قليلًا مع إبقائها في جهة اليمين */
.admin-orders-live-page .admin-order-row select {
    flex: 0 0 168px !important;
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
    transform: translateX(42px) !important;
    padding-inline: 16px 40px !important;
}

/* تثبيت حجم الزر الحالي وعدم تمديده، ودفعه إلى أقصى اليسار */
.admin-orders-live-page .admin-order-row .ayin-btn {
    flex: 0 0 194px !important;
    width: 194px !important;
    min-width: 194px !important;
    max-width: 194px !important;
    margin: 0 !important;
    padding-inline: 18px !important;
    white-space: nowrap !important;
}

/* الحفاظ على البيدينغ المتناظر داخل بوكس الطلب */
.admin-orders-live-page .admin-orders-card {
    padding-inline: 30px !important;
}

@media (max-width: 1250px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 24px !important;
    }

    .admin-orders-live-page .admin-order-row form {
        gap: 18px !important;
    }

    .admin-orders-live-page .admin-order-row select {
        flex-basis: 154px !important;
        width: 154px !important;
        min-width: 154px !important;
        max-width: 154px !important;
        transform: translateX(28px) !important;
    }

    .admin-orders-live-page .admin-order-row .ayin-btn {
        flex-basis: 180px !important;
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
}

@media (max-width: 1150px) {
    .admin-orders-live-page .admin-order-row select {
        transform: none !important;
    }

    .admin-orders-live-page .admin-order-row form {
        justify-content: flex-start !important;
    }
}

@media (max-width: 620px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 15px !important;
    }

    .admin-orders-live-page .admin-order-row form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .admin-orders-live-page .admin-order-row select,
    .admin-orders-live-page .admin-order-row .ayin-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* =========================================================
   AYIN Admin Orders Layout Refine V9
   Center the complete order row and keep all controls contained
   ========================================================= */

/* البوكس الخارجي ببيدينغ متساوٍ */
.admin-orders-live-page .admin-orders-card {
    padding: 16px 30px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* توسيط كامل محتوى صف الطلب داخل البوكس */
.admin-orders-live-page .admin-order-row {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns:
        minmax(205px, 1.22fr)
        minmax(135px, .72fr)
        minmax(92px, .48fr)
        minmax(175px, .86fr)
        minmax(88px, auto)
        minmax(390px, 1.58fr) !important;
    column-gap: 16px !important;
}

/* إلغاء جميع الإزاحات القديمة حتى يبقى الجدول في المنتصف */
.admin-orders-live-page .admin-order-row > div:nth-child(2),
.admin-orders-live-page .admin-order-row > div:nth-child(3),
.admin-orders-live-page .admin-order-row > div:nth-child(4),
.admin-orders-live-page .admin-order-row > .order-status {
    transform: none !important;
}

/* منطقة التحكم تبقى داخل عمودها دون خروج عن البلوك */
.admin-orders-live-page .admin-order-row form {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    transform: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* القائمة أعرض، من دون أي سحب أو Transform */
.admin-orders-live-page .admin-order-row select {
    flex: 0 0 168px !important;
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
    transform: none !important;
    padding-inline: 16px 40px !important;
}

/* الزر ثابت بحجمه وموجود داخل أقصى اليسار المسموح */
.admin-orders-live-page .admin-order-row .ayin-btn {
    flex: 0 0 194px !important;
    width: 194px !important;
    min-width: 194px !important;
    max-width: 194px !important;
    margin: 0 !important;
    transform: none !important;
    padding-inline: 18px !important;
    white-space: nowrap !important;
}

/* الشاشات المتوسطة */
@media (max-width: 1250px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 24px !important;
    }

    .admin-orders-live-page .admin-order-row {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        grid-template-columns:
            minmax(190px, 1.18fr)
            minmax(125px, .68fr)
            minmax(88px, .46fr)
            minmax(160px, .8fr)
            minmax(84px, auto)
            minmax(350px, 1.45fr) !important;
        column-gap: 13px !important;
    }

    .admin-orders-live-page .admin-order-row form {
        gap: 14px !important;
    }

    .admin-orders-live-page .admin-order-row select {
        flex-basis: 154px !important;
        width: 154px !important;
        min-width: 154px !important;
        max-width: 154px !important;
    }

    .admin-orders-live-page .admin-order-row .ayin-btn {
        flex-basis: 180px !important;
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
}

/* التحول إلى شبكة أبسط قبل حصول أي ضغط */
@media (max-width: 1150px) {
    .admin-orders-live-page .admin-order-row {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .admin-orders-live-page .admin-order-row form {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }
}

/* الموبايل */
@media (max-width: 620px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 15px !important;
    }

    .admin-orders-live-page .admin-order-row {
        grid-template-columns: 1fr !important;
    }

    .admin-orders-live-page .admin-order-row form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .admin-orders-live-page .admin-order-row select,
    .admin-orders-live-page .admin-order-row .ayin-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* =========================================================
   AYIN Admin Orders Layout Refine V10
   True centered row without clipping or accumulated transforms
   ========================================================= */

/*
 * سبب الخروج السابق:
 * مجموع الحدود الدنيا للأعمدة كان أكبر من عرض البلوك المتاح،
 * لذلك تمددت الشبكة إلى اليسار وتم قص الزر عند حافة البلوك.
 */

/* البلوك الخارجي: بيدينغ متساوٍ ولا نقص للعناصر */
.admin-orders-live-page .admin-orders-card {
    padding: 16px 30px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* شبكة موزونة وتدخل بالكامل ضمن عرض البلوك */
.admin-orders-live-page .admin-order-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns:
        minmax(180px, 1.25fr)
        minmax(115px, .70fr)
        minmax(80px, .45fr)
        minmax(145px, .90fr)
        minmax(72px, .45fr)
        380px !important;
    column-gap: 16px !important;
    align-items: center !important;
}

/* إلغاء كل التحريكات المتراكمة من النسخ السابقة */
.admin-orders-live-page .admin-order-row > div,
.admin-orders-live-page .admin-order-row > .order-status,
.admin-orders-live-page .admin-order-row form,
.admin-orders-live-page .admin-order-row select,
.admin-orders-live-page .admin-order-row .ayin-btn {
    transform: none !important;
}

/* توسيط خلايا البيانات بصريًا */
.admin-orders-live-page .admin-order-row > div:not(:first-child),
.admin-orders-live-page .admin-order-row > .order-status {
    justify-self: center !important;
    text-align: center !important;
}

/* معلومات الطلب تبقى بمحاذاة اليمين داخل عمودها */
.admin-orders-live-page .admin-order-row > div:first-child {
    justify-self: stretch !important;
    text-align: right !important;
    min-width: 0 !important;
}

/* عمود التحكم مضبوط بعرض يساوي مجموع القائمة والزر والفراغ */
.admin-orders-live-page .admin-order-row form {
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
    display: flex !important;
    direction: rtl !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    justify-self: start !important;
}

/* القائمة بعرض مريح */
.admin-orders-live-page .admin-order-row select {
    flex: 0 0 168px !important;
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
    padding-inline: 16px 40px !important;
}

/* الزر يبقى بحجمه ولا يمتد ولا يخرج */
.admin-orders-live-page .admin-order-row .ayin-btn {
    flex: 0 0 194px !important;
    width: 194px !important;
    min-width: 194px !important;
    max-width: 194px !important;
    margin: 0 !important;
    padding-inline: 18px !important;
    white-space: nowrap !important;
}

/* انتقال مبكر لتخطيط مرن قبل حدوث أي ضغط */
@media (max-width: 1220px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 24px !important;
    }

    .admin-orders-live-page .admin-order-row {
        grid-template-columns:
            minmax(175px, 1.2fr)
            minmax(108px, .65fr)
            minmax(76px, .42fr)
            minmax(138px, .82fr)
            minmax(70px, .42fr)
            350px !important;
        column-gap: 13px !important;
    }

    .admin-orders-live-page .admin-order-row form {
        width: 350px !important;
        min-width: 350px !important;
        max-width: 350px !important;
        gap: 16px !important;
    }

    .admin-orders-live-page .admin-order-row select {
        flex-basis: 154px !important;
        width: 154px !important;
        min-width: 154px !important;
        max-width: 154px !important;
    }

    .admin-orders-live-page .admin-order-row .ayin-btn {
        flex-basis: 180px !important;
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
}

@media (max-width: 1100px) {
    .admin-orders-live-page .admin-order-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        row-gap: 18px !important;
    }

    .admin-orders-live-page .admin-order-row form {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-self: stretch !important;
    }
}

@media (max-width: 620px) {
    .admin-orders-live-page .admin-orders-card {
        padding-inline: 15px !important;
    }

    .admin-orders-live-page .admin-order-row {
        grid-template-columns: 1fr !important;
    }

    .admin-orders-live-page .admin-order-row form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .admin-orders-live-page .admin-order-row select,
    .admin-orders-live-page .admin-order-row .ayin-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* =========================================================
   AYIN Admin Orders Layout Refine V11
   Pull the middle data group slightly to the right
   ========================================================= */

/*
 * المطلوب هنا:
 * سحب المجموعة الوسطى فقط (القائمة + الشارة + الدفع + النقاط + الإجمالي)
 * إلى اليمين بمقدار بسيط، مع إبقاء زر الحفظ ومعلومات الطلب كما هي.
 */
.admin-orders-live-page .admin-order-row > div:nth-child(2),
.admin-orders-live-page .admin-order-row > div:nth-child(3),
.admin-orders-live-page .admin-order-row > div:nth-child(4),
.admin-orders-live-page .admin-order-row > div:nth-child(5) {
    transform: translateX(22px) !important;
}

/* يبقى الفورم الداخلي منظمًا ضمن عموده حتى بعد الإزاحة */
.admin-orders-live-page .admin-order-row > div:nth-child(5) form {
    transform: none !important;
}

@media (max-width: 1220px) {
    .admin-orders-live-page .admin-order-row > div:nth-child(2),
    .admin-orders-live-page .admin-order-row > div:nth-child(3),
    .admin-orders-live-page .admin-order-row > div:nth-child(4),
    .admin-orders-live-page .admin-order-row > div:nth-child(5) {
        transform: translateX(14px) !important;
    }
}

@media (max-width: 1100px) {
    .admin-orders-live-page .admin-order-row > div:nth-child(2),
    .admin-orders-live-page .admin-order-row > div:nth-child(3),
    .admin-orders-live-page .admin-order-row > div:nth-child(4),
    .admin-orders-live-page .admin-order-row > div:nth-child(5) {
        transform: none !important;
    }
}


/* =========================================================
   AYIN Admin Orders Layout Refine V12
   Move the dropdown + status group a bit to the right
   ========================================================= */
.admin-orders-live-page .admin-order-row form {
    gap: 26px !important;
}

.admin-orders-live-page .admin-order-row select {
    transform: translateX(18px) !important;
}

.admin-orders-live-page .admin-order-row > .order-status {
    transform: translateX(22px) !important;
}

@media (max-width: 1220px) {
    .admin-orders-live-page .admin-order-row form {
        gap: 20px !important;
    }

    .admin-orders-live-page .admin-order-row select {
        transform: translateX(12px) !important;
    }

    .admin-orders-live-page .admin-order-row > .order-status {
        transform: translateX(14px) !important;
    }
}

@media (max-width: 1100px) {
    .admin-orders-live-page .admin-order-row form {
        gap: 14px !important;
    }

    .admin-orders-live-page .admin-order-row select,
    .admin-orders-live-page .admin-order-row > .order-status {
        transform: none !important;
    }
}


/* =========================================================
   AYIN Real Tree Backend V1
   Database-backed tree states
   ========================================================= */
.tree-placement-alert.is-empty {
    border-color: #dbeafe !important;
    background: linear-gradient(135deg, #f8fbff, #ffffff) !important;
}

.tree-explorer-message.loading {
    color: #0b4db3 !important;
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
}

.tree-explorer-message.loading::before {
    content: '';
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-left: 9px;
    vertical-align: -3px;
    border: 2px solid rgba(11, 77, 179, .22);
    border-top-color: #0b4db3;
    border-radius: 50%;
    animation: ayin-real-tree-spin .75s linear infinite;
}

@keyframes ayin-real-tree-spin {
    to { transform: rotate(360deg); }
}

.tree-page .tree-summary-card strong {
    white-space: nowrap;
}

.tree-page .tree-node-v2-metrics b {
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   AYIN Tree Summary Grid Refine V2
   Two columns × two rows with compact card height
   ========================================================= */

.tree-page .tree-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}

.tree-page .tree-summary-card {
    min-height: 112px !important;
    padding: 15px 18px !important;
    align-items: center !important;
    gap: 13px !important;
    border-radius: 21px !important;
}

.tree-page .tree-summary-card > div {
    width: 100% !important;
    min-width: 0 !important;
}

.tree-page .tree-summary-icon {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: 18px !important;
}

.tree-page .tree-summary-card small {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.tree-page .tree-summary-card strong {
    margin: 5px 0 4px !important;
    font-size: clamp(23px, 2vw, 30px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
}

.tree-page .tree-summary-card strong em {
    font-size: 12px !important;
}

.tree-page .tree-summary-card p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
}

.tree-page .tree-summary-card::after {
    width: 76px !important;
    height: 76px !important;
    left: -30px !important;
    bottom: -34px !important;
}

@media (max-width: 760px) {
    .tree-page .tree-summary-grid {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    .tree-page .tree-summary-card {
        min-height: 104px !important;
        padding: 14px 16px !important;
    }

    .tree-page .tree-summary-card strong {
        font-size: clamp(22px, 7vw, 28px) !important;
    }
}

/* AYIN_GLOBAL_DASHBOARD_CARDS_RESPONSIVE_V1_START
   =========================================================
   Global responsive KPI / summary cards standard
   - Wide desktop: 4 columns
   - Laptop / tablet: 2 × 2
   - Mobile: 1 column
   ========================================================= */

:is(
    .stats-grid,
    .profits-summary-grid,
    .tree-summary-grid,
    .admin-preview-kpi-grid,
    .notification-summary-grid,
    .wallet-live-summary,
    .agency-current-metrics,
    .ayin-kpi-grid
) {
    display: grid !important;
    align-items: stretch !important;
    grid-auto-flow: row !important;
}

:is(
    .stats-grid,
    .profits-summary-grid,
    .tree-summary-grid,
    .admin-preview-kpi-grid,
    .notification-summary-grid,
    .wallet-live-summary,
    .agency-current-metrics,
    .ayin-kpi-grid
) > * {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Numbers remain clear and stable when values grow */
:is(
    .stat-card,
    .profit-summary-card,
    .tree-summary-card,
    .admin-preview-kpi,
    .notification-summary-card,
    .wallet-live-card,
    .ayin-kpi-card
) strong {
    max-width: 100% !important;
    line-height: 1.12 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Very large desktops: use the available width and keep all four cards together */
@media (min-width: 1600px) {
    :is(
        .stats-grid,
        .profits-summary-grid,
        .tree-summary-grid,
        .admin-preview-kpi-grid,
        .notification-summary-grid,
        .wallet-live-summary,
        .agency-current-metrics,
        .ayin-kpi-grid
    ) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .profit-summary-card,
    .admin-preview-kpi,
    .wallet-live-card,
    .ayin-kpi-card {
        min-height: 156px !important;
        height: auto !important;
    }

    .tree-summary-card {
        min-height: 116px !important;
        height: auto !important;
    }

    .notification-summary-card {
        min-height: 138px !important;
        height: auto !important;
    }
}

/* Laptops and tablets: comfortable 2 × 2 layout */
@media (min-width: 700px) and (max-width: 1599px) {
    :is(
        .stats-grid,
        .profits-summary-grid,
        .tree-summary-grid,
        .admin-preview-kpi-grid,
        .notification-summary-grid,
        .wallet-live-summary,
        .agency-current-metrics,
        .ayin-kpi-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .stat-card {
        padding: 18px !important;
    }

    .profit-summary-card {
        min-height: 142px !important;
        height: auto !important;
        padding: 18px !important;
    }

    .tree-summary-card {
        min-height: 108px !important;
        height: auto !important;
        padding: 14px 17px !important;
    }

    .admin-preview-kpi {
        min-height: 148px !important;
        height: auto !important;
        padding: 17px !important;
    }

    .notification-summary-card {
        min-height: 126px !important;
        height: auto !important;
        padding: 19px !important;
    }

    .wallet-live-card {
        min-height: 145px !important;
        height: auto !important;
        padding: 19px !important;
    }

    .agency-current-metrics > div {
        min-height: 76px !important;
        height: auto !important;
    }

    .ayin-kpi-card {
        min-height: 140px !important;
        height: auto !important;
        padding: 18px !important;
    }
}

/* Mobile: one readable card per row */
@media (max-width: 699px) {
    :is(
        .stats-grid,
        .profits-summary-grid,
        .tree-summary-grid,
        .admin-preview-kpi-grid,
        .notification-summary-grid,
        .wallet-live-summary,
        .agency-current-metrics,
        .ayin-kpi-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 11px !important;
    }

    .stat-card,
    .profit-summary-card,
    .tree-summary-card,
    .admin-preview-kpi,
    .notification-summary-card,
    .wallet-live-card,
    .ayin-kpi-card {
        min-height: 0 !important;
        height: auto !important;
        padding: 16px !important;
    }

    .agency-current-metrics > div {
        min-height: 0 !important;
        height: auto !important;
    }
}

/* AYIN_GLOBAL_DASHBOARD_CARDS_RESPONSIVE_V1_END */


/* === Consolidated source: public/css/ayin-unified-ui-v1.css === */
:root {
    --ayin-navy-950: #06162b;
    --ayin-navy-900: #08213f;
    --ayin-navy-800: #0d2f56;
    --ayin-navy-700: #154579;
    --ayin-beige-600: #c6a45f;
    --ayin-beige-500: #d7ba7a;
    --ayin-beige-300: #ead8b0;
    --ayin-cream-100: #f8f4ec;
    --ayin-cream-50: #fcfaf6;
    --ayin-white: #ffffff;
    --ayin-text: #10243e;
    --ayin-muted: #738095;
    --ayin-border: #e7dfd2;
    --ayin-success: #1fa968;
    --ayin-danger: #c84c4c;
    --ayin-shadow-sm: 0 8px 22px rgba(8, 33, 63, .06);
    --ayin-shadow: 0 18px 48px rgba(8, 33, 63, .10);
    --ayin-radius-sm: 12px;
    --ayin-radius: 18px;
    --ayin-radius-lg: 28px;
}

html, body, button, input, select, textarea {
    font-family: 'Tajawal', sans-serif !important;
}

body.ayin-page,
body.dashboard-page,
body.admin-preview-page {
    color: var(--ayin-text);
    background:
        radial-gradient(circle at 12% 8%, rgba(215, 186, 122, .14), transparent 24rem),
        linear-gradient(180deg, #fbfaf7 0%, #f2f5f9 100%) !important;
}

/* Shared navy header and correct white/beige logo on dark surfaces. */
.ayin-topbar {
    background: linear-gradient(90deg, var(--ayin-navy-950), var(--ayin-navy-900)) !important;
    border-bottom: 1px solid rgba(234, 216, 176, .18) !important;
    box-shadow: 0 10px 28px rgba(6, 22, 43, .18) !important;
}

.ayin-topbar-inner {
    min-height: 70px !important;
}

.ayin-brand img {
    display: block !important;
    object-fit: contain !important;
}

.ayin-nav a,
.side-menu a,
.admin-preview-nav a {
    transition: color .16s ease, background-color .16s ease, border-color .16s ease !important;
    transform: none !important;
    font-size: inherit !important;
}

.ayin-nav a:hover,
.ayin-nav a:focus-visible {
    color: var(--ayin-beige-300) !important;
    background: rgba(255, 255, 255, .07) !important;
    transform: none !important;
}

.ayin-nav a.active {
    color: var(--ayin-beige-500) !important;
}

/* User dashboard layout. */
.dashboard-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 24px !important;
    align-items: start !important;
}

.main-content {
    min-width: 0 !important;
}

.side-panel {
    position: sticky !important;
    top: 92px !important;
    background: #ffffff !important;
    border: 1px solid var(--ayin-border) !important;
    border-radius: var(--ayin-radius-lg) !important;
    box-shadow: var(--ayin-shadow) !important;
}

.side-user {
    border-bottom: 1px solid var(--ayin-border) !important;
}

.side-menu a {
    border-radius: 12px !important;
    color: #667085 !important;
    font-weight: 600 !important;
}

.side-menu a:hover,
.side-menu a:focus-visible {
    color: var(--ayin-navy-900) !important;
    background: var(--ayin-beige-300) !important;
    transform: none !important;
    padding-inline: inherit !important;
}

.side-menu a.active {
    color: var(--ayin-navy-900) !important;
    background: #eaf1fb !important;
    box-shadow: inset -3px 0 0 var(--ayin-beige-500) !important;
}

.hero-dashboard,
.utility-hero,
.tree-hero,
.profits-hero {
    color: #ffffff !important;
    background:
        radial-gradient(circle at 8% 20%, rgba(215, 186, 122, .16), transparent 22rem),
        linear-gradient(135deg, var(--ayin-navy-950), var(--ayin-navy-800)) !important;
    border: 1px solid rgba(234, 216, 176, .16) !important;
    border-radius: var(--ayin-radius-lg) !important;
    box-shadow: var(--ayin-shadow) !important;
}

.hero-dashboard h1,
.utility-hero h1,
.tree-hero h1,
.profits-hero h1 {
    color: #ffffff !important;
}

.hero-eyebrow,
.section-kicker {
    color: var(--ayin-beige-500) !important;
    font-weight: 800 !important;
}

.ayin-card,
.stat-card,
.profit-summary-card,
.tree-summary-card,
.notification-summary-card,
.wallet-live-card,
.order-summary-card,
.service-card {
    background: linear-gradient(180deg, #ffffff, var(--ayin-cream-50)) !important;
    border: 1px solid var(--ayin-border) !important;
    border-radius: var(--ayin-radius) !important;
    box-shadow: var(--ayin-shadow-sm) !important;
}

.ayin-card:hover,
.stat-card:hover,
.profit-summary-card:hover,
.tree-summary-card:hover,
.service-card:hover {
    transform: none !important;
    border-color: rgba(198, 164, 95, .65) !important;
    box-shadow: var(--ayin-shadow) !important;
}

.ayin-btn,
.ayin-btn:hover,
.ayin-btn:focus-visible {
    transform: none !important;
}

.ayin-btn-primary {
    background: linear-gradient(135deg, #0b4db3, #082f6b) !important;
}

.ayin-btn-gold {
    color: var(--ayin-navy-950) !important;
    background: linear-gradient(135deg, #e6c36e, #f3d786) !important;
}

.ayin-section-title,
.main-content h1,
.main-content h2,
.main-content h3 {
    color: var(--ayin-text);
}

/* Shared 1 / 2 / 4-column rhythm. */
.profits-summary-grid,
.tree-summary-grid,
.stats-grid,
.notification-summary-grid,
.admin-preview-kpi-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
}

@media (min-width: 768px) and (max-width: 1599px) {
    .profits-summary-grid,
    .tree-summary-grid,
    .stats-grid,
    .notification-summary-grid,
    .admin-preview-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1600px) {
    .profits-summary-grid,
    .tree-summary-grid,
    .stats-grid,
    .notification-summary-grid,
    .admin-preview-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Admin preview follows the same identity as the real admin panel. */
.admin-preview-sidebar {
    background: linear-gradient(180deg, var(--ayin-navy-950), var(--ayin-navy-900)) !important;
}

.admin-preview-topbar {
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid var(--ayin-border) !important;
}

.admin-preview-owner-card,
.admin-preview-panel,
.admin-preview-kpi,
.admin-preview-mode-note {
    border-color: var(--ayin-border) !important;
    border-radius: var(--ayin-radius) !important;
    box-shadow: var(--ayin-shadow-sm) !important;
}

.admin-preview-nav a:hover,
.admin-preview-nav a:focus-visible {
    color: var(--ayin-navy-900) !important;
    background: var(--ayin-beige-300) !important;
    transform: none !important;
    padding-inline: inherit !important;
}

.admin-preview-nav a.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0b4db3, #082f6b) !important;
}

/* Forms and tables across customer pages. */
input, select, textarea {
    border-color: var(--ayin-border) !important;
    border-radius: 12px !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--ayin-beige-600) !important;
    box-shadow: 0 0 0 3px rgba(215, 186, 122, .18) !important;
}

table thead th {
    color: var(--ayin-navy-900) !important;
    background: var(--ayin-cream-100) !important;
}

table tbody tr:hover {
    background: rgba(234, 216, 176, .16) !important;
}

/* Responsive dashboard shell. */
@media (max-width: 1050px) {
    .dashboard-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .side-panel {
        position: static !important;
        order: -1 !important;
    }
}

@media (max-width: 767px) {
    .ayin-topbar-inner {
        min-height: 62px !important;
    }

    .hero-dashboard,
    .utility-hero,
    .tree-hero,
    .profits-hero,
    .ayin-card,
    .side-panel {
        border-radius: 16px !important;
    }
}

/* Optional dark theme hook for the upcoming appearance switch. */
html[data-ayin-theme='dark'] body {
    --ayin-text: #f7f1e7;
    --ayin-muted: #aebbd0;
    --ayin-border: rgba(234, 216, 176, .16);
    background: linear-gradient(180deg, #06162b, #0a2341) !important;
}

html[data-ayin-theme='dark'] .ayin-card,
html[data-ayin-theme='dark'] .side-panel,
html[data-ayin-theme='dark'] .profit-summary-card,
html[data-ayin-theme='dark'] .tree-summary-card {
    color: #f7f1e7 !important;
    background: #0d2b4d !important;
    border-color: rgba(234, 216, 176, .16) !important;
}


/* === Consolidated source: public/css/ayin-visual-repair-v2.css === */
:root {
    --ayin-v2-navy-950: #06162b;
    --ayin-v2-navy-900: #08213f;
    --ayin-v2-navy-800: #0d2f56;
    --ayin-v2-navy-700: #17466f;
    --ayin-v2-beige-500: #d7ba7a;
    --ayin-v2-beige-300: #ead8b0;
    --ayin-v2-cream-100: #f8f4ec;
    --ayin-v2-cream-50: #fcfaf6;
    --ayin-v2-text: #10243e;
    --ayin-v2-muted: #718096;
    --ayin-v2-border: #e7dfd2;
    --ayin-v2-shadow-sm: 0 10px 28px rgba(8, 33, 63, .07);
    --ayin-v2-shadow: 0 20px 54px rgba(8, 33, 63, .11);
}

html,
body,
button,
input,
select,
textarea {
    font-family: 'Tajawal', sans-serif !important;
}

/* =========================================================
   Landing page — use the same elegant navy mood as login
   ========================================================= */
body.welcome-page {
    min-height: 100vh !important;
    overflow-x: hidden !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 9% 17%, rgba(215, 186, 122, .15), transparent 24rem),
        radial-gradient(circle at 5% 90%, rgba(41, 93, 151, .20), transparent 25rem),
        radial-gradient(circle at 95% 22%, transparent 0 12rem, rgba(234, 216, 176, .10) 12.05rem 12.12rem, transparent 12.18rem),
        radial-gradient(circle at 93% 23%, transparent 0 18rem, rgba(90, 132, 183, .08) 18.05rem 18.14rem, transparent 18.2rem),
        linear-gradient(135deg, #0b1d30 0%, #061b3d 52%, #002652 100%) !important;
}

body.welcome-page main {
    min-height: 100vh !important;
}

body.welcome-page .welcome-shell {
    min-height: 100vh !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 520px) minmax(0, 1fr) !important;
    grid-template-areas: 'phone content' !important;
    align-items: center !important;
    gap: clamp(42px, 6vw, 96px) !important;
    padding-block: clamp(52px, 7vw, 96px) !important;
    direction: ltr !important;
}

body.welcome-page .welcome-content {
    grid-area: content !important;
    direction: rtl !important;
    color: #fff !important;
}

body.welcome-page .web-phone-preview {
    grid-area: phone !important;
    direction: rtl !important;
    justify-self: start !important;
}

body.welcome-page .welcome-content h1,
body.welcome-page .welcome-content h2,
body.welcome-page .welcome-content strong {
    color: #fff !important;
}

body.welcome-page .welcome-content p {
    color: rgba(255, 255, 255, .72) !important;
}

body.welcome-page .welcome-badge {
    color: #f1d58f !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(234, 216, 176, .24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

body.welcome-page .web-phone-preview,
body.welcome-page .preview-screen {
    filter: drop-shadow(0 28px 52px rgba(0, 0, 0, .28)) !important;
}

/* =========================================================
   Customer dashboard layout — wide content left, sidebar right
   ========================================================= */
.dashboard-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    grid-template-areas: 'main side' !important;
    gap: 24px !important;
    align-items: start !important;
    direction: ltr !important;
}

.dashboard-shell > .main-content {
    grid-area: main !important;
    min-width: 0 !important;
    direction: rtl !important;
}

.dashboard-shell > .side-panel {
    grid-area: side !important;
    width: 100% !important;
    min-width: 0 !important;
    direction: rtl !important;
    position: sticky !important;
    top: 92px !important;
}

/* =========================================================
   Customer navigation — hover changes colors only
   ========================================================= */
.ayin-nav a,
.side-menu a,
.admin-preview-nav a {
    transform: none !important;
    scale: 1 !important;
    translate: none !important;
    letter-spacing: normal !important;
    text-indent: 0 !important;
    font-size: inherit !important;
    line-height: 1.45 !important;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.side-menu a {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    color: #667085 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.side-menu a:hover,
.side-menu a:focus-visible {
    color: var(--ayin-v2-navy-900) !important;
    background: var(--ayin-v2-beige-300) !important;
    border-color: rgba(198, 164, 95, .48) !important;
    box-shadow: inset -3px 0 0 var(--ayin-v2-beige-500) !important;
    transform: none !important;
    padding: 0 18px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.side-menu a.active {
    color: var(--ayin-v2-navy-900) !important;
    background: #eaf1fb !important;
    border-color: rgba(215, 186, 122, .52) !important;
    box-shadow: inset -3px 0 0 var(--ayin-v2-beige-500) !important;
    transform: none !important;
    padding: 0 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.ayin-nav a:hover,
.ayin-nav a:focus-visible,
.admin-preview-nav a:hover,
.admin-preview-nav a:focus-visible {
    transform: none !important;
    scale: 1 !important;
    translate: none !important;
}

/* =========================================================
   Unified responsive summary cards
   phone 1 / tablet-laptop 2 / very wide desktop 4
   ========================================================= */
.profits-summary-grid,
.tree-summary-grid,
.stats-grid,
.notification-summary-grid,
.admin-preview-kpi-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
}

@media (min-width: 768px) and (max-width: 2199.98px) {
    .profits-summary-grid,
    .tree-summary-grid,
    .stats-grid,
    .notification-summary-grid,
    .admin-preview-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 2200px) {
    .profits-summary-grid,
    .tree-summary-grid,
    .stats-grid,
    .notification-summary-grid,
    .admin-preview-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   Shared visual language across customer pages
   ========================================================= */
body.dashboard-page,
body.ayin-page:not(.welcome-page):not(.auth-page),
body.admin-preview-page {
    color: var(--ayin-v2-text) !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(215, 186, 122, .13), transparent 25rem),
        linear-gradient(180deg, #fbfaf7 0%, #f3f6fa 100%) !important;
}

.ayin-card,
.side-panel,
.stat-card,
.profit-summary-card,
.tree-summary-card,
.notification-summary-card,
.wallet-live-card,
.order-summary-card,
.service-card,
.admin-preview-kpi,
.admin-preview-panel,
.admin-preview-owner-card,
.admin-preview-mode-note {
    border-color: var(--ayin-v2-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--ayin-v2-shadow-sm) !important;
}

.ayin-card,
.side-panel,
.stat-card,
.profit-summary-card,
.tree-summary-card,
.notification-summary-card,
.wallet-live-card,
.order-summary-card,
.service-card {
    background: linear-gradient(180deg, #fff, var(--ayin-v2-cream-50)) !important;
}

.ayin-card:hover,
.stat-card:hover,
.profit-summary-card:hover,
.tree-summary-card:hover,
.service-card:hover {
    transform: none !important;
    border-color: rgba(198, 164, 95, .56) !important;
    box-shadow: var(--ayin-v2-shadow) !important;
}

.hero-dashboard,
.utility-hero,
.tree-hero,
.profits-hero {
    color: #fff !important;
    background:
        radial-gradient(circle at 8% 20%, rgba(215, 186, 122, .16), transparent 22rem),
        linear-gradient(135deg, var(--ayin-v2-navy-950), var(--ayin-v2-navy-800)) !important;
    border: 1px solid rgba(234, 216, 176, .16) !important;
    border-radius: 26px !important;
    box-shadow: var(--ayin-v2-shadow) !important;
}

.hero-dashboard h1,
.utility-hero h1,
.tree-hero h1,
.profits-hero h1 {
    color: #fff !important;
}

.hero-eyebrow,
.section-kicker {
    color: var(--ayin-v2-beige-500) !important;
}

/* Admin preview uses the same navy/beige language. */
.admin-preview-sidebar {
    background: linear-gradient(180deg, var(--ayin-v2-navy-950), var(--ayin-v2-navy-900)) !important;
}

.admin-preview-nav a {
    min-height: 46px !important;
    padding-inline: 16px !important;
    font-weight: 600 !important;
}

.admin-preview-nav a:hover,
.admin-preview-nav a:focus-visible {
    color: var(--ayin-v2-navy-900) !important;
    background: var(--ayin-v2-beige-300) !important;
    padding-inline: 16px !important;
    font-weight: 600 !important;
}

.admin-preview-nav a.active {
    color: #fff !important;
    background: linear-gradient(135deg, #0b4db3, #082f6b) !important;
    padding-inline: 16px !important;
}

/* Tables/forms stay in the same visual family. */
input,
select,
textarea {
    border-color: var(--ayin-v2-border) !important;
    border-radius: 12px !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ayin-v2-beige-500) !important;
    box-shadow: 0 0 0 3px rgba(215, 186, 122, .18) !important;
}

table thead th {
    color: var(--ayin-v2-navy-900) !important;
    background: var(--ayin-v2-cream-100) !important;
}

table tbody tr:hover {
    background: rgba(234, 216, 176, .14) !important;
}

@media (max-width: 1100px) {
    .dashboard-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            'side'
            'main' !important;
    }

    .dashboard-shell > .side-panel {
        position: static !important;
    }
}

@media (max-width: 1050px) {
    body.welcome-page .welcome-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            'content'
            'phone' !important;
        text-align: center !important;
    }

    body.welcome-page .welcome-content,
    body.welcome-page .web-phone-preview {
        justify-self: center !important;
    }
}

@media (max-width: 767px) {
    body.welcome-page .welcome-shell {
        padding-block: 36px 58px !important;
        gap: 36px !important;
    }

    body.welcome-page .welcome-content h1 {
        font-size: clamp(2.2rem, 10vw, 3.35rem) !important;
    }

    .dashboard-shell {
        gap: 16px !important;
    }
}


/* =====================================================================
   AYIN FINAL FRONTEND NORMALIZATION — 2026-07-23 R1
   One active storefront stylesheet. Legacy files remain as inactive backup.
   ===================================================================== */
:root {
    --ayin-system-navy-950: #06162b;
    --ayin-system-navy-900: #08213f;
    --ayin-system-navy-800: #0d2f56;
    --ayin-system-blue: #0b4db3;
    --ayin-system-beige-500: #d7ba7a;
    --ayin-system-beige-300: #ead8b0;
    --ayin-system-cream-100: #f8f4ec;
    --ayin-system-cream-50: #fcfaf6;
    --ayin-system-text: #10243e;
    --ayin-system-muted: #66758a;
    --ayin-system-border: #e7dfd2;
    --ayin-system-shadow-sm: 0 10px 28px rgba(8, 33, 63, .07);
    --ayin-system-shadow: 0 20px 54px rgba(8, 33, 63, .11);
}

html,
body,
button,
input,
select,
textarea {
    font-family: 'Tajawal', sans-serif !important;
}

body {
    color: var(--ayin-system-text);
}

:is(.ayin-page, .admin-preview-page) :is(
    .stat-card,
    .wallet-live-card,
    .profit-summary-card,
    .tree-summary-card,
    .notification-summary-card,
    .order-summary-card,
    .admin-preview-kpi,
    table,
    .pagination,
    [class*='badge'],
    [class*='amount'],
    [class*='points']
) {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* The customer shell always reserves the narrow right column for navigation. */
.dashboard-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    grid-template-areas: 'main side' !important;
    align-items: start !important;
    gap: 24px !important;
    direction: ltr !important;
}

.dashboard-shell > .main-content {
    grid-area: main !important;
    min-width: 0 !important;
    direction: rtl !important;
    container-type: inline-size;
    container-name: ayin-main-content;
}

.dashboard-shell > .side-panel {
    grid-area: side !important;
    width: 100% !important;
    min-width: 0 !important;
    direction: rtl !important;
    position: sticky !important;
    top: 92px !important;
}

/* Navigation geometry is immutable on hover/active. */
:is(
    .ayin-nav a,
    .side-menu a,
    .admin-preview-nav a,
    .mobile-bottom-nav a,
    .store-chip,
    .admin-order-filters a
),
:is(
    .ayin-nav a,
    .side-menu a,
    .admin-preview-nav a,
    .mobile-bottom-nav a,
    .store-chip,
    .admin-order-filters a
):is(:hover, :focus-visible, .active) {
    transform: none !important;
    scale: 1 !important;
    translate: none !important;
    letter-spacing: normal !important;
    text-indent: 0 !important;
}

.ayin-nav a {
    min-height: 42px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 11px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.ayin-nav a:is(:hover, :focus-visible),
.ayin-nav a.active {
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
}

.side-menu a,
.admin-preview-nav a {
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.side-menu a:is(:hover, :focus-visible),
.side-menu a.active {
    min-height: 48px !important;
    padding: 0 18px !important;
    font-size: 16px !important;
}

.side-menu a:is(:hover, :focus-visible) {
    color: var(--ayin-system-navy-900) !important;
    background: var(--ayin-system-beige-300) !important;
    border-color: rgba(198, 164, 95, .48) !important;
    box-shadow: inset -3px 0 0 var(--ayin-system-beige-500) !important;
    font-weight: 600 !important;
}

.side-menu a.active {
    color: var(--ayin-system-navy-900) !important;
    background: #edf3fb !important;
    border-color: rgba(215, 186, 122, .52) !important;
    box-shadow: inset -3px 0 0 var(--ayin-system-beige-500) !important;
    font-weight: 700 !important;
}

.admin-preview-nav a:is(:hover, :focus-visible, .active) {
    min-height: 48px !important;
    padding: 0 18px !important;
    font-size: 16px !important;
}

.mobile-bottom-nav a,
.mobile-bottom-nav a:is(:hover, :focus-visible, .active) {
    padding: 8px 4px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

/* Landing page keeps the same navy atmosphere as the working admin login. */
body.welcome-page {
    min-height: 100vh !important;
    overflow-x: hidden !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 9% 17%, rgba(215, 186, 122, .15), transparent 24rem),
        radial-gradient(circle at 5% 90%, rgba(41, 93, 151, .20), transparent 25rem),
        radial-gradient(circle at 95% 22%, transparent 0 12rem, rgba(234, 216, 176, .10) 12.05rem 12.12rem, transparent 12.18rem),
        linear-gradient(135deg, #0b1d30 0%, #061b3d 52%, #002652 100%) !important;
}

body.welcome-page main,
body.welcome-page .welcome-shell {
    min-height: 100vh !important;
}

body.welcome-page .welcome-shell {
    display: grid !important;
    grid-template-columns: minmax(360px, 520px) minmax(0, 1fr) !important;
    grid-template-areas: 'phone content' !important;
    align-items: center !important;
    gap: clamp(42px, 6vw, 96px) !important;
    padding-block: clamp(52px, 7vw, 96px) !important;
    direction: ltr !important;
}

body.welcome-page .welcome-content {
    grid-area: content !important;
    direction: rtl !important;
    color: #fff !important;
}

body.welcome-page .web-phone-preview {
    grid-area: phone !important;
    direction: rtl !important;
    justify-self: start !important;
}

body.welcome-page :is(.welcome-content h1, .welcome-content h2, .welcome-content strong) {
    color: #fff !important;
}

body.welcome-page .welcome-content p {
    color: rgba(255, 255, 255, .74) !important;
}

body.welcome-page .welcome-badge {
    color: #f1d58f !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(234, 216, 176, .24) !important;
}

body.welcome-page .preview-brand-logo {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

body.welcome-page .preview-user-avatar {
    overflow: hidden !important;
}

body.welcome-page .preview-user-avatar :is(img, .ayin-logo) {
    display: none !important;
}

/* Shared surfaces. */
body.dashboard-page,
body.ayin-page:not(.welcome-page):not(.auth-page),
body.admin-preview-page {
    color: var(--ayin-system-text) !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(215, 186, 122, .13), transparent 25rem),
        linear-gradient(180deg, #fbfaf7 0%, #f3f6fa 100%) !important;
}

:is(
    .ayin-card,
    .side-panel,
    .stat-card,
    .notification-summary-card,
    .order-summary-card,
    .service-card,
    .admin-preview-kpi,
    .admin-preview-panel,
    .admin-preview-owner-card,
    .admin-preview-mode-note
) {
    border-color: var(--ayin-system-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--ayin-system-shadow-sm) !important;
}

:is(.ayin-card, .side-panel, .stat-card, .notification-summary-card, .order-summary-card, .service-card) {
    background: linear-gradient(180deg, #fff, var(--ayin-system-cream-50)) !important;
}

:is(.ayin-card, .stat-card, .service-card):hover {
    transform: none !important;
    border-color: rgba(198, 164, 95, .56) !important;
    box-shadow: var(--ayin-system-shadow) !important;
}

/* Summary grids depend on the real content width, not the full viewport. */
:is(
    .profits-summary-grid,
    .tree-summary-grid,
    .stats-grid,
    .notification-summary-grid,
    .wallet-live-summary,
    .admin-preview-kpi-grid
) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
}

@container ayin-main-content (min-width: 44rem) {
    :is(
        .profits-summary-grid,
        .tree-summary-grid,
        .stats-grid,
        .notification-summary-grid,
        .wallet-live-summary,
        .admin-preview-kpi-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@container ayin-main-content (min-width: 90rem) {
    :is(
        .profits-summary-grid,
        .tree-summary-grid,
        .stats-grid,
        .notification-summary-grid,
        .wallet-live-summary,
        .admin-preview-kpi-grid
    ) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Explicit card variants prevent white text from surviving on a light override. */
:is(.wallet-live-card, .profit-summary-card, .tree-summary-card, .product-card) {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border: 1px solid var(--ayin-system-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--ayin-system-shadow-sm) !important;
}

:is(.wallet-live-card, .profit-summary-card, .tree-summary-card, .product-card)::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 126px;
    height: 126px;
    inset-inline-end: -46px;
    inset-block-start: -52px;
    border-radius: 42% 58% 62% 38%;
    background: rgba(255, 255, 255, .10);
    transform: rotate(18deg);
    pointer-events: none;
}

:is(.wallet-live-card, .profit-summary-card, .tree-summary-card, .product-card) > * {
    position: relative;
    z-index: 1;
}

.wallet-live-card.purchase {
    background: linear-gradient(145deg, #0b4db3, #082f72) !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

.wallet-live-card.profit {
    background: linear-gradient(145deg, #1fa95a, #147a42) !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

.wallet-live-card.points {
    background: linear-gradient(145deg, #fff, #edf4ff) !important;
}

.wallet-live-card.held {
    background: linear-gradient(145deg, #fff7e8, #fffdf8) !important;
    border-color: #ecd69e !important;
}

.wallet-live-card:is(.purchase, .profit) :is(span, strong, strong small, p) {
    color: #fff !important;
}

.wallet-live-card:is(.points, .held) span,
.wallet-live-card:is(.points, .held) p {
    color: var(--ayin-system-muted) !important;
}

.wallet-live-card:is(.points, .held) :is(strong, strong small) {
    color: var(--ayin-system-navy-900) !important;
}

.profit-summary-card.total {
    background: linear-gradient(145deg, #08213f, #0d3a67) !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

.profit-summary-card.direct {
    background: linear-gradient(145deg, #1fa95a, #147a42) !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

.profit-summary-card.balance {
    background: linear-gradient(145deg, #fff8e8, #f4e2b9) !important;
    border-color: #e3ca91 !important;
}

.profit-summary-card.pending {
    background: linear-gradient(145deg, #fff, #f3f6fb) !important;
    border-color: #dfe6ef !important;
}

.profit-summary-card:is(.total, .direct) :is(span, strong, strong small, p) {
    color: #fff !important;
}

.profit-summary-card:is(.balance, .pending) :is(strong, strong small) {
    color: var(--ayin-system-navy-900) !important;
}

.profit-summary-card:is(.balance, .pending) :is(span, p) {
    color: var(--ayin-system-muted) !important;
}

.tree-summary-card.members {
    background: linear-gradient(145deg, #08213f, #0d3a67) !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

.tree-summary-card.direct {
    background: linear-gradient(145deg, #fff8e8, #f2dfb5) !important;
    border-color: #e3ca91 !important;
}

.tree-summary-card.right {
    background: linear-gradient(145deg, #fff, #eaf2ff) !important;
    border-color: #cfdef4 !important;
}

.tree-summary-card.left {
    background: linear-gradient(145deg, #fff, #eaf8ef) !important;
    border-color: #cfe8d7 !important;
}

.tree-summary-card.members :is(small, strong, strong em, p) {
    color: #fff !important;
}

.tree-summary-card:is(.direct, .right, .left) :is(strong, strong em) {
    color: var(--ayin-system-navy-900) !important;
}

.tree-summary-card:is(.direct, .right, .left) :is(small, p) {
    color: var(--ayin-system-muted) !important;
}

.product-card {
    background: linear-gradient(155deg, #fff, #faf5eb) !important;
}

.product-card::after {
    background: rgba(215, 186, 122, .18) !important;
}

.product-card :is(h2, h3, strong, .product-title, .product-price) {
    color: var(--ayin-system-navy-900) !important;
}

.product-card :is(p, small, .product-meta) {
    color: var(--ayin-system-muted) !important;
}

:is(.hero-dashboard, .utility-hero, .tree-hero, .profits-hero) {
    color: #fff !important;
    background:
        radial-gradient(circle at 8% 20%, rgba(215, 186, 122, .16), transparent 22rem),
        linear-gradient(135deg, var(--ayin-system-navy-950), var(--ayin-system-navy-800)) !important;
    border: 1px solid rgba(234, 216, 176, .16) !important;
    border-radius: 26px !important;
    box-shadow: var(--ayin-system-shadow) !important;
}

:is(.hero-dashboard, .utility-hero, .tree-hero, .profits-hero) :is(h1, h2, strong) {
    color: #fff !important;
}

.hero-eyebrow,
.section-kicker {
    color: var(--ayin-system-beige-500) !important;
}

input,
select,
textarea {
    border-color: var(--ayin-system-border) !important;
    border-radius: 12px !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ayin-system-beige-500) !important;
    box-shadow: 0 0 0 3px rgba(215, 186, 122, .18) !important;
}

table thead th {
    color: var(--ayin-system-navy-900) !important;
    background: var(--ayin-system-cream-100) !important;
}

table tbody tr:hover {
    background: rgba(234, 216, 176, .14) !important;
}

@supports not (container-type: inline-size) {
    @media (min-width: 768px) and (max-width: 2199.98px) {
        :is(.profits-summary-grid, .tree-summary-grid, .stats-grid, .notification-summary-grid, .wallet-live-summary, .admin-preview-kpi-grid) {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @media (min-width: 2200px) {
        :is(.profits-summary-grid, .tree-summary-grid, .stats-grid, .notification-summary-grid, .wallet-live-summary, .admin-preview-kpi-grid) {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }
    }
}

@media (max-width: 1100px) {
    .dashboard-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: 'side' 'main' !important;
    }

    .dashboard-shell > .side-panel {
        position: static !important;
    }
}

@media (max-width: 1050px) {
    body.welcome-page .welcome-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: 'content' 'phone' !important;
        text-align: center !important;
    }

    body.welcome-page :is(.welcome-content, .web-phone-preview) {
        justify-self: center !important;
    }
}

@media (max-width: 767px) {
    body.welcome-page .welcome-shell {
        padding-block: 36px 58px !important;
        gap: 36px !important;
    }

    .dashboard-shell {
        gap: 16px !important;
    }
}


/* =====================================================================
   AYIN UNIFIED UI REFINEMENT — 2026-07-24 R2
   Final storefront refinements. This is the only registered storefront CSS.
   ===================================================================== */

/* Landing headline: one Arabic line only, without repeating the English brand name. */
body.welcome-page .welcome-content h1 {
    margin-block: 26px 20px !important;
    font-size: inherit !important;
    line-height: 1 !important;
}

body.welcome-page .welcome-title-tagline {
    display: block;
    max-width: 100%;
    color: #fff !important;
    font-size: clamp(2.65rem, 4.35vw, 4rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.035em;
    white-space: nowrap;
}

/* User dashboard surfaces always retain readable text on light cards. */
body.dashboard-page :is(
    .stat-card,
    .service-card,
    .direct-profit-overview,
    .balance-overview-card,
    .wallet-transactions-card,
    .withdrawal-live-card,
    .withdrawals-history-card,
    .tree-rules-card,
    .agency-current-card,
    .agencies-table-card,
    .profits-table-card,
    .store-filter-card
) :is(h1, h2, h3, strong, b) {
    color: var(--ayin-system-navy-900) !important;
}

body.dashboard-page :is(
    .stat-card,
    .service-card,
    .direct-profit-overview,
    .balance-overview-card,
    .wallet-transactions-card,
    .withdrawal-live-card,
    .withdrawals-history-card,
    .tree-rules-card,
    .agency-current-card,
    .agencies-table-card,
    .profits-table-card,
    .store-filter-card
) :is(p, small, span:not(.section-kicker):not(.hero-eyebrow):not(.status-pill)) {
    color: var(--ayin-system-muted);
}

body.dashboard-page .stat-card {
    min-height: 132px;
    padding: 20px !important;
}

body.dashboard-page .stat-card > strong {
    margin-top: 12px;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
}

body.dashboard-page .stat-card.green > strong,
body.dashboard-page .activity-value,
body.dashboard-page .profit-value {
    color: #168447 !important;
}

body.dashboard-page .direct-profit-overview,
body.dashboard-page .balance-overview-card,
body.dashboard-page .wallet-transactions-card,
body.dashboard-page .withdrawal-live-card,
body.dashboard-page .withdrawals-history-card,
body.dashboard-page .tree-rules-card,
body.dashboard-page .agency-current-card,
body.dashboard-page .agencies-table-card,
body.dashboard-page .profits-table-card,
body.dashboard-page .store-filter-card {
    background:
        radial-gradient(circle at 0 0, rgba(215,186,122,.12), transparent 11rem),
        linear-gradient(180deg, #fff, #fcfaf6) !important;
}

body.dashboard-page .direct-profit-overview p,
body.dashboard-page .balance-overview-card p {
    color: var(--ayin-system-muted) !important;
    line-height: 1.8;
}

/* Keep the withdrawal form proportional to the main content. */
body.wallet-live-page .wallet-live-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px) !important;
}

body.wallet-live-page .withdrawal-live-card {
    width: 100%;
}

/* Flash message geometry is compact and never floats as a duplicate banner on login. */
.ayin-flash {
    margin-block: 18px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

@media (max-width: 1050px) {
    body.welcome-page .welcome-title-tagline {
        margin-inline: auto;
    }
}

@media (max-width: 900px) {
    body.wallet-live-page .wallet-live-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {
    body.welcome-page .welcome-title-tagline {
        font-size: clamp(1.95rem, 9.4vw, 2.85rem);
        line-height: 1.18;
    }
}