/* AYIN Frontend Unified UI + Smart Full-stack R27C */
:root {
    --r27c-navy-950: #061a36;
    --r27c-navy-900: #08244a;
    --r27c-navy-800: #0d3567;
    --r27c-blue-600: #1559b7;
    --r27c-blue-500: #1b6fd6;
    --r27c-gold-500: #efc75e;
    --r27c-gold-400: #f6d87f;
    --r27c-green-600: #169447;
    --r27c-red-600: #c93f46;
    --r27c-ink: #0b203e;
    --r27c-muted: #718096;
    --r27c-line: #e4dccb;
    --r27c-surface: #ffffff;
    --r27c-surface-soft: #f7f9fc;
    --r27c-radius-lg: 24px;
    --r27c-radius-md: 17px;
    --r27c-radius-sm: 12px;
    --r27c-shadow: 0 18px 48px rgba(7, 31, 66, .08);
    --r27c-shadow-hover: 0 20px 52px rgba(7, 31, 66, .13);
    --r27c-header-height: 72px;
}

body.ayin-page {
    color: var(--r27c-ink);
    background:
        radial-gradient(circle at 10% 4%, rgba(239, 199, 94, .08), transparent 28%),
        linear-gradient(180deg, #fbfbfa 0, #f3f7fc 100%);
}

body.ayin-page .ayin-container {
    width: min(1240px, calc(100% - 36px));
}

body.ayin-page .ayin-card,
body.ayin-page .checkout-section-card,
body.ayin-page .order-summary-card,
body.ayin-page .cart-items-card,
body.ayin-page .support-form-card,
body.ayin-page .support-faq-card,
body.ayin-page .support-history,
body.ayin-page .notifications-panel {
    border: 1px solid rgba(220, 207, 181, .78);
    border-radius: var(--r27c-radius-md);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--r27c-shadow);
}

body.ayin-page .ayin-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    min-height: var(--r27c-header-height);
    background: rgba(6, 26, 54, .985);
    box-shadow: 0 8px 30px rgba(5, 20, 42, .16);
    backdrop-filter: blur(12px);
}

body.ayin-page .ayin-topbar-inner {
    min-height: var(--r27c-header-height) !important;
    gap: clamp(16px, 3vw, 38px);
}

body.ayin-page .ayin-brand img,
body.ayin-page .ayin-brand svg {
    max-height: 48px;
}

body.ayin-page .ayin-nav {
    gap: 6px;
    justify-content: center;
}

body.ayin-page .ayin-nav a {
    position: relative;
    padding: 11px 15px;
    border-radius: 11px;
    color: rgba(255, 255, 255, .72);
    font-weight: 800;
    transition: color .2s ease, background .2s ease, translate .2s ease;
}

body.ayin-page .ayin-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
    translate: 0 -1px;
}

body.ayin-page .ayin-nav a.active {
    color: var(--r27c-gold-400);
    background: rgba(239, 199, 94, .08);
}

body.ayin-page .ayin-nav a.active::after {
    content: '';
    position: absolute;
    inset-inline: 16px;
    inset-block-end: 4px;
    height: 2px;
    border-radius: 999px;
    background: var(--r27c-gold-500);
}

body.ayin-page .ayin-top-actions {
    gap: 10px;
}

body.ayin-page .ayin-icon-btn {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    background: rgba(255, 255, 255, .055);
}

body.ayin-page .ayin-icon-btn:hover {
    background: rgba(255, 255, 255, .11);
}

body.ayin-page .ayin-notification-count {
    position: absolute;
    inset-block-start: -7px;
    inset-inline-start: -5px;
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding-inline: 4px;
    border: 2px solid var(--r27c-navy-950);
    border-radius: 999px;
    background: #ec3f50;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

body.ayin-page .ayin-account-link {
    min-height: 46px;
    padding: 9px 18px;
    gap: 8px;
    color: var(--r27c-ink);
    background: linear-gradient(135deg, var(--r27c-gold-400), var(--r27c-gold-500));
    box-shadow: 0 10px 25px rgba(239, 199, 94, .2);
}

body.ayin-page .ayin-top-avatar {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    object-fit: cover;
}

body.ayin-page main {
    min-height: calc(100vh - var(--r27c-header-height));
}

body.ayin-page .ayin-flash {
    margin-block: 18px 0;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 700;
}

body.ayin-page .ayin-flash-success {
    border: 1px solid #a9e7be;
    background: #effcf3;
    color: #116b32;
}

body.ayin-page .ayin-flash-error {
    border: 1px solid #f0b6ba;
    background: #fff3f4;
    color: #9f2630;
}

body.ayin-page .ayin-flash ul {
    margin: 8px 0 0;
    padding-inline-start: 20px;
}

body.ayin-page .dashboard-shell {
    display: grid;
    grid-template-columns: 276px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding-block: 30px 50px;
}

body.ayin-page .main-content {
    min-width: 0;
}

body.ayin-page .side-panel {
    position: sticky;
    inset-block-start: calc(var(--r27c-header-height) + 18px);
    overflow: hidden;
    padding: 17px;
    max-height: calc(100vh - var(--r27c-header-height) - 36px);
    overflow-y: auto;
    scrollbar-width: thin;
}

body.ayin-page .side-user {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 6px 4px 17px;
    border-bottom: 1px solid var(--r27c-line);
    color: var(--r27c-ink);
}

body.ayin-page .side-user:hover strong {
    color: var(--r27c-blue-600);
}

body.ayin-page .side-user .avatar {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7f9fd, #edf2fb);
    color: var(--r27c-blue-600);
    font-weight: 900;
}

body.ayin-page .side-user .avatar-image {
    object-fit: cover;
}

body.ayin-page .side-menu {
    display: grid;
    gap: 5px;
    margin-block-start: 13px;
}

body.ayin-page .side-menu-label {
    margin: 10px 10px 3px;
    color: #a28c61;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
}

body.ayin-page .side-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 45px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #667085;
    font-weight: 800;
    transition: background .18s ease, border .18s ease, color .18s ease, translate .18s ease;
}

body.ayin-page .side-menu a:hover {
    color: var(--r27c-ink);
    background: #f6f8fb;
    translate: -2px 0;
}

body.ayin-page .side-menu a.active {
    color: var(--r27c-ink);
    border-color: rgba(239, 199, 94, .42);
    background: linear-gradient(90deg, rgba(231, 240, 253, .9), rgba(248, 241, 220, .55));
    box-shadow: inset -3px 0 0 var(--r27c-gold-500);
}

body.ayin-page .side-menu a span {
    width: 24px;
    text-align: center;
}

body.ayin-page .ayin-unified-hero,
body.ayin-page .hero-dashboard,
body.ayin-page .utility-hero,
body.ayin-page .profile-hero,
body.ayin-page .checkout-hero {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r27c-radius-lg);
    background:
        radial-gradient(circle at 8% 108%, rgba(255, 255, 255, .10) 0 14%, transparent 14.5%),
        linear-gradient(115deg, #11283f 0%, #082c59 58%, #071f42 100%);
    color: #fff;
    box-shadow: 0 22px 52px rgba(7, 31, 66, .15);
}

body.ayin-page .ayin-unified-hero::after,
body.ayin-page .hero-dashboard::after,
body.ayin-page .utility-hero::after,
body.ayin-page .profile-hero::after {
    content: '';
    position: absolute;
    width: 330px;
    height: 330px;
    inset-inline-end: -165px;
    inset-block-start: -180px;
    border: 1px solid rgba(239, 199, 94, .18);
    border-radius: 50%;
    pointer-events: none;
}

body.ayin-page :where(.hero-dashboard, .utility-hero, .profile-hero) h1 {
    margin: 7px 0 10px;
    color: #fff;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.12;
}

body.ayin-page :where(.hero-dashboard, .utility-hero, .profile-hero) p {
    max-width: 660px;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
    line-height: 1.9;
}

body.ayin-page .hero-eyebrow,
body.ayin-page .section-kicker {
    color: #d7b968;
    font-size: 13px;
    font-weight: 900;
}

body.ayin-page .referral-box,
body.ayin-page .profile-completion-card,
body.ayin-page .support-availability {
    position: relative;
    z-index: 1;
    width: min(325px, 100%);
    padding: 19px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 17px;
    background: rgba(255, 255, 255, .075);
    backdrop-filter: blur(8px);
}

body.ayin-page .referral-box p {
    margin-block: 6px 12px;
    font-size: 13px;
}

body.ayin-page .referral-code {
    padding: 12px 13px;
    border-radius: 11px;
    color: var(--r27c-ink);
    background: #fff;
    direction: ltr;
    overflow-wrap: anywhere;
    font-weight: 800;
    font-size: 13px;
}

body.ayin-page .ayin-referral-card .ayin-btn {
    width: 100%;
    margin-block-start: 10px;
}

body.ayin-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-block: 22px;
}

body.ayin-page .stat-card {
    min-height: 152px;
    padding: 22px;
    transition: translate .2s ease, box-shadow .2s ease;
}

body.ayin-page .stat-card:hover,
body.ayin-page .service-card:hover,
body.ayin-page .product-card:hover {
    translate: 0 -3px;
    box-shadow: var(--r27c-shadow-hover);
}

body.ayin-page .stat-card strong {
    font-size: clamp(22px, 2.2vw, 31px);
    color: var(--r27c-ink);
}

body.ayin-page .stat-card.green strong,
body.ayin-page .activity-value.positive {
    color: var(--r27c-green-600);
}

body.ayin-page .stat-card.blue strong {
    color: var(--r27c-blue-600);
}

body.ayin-page .activity-value.negative {
    color: var(--r27c-red-600);
}

body.ayin-page .web-grid-2,
body.ayin-page .ayin-dashboard-grid {
    gap: 20px;
}

body.ayin-page .ayin-section-head,
body.ayin-page .utility-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 18px;
}

body.ayin-page .ayin-section-title,
body.ayin-page .utility-section-head h2,
body.ayin-page .profile-section-heading h2 {
    margin: 2px 0 0;
    color: var(--r27c-ink);
    font-size: clamp(24px, 2.5vw, 34px);
}

body.ayin-page .services-grid {
    gap: 13px;
}

body.ayin-page .service-card {
    min-height: 116px;
    border: 1px solid #e8dfcf;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfaf7);
    transition: translate .2s ease, box-shadow .2s ease, border .2s ease;
}

body.ayin-page .service-card:hover {
    border-color: rgba(27, 111, 214, .28);
}

body.ayin-page .service-card small {
    color: var(--r27c-muted);
    font-size: 11px;
}

body.ayin-page .activity-list {
    display: grid;
}

body.ayin-page .activity-item {
    gap: 14px;
    min-height: 71px;
    padding-block: 13px;
    border-bottom: 1px solid #eee8de;
}

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

body.ayin-page .ayin-empty-compact {
    padding: 32px 16px;
    text-align: center;
    color: var(--r27c-muted);
}

body.ayin-page .ayin-dashboard-orders {
    margin-block-start: 20px;
}

body.ayin-page .ayin-order-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.ayin-page .ayin-order-strip a {
    display: grid;
    gap: 7px;
    padding: 15px;
    border: 1px solid #e8dfcf;
    border-radius: 14px;
    color: var(--r27c-ink);
    background: #fbfcfe;
}

body.ayin-page .ayin-order-strip span {
    color: var(--r27c-muted);
    font-size: 13px;
}

/* Single focus ring: wrapper owns focus, inner control stays clean. */
body.ayin-page :where(input, select, textarea):focus,
body.ayin-page :where(input, select, textarea):focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

body.ayin-page :where(.auth-input-wrap, .profile-field, .checkout-form-grid label, .support-form label):focus-within {
    border-color: var(--r27c-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(27, 111, 214, .16) !important;
}

body.ayin-page .auth-input-wrap {
    border: 1px solid #d9dfe9;
    border-radius: 15px;
    background: #fbfcfe;
    transition: border .18s ease, box-shadow .18s ease, background .18s ease;
}

body.ayin-page .auth-input-wrap input {
    border: 0 !important;
    background: transparent !important;
}

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

body.ayin-page .auth-form-side,
body.ayin-page .auth-showcase {
    min-height: 100vh;
}

body.ayin-page .auth-form-wrap {
    width: min(610px, calc(100% - 44px));
}

body.ayin-page .auth-heading h1 {
    color: var(--r27c-ink);
}

body.ayin-page .auth-submit {
    min-height: 58px;
    border-radius: 15px;
}

body.ayin-page .auth-showcase {
    background: linear-gradient(145deg, #0d3567 0, #071f42 65%, #061a36 100%);
}

/* Store, product, cart and checkout refinements */
body.ayin-page .store-filter-card {
    padding: 20px;
}

body.ayin-page .store-filter-head,
body.ayin-page .store-search {
    gap: 12px;
}

body.ayin-page .store-search input {
    min-height: 50px;
    border-radius: 13px;
}

body.ayin-page .products-grid {
    gap: 18px;
}

body.ayin-page .product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    transition: translate .2s ease, box-shadow .2s ease;
}

body.ayin-page .product-image {
    min-height: 210px;
}

body.ayin-page .product-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 19px;
}

body.ayin-page .product-footer {
    margin-block-start: auto;
}

body.ayin-page .product-details-layout {
    grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr);
    gap: 20px;
    align-items: stretch;
}

body.ayin-page .product-details-image,
body.ayin-page .product-details-info {
    min-height: 540px;
}

body.ayin-page .product-details-image {
    display: grid;
    place-items: center;
}

body.ayin-page .big-product-icon {
    font-size: clamp(110px, 13vw, 180px);
}

body.ayin-page .product-actions {
    margin-block-start: auto;
}

body.ayin-page .cart-layout,
body.ayin-page .checkout-layout {
    gap: 20px;
}

body.ayin-page .cart-items-card,
body.ayin-page .order-summary-card,
body.ayin-page .checkout-section-card {
    min-height: auto !important;
}

body.ayin-page .cart-item-v3 {
    align-items: center;
    min-height: 154px;
    border-radius: 15px;
}

body.ayin-page .catalog-empty,
body.ayin-page .ayin-empty-state {
    min-height: 250px !important;
    padding: 38px 24px !important;
}

body.ayin-page .ayin-empty-state.compact {
    min-height: 190px !important;
}

body.ayin-page .checkout-payment-option {
    border-radius: 15px;
    transition: border .18s ease, box-shadow .18s ease, background .18s ease;
}

body.ayin-page .checkout-payment-option.active {
    border-color: var(--r27c-blue-500);
    background: #f3f7ff;
    box-shadow: 0 0 0 3px rgba(27, 111, 214, .10);
}

/* Wallet, profits and tree */
body.ayin-page .wallet-live-layout,
body.ayin-page .profits-main-grid,
body.ayin-page .tree-bottom-grid {
    gap: 18px;
}

body.ayin-page .wallet-live-card,
body.ayin-page .profit-summary-card,
body.ayin-page .tree-summary-card {
    border-radius: 18px;
    box-shadow: var(--r27c-shadow);
}

body.ayin-page .profits-table-wrap,
body.ayin-page .agencies-table-wrap,
body.ayin-page .tree-explorer-viewport {
    scrollbar-color: #9aa8ba #edf1f6;
    scrollbar-width: thin;
}

body.ayin-page :where(.profits-table, .agencies-table) th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: #f8f4eb;
}

body.ayin-page :where(.profits-table, .agencies-table) td,
body.ayin-page :where(.profits-table, .agencies-table) th {
    padding: 14px 12px;
    white-space: nowrap;
}

body.ayin-page .tree-workspace-card {
    overflow: hidden;
}

body.ayin-page .tree-explorer-viewport {
    min-height: 520px;
    max-height: 720px;
}

/* Profile */
body.ayin-page .profile-hero h1 {
    display: inline;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.ayin-page .profile-completion-card {
    display: flex;
    align-items: center;
    gap: 15px;
}

body.ayin-page .profile-completion-ring {
    flex: 0 0 82px;
}

body.ayin-page .ayin-profile-layout,
body.ayin-page .profile-main-column {
    width: 100%;
}

body.ayin-page .profile-tabs-card {
    margin-block-start: 20px;
    padding: 0;
    overflow: hidden;
}

body.ayin-page .profile-tabs {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 12px;
    border-bottom: 1px solid #e7dfd1;
    background: #fbfcfe;
}

body.ayin-page .profile-tab {
    min-width: max-content;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #697386;
    background: transparent;
    font-weight: 900;
}

body.ayin-page .profile-tab:hover {
    background: #f1f5fb;
}

body.ayin-page .profile-tab.active {
    border-color: #d9e5f7;
    color: var(--r27c-blue-600);
    background: #eaf2ff;
}

body.ayin-page .profile-tab-panel {
    padding: clamp(20px, 3vw, 32px);
}

body.ayin-page .profile-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-block-end: 20px;
}

body.ayin-page .profile-avatar-editor {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px;
    border: 1px solid #e7dfd1;
    border-radius: 16px;
    background: #fbfcfe;
}

body.ayin-page .profile-avatar-large {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    flex: 0 0 96px;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(145deg, var(--r27c-blue-500), var(--r27c-navy-900));
    background-size: cover;
    background-position: center;
    font-size: 42px;
    font-weight: 900;
}

body.ayin-page .profile-avatar-large img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

body.ayin-page .profile-form-grid,
body.ayin-page .support-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-block-start: 20px;
}

body.ayin-page .profile-field,
body.ayin-page .support-form label {
    display: grid;
    gap: 8px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 13px;
    transition: border .18s ease, box-shadow .18s ease;
}

body.ayin-page .profile-field > span,
body.ayin-page .support-form label > span {
    font-weight: 800;
}

body.ayin-page .profile-field :where(input, select, textarea),
body.ayin-page .support-form label :where(input, select, textarea) {
    width: 100%;
    min-height: 51px;
    padding: 12px 14px;
    border: 1px solid #dfe3ea;
    border-radius: 12px;
    color: var(--r27c-ink);
    background: #fbfcfe;
}

body.ayin-page .profile-field textarea,
body.ayin-page .support-form textarea {
    min-height: 120px;
    resize: vertical;
}

body.ayin-page .profile-field-wide,
body.ayin-page .support-field-wide {
    grid-column: 1 / -1;
}

body.ayin-page .profile-form-actions,
body.ayin-page .support-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-block-start: 20px;
}

body.ayin-page .profile-referral-grid,
body.ayin-page .support-ticket-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

body.ayin-page .profile-referral-grid article,
body.ayin-page .support-ticket-meta-grid article {
    display: grid;
    gap: 8px;
    padding: 17px;
    border: 1px solid #e5dfd4;
    border-radius: 14px;
    background: #fbfcfe;
}

body.ayin-page .profile-referral-grid span,
body.ayin-page .support-ticket-meta-grid span {
    color: var(--r27c-muted);
    font-size: 12px;
}

body.ayin-page .profile-copy-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block: 18px;
    padding: 18px;
    border-radius: 15px;
    background: linear-gradient(135deg, #edf5ff, #fff8e7);
}

body.ayin-page .profile-copy-card strong {
    display: block;
    margin-block-start: 5px;
    direction: ltr;
    overflow-wrap: anywhere;
}

body.ayin-page .ayin-info-panel {
    padding: 16px;
    border: 1px solid #d7e5f6;
    border-radius: 14px;
    color: #35516f;
    background: #f2f7fd;
}

body.ayin-page .ayin-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

body.ayin-page .ayin-security-card {
    padding: 20px;
    border: 1px solid #e4dccf;
    border-radius: 16px;
    background: #fbfcfe;
}

/* Notifications */
body.ayin-page .ayin-notification-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
}

body.ayin-page .notification-summary-card {
    min-height: 126px;
    padding: 20px;
    border-radius: 17px;
    box-shadow: var(--r27c-shadow);
}

body.ayin-page .notification-summary-card :where(span, strong, small) {
    position: relative;
    z-index: 2;
    color: inherit !important;
    opacity: 1 !important;
}

body.ayin-page .notification-summary-card.blue { color: #fff; background: linear-gradient(135deg, #1f6ed4, #0f4ca4); }
body.ayin-page .notification-summary-card.green { color: #fff; background: linear-gradient(135deg, #2cb661, #138d43); }
body.ayin-page .notification-summary-card.gold { color: var(--r27c-ink); background: linear-gradient(135deg, #ffe6a2, #f1c659); }
body.ayin-page .notification-summary-card.gray { color: var(--r27c-ink); background: linear-gradient(135deg, #edf2f8, #dfe7f1); }
body.ayin-page .notification-summary-card.purple { color: #fff; background: linear-gradient(135deg, #8065d9, #5842ae); }

body.ayin-page .notifications-panel {
    margin-block-start: 20px;
    padding: 24px;
}

body.ayin-page .notification-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

body.ayin-page .notification-filters button {
    padding: 9px 14px;
    border: 1px solid #dfe4ec;
    border-radius: 11px;
    color: #667085;
    background: #fff;
    font-weight: 800;
}

body.ayin-page .notification-filters button.active {
    border-color: #c9dcf6;
    color: var(--r27c-blue-600);
    background: #eaf2ff;
}

body.ayin-page .notification-item {
    border-radius: 15px;
}

body.ayin-page .notification-item.unread {
    border-color: #bad4f6;
    background: #f1f7ff;
}

/* Support */
body.ayin-page .support-availability {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.ayin-page .support-availability > span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #2dc762;
    box-shadow: 0 0 0 7px rgba(45, 199, 98, .13);
}

body.ayin-page .support-availability small {
    display: block;
    margin-block-start: 4px;
    color: rgba(255, 255, 255, .65);
}

body.ayin-page .support-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-block: 20px;
}

body.ayin-page .support-contact-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 13px;
    padding: 20px;
}

body.ayin-page .support-contact-card .ayin-btn {
    grid-column: 1 / -1;
}

body.ayin-page .support-contact-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #edf4ff;
    font-size: 23px;
}

body.ayin-page .support-contact-card small,
body.ayin-page .support-contact-card p {
    color: var(--r27c-muted);
}

body.ayin-page .support-contact-card p {
    min-height: 42px;
    margin: 7px 0 0;
    font-size: 13px;
}

body.ayin-page .support-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
    gap: 18px;
}

body.ayin-page .support-form-card,
body.ayin-page .support-faq-card,
body.ayin-page .support-history,
body.ayin-page .support-ticket-details {
    padding: 24px;
}

body.ayin-page .ayin-live-badge {
    padding: 8px 12px;
    border-radius: 999px;
    color: #116b32;
    background: #eaf9ef;
    font-size: 12px;
    font-weight: 900;
}

body.ayin-page .support-upload {
    padding: 18px !important;
    border: 1px dashed #b9c8dc !important;
    background: #f8fbff;
}

body.ayin-page .support-faq-card details {
    border-bottom: 1px solid #e8e1d6;
    padding-block: 13px;
}

body.ayin-page .support-faq-card summary {
    cursor: pointer;
    font-weight: 900;
}

body.ayin-page .support-faq-card p {
    color: var(--r27c-muted);
    line-height: 1.8;
}

body.ayin-page .support-history {
    margin-block-start: 20px;
}

body.ayin-page .support-ticket-list {
    display: grid;
    gap: 10px;
}

body.ayin-page .support-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e4dfd6;
    border-radius: 14px;
    color: var(--r27c-ink);
    background: #fbfcfe;
}

body.ayin-page .support-ticket-row > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

body.ayin-page .support-ticket-row > div:first-child {
    display: grid;
}

body.ayin-page .support-ticket-row span {
    color: var(--r27c-muted);
    font-size: 12px;
}

body.ayin-page .support-priority,
body.ayin-page .support-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

body.ayin-page .support-priority.normal { color: #235a97; background: #eaf3ff; }
body.ayin-page .support-priority.high,
body.ayin-page .support-priority.urgent { color: #9d2b35; background: #fff0f1; }
body.ayin-page .support-priority.low { color: #4d657b; background: #eef2f5; }
body.ayin-page .support-status.open { color: #915f00; background: #fff5d7; }
body.ayin-page .support-status.in_progress { color: #235a97; background: #eaf3ff; }
body.ayin-page .support-status.resolved { color: #116b32; background: #eaf9ef; }
body.ayin-page .support-status.closed { color: #566273; background: #edf0f3; }

body.ayin-page .support-ticket-hero-meta {
    display: flex;
    gap: 9px;
}

body.ayin-page .support-ticket-details {
    margin-block-start: 20px;
}

body.ayin-page .support-ticket-message {
    margin-block: 20px;
    padding: 20px;
    border-radius: 15px;
    background: #f8fafc;
}

body.ayin-page .support-ticket-message p {
    white-space: pre-wrap;
    line-height: 1.9;
}

body.ayin-page .support-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.ayin-page .support-attachments h2 {
    width: 100%;
}

body.ayin-page .support-attachments a {
    padding: 10px 13px;
    border: 1px solid #dce5f1;
    border-radius: 11px;
    background: #f4f8fd;
}

body.ayin-page .support-ticket-actions {
    margin-block-start: 22px;
}

body.ayin-page .ayin-btn {
    border-radius: 12px;
    font-weight: 900;
}

body.ayin-page .ayin-btn-primary {
    background: linear-gradient(135deg, #1765ca, #0b438f);
    box-shadow: 0 12px 28px rgba(21, 89, 183, .2);
}

body.ayin-page .ayin-btn-primary:hover {
    filter: brightness(1.05);
    translate: 0 -1px;
}

body.ayin-page .ayin-btn-gold {
    background: linear-gradient(135deg, var(--r27c-gold-400), var(--r27c-gold-500));
}

body.ayin-page .ayin-btn-light {
    border: 1px solid #d9e1eb;
    color: var(--r27c-blue-600);
    background: #fff;
}

body.ayin-page button[disabled],
body.ayin-page .ayin-btn[aria-disabled='true'] {
    opacity: .58;
    filter: grayscale(.15);
}

@media (max-width: 1180px) {
    body.ayin-page .dashboard-shell { grid-template-columns: 240px minmax(0, 1fr); gap: 18px; }
    body.ayin-page .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ayin-page .ayin-notification-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.ayin-page .profile-referral-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    body.ayin-page .ayin-topbar-inner { flex-wrap: wrap; padding-block: 8px; }
    body.ayin-page .ayin-brand { order: 1; }
    body.ayin-page .ayin-top-actions { order: 2; margin-inline-start: auto; }
    body.ayin-page .ayin-nav { order: 3; width: 100%; justify-content: flex-start; }
    body.ayin-page .dashboard-shell { display: block; }
    body.ayin-page .side-panel { display: none; }
    body.ayin-page .ayin-unified-hero,
    body.ayin-page .hero-dashboard,
    body.ayin-page .utility-hero,
    body.ayin-page .profile-hero { min-height: auto; }
    body.ayin-page .support-main-grid { grid-template-columns: 1fr; }
    body.ayin-page .product-details-layout { grid-template-columns: 1fr; }
    body.ayin-page .product-details-image,
    body.ayin-page .product-details-info { min-height: auto; }
}

@media (max-width: 760px) {
    :root { --r27c-header-height: 64px; }
    body.ayin-page .ayin-container { width: min(100% - 24px, 1240px); }
    body.ayin-page .ayin-topbar { position: relative; }
    body.ayin-page .ayin-nav { display: none; }
    body.ayin-page .ayin-brand img,
    body.ayin-page .ayin-brand svg { max-width: 132px; }
    body.ayin-page .ayin-account-link { max-width: 42vw; padding-inline: 12px; }
    body.ayin-page .dashboard-shell { padding-block: 18px 90px; }
    body.ayin-page .ayin-unified-hero,
    body.ayin-page .hero-dashboard,
    body.ayin-page .utility-hero,
    body.ayin-page .profile-hero,
    body.ayin-page .checkout-hero { flex-direction: column; align-items: stretch; gap: 20px; padding: 25px 20px; border-radius: 20px; }
    body.ayin-page :where(.hero-dashboard, .utility-hero, .profile-hero) h1 { font-size: 34px; }
    body.ayin-page .referral-box,
    body.ayin-page .profile-completion-card,
    body.ayin-page .support-availability { width: 100%; }
    body.ayin-page .stats-grid,
    body.ayin-page .ayin-notification-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ayin-page .stat-card { min-height: 132px; padding: 17px; }
    body.ayin-page .web-grid-2,
    body.ayin-page .ayin-dashboard-grid { grid-template-columns: 1fr; }
    body.ayin-page .ayin-order-strip { grid-template-columns: 1fr; }
    body.ayin-page .support-contact-grid { grid-template-columns: 1fr; }
    body.ayin-page .support-ticket-row { align-items: flex-start; flex-direction: column; }
    body.ayin-page .profile-form-grid,
    body.ayin-page .support-form-grid,
    body.ayin-page .ayin-security-grid,
    body.ayin-page .profile-referral-grid,
    body.ayin-page .support-ticket-meta-grid { grid-template-columns: 1fr; }
    body.ayin-page .profile-avatar-editor { align-items: flex-start; }
    body.ayin-page .profile-copy-card { align-items: stretch; flex-direction: column; }
    body.ayin-page .profile-tabs { position: sticky; inset-block-start: 0; z-index: 5; }
    body.ayin-page .cart-item-v3 { grid-template-columns: 82px minmax(0, 1fr); }
    body.ayin-page .auth-shell { display: block; }
    body.ayin-page .auth-form-side,
    body.ayin-page .auth-showcase { min-height: auto; }
    body.ayin-page .auth-showcase { padding-block: 44px; }
    body.ayin-page .auth-form-wrap { width: min(100% - 28px, 610px); }
}

@media (max-width: 480px) {
    body.ayin-page .ayin-top-actions .ayin-account-link span { max-width: 95px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.ayin-page .stats-grid,
    body.ayin-page .ayin-notification-summary-grid { grid-template-columns: 1fr; }
    body.ayin-page .profile-avatar-editor { flex-direction: column; }
    body.ayin-page .profile-tab-panel { padding: 17px; }
    body.ayin-page .profile-section-heading,
    body.ayin-page .utility-section-head { align-items: flex-start; flex-direction: column; }
}