@font-face {
    font-family: "Inter WIFAR";
    src: url("../fonts/Inter-Variable.bff0f6e3b9e2.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face { font-family: "Tajawal WIFAR"; src: url("../fonts/Tajawal-Regular.2901ad38b474.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Tajawal WIFAR"; src: url("../fonts/Tajawal-Medium.debafb02d02d.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Tajawal WIFAR"; src: url("../fonts/Tajawal-Bold.fbbe4353b7a8.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Tajawal WIFAR"; src: url("../fonts/Tajawal-ExtraBold.e9f43c4a6a45.ttf") format("truetype"); font-style: normal; font-weight: 800; font-display: swap; }

:root {
    color-scheme: dark;
    --bg: #0c0609;
    --bg-soft: #13090e;
    --surface: rgba(27, 13, 20, .82);
    --surface-solid: #1c0e15;
    --surface-2: #26111b;
    --border: rgba(255, 149, 184, .14);
    --border-strong: rgba(255, 113, 158, .28);
    --text: #fff7fa;
    --text-soft: #d7c2cb;
    --muted: #947c87;
    --primary: #f43f75;
    --primary-2: #c71f50;
    --primary-soft: rgba(244, 63, 117, .13);
    --danger: #ff476d;
    --warning: #ffba59;
    --success: #59d99b;
    --info: #71b7ff;
    --shadow: 0 28px 70px rgba(0, 0, 0, .38);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --sidebar: 260px;
}

* { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; }

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(195, 29, 80, .12), transparent 30%),
        radial-gradient(circle at 92% 42%, rgba(121, 15, 50, .11), transparent 32%),
        linear-gradient(145deg, #090406 0%, #12070c 46%, #0c0609 100%);
    color: var(--text);
    font-family: "Inter WIFAR", "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.65;
    overflow-x: hidden;
}

html[dir="rtl"] body { font-family: "Tajawal WIFAR", "Segoe UI", sans-serif; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -3;
    opacity: .2;
    background-image:
        linear-gradient(120deg, transparent 0 46%, rgba(255,255,255,.025) 46% 47%, transparent 47% 100%),
        linear-gradient(30deg, transparent 0 48%, rgba(244,63,117,.035) 48% 49%, transparent 49% 100%);
    background-size: 96px 96px, 132px 132px;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.password-control { position: relative; }
.password-control .form-control { padding-inline-end: 54px; }
.password-toggle { position: absolute; top: 50%; inset-inline-end: 8px; display: grid; width: 40px; height: 40px; place-items: center; transform: translateY(-50%); border: 0; border-radius: 11px; background: rgba(255,255,255,.045); color: #ff87ab; cursor: pointer; font-size: 19px; }
.password-toggle:hover { background: var(--primary-soft); color: #fff; }

.ambient { position: fixed; border-radius: 999px; filter: blur(90px); pointer-events: none; z-index: -2; }
.ambient-one { width: 360px; height: 360px; background: rgba(211, 28, 83, .12); top: -120px; right: -90px; }
.ambient-two { width: 400px; height: 400px; background: rgba(107, 12, 43, .1); bottom: -160px; left: -120px; }

.glass-panel { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.page-frame { width: min(1480px, 100%); min-height: 100vh; margin: 0 auto; padding: 18px 32px 0; }
.admin-shell .page-frame { width: auto; margin-left: var(--sidebar); padding-left: 34px; }
html[dir="rtl"] .admin-shell .page-frame { margin-left: 0; margin-right: var(--sidebar); padding-left: 32px; padding-right: 34px; }

.topbar {
    position: sticky;
    top: 14px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 12px 16px 12px 18px;
    border-radius: 22px;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { display: block; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(224, 38, 92, .22)); }
.brand-art { position: relative; display: block; width: 80px; height: 56px; flex: 0 0 80px; overflow: hidden; }
.brand-art img { position: absolute; top: 50%; left: 50%; width: 120px; max-width: none; height: 80px; object-fit: contain; transform: translate(-50%, -50%); }
.brand-art-sidebar { width: 60px; height: 50px; flex-basis: 60px; }
.brand-art-sidebar img { width: 105px; height: 70px; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-copy small { color: var(--muted); font-size: 11px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.nav-link { padding: 9px 12px; color: var(--text-soft); font-weight: 600; font-size: 13px; border-radius: 10px; transition: .2s; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.045); }
.user-chip { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 12px; color: var(--text-soft); font-size: 13px; }
.language-form { display: flex; }
.icon-button, .mobile-menu-button { width: 40px; height: 40px; border: 1px solid var(--border); background: rgba(255,255,255,.035); border-radius: 12px; cursor: pointer; font-weight: 800; transition: .2s; }
.icon-button:hover, .mobile-menu-button:hover { border-color: var(--border-strong); background: var(--primary-soft); }
.mobile-menu-button { display: none; font-size: 19px; }

.notice-stack { position: sticky; top: 0; z-index: 60; display: grid; width: 100%; }
.top-notice { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 36px; padding: 7px 16px; background: linear-gradient(90deg, #9f123f, #df2c63, #9f123f); color: white; font-size: 12px; font-weight: 700; text-align: center; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.notice-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.14); }

.platform-promotions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 26px 0 0; }
.promotion-strip { display: flex; align-items: center; gap: 13px; min-height: 76px; padding: 10px; border-radius: 17px; transition: transform .2s, border-color .2s; }
a.promotion-strip:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.promotion-strip img { width: 72px; height: 54px; border-radius: 12px; object-fit: cover; }
.promotion-strip span { display: flex; flex-direction: column; }
.promotion-strip small { color: var(--primary); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.promotion-strip strong { font-size: 14px; }

.main-content { min-height: calc(100vh - 180px); padding: 42px 0 60px; }
.footer { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 70px; color: #77616b; font-size: 11px; border-top: 1px solid rgba(255,255,255,.05); }
.footer .version { padding: 3px 7px; background: rgba(255,255,255,.035); border-radius: 6px; font-size: 9px; }
.admin-shell .footer { display: none; }
.creator-mobile-nav, .public-mobile-nav { display: none; }

.message-stack { position: fixed; top: 100px; right: 22px; z-index: 100; display: grid; gap: 10px; width: min(390px, calc(100% - 32px)); }
html[dir="rtl"] .message-stack { right: auto; left: 22px; }
.flash { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: #25131b; box-shadow: var(--shadow); animation: slide-in .35s ease; }
.flash-success { border-color: rgba(89,217,155,.35); }
.flash-error { border-color: rgba(255,71,109,.4); }
.flash-warning { border-color: rgba(255,186,89,.4); }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 18px; border: 1px solid transparent; border-radius: 13px; cursor: pointer; font-weight: 750; font-size: 13px; transition: transform .18s, filter .18s, border-color .18s, background .18s; }
.button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.button-primary { color: white; background: linear-gradient(135deg, #fa447b, #c31b4d); box-shadow: 0 13px 28px rgba(203, 27, 78, .25); }
.button-secondary { color: #fff; background: rgba(244,63,117,.1); border-color: rgba(244,63,117,.25); }
.button-ghost { color: var(--text-soft); background: rgba(255,255,255,.025); border-color: var(--border); }
.button-danger { color: #fff; background: linear-gradient(135deg, #f04469, #a80e36); }
.button-small { min-height: 40px; padding: 8px 13px; }
.button-full { width: 100%; }

.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; color: #ff709d; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.eyebrow > span { width: 22px; height: 2px; border-radius: 9px; background: var(--primary); }
html[dir="rtl"] .eyebrow { letter-spacing: 0; }

.landing-panel { position: relative; min-height: 520px; padding: 70px clamp(28px, 7vw, 100px); border-radius: 36px; overflow: hidden; }
.landing-panel::before { content: ""; position: absolute; width: 440px; height: 440px; right: -110px; top: -120px; border: 1px solid rgba(244,63,117,.18); border-radius: 50%; box-shadow: 0 0 0 70px rgba(244,63,117,.02), 0 0 0 140px rgba(244,63,117,.015); }
html[dir="rtl"] .landing-panel::before { right: auto; left: -110px; }
.landing-panel h1 { position: relative; z-index: 2; max-width: 790px; margin: 0; font-size: clamp(42px, 7vw, 84px); line-height: .98; letter-spacing: -.065em; }
html[dir="rtl"] .landing-panel h1 { line-height: 1.15; letter-spacing: -.025em; }
.landing-panel > p { position: relative; z-index: 2; max-width: 680px; margin: 28px 0; color: var(--text-soft); font-size: 17px; line-height: 1.8; }
.landing-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.verified-pill { display: inline-flex; padding: 12px 16px; border: 1px solid rgba(89,217,155,.2); border-radius: 999px; background: rgba(89,217,155,.08); color: #87e8b9; font-weight: 700; }
.landing-orbit { position: absolute; width: 420px; height: 300px; right: 1.5%; bottom: -70px; opacity: .8; }
html[dir="rtl"] .landing-orbit { right: auto; left: 1.5%; }
.orbit-card { position: absolute; display: block; width: 150px; height: 210px; border: 1px solid rgba(255,133,171,.22); border-radius: 24px; background: linear-gradient(155deg, rgba(244,63,117,.2), rgba(42,16,27,.8)); box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.orbit-a { left: 72px; top: 26px; transform: rotate(-13deg); }
.orbit-b { left: 190px; top: 0; transform: rotate(10deg); }
.orbit-dot { position: absolute; width: 130px; height: 130px; right: 0; top: 30px; border-radius: 50%; background: rgba(244,63,117,.14); filter: blur(2px); }
.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.feature-card { padding: 25px; border-radius: 20px; }
.feature-card > span { color: var(--primary); font-size: 11px; font-weight: 800; }
.feature-card h2 { margin: 16px 0 8px; font-size: 18px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 13px; }

.creator-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 30px; border-radius: 28px; }
.creator-avatar { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 26px; background: linear-gradient(145deg, #fa4b80, #9c113b); color: white; font-size: 32px; font-weight: 900; box-shadow: 0 18px 40px rgba(213,33,87,.23); }
.verified-label { display: inline-flex; margin-bottom: 6px; color: #ff7da6; font-size: 11px; font-weight: 800; }
.creator-heading h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.04em; }
.creator-heading p { max-width: 700px; margin: 6px 0 0; color: var(--text-soft); }
.creator-count { display: flex; flex-direction: column; align-items: flex-end; padding: 0 14px; }
html[dir="rtl"] .creator-count { align-items: flex-start; }
.creator-count strong { font-size: 34px; line-height: 1; }
.creator-count span { color: var(--muted); font-size: 11px; }
.section-head { display: flex; justify-content: space-between; align-items: end; margin: 42px 4px 18px; }
.section-head h2 { margin: 0; font-size: 28px; letter-spacing: -.035em; }
.ads-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ad-card { border-radius: 24px; overflow: hidden; transition: transform .25s, border-color .25s; }
.ad-card:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.ad-image-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-2); }
.ad-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.ad-card:hover .ad-image-wrap img { transform: scale(1.035); }
.live-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(17,8,12,.75); font-size: 10px; font-weight: 800; backdrop-filter: blur(12px); }
html[dir="rtl"] .live-badge { left: auto; right: 14px; }
.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(89,217,155,.12); }
.ad-body { padding: 21px; }
.ad-body h3 { min-height: 50px; margin: 0 0 14px; font-size: 19px; line-height: 1.35; }
.ad-meta { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; color: var(--muted); font-size: 11px; border-top: 1px solid rgba(255,255,255,.055); }
.ad-meta time { color: var(--text-soft); }
.website-link { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; padding: 12px 0; color: #ff83aa; font-size: 12px; font-weight: 700; border-top: 1px solid rgba(255,255,255,.055); }
.discount-box { margin-top: 12px; padding: 14px; border: 1px dashed rgba(255,105,153,.32); border-radius: 16px; background: rgba(244,63,117,.065); }
.discount-box > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.code-copy { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0; border: 0; background: none; cursor: pointer; text-align: start; }
.code-copy strong { color: #ff7ba5; font-size: 18px; letter-spacing: .04em; }
.code-copy small { color: var(--muted); font-size: 9px; }
.locked-code { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.025); }
.lock-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.locked-code div { display: flex; flex-direction: column; min-width: 0; }
.locked-code strong { font-size: 11px; }
.locked-code small { color: var(--muted); font-size: 9px; }
.locked-code a { color: #ff7ba5; font-size: 11px; font-weight: 800; }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 310px; padding: 50px 24px; border-radius: 28px; text-align: center; }
.empty-state > span { display: grid; place-items: center; min-width: 62px; height: 62px; margin-bottom: 18px; padding: 0 10px; border-radius: 20px; background: var(--primary-soft); color: var(--primary); font-size: 22px; font-weight: 800; }
.empty-state h1, .empty-state h2 { margin: 0 0 9px; }
.empty-state p { max-width: 520px; margin: 0 0 20px; color: var(--muted); }

.auth-layout { display: grid; place-items: center; min-height: calc(100vh - 240px); padding: 10px 0; }
.auth-card { width: min(480px, 100%); padding: 36px; border-radius: 28px; }
.wide-auth { width: min(760px, 100%); }
.auth-icon { display: grid; place-items: center; width: 52px; min-width: 52px; height: 52px; margin-bottom: 25px; border-radius: 17px; background: linear-gradient(145deg, rgba(244,63,117,.26), rgba(244,63,117,.07)); border: 1px solid rgba(244,63,117,.2); color: #ff78a2; font-weight: 900; }
.creator-auth-icon { border-radius: 50%; }
.admin-auth-icon { background: linear-gradient(145deg, #8e1139, #3a0b1c); color: white; }
.auth-heading > span { color: var(--primary); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.auth-heading h1 { margin: 8px 0 10px; font-size: 32px; letter-spacing: -.04em; }
.auth-heading p { margin: 0 0 25px; color: var(--muted); }
.auth-foot { margin: 20px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.auth-foot a { color: #ff729e; font-weight: 800; }
.otp-card { text-align: center; }
.otp-card .auth-icon { margin-left: auto; margin-right: auto; width: 76px; letter-spacing: 3px; }
.invite-summary { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 20px 0; padding: 15px; border-radius: 14px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 12px; }
.invite-summary strong { color: var(--text); }

.modern-form { display: grid; gap: 17px; }
.two-column-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-span, .two-column-form > .form-errors { grid-column: 1 / -1; }
.field-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-group > label { color: var(--text-soft); font-size: 11px; font-weight: 700; }
.required { color: var(--primary); margin-inline-start: 3px; }
.form-control { width: 100%; min-height: 48px; padding: 12px 14px; color: var(--text); background: rgba(7,3,5,.56); border: 1px solid var(--border); border-radius: 13px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.form-control:hover { border-color: rgba(255,149,184,.23); }
.form-control:focus { border-color: rgba(255,91,142,.62); background: rgba(14,6,10,.76); box-shadow: 0 0 0 4px rgba(244,63,117,.09); }
textarea.form-control { min-height: 110px; resize: vertical; }
select.form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 36px; }
html[dir="rtl"] select.form-control { background-position: 18px 20px, 13px 20px; }
select[multiple].form-control { min-height: 140px; background-image: none; }
input[type="file"].form-control { padding: 8px; }
input[type="file"]::file-selector-button { margin-inline-end: 10px; padding: 8px 12px; border: 0; border-radius: 9px; background: var(--primary-soft); color: #ff7da6; font-weight: 700; cursor: pointer; }
input[type="datetime-local"], input[type="date"] { color-scheme: dark; }
.help-text { color: var(--muted); font-size: 10px; }
.field-errors { display: grid; gap: 3px; color: #ff7897; font-size: 10px; }
.form-errors { padding: 12px 14px; border: 1px solid rgba(255,71,109,.28); border-radius: 12px; background: rgba(255,71,109,.07); color: #ff8aa5; font-size: 11px; }
.form-errors p { margin: 0; }
.otp-control { min-height: 70px; text-align: center; font-size: 32px; font-weight: 900; letter-spacing: 14px; padding-left: 28px; }
.field-switch { justify-content: center; }
.switch-row { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 62px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.02); cursor: pointer; }
.switch-row > span:first-child { display: flex; flex-direction: column; }
.switch-row small { color: var(--muted); font-weight: 400; }
.switch-input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui { position: relative; width: 44px; height: 25px; border-radius: 999px; background: #3b2730; transition: .2s; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #a38c96; transition: .2s; }
.switch-input:checked + .switch-ui { background: var(--primary); }
.switch-input:checked + .switch-ui::after { transform: translateX(19px); background: white; }
html[dir="rtl"] .switch-ui::after { left: auto; right: 3px; }
html[dir="rtl"] .switch-input:checked + .switch-ui::after { transform: translateX(-19px); }
.modern-form ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.modern-form ul label { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 12px; color: var(--text-soft); font-size: 11px; cursor: pointer; }
.modern-form ul input { accent-color: var(--primary); }

.dashboard-hero { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 30px; border-radius: 26px; }
.dashboard-hero h1 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.dashboard-hero p { margin: 7px 0 0; color: var(--muted); }
.hero-actions, .heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.status-callout { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 14px 17px; border-radius: 15px; }
.status-callout strong { font-size: 12px; }
.status-callout span { color: var(--text-soft); font-size: 11px; }
.status-callout.warning { background: rgba(255,186,89,.08); border: 1px solid rgba(255,186,89,.2); }
.status-callout.danger { background: rgba(255,71,109,.08); border: 1px solid rgba(255,71,109,.2); }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.admin-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-card { display: flex; min-width: 0; min-height: 130px; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 20px; }
.stat-card > span { color: var(--muted); font-size: 11px; }
.stat-card > strong { overflow: hidden; text-overflow: ellipsis; font-size: 28px; letter-spacing: -.04em; }
.stat-card strong em { color: var(--muted); font-size: 10px; font-style: normal; letter-spacing: 0; }
.stat-card small { color: var(--muted); font-size: 9px; }
.creator-ad-list { display: grid; gap: 12px; }
.creator-ad { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 17px; padding: 12px; border-radius: 19px; }
.creator-ad > img { width: 110px; height: 82px; border-radius: 14px; object-fit: cover; }
.creator-ad-info { min-width: 0; }
.creator-ad-info h3 { margin: 6px 0 3px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creator-ad-info p { margin: 0; color: var(--muted); font-size: 10px; }
.creator-ad-info code { display: inline-block; margin-top: 6px; color: #ff7da6; font-size: 11px; }
.creator-ad-actions, .row-actions { display: flex; align-items: center; gap: 6px; }
.icon-action, .row-actions > a, .row-actions button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.025); color: var(--text-soft); cursor: pointer; }
.row-actions form { display: flex; margin: 0; }
.danger-action { color: #ff6688 !important; }
.mini-switch { position: relative; width: 44px; height: 25px; border: 0; border-radius: 999px; background: #3b2730; cursor: pointer; }
.mini-switch i { position: absolute; width: 19px; height: 19px; left: 3px; top: 3px; border-radius: 50%; background: #9d8791; transition: .2s; }
.mini-switch.on { background: var(--primary); }
.mini-switch.on i { transform: translateX(19px); background: white; }
html[dir="rtl"] .mini-switch i { left: auto; right: 3px; }
html[dir="rtl"] .mini-switch.on i { transform: translateX(-19px); }
.status-badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.status-active, .status-sent, .status-paid { color: #83eab7; background: rgba(89,217,155,.1); }
.status-scheduled, .status-pending, .status-sending, .status-due { color: #ffd18a; background: rgba(255,186,89,.1); }
.status-expired, .status-failed, .status-void { color: #ff849e; background: rgba(255,71,109,.1); }
.status-muted, .status-disabled, .status-cancelled { color: #a9949d; background: rgba(255,255,255,.055); }
.status-partial { color: #91c8ff; background: rgba(113,183,255,.1); }

.form-page { width: min(960px, 100%); margin: 0 auto; }
.admin-form-page { width: min(1050px, 100%); }
.page-heading { margin-bottom: 24px; }
.page-heading h1 { margin: 0; font-size: 36px; letter-spacing: -.045em; }
.page-heading p { margin: 8px 0 0; color: var(--muted); }
.back-link { display: inline-flex; margin-bottom: 20px; color: #ff7da6; font-size: 12px; font-weight: 700; }
.form-surface { padding: 28px; border-radius: 24px; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 8px; }
.confirm-card, .confirm-message { width: min(620px, 100%); margin: 8vh auto; padding: 34px; border-radius: 28px; text-align: center; }
.warning-symbol { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 20px; background: rgba(255,71,109,.12); color: #ff6687; font-size: 28px; font-weight: 900; }
.confirm-card h1 { margin: 0; }
.confirm-card p { color: var(--muted); }
.confirm-card .form-actions { justify-content: center; margin-top: 22px; }

.admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 80; display: flex; width: var(--sidebar); flex-direction: column; padding: 18px 14px; background: rgba(18,8,13,.95); border-right: 1px solid var(--border); backdrop-filter: blur(25px); }
html[dir="rtl"] .admin-sidebar { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--border); }
.sidebar-head { display: flex; align-items: center; gap: 11px; min-height: 62px; padding: 0 6px 17px; border-bottom: 1px solid rgba(255,255,255,.055); }
.sidebar-head .brand-mark { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
.sidebar-head > div { display: flex; min-width: 0; flex-direction: column; }
.sidebar-head strong { font-size: 13px; }
.sidebar-head small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-head button { display: none; margin-inline-start: auto; border: 0; background: none; font-size: 25px; cursor: pointer; }
.sidebar-nav { display: grid; gap: 4px; margin-top: 18px; overflow-y: auto; }
.sidebar-nav a { display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 9px 11px; border-radius: 12px; color: #ae98a2; font-size: 11px; font-weight: 650; transition: .18s; }
.sidebar-nav a span { display: grid; width: 22px; height: 22px; place-items: center; color: #82606e; font-size: 13px; }
.sidebar-nav a:hover, .sidebar-nav a.active { color: #fff; background: rgba(244,63,117,.09); }
.sidebar-nav a:hover span, .sidebar-nav a.active span { color: #ff6e9b; }
.sidebar-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 15px 8px 0; color: #604c55; font-size: 8px; border-top: 1px solid rgba(255,255,255,.045); }
.sidebar-foot small { padding: 3px 5px; border-radius: 5px; background: rgba(255,255,255,.035); }
.menu-backdrop { display: none; }
.admin-shell .topbar .brand { display: none; }
.admin-shell .topbar { justify-content: flex-end; }
.admin-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.admin-page-heading h1 { margin: 0; font-size: 36px; letter-spacing: -.045em; }
.admin-page-heading p { margin: 6px 0 0; color: var(--muted); }
.admin-stats .stat-card { min-height: 145px; }
.dashboard-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.table-panel { overflow: hidden; border-radius: 22px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.055); }
.panel-heading span { color: var(--primary); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.panel-heading h2 { margin: 3px 0 0; font-size: 17px; }
.compact-list { display: grid; }
.compact-list a { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 62px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.045); transition: background .18s; }
.compact-list a:last-child { border-bottom: 0; }
.compact-list a:hover { background: rgba(255,255,255,.025); }
.compact-list a > div { display: flex; min-width: 0; flex-direction: column; }
.compact-list strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.compact-list span, .compact-list time { color: var(--muted); font-size: 9px; }
.mini-empty { padding: 28px 20px; color: var(--muted); text-align: center; font-size: 12px; }
.search-bar { display: flex; gap: 9px; margin-bottom: 15px; padding: 10px; border-radius: 17px; }
.search-bar input { width: 100%; border: 0; outline: 0; padding: 0 10px; color: var(--text); background: transparent; }
.responsive-table { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { padding: 13px 16px; color: var(--muted); background: rgba(255,255,255,.018); font-size: 9px; text-align: start; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
td { padding: 14px 16px; color: var(--text-soft); border-top: 1px solid rgba(255,255,255,.045); font-size: 11px; vertical-align: middle; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(255,255,255,.018); }
.identity-cell { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.identity-cell > span { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; background: var(--primary-soft); color: #ff709d; font-weight: 900; }
.identity-cell > div { display: flex; min-width: 0; flex-direction: column; }
.identity-cell strong { max-width: 190px; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.identity-cell small { max-width: 190px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mono-link, code { color: #ff79a3; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; }
.yes-mark { color: var(--success); }
.no-mark { color: var(--danger); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 62px; border-top: 1px solid rgba(255,255,255,.05); }
.pagination a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; }
.pagination span { color: var(--muted); font-size: 10px; }
.card-list { display: grid; gap: 11px; }
.admin-user-card { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; padding: 16px; border-radius: 18px; }
.admin-user-meta { display: flex; align-items: end; flex-direction: column; gap: 5px; }
.admin-user-meta small { color: var(--muted); font-size: 9px; }
.admin-ad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-ad-card { display: grid; grid-template-columns: 125px 1fr auto; align-items: center; gap: 15px; padding: 12px; border-radius: 19px; }
.admin-ad-card > img { width: 125px; height: 96px; border-radius: 13px; object-fit: cover; }
.admin-ad-card > div:nth-child(2) { min-width: 0; }
.admin-ad-card h3 { margin: 7px 0 2px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.admin-ad-card p, .admin-ad-card small { display: block; margin: 0; color: var(--muted); font-size: 9px; }
.notice-admin-list { display: grid; gap: 11px; }
.notice-admin-card { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; padding: 18px; border-radius: 18px; }
.notice-preview { min-width: 0; }
.notice-preview strong, .notice-preview p { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-preview strong { font-size: 12px; }
.notice-preview p { color: var(--muted); font-size: 10px; }
.notice-meta { display: flex; align-items: end; flex-direction: column; gap: 5px; }
.notice-meta small { color: var(--muted); font-size: 9px; }
.finance-section { margin-top: 16px; }
.warning-panel { display: flex; align-items: center; gap: 16px; text-align: start; }
.warning-panel > span { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 18px; background: rgba(255,186,89,.1); color: var(--warning); font-size: 26px; }
.warning-panel h1 { margin: 0; font-size: 23px; }
.warning-panel p { margin: 5px 0 0; color: var(--muted); }
.message-preview { margin-top: 22px; padding: 20px; border: 1px solid var(--border); border-radius: 17px; background: rgba(4,2,3,.32); text-align: start; }
.message-preview > span { color: var(--primary); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.message-preview h2 { margin: 6px 0 12px; }
.message-preview p { color: var(--text-soft); }
.message-preview small { color: var(--muted); }
.recipient-list { margin-top: 14px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 14px; text-align: start; }
.recipient-list summary { cursor: pointer; color: var(--text-soft); font-size: 11px; font-weight: 700; }
.recipient-list div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.recipient-list code { padding: 5px 8px; border-radius: 8px; background: var(--primary-soft); }
.confirm-message .form-actions { justify-content: center; margin-top: 20px; }
.message-detail-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 16px; }
.message-detail-grid > .message-preview { margin-top: 0; border-radius: 22px; }
.recipient-results { display: grid; max-height: 520px; overflow-y: auto; }
.recipient-results > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.045); }
.recipient-results small { grid-column: 1 / -1; color: #ff809b; font-size: 9px; }

@media (max-width: 1180px) {
    .admin-stats { grid-template-columns: repeat(3, 1fr); }
    .ads-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-ad-grid { grid-template-columns: 1fr; }
    .landing-orbit { opacity: .42; }
}

@media (max-width: 900px) {
    :root { --sidebar: 270px; }
    .page-frame, .admin-shell .page-frame, html[dir="rtl"] .admin-shell .page-frame { width: 100%; margin: 0; padding: 12px 16px 0; }
    .admin-sidebar { transform: translateX(-105%); transition: transform .25s; box-shadow: 30px 0 70px rgba(0,0,0,.5); }
    html[dir="rtl"] .admin-sidebar { transform: translateX(105%); }
    .admin-sidebar.open { transform: translateX(0); }
    .menu-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
    .menu-backdrop.open { display: block; }
    .sidebar-head button { display: block; }
    .admin-shell .topbar .brand { display: flex; }
    .admin-shell .topbar { justify-content: space-between; }
    .mobile-menu-button { display: inline-grid; place-items: center; }
    .dashboard-columns, .message-detail-grid { grid-template-columns: 1fr; }
    .landing-panel { min-height: 500px; padding: 55px 34px; }
    .landing-panel h1 { max-width: 650px; }
    .feature-row { grid-template-columns: 1fr; }
    .feature-card { min-height: 150px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .creator-hero { grid-template-columns: auto 1fr; }
    .creator-count { grid-column: 1 / -1; align-items: flex-start; padding: 8px 0 0; }
    .admin-page-heading { align-items: flex-start; flex-direction: column; }
    .admin-page-heading > .button, .heading-actions { align-self: stretch; }
}

@media (max-width: 680px) {
    body { font-size: 14px; }
    .page-frame, .admin-shell .page-frame, html[dir="rtl"] .admin-shell .page-frame { padding: 8px 10px 0; }
    .topbar { top: 7px; min-height: 64px; padding: 9px 10px; border-radius: 17px; }
    .brand-mark { width: 39px; height: 39px; flex-basis: 39px; border-radius: 12px; }
    .brand-copy small, .nav-link, .user-chip { display: none; }
    .button-small { min-height: 38px; padding: 8px 10px; }
    .main-content { padding: 27px 0 42px; }
    .creator-shell .main-content { padding-bottom: 100px; }
    .platform-promotions { margin-top: 16px; }
    .promotion-strip { min-height: 68px; }
    .landing-panel { min-height: 520px; padding: 42px 24px; border-radius: 26px; }
    .landing-panel h1 { font-size: 45px; }
    html[dir="rtl"] .landing-panel h1 { font-size: 39px; }
    .landing-panel > p { font-size: 14px; }
    .landing-orbit { width: 280px; height: 230px; right: -50px; }
    html[dir="rtl"] .landing-orbit { right: auto; left: -50px; }
    .orbit-card { width: 105px; height: 150px; }
    .orbit-a { left: 40px; top: 55px; }
    .orbit-b { left: 125px; top: 42px; }
    .feature-card { min-height: auto; }
    .creator-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px; }
    .creator-heading p { font-size: 12px; }
    .creator-count, html[dir="rtl"] .creator-count { align-items: center; }
    .ads-grid { grid-template-columns: 1fr; }
    .ad-card:hover { transform: none; }
    .section-head h2 { font-size: 24px; }
    .auth-card { padding: 26px 19px; border-radius: 23px; }
    .auth-heading h1 { font-size: 28px; }
    .two-column-form { grid-template-columns: 1fr; }
    .two-column-form > * { grid-column: 1 !important; }
    .modern-form ul { grid-template-columns: 1fr; }
    .form-control { font-size: 16px; }
    .dashboard-hero { align-items: flex-start; flex-direction: column; padding: 24px; }
    .hero-actions { width: 100%; justify-content: stretch; }
    .hero-actions .button { flex: 1; }
    .stat-grid, .admin-stats { grid-template-columns: 1fr 1fr; }
    .stat-card { min-height: 115px; padding: 16px; }
    .stat-card > strong { font-size: 22px; }
    .creator-stats .stat-card:last-child { grid-column: 1 / -1; }
    .creator-ad { grid-template-columns: 82px 1fr; }
    .creator-ad > img { width: 82px; height: 70px; }
    .creator-ad-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.05); }
    .page-heading h1, .admin-page-heading h1 { font-size: 30px; }
    .form-surface { padding: 20px 15px; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .button { width: 100%; }
    .admin-user-card { grid-template-columns: 1fr auto; }
    .admin-user-meta { grid-column: 1 / -1; align-items: flex-start; }
    .admin-ad-card { grid-template-columns: 92px 1fr; }
    .admin-ad-card > img { width: 92px; height: 78px; }
    .admin-ad-card .row-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .notice-admin-card { grid-template-columns: 1fr auto; }
    .notice-meta { grid-column: 1 / -1; align-items: flex-start; }
    .search-bar { flex-direction: column; }
    .search-bar input { min-height: 42px; }
    .warning-panel { align-items: flex-start; }
    .warning-panel h1 { font-size: 19px; }
    .confirm-card, .confirm-message { margin: 3vh auto; padding: 25px 18px; }
    .message-stack { top: 78px; right: 10px; width: calc(100% - 20px); }
    html[dir="rtl"] .message-stack { left: 10px; }
    .creator-mobile-nav { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 65; display: flex; width: min(420px, calc(100% - 20px)); min-height: 66px; align-items: center; justify-content: space-around; transform: translateX(-50%); border-radius: 20px; padding: 8px 12px; }
    .creator-mobile-nav a { display: flex; min-width: 74px; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 9px; font-weight: 700; }
    .creator-mobile-nav a span { display: grid; place-items: center; width: 28px; height: 28px; color: #ff7ca6; font-size: 16px; }
    .creator-mobile-nav .mobile-add span { width: 40px; height: 40px; margin-top: -24px; border-radius: 14px; background: linear-gradient(145deg, #fa4b80, #bd1749); color: white; box-shadow: 0 12px 28px rgba(224,38,92,.35); }
}

@media (max-width: 420px) {
    .brand-copy strong { max-width: 105px; }
    .brand-art { width: 67px; height: 50px; flex-basis: 67px; }
    .brand-art img { width: 105px; height: 70px; }
    .top-actions { gap: 5px; }
    .top-actions .button-small { font-size: 10px; }
    .landing-panel h1 { font-size: 39px; }
    .stat-grid, .admin-stats { grid-template-columns: 1fr; }
    .creator-stats .stat-card:last-child { grid-column: auto; }
    .locked-code { grid-template-columns: auto 1fr; }
    .locked-code > a { grid-column: 1 / -1; text-align: center; padding-top: 7px; border-top: 1px solid var(--border); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* v1.1 type and visual system: comfortably readable on phones and desktops. */
small, .brand-copy small, .promotion-strip small, .creator-count span, .help-text,
.field-errors, .form-errors, .stat-card small, .identity-cell small, .admin-user-meta small,
.admin-ad-card small, .notice-meta small, .compact-list span, .compact-list time { font-size: 13px; }
.brand-copy strong { font-size: 17px; }
.nav-link, .user-chip, .button, .top-notice, .feature-card p, .website-link,
.auth-foot, .invite-summary, .field-group > label, .modern-form ul label,
.status-callout strong, .status-callout span, .stat-card > span, .creator-ad-info p,
.creator-ad-info code, .back-link, .sidebar-head strong, .sidebar-nav a, td,
.pagination span, .recipient-list summary { font-size: 14px; }
.eyebrow, .verified-label, .feature-card > span, .discount-box > span,
.auth-heading > span, .panel-heading span, th, .message-preview > span { font-size: 12px; }
.status-badge, .code-copy small, .locked-code small { font-size: 12px; }
.locked-code strong, .locked-code a { font-size: 13px; }
.footer { font-size: 13px; }
.footer .version, .sidebar-foot { font-size: 11px; }
.form-control { min-height: 54px; font-size: 16px; }
.ad-body h3 { min-height: auto; font-size: 21px; }
.creator-heading p, .empty-state p, .dashboard-hero p, .auth-heading p { font-size: 16px; }
.sidebar-nav a { min-height: 49px; font-weight: 700; }
.sidebar-head small { font-size: 12px; }
.plain-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.approve-action { color: var(--success) !important; }
.button-warning { color: #16100a; background: linear-gradient(135deg, #ffd488, #efaa3d); }

.creator-background { position: fixed; inset: 0; z-index: -5; overflow: hidden; }
.creator-background img { width: 100%; height: 100%; object-fit: cover; }
.creator-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,3,6,.28), rgba(8,3,6,.55)); }
.creator-background ~ .ambient { opacity: .35; }
.creator-background ~ .page-frame .glass-panel { background: rgba(22,10,16,.64); border-color: rgba(255,255,255,.17); backdrop-filter: blur(25px) saturate(1.15); -webkit-backdrop-filter: blur(25px) saturate(1.15); }
.background-preview { aspect-ratio: 16/6; margin: 20px 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 20px; }
.background-preview img { width: 100%; height: 100%; object-fit: cover; }

.manager-card { display: flex; width: 100%; max-width: 460px; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; color: var(--text); border-radius: 18px; cursor: pointer; text-align: start; }
.manager-avatar { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 15px; background: var(--primary-soft); color: #ff8eb2; font-weight: 800; }
.manager-card > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.manager-card small { color: var(--muted); }
.manager-card i { color: var(--primary); font-style: normal; }
.contact-dialog { position: fixed; width: min(500px, calc(100% - 28px)); padding: 34px; color: var(--text); border-radius: 26px; }
.contact-dialog::backdrop { background: rgba(5,2,4,.76); backdrop-filter: blur(8px); }
.contact-dialog h2 { margin: 0; font-size: 30px; }
.contact-dialog p { color: var(--text-soft); }
.dialog-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.04); cursor: pointer; }
.contact-links { display: grid; gap: 10px; margin-top: 22px; }
.contact-links a { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.035); color: #ff91b3; font-weight: 700; overflow-wrap: anywhere; }
.creator-support { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding: 18px; border-radius: 20px; }
.creator-support p { margin: 0; color: var(--text-soft); }
.discount-box > span { display: flex; align-items: center; justify-content: space-between; }
.discount-box > span b { padding: 4px 9px; border-radius: 999px; background: rgba(244,63,117,.15); color: #ff8fb2; font-size: 14px; }
.ad-image-wrap > a { display: block; width: 100%; height: 100%; }
.friendly-empty h1 { font-size: clamp(34px, 6vw, 58px); }
.confirm-icon { display: block; margin-bottom: 15px; font-size: 42px; }

@media (max-width: 760px) {
    body { font-size: 16px; }
    .creator-heading p, .empty-state p, .dashboard-hero p, .auth-heading p { font-size: 15px; }
    .creator-mobile-nav { overflow-x: auto; justify-content: flex-start; gap: 14px; }
    .creator-mobile-nav a { min-width: 72px; font-size: 12px; }
    .creator-support { align-items: stretch; flex-direction: column; }
}

/* v1.3 visitor discovery, favorites and creator analytics */
.favorite-inline { margin-top: 15px; }
.favorite-button { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.035); color: var(--text-soft); cursor: pointer; font-weight: 750; transition: .2s; }
.favorite-button:hover { border-color: var(--border-strong); background: var(--primary-soft); color: #fff; }
.favorite-button > span { color: #ff7ca6; font-size: 19px; line-height: 1; }
.favorite-button.is-favorite { border-color: rgba(244,63,117,.32); background: var(--primary-soft); color: #ff9aba; }

.creator-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.insight-card { display: flex; min-height: 150px; align-items: center; gap: 18px; padding: 24px; border-radius: 23px; }
.insight-icon { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; border-radius: 18px; background: var(--primary-soft); color: #ff83aa; font-size: 25px; }
.insight-card > div { display: grid; }
.insight-card small { color: var(--text-soft); font-weight: 700; }
.insight-card strong { margin: 2px 0; font-size: 34px; line-height: 1.1; }
.insight-card p { margin: 0; color: var(--muted); font-size: 13px; }

.directory-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 20px; padding: 30px; border-radius: 28px; }
.directory-heading h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); letter-spacing: -.045em; }
.directory-heading p { max-width: 680px; margin: 8px 0 0; color: var(--text-soft); }
.creator-search { display: flex; width: min(440px, 100%); flex: 0 0 min(440px, 42%); gap: 8px; }
.creator-search .form-control { min-width: 0; }
.creator-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.creator-directory-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 22px; border-radius: 23px; transition: transform .2s, border-color .2s; }
.creator-directory-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.directory-avatar { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 19px; background: linear-gradient(145deg, #fa4b80, #9c113b); color: #fff; font-size: 24px; font-weight: 900; }
.directory-copy { min-width: 0; }
.directory-copy > span { color: #ff7da6; font-size: 12px; font-weight: 800; }
.directory-copy h2 { margin: 3px 0 5px; overflow: hidden; font-size: 21px; text-overflow: ellipsis; white-space: nowrap; }
.directory-copy p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.directory-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.directory-actions > .button { flex: 1; }
.favorite-icon-button { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.035); color: #ff82aa; cursor: pointer; font-size: 20px; }
.favorite-icon-button.is-favorite { border-color: rgba(244,63,117,.34); background: var(--primary-soft); }
.table-subline { display: block; color: var(--muted); white-space: nowrap; }

/* v1.5 administration analytics and Account Manager access rules */
.analytics-filter { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(160px, 1fr)) auto; align-items: end; gap: 12px; margin-bottom: 18px; padding: 18px; border-radius: 22px; }
.analytics-filter label { display: grid; gap: 7px; color: var(--text-soft); font-size: 13px; font-weight: 750; }
.analytics-filter .button { min-height: 54px; }
.analytics-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.analytics-summary .insight-card { min-height: 138px; padding: 20px; }
.analytics-summary .insight-card strong { font-size: 30px; }
.analytics-summary .analytics-name { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.panel-heading > strong { color: #ff89ad; font-size: 20px; }
.panel-heading > strong small { color: var(--muted); font-size: 12px; font-weight: 600; }
.permission-set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }
.permission-set-card { display: flex; min-height: 255px; flex-direction: column; padding: 20px; border-radius: 22px; }
.permission-set-card header, .permission-set-card footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.permission-set-card header span { color: #ff7ca6; font-size: 12px; font-weight: 800; }
.permission-set-card h2 { margin: 2px 0 0; font-size: 22px; }
.permission-set-card header > strong { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: var(--primary-soft); color: #ff84a9; }
.permission-set-card > p { margin: 13px 0; color: var(--text-soft); font-size: 14px; }
.permission-chip-list { display: flex; flex: 1; align-content: flex-start; flex-wrap: wrap; gap: 7px; margin: 13px 0 18px; }
.permission-chip-list span { height: fit-content; padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.025); color: var(--text-soft); font-size: 12px; }
.permission-set-card footer { padding-top: 14px; border-top: 1px solid var(--border); }
.permission-set-card footer > small { color: var(--muted); }
.manager-permission-bulk { margin-bottom: 18px; padding: 22px; border-radius: 24px; }
.manager-permission-bulk .panel-heading { margin-bottom: 16px; }

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

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

@media (max-width: 680px) {
    .public-shell:has(.public-mobile-nav) .main-content { padding-bottom: 100px; }
    .directory-heading { align-items: stretch; flex-direction: column; padding: 23px 20px; }
    .directory-heading h1 { font-size: 34px; }
    .creator-search { width: 100%; flex: none; flex-direction: column; }
    .creator-directory-grid, .creator-insights { grid-template-columns: 1fr; }
    .creator-directory-card:hover { transform: none; }
    .insight-card { min-height: 128px; padding: 19px; }
    .favorite-inline { display: flex; justify-content: center; }
    .public-mobile-nav { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 65; display: flex; width: min(420px, calc(100% - 20px)); min-height: 66px; align-items: center; justify-content: space-around; transform: translateX(-50%); border-radius: 20px; padding: 8px 9px; }
    .public-mobile-nav a { display: flex; min-width: 64px; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 700; }
    .public-mobile-nav a span { display: grid; width: 28px; height: 28px; place-items: center; color: #ff7ca6; font-size: 16px; }
    .analytics-filter, .analytics-summary, .permission-set-grid { grid-template-columns: 1fr; }
    .analytics-filter .button { width: 100%; }
    .permission-set-card { min-height: auto; }
}

/* v1.2 interface refinement */
html[dir="rtl"] body { font-size: 18px; line-height: 1.75; font-weight: 500; }
html[dir="rtl"] .brand-copy strong { font-size: 18px; }
html[dir="rtl"] .brand-copy small,
html[dir="rtl"] .creator-count span,
html[dir="rtl"] .help-text,
html[dir="rtl"] .identity-cell small,
html[dir="rtl"] .admin-user-meta small,
html[dir="rtl"] .contact-links small { font-size: 14px; }
html[dir="rtl"] .nav-link,
html[dir="rtl"] .user-chip,
html[dir="rtl"] .button,
html[dir="rtl"] .sidebar-nav a,
html[dir="rtl"] .field-group > label,
html[dir="rtl"] td { font-size: 15px; }
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .verified-label,
html[dir="rtl"] th { font-size: 13px; }
html[dir="rtl"] .creator-heading p,
html[dir="rtl"] .empty-state p,
html[dir="rtl"] .dashboard-hero p,
html[dir="rtl"] .auth-heading p { font-size: 17px; }

.appearance-page { width: min(1060px, 100%); margin: 0 auto; }
.appearance-heading { max-width: 720px; }
.appearance-form { overflow: hidden; border-radius: 28px; }
.appearance-preview-card { padding: 24px 24px 0; }
.appearance-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.appearance-preview-head > div { display: flex; flex-direction: column; }
.appearance-preview-head strong { font-size: 17px; }
.appearance-preview-head small { color: var(--muted); }
.appearance-form .background-preview { aspect-ratio: 16 / 6; margin: 0; border-radius: 20px; }
.background-preview-empty { display: grid; min-height: 260px; place-items: center; background: linear-gradient(145deg, rgba(244,63,117,.08), rgba(255,255,255,.025)); }
.background-preview-empty > div { display: grid; justify-items: center; gap: 8px; color: var(--muted); }
.background-preview-empty span { color: var(--primary); font-size: 38px; }
.appearance-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px; }
.upload-field { grid-column: 1 / -1; }
.custom-file-picker { position: relative; display: flex; min-height: 88px; align-items: center; gap: 15px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: 18px; background: rgba(255,255,255,.025); cursor: pointer; transition: .2s; }
.custom-file-picker:hover { border-color: var(--primary); background: var(--primary-soft); }
.custom-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-picker-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 15px; background: var(--primary-soft); color: #ff8db1; font-size: 24px; }
.file-picker-copy { display: flex; min-width: 0; flex-direction: column; }
.file-picker-copy strong { font-size: 16px; }
.file-picker-copy small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.setting-switch { position: relative; display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.025); cursor: pointer; }
.setting-switch > span { display: flex; min-width: 0; flex-direction: column; }
.setting-switch small { color: var(--muted); }
.setting-switch input { position: absolute; opacity: 0; pointer-events: none; }
.setting-switch i { position: relative; width: 50px; height: 29px; flex: 0 0 50px; border-radius: 999px; background: #44303a; transition: .2s; }
.setting-switch i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 21px; height: 21px; border-radius: 50%; background: #ae98a2; transition: .2s; }
.setting-switch input:checked + i { background: var(--primary); }
.setting-switch input:checked + i::after { transform: translateX(21px); background: #fff; }
html[dir="rtl"] .setting-switch i::after { left: auto; right: 4px; }
html[dir="rtl"] .setting-switch input:checked + i::after { transform: translateX(-21px); }
.danger-switch { border-color: rgba(255,71,109,.18); }
.danger-switch strong { color: #ff849e; }
.danger-switch input:checked + i { background: var(--danger); }
.sticky-form-actions { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); background: rgba(19,9,14,.93); backdrop-filter: blur(20px); }
.sticky-form-actions .button { min-width: 150px; }

.admin-account-form-page { width: min(1180px, 100%); margin: 0 auto; }
.admin-account-form { display: grid; gap: 18px; }
.admin-form-section { padding: 26px; border-radius: 26px; }
.form-section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.form-section-heading > span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; background: var(--primary-soft); color: #ff8daf; font-size: 13px; font-weight: 800; }
.form-section-heading h2 { margin: 0; font-size: 22px; }
.form-section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.admin-identity-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.admin-identity-fields .field-switch { grid-column: 1 / -1; }
.permissions-heading { align-items: center; }
.selected-permissions { display: flex; min-width: 92px; flex-direction: column; align-items: center; margin-inline-start: auto; padding: 9px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.025); }
.selected-permissions strong { color: #ff85aa; font-size: 22px; line-height: 1.1; }
.selected-permissions small { color: var(--muted); }
.permission-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.permission-group { overflow: hidden; border: 1px solid var(--border); border-radius: 19px; background: rgba(255,255,255,.018); }
.permission-group header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); }
.permission-group header > div:first-child { display: flex; flex-direction: column; }
.permission-group h3 { margin: 0; font-size: 16px; }
.permission-group header span { color: var(--muted); font-size: 13px; }
.permission-group-actions { display: flex; gap: 6px; }
.permission-group-actions button { padding: 6px 9px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.025); color: var(--text-soft); cursor: pointer; font-size: 12px; }
.permission-group-actions button:hover { border-color: var(--border-strong); color: #fff; }
.permission-options { display: grid; padding: 8px; }
.permission-options label { position: relative; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 10px; min-height: 48px; padding: 9px 10px; border-radius: 12px; color: var(--text-soft); cursor: pointer; font-size: 14px; transition: .18s; }
.permission-options label:hover { background: rgba(255,255,255,.035); color: #fff; }
.permission-options input { position: absolute; opacity: 0; pointer-events: none; }
.permission-check { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #59404b; border-radius: 7px; color: transparent; font-size: 13px; transition: .18s; }
.permission-options input:checked + .permission-check { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(244,63,117,.09); }

.row-actions-labeled { flex-wrap: wrap; }
.row-actions .table-action { display: inline-flex; width: auto; min-width: 72px; height: 36px; gap: 6px; padding: 0 10px; white-space: nowrap; font-size: 12px; }
.table-action-danger { border-color: rgba(255,71,109,.22) !important; color: #ff819d !important; background: rgba(255,71,109,.06) !important; }
.table-action-danger:hover { background: rgba(255,71,109,.13) !important; }

.contact-links a { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 2px 12px; }
.contact-links a > span { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--primary-soft); }
.contact-links a > strong { color: var(--text); }
.contact-links a > small { color: var(--muted); }
.contact-empty { display: grid; justify-items: center; gap: 10px; padding: 22px; border: 1px dashed var(--border); border-radius: 16px; color: var(--muted); text-align: center; }
.contact-empty > span { font-size: 26px; }
.contact-empty p { margin: 0; }

.manager-creator-switcher { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 18px; }
.manager-creator-switcher label { flex: 0 0 auto; color: var(--text-soft); font-weight: 800; }
.manager-creator-switcher select { max-width: 360px; margin-inline-start: auto; }
.is-pinned { border-color: rgba(224, 177, 70, .5) !important; box-shadow: 0 16px 50px rgba(182, 130, 23, .10); }
.pinned-badge { display: inline-flex; width: fit-content; align-items: center; gap: 5px; margin-bottom: 6px; padding: 5px 9px; border: 1px solid rgba(236, 191, 78, .35); border-radius: 999px; background: rgba(224, 177, 70, .12); color: #f2ca64; font-size: 12px; font-weight: 800; }
.pin-expiry { display: block; color: #dcb95c !important; }
.pin-menu { position: relative; }
.pin-menu summary { list-style: none; }
.pin-menu summary::-webkit-details-marker { display: none; }
.pin-action { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(236, 191, 78, .32); border-radius: 11px; background: rgba(224, 177, 70, .10); color: #f1c85e; cursor: pointer; filter: saturate(1.25); }
.pin-popover { position: absolute; z-index: 20; inset-inline-end: 0; top: calc(100% + 9px); width: 210px; padding: 13px; border: 1px solid rgba(236, 191, 78, .30); border-radius: 15px; background: #20130f; box-shadow: 0 20px 55px rgba(0,0,0,.45); }
.pin-popover strong { display: block; margin-bottom: 9px; color: #f3d27c; font-size: 13px; }
.pin-popover form { display: grid; gap: 6px; }
.pin-popover button { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; text-align: start; }
.pin-popover button:hover { border-color: rgba(236, 191, 78, .38); background: rgba(224, 177, 70, .10); }
.pin-popover .unpin-button { margin-top: 8px; border-color: rgba(255,71,109,.25); color: #ff91a8; }

@media (max-width: 760px) {
    html[dir="rtl"] body { font-size: 17px; }
    html[dir="rtl"] .creator-heading p,
    html[dir="rtl"] .empty-state p,
    html[dir="rtl"] .dashboard-hero p,
    html[dir="rtl"] .auth-heading p { font-size: 16px; }
    .appearance-preview-card, .appearance-controls, .admin-form-section { padding: 18px; }
    .appearance-controls, .admin-identity-fields, .permission-groups { grid-template-columns: 1fr; }
    .upload-field, .admin-identity-fields .field-switch { grid-column: auto; }
    .appearance-form .background-preview { aspect-ratio: 4 / 3; }
    .background-preview-empty { min-height: 210px; }
    .sticky-form-actions { padding: 12px; }
    .sticky-form-actions .button { min-width: 0; flex: 1; }
    .permissions-heading { align-items: flex-start; flex-wrap: wrap; }
    .selected-permissions { margin-inline-start: 0; }
    .permission-group header { align-items: flex-start; flex-direction: column; }
    .permission-group-actions { width: 100%; }
    .permission-group-actions button { flex: 1; min-height: 36px; }
    .manager-creator-switcher { align-items: stretch; flex-direction: column; }
    .manager-creator-switcher select { width: 100%; max-width: none; margin: 0; }
    .pin-popover { position: fixed; inset-inline: 14px; top: auto; bottom: 86px; width: auto; }
}