/* <inline asset> */
@charset "UTF-8"; 

/* /ayoub_website/static/src/scss/ayoub_homepage.scss */
 :root{--bg: oklch(0.10 0.004 260); --surface: oklch(0.185 0.005 260); --surface-2: oklch(0.29 0.007 260); --accent: oklch(0.78 0.16 155); --accent-ink: oklch(0.15 0.02 155); --text: oklch(0.97 0.002 260); --text-2: oklch(0.68 0.008 260); --text-3: oklch(0.48 0.008 260); --border: oklch(1 0 0 / 0.08); --border-str: oklch(1 0 0 / 0.16); --scrim: oklch(0 0 0 / 0.55); --r-card: 14px; --r-lg: 20px; --r-pill: 100px; --sidebar-w: 248px; --layout-max: 1240px; --topbar-h: 56px; --nav-h: 64px; --bp: 900px;}body:has(.ayoub-fans){margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased;}body:has(.ayoub-fans), body:has(.ayoub-fans) #wrapwrap, body:has(.ayoub-fans) #wrap{padding: 0 !important; margin: 0 !important; max-width: none !important; background: var(--bg) !important; color: var(--text);}body:has(.ayoub-fans) main:not(.scroll){padding: 0 !important; margin: 0 !important;}body:has(.ayoub-fans) #wrapwrap{min-height: 100vh; min-height: 100dvh;}.ayoub-fans{box-sizing: border-box;}.ayoub-fans *, .ayoub-fans *::before, .ayoub-fans *::after{box-sizing: border-box;}.ayoub-fans ::selection{background: oklch(0.78 0.16 155/0.35);}.ayoub-fans a{color: inherit; text-decoration: none;}.ayoub-fans img{display: block; max-width: 100%;}.ayoub-fans .layout{display: flex; min-height: 100vh; min-height: 100dvh;}@media (min-width: 900px){body:has(.ayoub-fans){background: oklch(0.07 0.004 260);}.ayoub-fans .layout{max-width: var(--layout-max); margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border);}}.ayoub-fans .sidebar{display: none;}@media (min-width: 900px){.ayoub-fans .sidebar{display: flex; flex-direction: column; width: var(--sidebar-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 20px 14px; border-right: 1px solid var(--border); background: var(--bg);}}.ayoub-fans .sidebar .brand{display: flex; align-items: center; gap: 10px; padding: 6px 8px 22px;}.ayoub-fans .side-nav{display: flex; flex-direction: column; gap: 4px;}.ayoub-fans .side-link{display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; color: var(--text-2); font-size: 15px; font-weight: 600;}.ayoub-fans .side-link svg{flex-shrink: 0;}.ayoub-fans .side-link:hover{background: var(--surface); color: var(--text);}.ayoub-fans .side-link.is-active{background: var(--surface); color: var(--text);}.ayoub-fans .side-link.is-active svg{color: var(--accent);}.ayoub-fans .side-cta{margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 16px;}.ayoub-fans .side-mini{color: var(--text-3); font-size: 12px; text-align: center;}.ayoub-fans .main{flex: 1; min-width: 0; display: flex; flex-direction: column;}.ayoub-fans .topbar{position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; padding-top: env(safe-area-inset-top); background: oklch(0.1 0.004 260/0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);}@media (min-width: 900px){.ayoub-fans .topbar{display: none;}}.ayoub-fans .brand-mark{width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.ayoub-fans .brand-mark span{width: 12px; height: 12px; border-radius: 3px; background: var(--accent-ink);}.ayoub-fans .brand-name{font-size: 17px; font-weight: 800; letter-spacing: -0.01em;}.ayoub-fans .brand-name b{color: var(--accent);}.ayoub-fans .icon-btn{width: 40px; height: 40px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--text);}.ayoub-fans .icon-btn:active{background: var(--surface);}.ayoub-fans .scroll{flex: 1; min-height: 0; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px) !important;}@media (min-width: 900px){.ayoub-fans .scroll{padding-bottom: 48px !important;}}.ayoub-fans .btn{font-size: 14px; font-weight: 700; border: 0; cursor: pointer; border-radius: var(--r-pill); padding: 11px 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;}.ayoub-fans .btn-primary{background: var(--accent); color: var(--accent-ink);}.ayoub-fans .btn-ghost{background: transparent; color: var(--text); border: 1px solid var(--border-str);}.ayoub-fans .btn-neutral{background: var(--surface-2); color: var(--text);}.ayoub-fans .btn-block{width: 100%;}.ayoub-fans .btn-sm{font-size: 13px; padding: 8px 14px;}.ayoub-fans .btn:active{filter: brightness(0.94);}.ayoub-fans .topbar-default{justify-content: space-between; gap: 10px;}.ayoub-fans .topbar-default .brand{display: flex; align-items: center; gap: 8px; min-width: 0;}.ayoub-fans .topbar-actions{display: flex; align-items: center; gap: 8px; flex-shrink: 0;}.ayoub-fans .hero{position: relative;}.ayoub-fans .hero-cover{height: 132px; overflow: hidden; position: relative; background: oklch(0.18 0.006 260);}.ayoub-fans .hero-cover img{width: 100%; height: 100%; object-fit: cover; display: block;}.ayoub-fans .hero-cover::after{content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, oklch(0.1 0.004 260/0.7)); pointer-events: none;}@media (min-width: 900px){.ayoub-fans .hero-cover{height: 200px;}}.ayoub-fans .hero-body{padding: 0 16px 16px; max-width: 980px; margin: 0 auto; width: 100%;}@media (min-width: 900px){.ayoub-fans .hero-body{padding: 0 32px 20px;}}.ayoub-fans .hero-top{display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -32px;}@media (min-width: 900px){.ayoub-fans .hero-top{margin-top: -44px;}}.ayoub-fans .hero-actions{display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0;}.ayoub-fans .avatar{width: 72px; height: 72px; border-radius: 20px; background: var(--accent); border: 4px solid var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;}.ayoub-fans .avatar img{width: 100%; height: 100%; object-fit: cover; display: block;}@media (min-width: 900px){.ayoub-fans .avatar{width: 96px; height: 96px; border-radius: 26px;}}.ayoub-fans .hero-name{font-size: 20px; font-weight: 800; margin: 12px 0 0;}@media (min-width: 900px){.ayoub-fans .hero-name{font-size: 26px;}}.ayoub-fans .hero-bio{color: oklch(0.78 0.01 260); font-size: 13px; line-height: 1.5; margin-top: 6px; max-width: 560px;}@media (min-width: 900px){.ayoub-fans .hero-bio{font-size: 14px;}}.ayoub-fans .hero-stats{display: flex; gap: 20px; margin-top: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border);}.ayoub-fans .hero-stats b{color: var(--text); font-size: 15px; font-weight: 700;}.ayoub-fans .hero-stats span{color: var(--text-3); font-size: 13px;}.ayoub-fans .content{max-width: 980px; margin: 0 auto; width: 100%;}@media (min-width: 900px){.ayoub-fans .content{padding: 0 16px;}}.ayoub-fans .tabs{display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none;}.ayoub-fans .tabs::-webkit-scrollbar{display: none;}.ayoub-fans .tabs-tags{padding: 14px 16px 6px;}.ayoub-fans .tabs-creators{padding: 4px 16px 10px; border-top: 1px solid var(--border); margin-top: 2px;}.ayoub-fans .tabs-creators-label{flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-right: 4px;}.ayoub-fans .tab{flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s;}.ayoub-fans .tab.is-active{color: var(--accent-ink); background: var(--accent); border-color: var(--accent);}.ayoub-fans .tab-owned.is-active{color: var(--text); background: var(--surface-2); border-color: var(--border-str);}.ayoub-fans .tab-creator{font-size: 12px; font-weight: 600; color: var(--text-2); background: transparent; border: 1px dashed oklch(0.45 0.06 300/0.45); padding: 7px 13px 7px 11px;}.ayoub-fans .tab-creator::before{content: "@"; margin-right: 5px; font-weight: 700; color: oklch(0.72 0.12 300);}.ayoub-fans .tab-creator.is-active{color: oklch(0.92 0.04 300); background: oklch(0.28 0.06 300/0.55); border: 1px solid oklch(0.62 0.14 300/0.7); box-shadow: inset 0 0 0 1px oklch(0.75 0.1 300/0.15);}.ayoub-fans .tab-creator.is-active::before{color: oklch(0.82 0.14 300);}.ayoub-fans .af-card-creator{color: oklch(0.78 0.1 300); font-weight: 600;}.ayoub-fans .grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 10px 12px 4px;}@media (min-width: 900px){.ayoub-fans .grid{grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding: 14px 16px 4px;}}.ayoub-fans .af-card{cursor: pointer; display: block; background: transparent; border: 0; padding: 0;}.ayoub-fans .thumb{position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-card); overflow: hidden; background: repeating-linear-gradient(135deg, oklch(0.23 0.006 260), oklch(0.23 0.006 260) 10px, oklch(0.2 0.006 260) 10px, oklch(0.2 0.006 260) 20px);}.ayoub-fans .thumb-img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) saturate(1.05); transform: scale(1.04);}.ayoub-fans .badge{position: absolute; font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 4px; line-height: 1;}.ayoub-fans .badge-tl{top: 6px; left: 6px;}.ayoub-fans .badge-br{bottom: 6px; right: 6px;}.ayoub-fans .badge-price{background: oklch(0.78 0.16 155/0.92); color: var(--accent-ink);}.ayoub-fans .badge-sub{background: oklch(0.78 0.16 155/0.16); color: var(--accent); backdrop-filter: blur(6px);}.ayoub-fans .badge-new{background: var(--accent); color: var(--accent-ink);}.ayoub-fans .badge-time{background: var(--scrim); color: #fff; font-weight: 600; backdrop-filter: blur(4px);}.ayoub-fans .unlock-chip{background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; padding: 6px 12px; border-radius: var(--r-pill);}.ayoub-fans .af-card-title{font-size: 13px; font-weight: 600; margin: 8px 2px 0; line-height: 1.25;}.ayoub-fans .af-card-meta{color: var(--text-3); font-size: 12px; margin: 2px 2px 0;}.ayoub-fans .feed-empty{grid-column: 1 / -1; color: var(--text-3); font-size: 14px; padding: 24px 8px; text-align: center;}.ayoub-fans .topbar-back{gap: 4px; padding-left: 4px;}.ayoub-fans .topbar-title{font-size: 16px; font-weight: 700;}.ayoub-fans .topbar-brand-back{display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 0 8px; padding-top: env(safe-area-inset-top);}.ayoub-fans .topbar-brand-back .topbar-slot{display: flex; align-items: center; min-width: 40px;}.ayoub-fans .topbar-brand-back .topbar-slot:last-child{justify-content: flex-end;}.ayoub-fans .topbar-brand{display: flex; align-items: center; gap: 8px; justify-self: center;}.ayoub-fans .library-content{padding-bottom: 8px;}.ayoub-fans .section-head{padding: 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 2px;}@media (min-width: 900px){.ayoub-fans .section-head{padding: 0 16px;}}.ayoub-fans .section-head-inner{padding: 20px 0 16px;}.ayoub-fans .section-title{margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em;}@media (min-width: 900px){.ayoub-fans .section-title{font-size: 22px;}}.ayoub-fans .section-sub{margin: 6px 0 0; color: var(--text-3); font-size: 13px;}.ayoub-fans .library-empty{grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px 48px; margin: 8px 12px 0; border: 1px dashed var(--border-str); border-radius: var(--r-lg); background: oklch(0.185 0.005 260/0.45);}.ayoub-fans .library-empty-title{margin: 0; font-size: 16px; font-weight: 700; color: var(--text);}.ayoub-fans .library-empty-sub{margin: 0 0 8px; color: var(--text-3); font-size: 13px; line-height: 1.5; max-width: 280px;}.ayoub-fans .thumb-unlocked .thumb-img-clear{filter: none; transform: none;}.ayoub-fans .library-grid{padding-top: 14px;}.ayoub-fans .mobilenav{position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; align-items: center; justify-content: space-around; background: oklch(0.1 0.004 260/0.92); backdrop-filter: blur(12px); border-top: 1px solid var(--border);}@media (min-width: 900px){.ayoub-fans .mobilenav{display: none;}}.ayoub-fans .mobilenav a{width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--text-3);}.ayoub-fans .mobilenav a.is-active{color: var(--accent);}