/* profile.css — trang hồ sơ người dùng (template-profile.php) */

.prof { padding: 26px 0 70px; }

.prof__guard { text-align: center; padding: 80px 20px; }
.prof__guard h1 { font-family: var(--serif); font-size: 30px; margin-bottom: 10px; }
.prof__guard p { color: var(--text-2); margin-bottom: 22px; }

/* flash */
.prof__flash { padding: 12px 18px; border-radius: var(--r); font-weight: 600; font-size: 14px; margin-bottom: 20px;
  background: color-mix(in oklab, var(--accent) 16%, transparent); border: 1px solid var(--accent-line); color: var(--text); }
.prof__flash--err { background: rgba(190,60,70,.14); border-color: rgba(190,60,70,.4); }

/* hero */
.prof__hero { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.prof__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-2);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); }
.prof__name { font-family: var(--serif); font-size: 28px; line-height: 1.15; }
.prof__sub { color: var(--text-3); font-size: 14px; margin-top: 2px; }

/* Khi avatar hồ sơ có khung, wrapper giữ đúng tâm; avatar/khung bên trong tự căn giữa bằng CSS chung. */
.prof__avatar.ttc-avr{
  width:var(--avr-size,96px) !important;
  height:var(--avr-size,96px) !important;
  border:0 !important;
  box-shadow:none !important;
  object-fit:initial !important;
  overflow:visible !important;
  background:transparent !important;
}

.prof__stats { display: flex; align-items: center; gap: 9px; margin-top: 9px; font-size: 13.5px; color: var(--text-2); }
.prof__stats b { color: var(--text); }
.prof__stats .dot { color: var(--text-3); }

/* tabs */
.prof__tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.prof__tab { appearance: none; border: 0; background: none; font: inherit; font-weight: 600; font-size: 14.5px;
  color: var(--text-2); padding: 11px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.prof__tab:hover { color: var(--text); }
.prof__tab[data-on="1"] { color: var(--accent); border-bottom-color: var(--accent); }

/* panels */
.prof__panel { display: none; }
.prof__panel[data-on="1"] { display: block; animation: proffade .25s ease; }
@keyframes proffade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.prof__h { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 8px 0 14px; }
.prof__panel .prof__h:not(:first-child) { margin-top: 34px; }

/* form */
.prof__form { max-width: 620px; }
.prof__field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.prof__field label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.prof__form input[type=text], .prof__form input[type=password], .prof__form input[type=number] {
  width: 100%; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 14.5px; padding: 11px 13px; outline: none; transition: border-color .15s; }
.prof__form input:focus { border-color: var(--accent-line); }
.prof__hint { font-size: 12.5px; color: var(--text-3); }
.prof__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* avatar uploader */
.prof__avwrap { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.prof__avbig { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-2); }
.prof__avside { display: flex; flex-direction: column; gap: 9px; }
.prof__upload { cursor: pointer; }
.prof__upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* reader-bg upload + separator */
.rbgupload { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.rbgupload__file { cursor: pointer; }
.rbgupload__clear { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.prof__sep { display: flex; align-items: center; gap: 14px; margin: 26px 0 4px; color: var(--text-3); font-size: 12.5px; }
.prof__sep::before, .prof__sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* reader-bg preview */
.rbgprev { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-2); padding: 30px 22px;
  display: grid; place-items: center; min-height: 220px; transition: background .25s;
  --rbg-ink: var(--text); }
.rbgprev__card { max-width: 460px; }
.rbgprev__title { font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 12px; color: var(--rbg-ink); text-align: center; }
.rbgprev__p { font-family: var(--serif); font-size: 17px; line-height: 1.85; color: var(--rbg-ink); margin: 0; opacity: .96; text-align: center; }

/* reader-bg swatches */
.rbgpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin-top: 20px; }
.rbgsw { appearance: none; border: 0; background: none; font: inherit; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 7px; padding: 0; }
.rbgsw__chip { width: 100%; height: 58px; border-radius: var(--r-sm); border: 2px solid var(--border);
  display: grid; place-items: center; color: var(--text-3); transition: border-color .15s, transform .12s; background-size: cover; }
.rbgsw[data-on="1"] .rbgsw__chip { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.rbgsw:hover .rbgsw__chip { transform: translateY(-2px); }
.rbgsw__lbl { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.rbgsw[data-on="1"] .rbgsw__lbl { color: var(--accent); }

/* activity list */
.prof__acts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pact { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-2); transition: border-color .15s, background .15s; }
.pact:hover { border-color: var(--accent-line); }
.pact__cover { width: 46px; height: 62px; flex-shrink: 0; border-radius: 6px; overflow: hidden; }
.pact__cv { width: 100%; height: 100%; object-fit: cover; }
.pact__b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pact__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pact__title { font-weight: 600; font-size: 14px; color: var(--text); }
.pact__text { font-size: 13px; color: var(--text-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pact__time { font-size: 11.5px; color: var(--text-3); }
.pact__chap { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--accent); font-weight: 600; }
.pact__chap svg { flex-shrink: 0; opacity: .85; }

@media (max-width: 680px) {
  .prof__hero { gap: 16px; }
  .prof__avatar { width: 74px; height: 74px; }
  .prof__avatar.ttc-avr { width:var(--avr-size,96px) !important; height:var(--avr-size,96px) !important; }
  .prof__name { font-size: 23px; }
  .prof__acts { grid-template-columns: 1fr; }
}


/* ---- Khung của tôi (Vườn nhỏ) ---- */
.frames-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px 18px; margin:14px 0 6px; }
.frames-card__hd{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.frames-card__title{ font-family:'Lora', Georgia, serif; font-weight:700; font-size:15px; color:var(--text); }
.frames-card__hint{ font-size:12px; color:var(--text-3); }
.frames-card__hint a{ color:var(--accent); }
.frames-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.frame-item{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:14px 10px 12px; font-family:inherit; transition:transform .12s, border-color .15s; }
.frame-item:hover{ transform:translateY(-2px); }
.frame-item__av{ margin-bottom:2px; }
.frame-item__name{ font-weight:700; font-size:13px; color:var(--text); }
.frame-item__lv{ font-size:11px; color:var(--text-3); }
.frame-item__tag{ margin-top:4px; font-size:11.5px; font-weight:700; color:#fff; background:var(--accent); padding:4px 11px; border-radius:999px; }
.frame-item.is-equipped .frame-item__tag{ background:#57b85f; }
.frame-clear{ margin-top:12px; border:1px solid var(--border); background:none; color:var(--text-2); font-family:inherit; font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:10px; cursor:pointer; }
.frame-clear:hover{ color:var(--text); border-color:var(--border-2); }
.frames-empty{ font-size:13px; color:var(--text-3); padding:8px 2px; }

/* ============================================================
   ECLIPSE PROFILE — profile page inspired by moon character-sheet mood
   Desktop + mobile web, card grid layout, frame store pagination.
   ============================================================ */
.profx{
  position:relative;
  isolation:isolate;
  max-width:1180px;
  padding-bottom:92px;
  color:var(--text);
}
.profx::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(760px 460px at 52% 0%, rgba(202,149,255,.26), transparent 68%),
    radial-gradient(520px 420px at 8% 22%, rgba(255,168,211,.14), transparent 68%),
    linear-gradient(180deg, rgba(16,12,28,.08), transparent 34%);
}
body.tf-dark .profx::before,
body.dark .profx::before{
  background:
    radial-gradient(820px 520px at 50% -4%, rgba(188,126,255,.28), transparent 68%),
    radial-gradient(560px 460px at 8% 20%, rgba(255,112,183,.17), transparent 70%),
    linear-gradient(180deg, rgba(3,2,9,.62), transparent 46%);
}
.profx__sky{position:absolute;inset:-22px 0 auto 0;height:360px;overflow:hidden;z-index:-1;pointer-events:none;border-radius:30px;}
.profx__eclipse{position:absolute;left:50%;top:18px;width:210px;height:210px;border-radius:50%;transform:translateX(-50%);background:#171120;box-shadow:0 0 0 1px rgba(239,211,255,.28),0 0 55px rgba(188,126,255,.42),inset -18px 8px 0 rgba(255,226,246,.86);opacity:.88;}
.profx__eclipse::after{content:'';position:absolute;inset:20px;border-radius:inherit;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 28px rgba(255,190,230,.3);}
.profx__petal,.profx__spark{position:absolute;display:block;border-radius:999px;opacity:.75;filter:blur(.1px);animation:profx-float 8s ease-in-out infinite alternate;}
.profx__petal{width:9px;height:17px;background:linear-gradient(180deg,#ffd2ef,#9d6aff);box-shadow:0 0 14px rgba(255,180,230,.55);}
.profx__petal.p1{left:13%;top:78px;animation-duration:7s}.profx__petal.p2{left:76%;top:120px;animation-duration:9s;animation-delay:-2s}.profx__petal.p3{left:42%;top:250px;animation-duration:10s;animation-delay:-5s}.profx__petal.p4{left:91%;top:220px;animation-duration:8s;animation-delay:-3s}
.profx__spark{width:4px;height:4px;background:#fff;box-shadow:0 0 18px #fff,0 0 30px rgba(197,143,255,.8);}.profx__spark.s1{left:20%;top:44px}.profx__spark.s2{left:69%;top:68px;animation-delay:-4s}.profx__spark.s3{left:84%;top:300px;animation-delay:-2s}
@keyframes profx-float{from{transform:translate3d(0,0,0) rotate(-10deg)}to{transform:translate3d(18px,28px,0) rotate(28deg)}}


.profx__hero{position:relative;display:grid;grid-template-columns:1.1fr 240px;gap:18px;align-items:end;min-height:330px;padding:28px;border:1px solid color-mix(in oklab,var(--accent) 20%,var(--border));border-radius:28px;overflow:hidden;background:linear-gradient(135deg,rgba(36,25,29,.9),rgba(70,44,50,.68)),radial-gradient(600px 420px at 60% 20%,rgba(255,189,136,.2),transparent 70%);box-shadow:0 26px 70px rgba(13,8,26,.22);}
.profx__hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,#000,transparent 75%);opacity:.46;}
.profx__hero::after{content:'';position:absolute;right:18px;top:18px;width:160px;height:160px;border:1px solid rgba(238,214,255,.24);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);}
.profx__titleblock,.profx__portrait,.profx__bio-card{position:relative;z-index:1;}
.profx__eyebrow{display:inline-flex;letter-spacing:.26em;text-transform:uppercase;font-size:11px;color:#d8b7ff;border-bottom:1px solid rgba(216,183,255,.35);padding-bottom:6px;margin-bottom:8px;}
.profx__name{margin:0;font-family:'Lora',Georgia,serif;font-size:clamp(42px,7.8vw,92px);line-height:.86;letter-spacing:-.06em;color:#ffe6c9;text-shadow:0 0 26px rgba(255,178,110,.34);}
.profx__sub{margin:14px 0 0;color:#e6d9ef;font-size:14px;}
.profx__portrait{display:grid;place-items:center;align-self:center;}
.profx__portrait::before{display:none!important;content:none!important;}
.profx__avatar{filter:drop-shadow(0 18px 34px rgba(0,0,0,.32));}
.profx__bio-card{align-self:stretch;border:1px solid rgba(235,215,255,.2);background:rgba(10,7,20,.46);backdrop-filter:blur(10px);border-radius:18px;padding:18px;color:#eadff2;}
.profx__bio-card h2{font-family:'Lora',Georgia,serif;letter-spacing:.08em;text-transform:uppercase;font-size:15px;margin:0 0 10px;color:#f7e9ff;}
.profx__bio-card p{margin:0 0 16px;line-height:1.62;color:#d8ccdf;font-size:13px;}
.profx__mini-line{display:flex;justify-content:space-between;gap:10px;border-top:1px solid rgba(255,255,255,.1);padding-top:10px;margin-top:10px;font-size:12px;color:#cabfd2;}.profx__mini-line b{color:#fff;text-align:right;}

.profx__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0;}
.profx__stat{border:1px solid color-mix(in oklab,var(--accent) 18%,var(--border));border-radius:18px;padding:14px 16px;background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 88%,transparent),color-mix(in oklab,var(--surface-2) 86%,transparent));box-shadow:0 16px 36px rgba(23,13,35,.08);}
.profx__stat span{display:block;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}.profx__stat b{display:block;margin-top:5px;font-family:'Lora',Georgia,serif;font-size:24px;color:var(--text)}
.profx__stat--level i{display:block;margin-top:10px;height:7px;border-radius:999px;background:color-mix(in oklab,var(--accent) 12%,var(--surface-2));overflow:hidden}.profx__stat--level i em{display:block;width:var(--pct);height:100%;border-radius:inherit;background:linear-gradient(90deg,#8a5bd8,#ff9fda);}

.profx__tabs{position:sticky;top:10px;z-index:20;display:flex;justify-content:center;gap:8px;margin:16px auto;max-width:760px;padding:8px;border-radius:999px;background:color-mix(in oklab,var(--surface) 82%,transparent);border:1px solid color-mix(in oklab,var(--accent) 16%,var(--border));backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(20,12,38,.12);}
.profx__tabs .prof__tab{border-radius:999px;padding:10px 18px;}
.profx__layout{display:block;}
.profx__panel{border:1px solid color-mix(in oklab,var(--accent) 18%,var(--border));border-radius:24px;padding:22px;background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 92%,transparent),color-mix(in oklab,var(--surface-2) 88%,transparent));box-shadow:0 22px 60px rgba(18,10,28,.1);}
.profx__section-head{margin:0 0 16px;}.profx__section-head>span{display:block;color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;margin-bottom:6px}.profx__section-head h2{margin:0;font-family:'Lora',Georgia,serif;font-size:25px;color:var(--text);}.profx__section-head p{margin:7px 0 0;color:var(--text-3);font-size:13px;line-height:1.5;}
.profx__story-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
.profx__split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;}.profx__acts{grid-template-columns:1fr;}.profx__act{border-radius:16px;background:color-mix(in oklab,var(--surface-2) 72%,transparent);}
.profx__empty{border-style:dashed;background:color-mix(in oklab,var(--surface-2) 72%,transparent);}

.profx__frame-store{margin:0;border:0;background:transparent;padding:0;}
.profx__section-head--frames{display:block;}
.profx__frames-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.profx__frame-item{min-height:158px;position:relative;overflow:hidden;border-radius:20px;background:radial-gradient(120px 100px at 50% 24%,color-mix(in oklab,var(--frc,#ba8cff) 22%,transparent),transparent),color-mix(in oklab,var(--surface-2) 82%,transparent);}
.profx__frame-item[hidden]{display:none!important;}.profx__frame-item.is-locked{opacity:.54;filter:saturate(.55);cursor:not-allowed;}.profx__frame-item.is-locked::after{content:'LOCKED';position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--text-3);}
.profx__frame-item .frame-item__name{text-align:center;line-height:1.25;}.profx__frame-item .frame-item__tag{box-shadow:0 8px 18px color-mix(in oklab,var(--accent) 26%,transparent);}
.profx__frame-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;}.profx__frame-pager button{border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:8px 13px;color:var(--text-2);font-weight:700;cursor:pointer;}.profx__frame-pager button:disabled{opacity:.4;cursor:not-allowed}.profx__frame-pager span{font-weight:800;color:var(--text-2);font-size:13px;}

.profx__form{max-width:820px;margin:0 auto;}.profx__form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}.profx__avwrap{border:1px solid var(--border);border-radius:20px;background:var(--surface-2);padding:16px;margin-bottom:18px;}.profx__av-preview{display:inline-block;}
.profx__bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:100;display:none;gap:6px;padding:8px;border:1px solid color-mix(in oklab,var(--accent) 18%,var(--border));background:color-mix(in oklab,var(--surface) 86%,transparent);backdrop-filter:blur(18px);border-radius:22px;box-shadow:0 18px 44px rgba(15,9,26,.18);}.profx__bottom-nav button{border:0;background:transparent;color:var(--text-3);font-weight:800;font-size:11px;padding:10px 11px;border-radius:16px;cursor:pointer;}.profx__bottom-nav button.is-on{color:#fff;background:linear-gradient(135deg,#8a5bd8,#db84c8);}

.profx__bottom-nav button.is-on{background:linear-gradient(135deg,#9b6547,#e4a66e);}

@media (max-width: 900px){
  .profx{padding-inline:12px;padding-bottom:102px;}
    .profx__hero{grid-template-columns:1fr;align-items:center;min-height:0;padding:22px;gap:16px;}
  .profx__hero::after{display:none}
  .profx__titleblock{text-align:center;}.profx__name{font-size:48px;letter-spacing:-.05em}.profx__bio-card{width:100%;}.profx__stats{grid-template-columns:repeat(2,1fr)}.profx__tabs{display:none}.profx__bottom-nav{display:flex}.profx__panel{padding:16px;border-radius:20px}.profx__split{grid-template-columns:1fr}.profx__form-grid{grid-template-columns:1fr}.profx__frames-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.profx__frame-item{min-height:150px}.profx__section-head h2{font-size:22px;}
}
@media (max-width: 420px){.profx__bottom-nav{width:calc(100vw - 24px);justify-content:space-between}.profx__bottom-nav button{flex:1;padding-inline:6px}.profx__stats{gap:9px}.profx__stat{padding:12px}.profx__stat b{font-size:21px}.profx__frames-grid{gap:10px}.profx__frame-item{padding:12px 8px;}.profx__hero{border-radius:22px}.profx__name{font-size:42px}}

/* Frame Store: nút trang bị theo loại avatar / bình luận / đánh giá */
.frame-item__types{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px}
.frame-equip-type{border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);border-radius:999px;padding:5px 8px;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.frame-equip-type:hover{border-color:var(--accent-line);color:var(--accent)}
.frame-equip-type.is-on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 18px color-mix(in oklab,var(--accent) 24%,transparent)}
.frame-equip-type:disabled{opacity:.5;cursor:not-allowed}.frame-clear-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.frame-clear-row .frame-clear{margin-top:0}
.profx__frame-item{cursor:default}.profx__frame-item .frame-item__tag{pointer-events:none}

/* Frame Store: tách kho avatar / bình luận-đánh giá + tối ưu render */
.profx__frames-grid{
  grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:stretch;
  content-visibility:auto;
  contain-intrinsic-size:520px;
}
.profx__frame-item{
  min-height:138px;
  contain:layout paint style;
  content-visibility:auto;
  contain-intrinsic-size:138px 132px;
}
.profx__frame-item .frame-item__av{transform:translateZ(0)}
.frame-equip-type.is-busy,.frame-clear.is-busy{opacity:.66;cursor:wait!important;filter:saturate(.75)}
@media (max-width:1180px){.profx__frames-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media (max-width:820px){.profx__frames-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:520px){.profx__frames-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.profx__frame-item{min-height:146px}}

/* Update: phân loại frame store + mobile profile gọn hơn */
.profx__frame-cats{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 14px;max-height:84px;overflow:auto;padding-bottom:2px;scrollbar-width:thin}
.profx__frame-cats button{border:1px solid color-mix(in oklab,var(--accent) 14%,var(--border));background:color-mix(in oklab,var(--surface-2) 78%,transparent);color:var(--text-3);border-radius:999px;padding:7px 11px;font:800 11px/1 var(--font-ui);cursor:pointer;white-space:nowrap}
.profx__frame-cats button.is-on{background:color-mix(in oklab,var(--accent) 90%,#fff 0%);border-color:var(--accent);color:#fff;box-shadow:0 8px 20px color-mix(in oklab,var(--accent) 22%,transparent)}
.frame-item__cat{display:block;text-align:center;margin-top:-2px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.profx__frame-item .frame-item__types{margin-top:5px}

@media (max-width: 700px){
  .profx{padding-inline:10px;padding-top:8px;padding-bottom:112px;}
  .profx__sky{opacity:.74;}
  .profx__hero{padding:18px 14px;border-radius:24px;gap:12px;background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 88%,transparent),color-mix(in oklab,var(--surface-2) 82%,transparent));}
  .profx__eyebrow{font-size:10px;letter-spacing:.16em;}
  .profx__name{font-size:34px;line-height:.96;letter-spacing:-.04em;word-break:break-word;}
  .profx__sub{font-size:12px;margin-top:6px;}
  .profx__portrait{order:-1;justify-self:center;}
  .profx__portrait .ttc-avr{--avr-size:104px!important;}
  .profx__stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:12px 0;}
  .profx__stat{padding:10px 7px;border-radius:16px;text-align:center;}
  .profx__stat span{font-size:9px;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .profx__stat b{font-size:17px;margin-top:4px;}
  .profx__stat--level i{height:5px;margin-top:7px;}
  .profx__panel{padding:14px 11px;border-radius:22px;}
  .profx__section-head{margin-bottom:12px;}
  .profx__section-head>span{font-size:10px;margin-bottom:4px;}
  .profx__section-head h2{font-size:20px;}
  .profx__story-grid{grid-template-columns:1fr;gap:12px;}
  .profx__split{gap:14px;margin-top:16px;}
  .profx__acts{gap:9px;}
  .profx__act{border-radius:14px;padding:9px;}  .profx__frame-cats{margin-bottom:12px;display:flex;flex-wrap:nowrap;overflow-x:auto;max-height:none;padding:2px 2px 8px;}
  .profx__frame-cats button{flex:0 0 auto;padding:8px 12px;}
  .profx__frames-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;contain-intrinsic-size:720px;}
  .profx__frame-item{min-height:164px;border-radius:18px;padding:11px 7px;}
  .profx__frame-item .frame-item__av{--avr-size:50px!important;}
  .frame-equip-type{font-size:10px;padding:6px 7px;}
  .profx__frame-pager{position:sticky;bottom:82px;z-index:50;margin:14px auto 0;padding:8px;border-radius:999px;background:color-mix(in oklab,var(--surface) 88%,transparent);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(18,10,28,.16);}
  .frame-clear-row{justify-content:center;}
}

@media (max-width: 380px){
  .profx__stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .profx__frames-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .profx__frame-item{min-height:158px;}
  .profx__bottom-nav button{font-size:10px;padding:9px 4px;}
}

/* Update: frame store click-to-equip, không còn nút nhỏ trong từng card */
.profx__frame-item[data-owned="1"]{cursor:pointer;}
.profx__frame-item[data-owned="1"]:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--accent) 42%,var(--border));box-shadow:0 14px 34px color-mix(in oklab,var(--accent) 13%,transparent);}
.profx__frame-item.is-busy{opacity:.68;cursor:wait!important;filter:saturate(.85);}
.profx__frame-item.is-locked{cursor:not-allowed;}
.profx__frame-item .frame-item__tag{pointer-events:none;}

/* profile-frame-avatar-sharp */
.profx__frame-item .frame-item__av{margin:8px auto 10px;display:grid!important;place-items:center;overflow:visible;filter:none!important;}
.profx__frame-item .ttc-avr__ring{opacity:1!important;image-rendering:auto;filter:drop-shadow(0 0 3px color-mix(in oklab,var(--frc,var(--accent)) 36%,transparent)) drop-shadow(0 1px 1px rgba(0,0,0,.18))!important;}

/* ============================================================
   Profile Option B integration — sidebar moon/eclipsed archive layout
   ============================================================ */
.profx[data-profile-variant="option-b"]{
  position:relative; isolation:isolate; max-width:1220px; margin:0 auto; padding:26px 18px 96px; color:var(--text); overflow:visible;
}
.profx[data-profile-variant="option-b"]::before{
  content:''; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(1300px 720px at 80% -12%, color-mix(in oklab,var(--accent) 20%,#15121f), transparent 66%),
    radial-gradient(680px 420px at 10% 18%, rgba(255,168,211,.12), transparent 72%),
    linear-gradient(180deg, rgba(14,12,21,.18), transparent 38%);
}
.profx[data-profile-variant="option-b"] .profx__sky{position:absolute;inset:-22px 0 auto 0;height:300px;overflow:hidden;z-index:-1;pointer-events:none;border-radius:30px;}
.profx[data-profile-variant="option-b"] .profx__eclipse{position:absolute;left:50%;top:18px;width:210px;height:210px;border-radius:50%;transform:translateX(-50%);background:#171120;box-shadow:0 0 0 1px rgba(239,211,255,.28),0 0 55px rgba(188,126,255,.42),inset -18px 8px 0 rgba(255,226,246,.86);opacity:.88;}
.profx[data-profile-variant="option-b"] .profx__eclipse::after{content:'';position:absolute;inset:20px;border-radius:inherit;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 28px rgba(255,190,230,.3);}
.profx[data-profile-variant="option-b"] .profx__petal,.profx[data-profile-variant="option-b"] .profx__spark{position:absolute;display:block;border-radius:999px;opacity:.75;animation:profx-float 8s ease-in-out infinite alternate;}
.profx[data-profile-variant="option-b"] .profx__petal{width:9px;height:17px;background:linear-gradient(180deg,#ffd2ef,#9d6aff);box-shadow:0 0 14px rgba(255,180,230,.55);}
.profx[data-profile-variant="option-b"] .profx__petal.p1{left:13%;top:78px;animation-duration:7s}.profx[data-profile-variant="option-b"] .profx__petal.p2{left:76%;top:120px;animation-duration:9s;animation-delay:-2s}.profx[data-profile-variant="option-b"] .profx__petal.p3{left:42%;top:230px;animation-duration:10s;animation-delay:-5s}.profx[data-profile-variant="option-b"] .profx__petal.p4{left:91%;top:200px;animation-duration:8s;animation-delay:-3s}
.profx[data-profile-variant="option-b"] .profx__spark{width:4px;height:4px;background:#fff;box-shadow:0 0 18px #fff,0 0 30px rgba(197,143,255,.8);}.profx[data-profile-variant="option-b"] .profx__spark.s1{left:20%;top:44px}.profx[data-profile-variant="option-b"] .profx__spark.s2{left:69%;top:68px;animation-delay:-4s}.profx[data-profile-variant="option-b"] .profx__spark.s3{left:84%;top:260px;animation-delay:-2s}
@keyframes profx-float{from{transform:translate3d(0,0,0) rotate(-10deg)}to{transform:translate3d(18px,28px,0) rotate(28deg)}}

.profx[data-profile-variant="option-b"] .profx__shell{display:flex;align-items:flex-start;gap:22px;margin-top:14px;}
.profx[data-profile-variant="option-b"] .profx__rail{flex:0 0 290px;position:sticky;top:16px;align-self:flex-start;z-index:5;}
.profx[data-profile-variant="option-b"] .profx__rail-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:16px;padding:34px 20px 20px;border-radius:26px;border:1px solid color-mix(in oklab,var(--accent) 22%,var(--border));background:radial-gradient(220px 180px at 50% -8%,color-mix(in oklab,var(--accent) 26%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in oklab,var(--surface) 94%,transparent),color-mix(in oklab,var(--surface-2) 90%,transparent));box-shadow:0 26px 64px rgba(16,9,28,.20);}
.profx[data-profile-variant="option-b"] .profx__rail-card::before{content:'';position:absolute;left:50%;top:-46px;width:150px;height:150px;border-radius:50%;transform:translateX(-50%);background:#171120;opacity:.5;pointer-events:none;box-shadow:0 0 0 1px rgba(239,211,255,.22),0 0 46px rgba(188,126,255,.36),inset -14px 7px 0 rgba(255,226,246,.7);}
.profx[data-profile-variant="option-b"] .profx__portrait{position:relative;z-index:1;display:grid;place-items:center;order:initial;margin-top:18px;padding-top:10px;}
.profx[data-profile-variant="option-b"] .profx__avatar.ttc-avr{width:var(--avr-size,124px)!important;height:var(--avr-size,124px)!important;}
.profx[data-profile-variant="option-b"] .profx__rail-id{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;}
.profx[data-profile-variant="option-b"] .profx__eyebrow{font-size:10px;letter-spacing:.28em;color:var(--accent);font-weight:800;}
.profx[data-profile-variant="option-b"] .profx__name{margin:0;font-family:var(--serif);font-size:32px;line-height:1.04;letter-spacing:.02em;color:var(--text);text-shadow:0 0 22px color-mix(in oklab,var(--accent) 30%,transparent);word-break:break-word;}
.profx[data-profile-variant="option-b"] .profx__sub{margin:0;font-size:13px;color:var(--text-3);max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.profx[data-profile-variant="option-b"] .profx__exp{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:7px;}
.profx[data-profile-variant="option-b"] .profx__exp-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.profx[data-profile-variant="option-b"] .profx__exp-head span{font-family:var(--serif);font-size:13px;letter-spacing:.06em;color:var(--text-2);text-transform:uppercase;}
.profx[data-profile-variant="option-b"] .profx__exp-head b{font-size:13px;color:var(--text);}
.profx[data-profile-variant="option-b"] .profx__exp i{display:block;height:8px;border-radius:999px;overflow:hidden;background:color-mix(in oklab,var(--accent) 12%,var(--surface-2));}
.profx[data-profile-variant="option-b"] .profx__exp i em{display:block;width:var(--pct,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#8a5bd8,#ff9fda);box-shadow:0 0 12px color-mix(in oklab,var(--accent) 60%,transparent);}
.profx[data-profile-variant="option-b"] .profx__exp-need{font-size:11.5px;color:var(--text-3);}
.profx[data-profile-variant="option-b"] .profx__rail-stats{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;}
.profx[data-profile-variant="option-b"] .profx__stat{border:1px solid color-mix(in oklab,var(--accent) 18%,var(--border));border-radius:14px;padding:11px 8px;text-align:center;background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 88%,transparent),color-mix(in oklab,var(--surface-2) 86%,transparent));}
.profx[data-profile-variant="option-b"] .profx__stat span{display:block;font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
.profx[data-profile-variant="option-b"] .profx__stat b{display:block;margin-top:3px;font-family:var(--serif);font-size:20px;color:var(--text);}
.profx[data-profile-variant="option-b"] .profx__tabs{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;width:100%;margin:2px 0 0;border:0;}
.profx[data-profile-variant="option-b"] .prof__tab{appearance:none;border:1px solid transparent;background:none;font:inherit;font-weight:600;font-size:14.5px;color:var(--text-2);width:100%;text-align:left;padding:13px 16px;border-radius:13px;cursor:pointer;transition:color .15s,background .15s,border-color .15s;margin:0;}
.profx[data-profile-variant="option-b"] .prof__tab:hover{background:color-mix(in oklab,var(--accent) 9%,transparent);color:var(--text);}
.profx[data-profile-variant="option-b"] .prof__tab[data-on="1"]{color:#fff;background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 92%,#000 0%),color-mix(in oklab,var(--accent) 58%,#000));border-color:transparent;box-shadow:0 12px 26px -10px color-mix(in oklab,var(--accent) 70%,transparent);}
.profx[data-profile-variant="option-b"] .profx__rail-logout{position:relative;z-index:1;width:100%;margin-top:2px;}

.profx[data-profile-variant="option-b"] .profx__main{flex:1;min-width:0;}
.profx[data-profile-variant="option-b"] .profx__panel{display:none;border:1px solid color-mix(in oklab,var(--accent) 18%,var(--border));border-radius:24px;padding:22px;background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 92%,transparent),color-mix(in oklab,var(--surface-2) 88%,transparent));box-shadow:0 22px 60px rgba(18,10,28,.10);}
.profx[data-profile-variant="option-b"] .profx__panel[data-on="1"]{display:block;animation:proffade .25s ease;}
.profx[data-profile-variant="option-b"] .profx__section-head{display:block;margin:0 0 16px;}
.profx[data-profile-variant="option-b"] .profx__section-head>span{display:block;color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;margin-bottom:6px;}
.profx[data-profile-variant="option-b"] .profx__section-head h2{margin:0;font-family:var(--serif);font-size:25px;color:var(--text);line-height:1.18;}
.profx[data-profile-variant="option-b"] .profx__story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;}
.profx[data-profile-variant="option-b"] .profx__split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;}
.profx[data-profile-variant="option-b"] .profx__acts{display:grid;grid-template-columns:1fr;gap:12px;}
.profx[data-profile-variant="option-b"] .profx__act{display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:16px;background:color-mix(in oklab,var(--surface-2) 72%,transparent);transition:border-color .15s;}
.profx[data-profile-variant="option-b"] .profx__act:hover{border-color:var(--accent-line);}
.profx[data-profile-variant="option-b"] .profx__empty{padding:24px;border:1px dashed var(--border-2);border-radius:14px;color:var(--text-3);font-size:14px;text-align:center;font-style:italic;background:color-mix(in oklab,var(--surface-2) 72%,transparent);}

.profx[data-profile-variant="option-b"] .profx__frame-store{margin:0;border:0;background:transparent;padding:0;}
.profx[data-profile-variant="option-b"] .profx__frame-cats{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 14px;max-height:84px;overflow:auto;padding-bottom:2px;scrollbar-width:thin;}
.profx[data-profile-variant="option-b"] .profx__frame-cats button{border:1px solid color-mix(in oklab,var(--accent) 14%,var(--border));background:color-mix(in oklab,var(--surface-2) 78%,transparent);color:var(--text-3);border-radius:999px;padding:7px 11px;font:800 11px/1 var(--font-ui);cursor:pointer;white-space:nowrap;}
.profx[data-profile-variant="option-b"] .profx__frame-cats button.is-on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 20px color-mix(in oklab,var(--accent) 22%,transparent);}
.profx[data-profile-variant="option-b"] .profx__frames-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;align-items:stretch;content-visibility:auto;contain-intrinsic-size:520px;}
.profx[data-profile-variant="option-b"] .profx__frame-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:158px;cursor:pointer;border:1px solid var(--border);border-radius:20px;padding:14px 10px 12px;background:radial-gradient(120px 100px at 50% 24%,color-mix(in oklab,var(--frc,var(--accent)) 22%,transparent),transparent),color-mix(in oklab,var(--surface-2) 82%,transparent);transition:transform .12s,border-color .15s,box-shadow .15s;contain:layout paint style;}
.profx[data-profile-variant="option-b"] .profx__frame-item[hidden]{display:none!important;}
.profx[data-profile-variant="option-b"] .profx__frame-item[data-owned="1"]:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--accent) 42%,var(--border));box-shadow:0 14px 34px color-mix(in oklab,var(--accent) 13%,transparent);}
.profx[data-profile-variant="option-b"] .profx__frame-item.is-equipped .frame-item__tag{background:#57b85f;}
.profx[data-profile-variant="option-b"] .profx__frame-item.is-locked{opacity:.54;filter:saturate(.55);cursor:not-allowed;}
.profx[data-profile-variant="option-b"] .profx__frame-item.is-locked::after{content:'LOCKED';position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--text-3);}
.profx[data-profile-variant="option-b"] .frame-item__av{--avr-size:58px!important;margin:4px auto 4px;display:grid!important;place-items:center;overflow:visible;filter:none!important;}
.profx[data-profile-variant="option-b"] .frame-item__name{font-weight:700;font-size:13px;color:var(--text);text-align:center;line-height:1.2;}
.profx[data-profile-variant="option-b"] .frame-item__cat{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.profx[data-profile-variant="option-b"] .frame-item__tag{margin-top:4px;font-size:11.5px;font-weight:700;color:#fff;background:var(--accent);padding:4px 11px;border-radius:999px;pointer-events:none;box-shadow:0 8px 18px color-mix(in oklab,var(--accent) 26%,transparent);}
.profx[data-profile-variant="option-b"] .profx__frame-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;}
.profx[data-profile-variant="option-b"] .profx__frame-pager button{border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:8px 13px;color:var(--text-2);font-weight:700;font-family:inherit;cursor:pointer;}
.profx[data-profile-variant="option-b"] .profx__frame-pager button:disabled{opacity:.4;cursor:not-allowed;}
.profx[data-profile-variant="option-b"] .profx__frame-pager span{font-weight:800;color:var(--text-2);font-size:13px;}
.profx[data-profile-variant="option-b"] .frame-clear-row{display:flex;justify-content:flex-start;margin-top:12px;}
.profx[data-profile-variant="option-b"] .frame-clear{border:1px solid var(--border);background:none;color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:10px;cursor:pointer;margin:0;}
.profx[data-profile-variant="option-b"] .frame-clear:hover{color:var(--text);border-color:var(--border-2);}

.profx[data-profile-variant="option-b"] .prof__form{max-width:560px;}
.profx[data-profile-variant="option-b"] .profx__avwrap{display:flex;align-items:center;gap:18px;border:1px solid var(--border);border-radius:20px;background:var(--surface-2);padding:16px;margin-bottom:18px;}
.profx[data-profile-variant="option-b"] .profx__form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.profx[data-profile-variant="option-b"] .prof__field{display:flex;flex-direction:column;gap:6px;margin:0;}
.profx[data-profile-variant="option-b"] .prof__field label{font-size:13px;font-weight:600;color:var(--text-2);}
.profx[data-profile-variant="option-b"] .prof__form input[type=text],
.profx[data-profile-variant="option-b"] .prof__form input[type=password],
.profx[data-profile-variant="option-b"] .prof__form input[type=number]{width:100%;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:inherit;font-size:14.5px;padding:11px 13px;outline:none;transition:border-color .15s;}
.profx[data-profile-variant="option-b"] .prof__form input:focus{border-color:var(--accent-line);}
.profx[data-profile-variant="option-b"] .prof__hint{font-size:12.5px;color:var(--text-3);}
.profx[data-profile-variant="option-b"] .prof__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}

.profx[data-profile-variant="option-b"] .profx__bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:100;display:none;gap:6px;padding:8px;border:1px solid color-mix(in oklab,var(--accent) 18%,var(--border));background:color-mix(in oklab,var(--surface) 86%,transparent);backdrop-filter:blur(18px);border-radius:22px;box-shadow:0 18px 44px rgba(15,9,26,.18);}
.profx[data-profile-variant="option-b"] .profx__bottom-nav button{border:0;background:transparent;color:var(--text-3);font-family:inherit;font-weight:800;font-size:11px;padding:10px 12px;border-radius:16px;cursor:pointer;}
.profx[data-profile-variant="option-b"] .profx__bottom-nav button.is-on{color:#fff;background:linear-gradient(135deg,#8a5bd8,#db84c8);}

@media (max-width:1180px){.profx[data-profile-variant="option-b"] .profx__frames-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media (max-width:900px){
  .profx[data-profile-variant="option-b"]{padding:14px 12px 102px;}
  .profx[data-profile-variant="option-b"] .profx__shell{flex-direction:column;gap:16px;}
  .profx[data-profile-variant="option-b"] .profx__rail{position:static;flex:1 1 auto;width:100%;top:auto;}
  .profx[data-profile-variant="option-b"] .profx__rail-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'av id' 'exp exp' 'stats stats';align-items:center;gap:14px 18px;padding:20px 16px;}
  .profx[data-profile-variant="option-b"] .profx__portrait{grid-area:av;margin-top:10px;padding-top:8px;}
  .profx[data-profile-variant="option-b"] .profx__rail-id{grid-area:id;text-align:left;align-items:flex-start;}
  .profx[data-profile-variant="option-b"] .profx__name{font-size:30px;}
  .profx[data-profile-variant="option-b"] .profx__exp{grid-area:exp;}
  .profx[data-profile-variant="option-b"] .profx__rail-stats{grid-area:stats;}
  .profx[data-profile-variant="option-b"] .profx__tabs{display:none;}
  .profx[data-profile-variant="option-b"] .profx__rail-logout{display:none;}
  .profx[data-profile-variant="option-b"] .profx__bottom-nav{display:flex;}
  .profx[data-profile-variant="option-b"] .profx__panel{padding:16px;border-radius:20px;}
  .profx[data-profile-variant="option-b"] .profx__split{grid-template-columns:1fr;}
  .profx[data-profile-variant="option-b"] .profx__form-grid{grid-template-columns:1fr;}
  .profx[data-profile-variant="option-b"] .profx__frames-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:520px){
  .profx[data-profile-variant="option-b"] .profx__rail-card{grid-template-columns:1fr;grid-template-areas:'av' 'id' 'exp' 'stats';justify-items:center;}
  .profx[data-profile-variant="option-b"] .profx__rail-id{text-align:center;align-items:center;}
  .profx[data-profile-variant="option-b"] .profx__portrait .ttc-avr{--avr-size:112px!important;}
  .profx[data-profile-variant="option-b"] .profx__portrait{margin-top:14px;padding-top:10px;}
  .profx[data-profile-variant="option-b"] .profx__rail-stats{gap:7px;}
  .profx[data-profile-variant="option-b"] .profx__stat{padding:10px 7px;}
  .profx[data-profile-variant="option-b"] .profx__stat span{font-size:9px;}
  .profx[data-profile-variant="option-b"] .profx__frames-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .profx[data-profile-variant="option-b"] .profx__frame-cats{flex-wrap:nowrap;overflow-x:auto;max-height:none;padding:2px 2px 8px;}
  .profx[data-profile-variant="option-b"] .profx__frame-cats button{flex:0 0 auto;}
  .profx[data-profile-variant="option-b"] .profx__frame-pager{position:sticky;bottom:82px;z-index:50;margin:14px auto 0;padding:8px;border-radius:999px;background:color-mix(in oklab,var(--surface) 88%,transparent);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(18,10,28,.16);}
  .profx[data-profile-variant="option-b"] .profx__bottom-nav{width:calc(100vw - 24px);justify-content:space-between;}
  .profx[data-profile-variant="option-b"] .profx__bottom-nav button{flex:1;padding-inline:6px;}
}


/* === Profile Option B: wider main area + 2-column paged comments === */
.profx[data-profile-variant="option-b"]{max-width:1380px;}
.profx[data-profile-variant="option-b"] .profx__rail{flex-basis:280px;}
.profx[data-profile-variant="option-b"] .profx__shell{gap:24px;}
.profx[data-profile-variant="option-b"] .profx__main{max-width:none;}
.profx[data-profile-variant="option-b"] .profx__comments-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;}
.profx[data-profile-variant="option-b"] .profx__comments-grid .profx__act{min-height:104px;}
@media (max-width:1100px){
  .profx[data-profile-variant="option-b"] .profx__comments-grid{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .profx[data-profile-variant="option-b"]{max-width:100%;}
}

/* === Profile Option B: stacked reviews above comments, both 2-column + paged === */
.profx[data-profile-variant="option-b"]{
  max-width:1480px;
}
.profx[data-profile-variant="option-b"] .profx__rail{
  flex-basis:270px;
}
.profx[data-profile-variant="option-b"] .profx__shell{
  gap:26px;
}
.profx[data-profile-variant="option-b"] .profx__activity-stack{
  display:flex;
  flex-direction:column;
  gap:26px;
  margin-top:26px;
}
.profx[data-profile-variant="option-b"] .profx__activity-section{
  min-width:0;
}
.profx[data-profile-variant="option-b"] .profx__reviews-grid,
.profx[data-profile-variant="option-b"] .profx__comments-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:12px;
}
.profx[data-profile-variant="option-b"] .profx__reviews-grid .profx__act,
.profx[data-profile-variant="option-b"] .profx__comments-grid .profx__act{
  min-height:104px;
}
.profx[data-profile-variant="option-b"] .profx__activity-pager{
  margin:16px 0 0;
}
@media (max-width:1100px){
  .profx[data-profile-variant="option-b"] .profx__reviews-grid,
  .profx[data-profile-variant="option-b"] .profx__comments-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:900px){
  .profx[data-profile-variant="option-b"]{
    max-width:100%;
  }
  .profx[data-profile-variant="option-b"] .profx__activity-stack{
    gap:22px;
    margin-top:22px;
  }
}