:root{
      --yellow:#edb201;
      --violet:#b907ca;
      --black:#000000;

      --vr-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

      --panel: rgba(13, 16, 22, .86);
      --panel-2: rgba(11, 14, 20, .80);
      --panel-border: rgba(255,255,255,.06);
      --muted: rgba(255,255,255,.65);
      --muted2: rgba(255,255,255,.50);

      --r-xl: 26px;
      --r-lg: 18px;
    }

    html, body{ height: 100%; }
    body{
      font-family: var(--vr-font);
      color: rgba(255,255,255,.92);
      background:
        radial-gradient(60% 50% at 50% 25%, rgba(185,7,202,.35) 0%, rgba(0,0,0,1) 58%),
        radial-gradient(45% 35% at 15% 10%, rgba(237,178,1,.12) 0%, rgba(0,0,0,0) 55%),
        #000;
      min-height: 100vh;
    }

    .glass{
      background: var(--panel);
      border: 1px solid var(--panel-border);
      border-radius: var(--r-xl);
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* Sale pill */
    .sale-pill{
      border-radius: 999px;
      padding: 12px 18px;
      background: linear-gradient(90deg, rgba(185,7,202,.85) 0%, rgba(255,255,255,.22) 55%, rgba(0,102,255,.55) 100%);
      border: 1px solid rgba(255,255,255,.08);
      text-transform: uppercase;
      letter-spacing: .6px;
      font-weight: 800;
      font-size: .9rem;
    }

    /* Sidebar */
    .sidebar-wrap{ position: sticky; top: 18px; }
    .sidebar{
      padding: 18px;
      overflow: hidden; /* no scroll on desktop */
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      padding: 6px 10px 14px;
      font-weight: 900;
      font-size: 1.35rem;
      letter-spacing: .5px;
    }
    .brand .p-dot{ color:#ff2b2b; }
    .nav-pill{
      display:flex; align-items:center; gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      color: rgba(255,255,255,.85);
      text-decoration:none;
      border: 1px solid transparent;
      font-weight: 750;
      font-size: 14px;
    }
    .nav-pill:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.06);
      color:#fff;
    }
    .nav-pill.active{
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.08);
      color:#fff;
    }

    /* Topbar */
    .topbar{
      padding: 14px;
      border-radius: 999px;
      background: rgba(13,16,22,.70);
      border: 1px solid rgba(255,255,255,.06);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .searchbar{
      background: rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.08);
      color:#fff;
      border-radius: 999px;
      padding-left: 42px;
      height: 46px;
    }
    .searchbar::placeholder{ color: rgba(255,255,255,.55); }
    .search-icon{
      position:absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255,255,255,.55);
    }

    .btn-join{
      border-radius: 999px;
      padding: 10px 18px;
      font-weight: 900;
    }

    /* Hero */
    .hero .carousel-inner{
      border-radius: var(--r-xl);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.06);
    }
    .hero .carousel-item img{
      height: 320px;
      width: 100%;
      object-fit: cover;
      filter: saturate(1.1) contrast(1.02);
    }
    .hero-overlay{
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.10) 100%);
    }
    .hero-copy{
      position:absolute;
      left: 22px;
      right: 22px;
      bottom: 18px;
      z-index: 2;
    }
    .hero-copy h2{
      margin:0 0 6px;
      font-weight: 950;
      letter-spacing: .2px;
    }
    .hero-copy p{
      margin:0;
      color: rgba(255,255,255,.78);
      max-width: 980px;
    }

    /* Sections */
    .section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      margin-top: 26px;
      margin-bottom: 12px;
    }
    .section-title{
      color: var(--yellow);
      font-weight: 950;
      letter-spacing: .6px;
      text-transform: uppercase;
      margin: 0;
      font-size: 18px;
    }
    .see-all{
      color: rgba(255,255,255,.72);
      text-decoration:none;
      font-weight: 800;
      font-size: 13px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    .see-all:hover{ color:#fff; background: rgba(255,255,255,.07); }

    /* Thumbs */
    .thumb{
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.06);
      height: 100%;
    }
    .thumb .img{
      aspect-ratio: 16 / 10;
      width: 100%;
      overflow: hidden;
    }

    .thumb .img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .thumb .meta{
      padding: 10px 12px 12px;
    }
    .thumb .name{
      font-weight: 900;
      font-size: .95rem;
      margin-bottom: 2px;
      line-height: 1.2;
    }
    .thumb .sub{
      color: var(--muted);
      font-size: .85rem;
    }

    /* Footer panel */
    .footer-panel{
      padding: 26px;
      margin-top: 28px;
    }
    .footer-h{
      color: rgba(255,255,255,.70);
      font-weight: 900;
      margin-bottom: 14px;
    }
    .footer-link{
      display:block;
      color: rgba(255,255,255,.88);
      text-decoration: none;
      padding: 6px 0;
      font-weight: 800;
      font-size: 14px;
    }
    .footer-link small{
      display:block;
      font-weight: 650;
      color: rgba(255,255,255,.55);
      margin-top: 2px;
      font-size: 12px;
    }
    .footer-link:hover{ color:#fff; text-decoration: underline; }
    .social-btn{
      width: 40px; height: 40px;
      border-radius: 999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border: 1px solid rgba(255,255,255,.18);
      color:#fff;
      text-decoration:none;
      margin-right: 10px;
    }
    .social-btn:hover{ background: rgba(255,255,255,.08); }
    .footer-bottom{
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.60);
      font-size: .9rem;
    }
    .rta{
      font-size: 44px;
      font-weight: 950;
      opacity: .40;
      letter-spacing: 1px;
      line-height: 1;
    }

    /* Mobile offcanvas */
    .offcanvas{
      background: rgba(10,12,16,.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    /* OFFCANVAS: only ONE scrollbar */
    #mobileSidebar .offcanvas-body{
      overflow-y: auto;      /* the offcanvas body scrolls */
    }

    #mobileSidebar .sidebar{
      overflow: visible;     /* inner sidebar does NOT scroll */
      max-height: none;
    }

   
   /* Small tweaks */
    @media (max-width: 991.98px){
      .hero .carousel-item img{ height: 230px; }
    }


 /* video page*/
     /* Sale pill */
    .sale-pill{
      border-radius: 999px;
      padding: 12px 18px;
      background: linear-gradient(90deg, rgba(185,7,202,.85) 0%, rgba(255,255,255,.22) 55%, rgba(0,102,255,.55) 100%);
      border: 1px solid rgba(255,255,255,.08);
      text-transform: uppercase;
      letter-spacing: .6px;
      font-weight: 900;
      font-size: .9rem;
    }

    /* Sidebar */
    .sidebar-wrap{ position: sticky; top: 18px; }
    .sidebar{ padding: 18px; overflow: hidden; } /* desktop no scroll */
    .brand{
      display:flex; align-items:center; gap:10px;
      padding: 6px 10px 14px;
      font-weight: 950; font-size: 1.35rem; letter-spacing:.5px;
    }
    .brand .p-dot{ color:#ff2b2b; }
    .nav-pill{
      display:flex; align-items:center; gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      color: rgba(255,255,255,.85);
      text-decoration:none;
      border: 1px solid transparent;
      font-weight: 800;
      font-size: 14px;
    }
    .nav-pill:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.06); color:#fff; }
    .nav-pill.active{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); color:#fff; }

    /* Topbar */
    .topbar{
      padding: 14px;
      border-radius: 999px;
      background: rgba(13,16,22,.70);
      border: 1px solid rgba(255,255,255,.06);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .searchbar{
      background: rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.08);
      color:#fff;
      border-radius: 999px;
      padding-left: 42px;
      height: 46px;
    }
    .searchbar::placeholder{ color: rgba(255,255,255,.55); }
    .search-icon{
      position:absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255,255,255,.55);
    }
    .btn-join{
      border-radius: 999px;
      padding: 10px 18px;
      font-weight: 950;
    }

    /* Breadcrumb */
    .crumbs{
      color: rgba(255,255,255,.60);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: .2px;
    }
    .crumbs a{ color: rgba(255,255,255,.70); text-decoration:none; }
    .crumbs a:hover{ color:#fff; text-decoration: underline; }

    /* Video detail */
    .title{
      color: var(--yellow);
      font-weight: 950;
      letter-spacing: .3px;
      text-transform: uppercase;
      text-decoration: none;
      margin: 0;
      font-size: 20px;
      line-height: 1.2;
    }
    .subtitle{
      margin: 8px 0 0;
      color: rgba(255,255,255,.72);
      font-weight: 600;
      font-size: 14px;
    }

    .badge-chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.22);
      color: rgba(255,255,255,.86);
      font-weight: 900;
      font-size: 12px;
      margin-right: 8px;
      margin-bottom: 8px;
    }

    .action-btn{
      border-radius: 999px;
      font-weight: 900;
      padding: 10px 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.92);
    }
    .action-btn:hover{ background: rgba(255,255,255,.08); color:#fff; }
    .action-btn.primary{
      border: none;
      background: linear-gradient(90deg, rgba(60,150,255,0.95), rgba(0,110,255,0.90));
      box-shadow: 0 12px 30px rgba(0,110,255,0.22);
      color:#fff;
    }

    .stat{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      margin-bottom: 10px;
      font-weight: 800;
      color: rgba(255,255,255,.85);
    }
    .stat small{ color: rgba(255,255,255,.55); font-weight: 800; }

    /* Player */
    .player-wrap{
      border-radius: var(--r-xl);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.35);
      position: relative;
    }
    .player-wrap video{
      width: 100%;
      height: 100%;
      display:block;
      aspect-ratio: 16 / 9;
      background: #000;
    }
    .player-lock{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding: 24px;
      background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.70));
      pointer-events: none; /* visual overlay only */
    }
    .player-lock .box{
      pointer-events: auto;
      max-width: 520px;
      width: 100%;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(10,12,16,.55);
      backdrop-filter: blur(10px);
      padding: 18px;
    }

    /* Tabs */
    .tabs-pill{
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      padding: 6px;
      gap: 6px;
    }
    .tabs-pill .nav-link{
      border-radius: 999px;
      font-weight: 900;
      color: rgba(255,255,255,.72);
      padding: 10px 14px;
    }
    .tabs-pill .nav-link.active{
      background: rgba(255,255,255,.10);
      color: #fff;
    }

    .content-box{
      border-radius: var(--r-xl);
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      padding: 16px;
    }

    /* Related grid */
    .section-head{
      display:flex; align-items:center; justify-content:space-between;
      gap: 12px;
      margin-top: 22px;
      margin-bottom: 12px;
    }
    .section-title{
      color: var(--yellow);
      font-weight: 950;
      letter-spacing: .6px;
      text-transform: uppercase;
      margin: 0;
      font-size: 18px;
    }
    .see-all{
      color: rgba(255,255,255,.72);
      text-decoration:none;
      font-weight: 900;
      font-size: 13px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    .see-all:hover{ color:#fff; background: rgba(255,255,255,.07); }

    .thumb{
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.06);
      height: 100%;
    }
    .thumb .meta{ padding: 10px 12px 12px; }
    .thumb .name{
      font-weight: 950;
      font-size: .95rem;
      margin-bottom: 2px;
      line-height: 1.2;
    }
    .thumb .sub{ color: var(--muted); font-size: .85rem; }

      /* Mobile offcanvas */
    .offcanvas{
      background: rgba(10,12,16,.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    /* OFFCANVAS: only ONE scrollbar */
    #mobileSidebar .offcanvas-body{
    overflow-y: auto;      /* the offcanvas body scrolls */
    }

    #mobileSidebar .sidebar{
    overflow: visible;     /* inner sidebar does NOT scroll */
    max-height: none;
    }

    .content-box button.action-btn.primary.w-100 {
    background: #edb201 !important;
    color: #000 !important;
    font-weight: normal;
    }
    .content-box button.action-btn.primary.w-100:hover {
        background: #695311 !important;
        color: #fff !important;
    }

    .box {
    display: none;
    }

    @media (max-width: 991.98px){
      .player-lock .box{ border-radius: 18px; }
    }
       

/* pornstar */
   /* Headings */
    .page-title{
      color: var(--yellow);
      font-weight: 950;
      letter-spacing: .6px;
      text-transform: uppercase;
      margin: 0;
      font-size: 20px;
    }
    .page-sub{
      margin: 6px 0 0;
      color: rgba(255,255,255,.70);
      font-weight: 700;
      font-size: 13px;
    }

      /* thumbs */
   .thumb .meta .name{
      font-weight: 950;
      line-height: 1.15;
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .thumb .meta .model{
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 800;
      color: rgba(255,255,255,.78);
      font-size: 13px;
    }

    .thumb .meta .meta-row{
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: rgba(255,255,255,.60);
      font-weight: 800;
      font-size: 12px;
    }

    .thumb .meta .date,
    .thumb .meta .dur{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .thumb .meta i.bi{
      font-size: 14px;
      opacity: .9;
      transform: translateY(-.5px);
    }

    /* Filter panel */
    .filter-panel{ padding: 14px; }
    .form-control, .form-select{
      background: rgba(0,0,0,.25) !important;
      border: 1px solid rgba(255,255,255,.08) !important;
      color: #fff !important;
      border-radius: 999px !important;
      height: 44px;
    }
    .form-control::placeholder{ color: rgba(255,255,255,.55); }
    .form-select option{ background: #0b0e14; color:#fff; }

    .alpha{
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .alpha a{
      text-decoration:none;
      color: rgba(255,255,255,.75);
      font-weight: 900;
      font-size: 12px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    .alpha a.active{
      color:#000;
      background: var(--yellow);
      border-color: rgba(0,0,0,.1);
    }
    .alpha a:hover{ color:#fff; background: rgba(255,255,255,.08); }

    /* Cards */
    .star-card{
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.06);
      height: 100%;
    }
    .star-img{
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      display:block;
    }
    .star-meta{ padding: 12px; }
    .star-name{
      font-weight: 950;
      margin: 0;
      font-size: 15px;
      line-height: 1.2;
    }
    .star-stats{
      margin-top: 6px;
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      color: rgba(255,255,255,.65);
      font-weight: 800;
      font-size: 12px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.22);
      color: rgba(255,255,255,.86);
      font-weight: 900;
      font-size: 12px;
      margin-right: 8px;
      margin-top: 10px;
    }

    /* Pagination */
    .page-link{
      background: rgba(255,255,255,.04) !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      color: rgba(255,255,255,.85) !important;
      border-radius: 999px !important;
      font-weight: 900;
      padding: 10px 14px;
    }
    .page-item.active .page-link{
      background: var(--yellow) !important;
      color: #000 !important;
      border-color: rgba(0,0,0,.1) !important;
    }


/* movies page */
.movies-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }
    .movies-title{
      margin:0;
      line-height:1.1;
      font-weight:900;
      letter-spacing:.6px;
      text-transform:uppercase;
      color: var(--yellow, #edb201);
      font-size: 26px;
    }
    .movies-sub{
      margin-top:6px;
      color: rgba(255,255,255,.65);
      font-weight:700;
      font-size: 13px;
    }

    /* right controls row (filter + sort) */
    .movies-controls{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      flex-wrap:wrap;
      gap:10px;
      margin-top: 2px;
    }

    /* sort pills */
    .sort-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-top: 12px;
    }
    .sort-label{
      color: rgba(255,255,255,.60);
      font-weight:800;
      font-size: 12px;
      letter-spacing:.3px;
      text-transform:uppercase;
      margin-right: 6px;
    }
    .sort-pill{
      text-decoration:none;
      color: rgba(255,255,255,.85);
      font-weight: 900;
      font-size: 12px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    .sort-pill:hover{ color:#fff; background: rgba(255,255,255,.08); }
    .sort-pill.active{
      background: var(--yellow, #edb201);
      color: #000;
      border-color: rgba(0,0,0,.1);
    }

    /* thumbs */
    .thumb .meta .name{
      font-weight: 950;
      line-height: 1.15;
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .thumb .meta .model{
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 800;
      color: rgba(255,255,255,.78);
      font-size: 13px;
    }
    .thumb .meta .meta-row{
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: rgba(255,255,255,.60);
      font-weight: 800;
      font-size: 12px;
    }
    .thumb .meta .date,
    .thumb .meta .dur{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }
    .thumb .meta i.bi{
      font-size: 14px;
      opacity: .9;
      transform: translateY(-.5px);
    }

    /* filter dropdown panel */
    .filter-dd .dropdown-menu{
      width: min(360px, calc(100vw - 28px));
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(10,10,10,.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 12px;
    }
    .filter-dd .dd-title{
      font-weight: 950;
      letter-spacing:.5px;
      text-transform:uppercase;
      color: var(--yellow, #edb201);
      font-size: 13px;
      margin-bottom: 10px;
    }
    .filter-dd .form-check{
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      margin-bottom: 10px;
    }
    .filter-dd .form-check-input{
      background-color: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.16);
    }
    .filter-dd .form-check-input:checked{
      background-color: var(--yellow, #edb201);
      border-color: rgba(0,0,0,.25);
    }
    .filter-dd .form-check-label{
      font-weight: 800;
      color: rgba(255,255,255,.85);
      font-size: 13px;
    }
    .dropdown-menu.dropdown-menu-end.shadow-lg.show {
    padding: 25px;
    }

    /* optional: remove inner scroll in offcanvas sidebar if you had it */
    #mobileSidebar .offcanvas-body{ overflow-y: auto; }
    #mobileSidebar .sidebar{ overflow: visible; max-height: none; }

 /* modification */
 .brand.logo img {
    width: 100%;
}
span.logo-vr {
    color: #b907ca;
}
span.logo-b {
    color: #edb201;
}
a.btn.btn-primary.btn-join {
    background: #b907ca !important;
    border-color: #b907ca !important;
}
a.btn.btn-primary.btn-join:hover {
    background: #700d79 !important;
}
button.btn.btn-primary.btn-filter {
  background: #b907ca !important;
  border-color: #b907ca !important;
}
button.btn.btn-primary.btn-filter:hover {
    background: #700d79 !important;
}
.meta .name a {
    color: #fff;
    text-decoration: none;
}
.meta .name a:hover {
    color: #ddd;
}
.meta .model a, p.star-name a {
    color: #b907ca;
    text-decoration: none;
}
.model a:hover, p.star-name a:hover {
    color: #b65ae6;
}
span.badge-chip a {
    color: #ddd;
    text-decoration: none;
}
span.badge-chip a:hover {
    color: #fff;
}

 /* --- MODEL BIO PAGE ADDITIONS --- */
    .profile-photo{
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
    }
    .profile-photo img{
      width: 100%;
      height: auto;
      display: block;
      aspect-ratio: 3 / 4;
      object-fit: cover;
    }
    .profile-actions .btn{ white-space: nowrap; }
    .bio-text{
      color: rgba(255,255,255,.78);
      line-height: 1.65;
      font-size: 1rem;
    }
    .info-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    @media (max-width: 575.98px){
      .info-grid{ grid-template-columns: 1fr; }
    }
    .info-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.10);
    }
    .info-row .k{ color: rgba(255,255,255,.62); font-size: .92rem; }
    .info-row .v{ color: rgba(255,255,255,.92); font-weight: 800; }


/* Sidebar: Supported Headsets */
.sidebar-title {
    margin-top: 20px;
}
.sidebar-card {
    color: #fff;
}
.headset-image img {
    width: 100%;
}