:root{
  --profile-bg:#050505;
  --profile-panel:#0a0a0a;
  --profile-card:#151515;
  --profile-card-soft:#1a1a1a;
  --profile-line:#242424;
  --profile-text:#e8e8e8;
  --profile-muted:#8f8f8f;
  --profile-accent:#9a87b9;
  --profile-font:var(--site-font);

  --i-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 20c-.55 0-1.02-.2-1.41-.59S2 18.55 2 18V6c0-.55.2-1.02.59-1.41S3.45 4 4 4h16c.55 0 1.02.2 1.41.59S22 5.45 22 6v12c0 .55-.2 1.02-.59 1.41S20.55 20 20 20H4Zm2-4h8v-2H6v2Zm0-3h12v-2H6v2Zm0-3h12V8H6v2Z'/%3E%3C/svg%3E");
  --i-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3ZM8 11c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3Zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5C23 14.17 18.33 13 16 13Z'/%3E%3C/svg%3E");
  --i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4Zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4Z'/%3E%3C/svg%3E");
  --i-feed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16v3H4V4Zm0 5h10v3H4V9Zm0 5h16v6H4v-6Zm12-5h4v3h-4V9Z'/%3E%3C/svg%3E");
  --i-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49 1a7.28 7.28 0 0 0-1.69-.98L14.5 2.42A.49.49 0 0 0 14 2h-4c-.25 0-.46.18-.5.42L9.12 5.07c-.61.23-1.18.55-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.12.22.37.31.6.22l2.49-1c.51.4 1.08.74 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.24 1.18-.58 1.69-.98l2.49 1c.23.08.48 0 .6-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
  --i-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m6.4 19-1.4-1.4 5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19Z'/%3E%3C/svg%3E");
}

html,
body{
  background:var(--profile-bg) !important;
}

.profile-page{
  margin:0;
  min-height:100dvh;
  color:var(--profile-text);
  font-family:var(--profile-font);
  background:var(--profile-bg);
}

.profile-shell{
  min-height:100dvh;
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:14px;
}

.profile-sidebar{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0;
  position:sticky;
  top:14px;
  height:calc(100dvh - 28px);
  max-height:calc(100dvh - 28px);
  border:2px solid #000;
  border-radius:18px;
  background:var(--profile-panel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  overflow:hidden;
}

.profile-main{
  border:2px solid #000;
  border-radius:18px;
  background:var(--profile-panel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.profile-nav-card{
  height:320px;
  min-height:320px;
  padding:28px 30px 14px;
  display:flex;
  flex-direction:column;
}

.profile-brand-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.profile-brand{
  display:inline-flex;
  color:#9f9f9f;
  text-decoration:none;
}

.profile-brand-mark{
  font-size:46px;
  line-height:.9;
  font-weight:800;
  font-style:italic;
  letter-spacing:-.08em;
}

.profile-brand-mark::after{
  content:"°";
  display:inline-block;
  margin-left:6px;
  font-size:20px;
  transform:translateY(-14px);
  opacity:.75;
}

.profile-top-actions{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.profile-mini-btn{
  height:32px;
  min-width:32px;
  padding:0 10px;
  border:1px solid #1c1c1c;
  border-radius:7px;
  background:rgba(31,41,55,.5);
  color:#d0d0d0;
  font-family:var(--profile-font);
  font-size:14px;
  font-style:italic;
  font-weight:800;
  line-height:1;
  box-shadow:none;
}

.profile-mini-btn:hover{
  background:rgba(31,41,55,.5);
  border-color:var(--profile-accent);
  box-shadow:none;
}

.profile-mini-btn:focus-visible{
  outline:1px solid var(--profile-accent);
  outline-offset:2px;
}

.profile-help-btn{
  width:32px;
  padding:0;
  border-radius:50%;
}

.profile-nav-grid{
  display:grid;
  grid-template-columns:repeat(6,44px);
  grid-template-rows:64px 64px;
  justify-content:center;
  justify-items:center;
  align-items:center;
  gap:0;
  width:264px;
  margin:auto;
  padding-top:14px;
}

.profile-nav-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  min-width:58px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#8f8f8f;
  color:#202020;
  box-shadow:0 3px 0 rgba(255,255,255,.18) inset,0 7px 14px rgba(0,0,0,.42);
  text-decoration:none;
  font-size:0;
}

.profile-nav-item:hover,
.profile-nav-item.active{
  background:var(--profile-accent);
  transform:translateY(-1px);
}

.profile-nav-item::before{
  content:"";
  width:24px;
  height:24px;
  background:currentColor;
  -webkit-mask:var(--ico,var(--i-chat)) center/contain no-repeat;
  mask:var(--ico,var(--i-chat)) center/contain no-repeat;
}

.profile-nav-chat{--ico:var(--i-chat)}
.profile-nav-users{--ico:var(--i-users)}
.profile-nav-user{--ico:var(--i-user)}
.profile-nav-feed{--ico:var(--i-feed)}
.profile-nav-gear{--ico:var(--i-gear)}
.profile-nav-item:nth-child(1){grid-column:2 / span 2;grid-row:1}
.profile-nav-item:nth-child(2){grid-column:4 / span 2;grid-row:1}
.profile-nav-item:nth-child(3){grid-column:1 / span 2;grid-row:2}
.profile-nav-item:nth-child(4){grid-column:3 / span 2;grid-row:2}
.profile-nav-item:nth-child(5){grid-column:5 / span 2;grid-row:2}
.profile-nav-item span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* Match the messenger top-left block exactly. */
.profile-nav-card{
  height:253px;
  min-height:253px;
  padding:24px 24px 14px;
  gap:18px;
  background:var(--profile-panel);
  border-bottom:1px solid #171717;
}

.profile-brand-row{
  gap:12px;
}

.profile-brand{
  gap:6px;
}

.profile-brand-mark{
  font-size:42px;
}

.profile-brand-mark::after{
  content:"◦";
  font-size:22px;
  transform:translateY(-10px);
}

.profile-nav-grid{
  height:158px;
  margin:0 auto;
  padding:16px 0 14px;
}

.profile-side-card{
  min-height:0;
  overflow:auto;
  flex:1 1 auto;
  padding:24px 30px 26px;
  background:var(--profile-panel);
}

.profile-action-line{
  display:block;
  width:100%;
  padding:4px 0;
  border:0;
  background:transparent;
  color:#969696;
  font-family:var(--site-font);
  font-size:16px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.1em;
  text-align:left;
  box-shadow:none;
}

.profile-action-line:hover{
  color:#c8c8c8;
  background:transparent;
  transform:none;
  box-shadow:none;
}

.profile-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  min-height:calc(100dvh - 28px);
  max-height:calc(100dvh - 28px);
  padding:22px 30px;
  overflow:auto;
}

.card{
  margin:0;
  padding:0;
  border:0;
  border-radius:18px;
  background:transparent;
  box-shadow:none;
}

.profile-hero{
  min-height:196px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:22px 26px;
  background:#101010;
  border-radius:4px;
}

.avatar{
  width:clamp(118px,9vw,170px);
  height:clamp(118px,9vw,170px);
  flex:0 0 auto;
  border-radius:50%;
  object-fit:cover;
  background:#202020;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 16px 36px rgba(0,0,0,.45);
}

.info{
  min-width:0;
  padding-top:0;
}

h1{
  margin:0;
  color:#f5f5f5;
  font-family:var(--profile-font);
  font-size:clamp(42px,4vw,66px);
  font-style:italic;
  font-weight:800;
  line-height:.9;
  letter-spacing:0;
}

.bio{
  margin:14px 0 0;
  color:#f0f0f0;
  font-family:var(--profile-font);
  font-size:clamp(22px,2.1vw,34px);
  font-style:italic;
  font-weight:800;
  line-height:1.1;
  white-space:pre-wrap;
}

.person-note{
  width:min(560px,100%);
  margin-top:12px;
  font-family:var(--site-font);
}

.person-note-label{
  margin-bottom:6px;
  color:#8d8d8d;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.person-note-text{
  padding:10px 12px;
  border:1px solid #242424;
  border-radius:8px;
  background:#171717;
  color:#bcbcbc;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.04em;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.person-note-editor{
  display:grid;
  gap:8px;
}

.person-note-editor textarea{
  min-height:74px;
  width:100%;
  resize:vertical;
  font-size:14px;
  line-height:1.35;
}

.person-note-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.person-note-actions button{
  min-height:34px;
  padding:8px 12px;
}

.profile-stats{
  display:none;
  padding:0 10px;
}

.profile-stats ul{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.profile-stats li{
  padding:8px 12px;
  border:1px solid #222;
  border-radius:8px;
  background:#111;
  color:#8f8f8f;
  font-family:var(--site-font);
  font-size:12px;
  letter-spacing:.04em;
}

.profile-stats span{
  color:#c0c0c0;
}

.profile-posts{
  min-height:360px;
  padding:14px;
  border-radius:18px;
  background:var(--profile-card);
  overflow:hidden;
}

.title-row{
  display:none;
}

.posts .new-post{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin:0 0 14px;
  padding:12px;
  border:1px solid #282828;
  border-radius:12px;
  background:#101010;
}

.posts .new-post.hidden{
  display:none !important;
}

.list{
  display:grid;
  gap:0;
}

.list>.post{
  display:grid;
  grid-template-columns:68px minmax(0,1fr);
  gap:12px;
  min-height:78px;
  padding:10px 0;
  border-top:0;
}

.list>.post:first-child{
  padding-top:0;
}

.list>.post:last-child{
  padding-bottom:0;
}

.post .meta{
  margin:0;
  color:#888;
  font-family:var(--profile-font);
  font-size:15px;
  font-weight:800;
  line-height:1.15;
  white-space:pre-line;
}

.post-content{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.post-image{
  width:180px;
  max-width:34%;
  aspect-ratio:1 / 1;
  flex:0 0 auto;
  border-radius:2px;
  object-fit:cover;
  background:#101010;
}

.post-body{
  min-width:0;
  color:#8f8f8f;
  font-family:var(--site-font);
  font-size:clamp(18px,1.45vw,26px);
  font-weight:800;
  line-height:1.35;
  letter-spacing:.13em;
  overflow-wrap:anywhere;
}

.post-empty{
  padding:30px 10px;
  color:#777;
  font-family:var(--site-font);
  font-size:16px;
  font-weight:800;
  letter-spacing:.12em;
}

.hidden{
  display:none !important;
}

.edit{
  width:min(620px,100%);
  margin-top:16px;
  display:grid;
  gap:12px;
}

.label{
  color:#aaa;
  font-family:var(--site-font);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

input,
textarea{
  border:1px solid #303030;
  border-radius:10px;
  background:#202020;
  color:#e0e0e0;
}

textarea{
  min-height:90px;
}

.btn-file{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  border:1px solid #343434;
  border-radius:10px;
  background:#242424;
  color:#e0e0e0;
  cursor:pointer;
  font-family:var(--site-font);
  font-weight:700;
}

.btn-file input{
  display:none;
}

#btn_save,
#btn_post{
  border-radius:10px;
  background:#9a9a9a;
  color:#202020;
  font-family:var(--site-font);
  font-weight:800;
}

.hint{
  color:#d4b36a;
  font-family:var(--site-font);
}


input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible{
  outline:none;
  border-color:#5a5a5a;
  box-shadow:0 0 0 1px #5a5a5a;
}

#btn_post:focus,
#btn_post:focus-visible,
#btn_save:focus,
#btn_save:focus-visible,
.btn-file:focus-within{
  outline:none;
  box-shadow:0 0 0 1px #5a5a5a;
}

#sessions_container,
#auth_prompt{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:6vh 16px;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
  z-index:5000;
}

#sessions_container:not(.hidden),
#auth_prompt:not(.hidden){
  display:flex;
}

#sessions_container .sheet,
#auth_prompt .sheet{
  width:min(760px,100%);
  padding:18px;
  border:1px solid #2a2a2a;
  border-radius:18px;
  background:#151515;
  color:#d0d0d0;
  box-shadow:0 18px 44px rgba(0,0,0,.7);
}

#sessions_container header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 4px 12px;
  border-bottom:1px solid #2a2a2a;
}

#sessions_container .actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding-top:12px;
  margin-top:12px;
  border-top:1px solid #2a2a2a;
}

#sessions_container table{
  width:100%;
  border-collapse:collapse;
}

#sessions_container th,
#sessions_container td{
  padding:12px;
  text-align:left;
}

.ghost{
  border:1px solid #343434;
  border-radius:10px;
  background:#242424;
  color:#e0e0e0;
}

.ghost.btn-icon{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.profile-brand-mark::after{
  content:"\25E6";
}

#sessions_container .ghost.btn-icon[data-action="close"]{
  width:42px;
  height:42px;
  min-width:42px;
  border:0;
  border-radius:50%;
  background:#9a9a9a;
  color:#202020;
  font-size:0;
  line-height:1;
}

#sessions_container .ghost.btn-icon[data-action="close"]:hover{
  background:#b1b1b1;
}

#sessions_container .ghost.btn-icon[data-action="close"]::before{
  content:"";
  display:block;
  width:22px;
  height:22px;
  margin:auto;
  background:currentColor;
  -webkit-mask:var(--i-close) center/contain no-repeat;
  mask:var(--i-close) center/contain no-repeat;
}

#sessions_container thead th{
  color:#a0a0a0;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

#sessions_container tbody tr{
  border-bottom:1px solid #282828;
}

#sessions_container tbody tr:hover{
  background:#202020;
}

/* Messenger-identical sessions modal and top branding. */
.profile-brand{
  align-items:center;
  gap:6px;
}

.profile-brand-mark{
  width:auto;
  height:auto;
  background:transparent;
  border:0;
  border-radius:0;
  color:#9f9f9f;
  font-family:var(--profile-font);
  font-size:42px;
  line-height:.9;
  font-style:italic;
  font-weight:800;
  letter-spacing:-.08em;
}

.profile-brand-mark::after{
  content:"\25E6";
  display:inline-block;
  margin-left:6px;
  font-size:22px;
  transform:translateY(-10px);
  opacity:.75;
}

#sessions_container{
  align-items:flex-start !important;
  justify-content:center !important;
  padding:6vh 16px !important;
  background:rgba(0,0,0,.65) !important;
  backdrop-filter:blur(8px) !important;
}

#sessions_container .sheet{
  width:min(760px,100%) !important;
  padding:18px !important;
  border:1px solid #2a2a2a !important;
  border-radius:18px !important;
  background:#151515 !important;
  color:#d0d0d0 !important;
  box-shadow:0 18px 44px rgba(0,0,0,.7) !important;
}

#sessions_container header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:6px 4px 12px !important;
  border-bottom:1px solid #2a2a2a !important;
}

#sessions_container header strong{
  color:#e0e0e0 !important;
  font-size:16px !important;
  font-weight:700 !important;
}

#sessions_container .actions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:8px !important;
  padding-top:12px !important;
  margin-top:12px !important;
  border-top:1px solid #2a2a2a !important;
}

#sessions_container table{
  width:100% !important;
  margin-top:8px !important;
  border-collapse:collapse !important;
}

#sessions_container th,
#sessions_container td{
  padding:12px !important;
  text-align:left !important;
}

#sessions_container thead th{
  padding:10px 12px !important;
  color:#a0a0a0 !important;
  opacity:1 !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
}

#sessions_container tbody tr{
  border-bottom:1px solid #282828 !important;
  background:transparent !important;
}

#sessions_container tbody tr:hover{
  background:#202020 !important;
}

#sessions_container tbody td{
  color:#d0d0d0 !important;
  font-size:14px !important;
}

#sessions_container button:not(.btn-icon){
  padding:8px 12px !important;
  border:1px solid #343434 !important;
  border-radius:12px !important;
  background:#242424 !important;
  color:#e0e0e0 !important;
  box-shadow:none !important;
}

#sessions_container button:not(.btn-icon):hover{
  background:#2e2e2e !important;
  border-color:#4a4a4a !important;
  transform:none !important;
}

#sessions_container .actions button{
  padding:11px 18px !important;
  border-color:#9a9a9a !important;
  background:#9a9a9a !important;
  color:#202020 !important;
}

#sessions_container .actions button:hover{
  border-color:#b1b1b1 !important;
  background:#b1b1b1 !important;
}

#sessions_container .ghost.btn-icon[data-action="close"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#9a9a9a !important;
  color:#202020 !important;
  font-size:0 !important;
  line-height:0 !important;
}

#sessions_container .ghost.btn-icon[data-action="close"]:hover{
  background:#b1b1b1 !important;
  transform:none !important;
}

#sessions_container .ghost.btn-icon[data-action="close"]::before{
  content:"";
  display:block !important;
  width:22px !important;
  height:22px !important;
  margin:auto !important;
  background:currentColor !important;
  -webkit-mask:var(--i-close) center/contain no-repeat !important;
  mask:var(--i-close) center/contain no-repeat !important;
}

#auth_prompt h3{
  margin:0 0 8px;
}

#auth_prompt p{
  margin:0 0 12px;
  color:#aaa;
}

#auth_prompt .hstack{
  display:flex;
  gap:8px;
}

@media (max-width:900px){
  .profile-shell{
    grid-template-columns:1fr;
    padding:0;
  }

  .profile-sidebar{
    display:none;
  }

  .profile-main{
    min-height:100dvh;
    padding:14px;
    border-radius:0;
  }

  .profile-hero{
    min-height:auto;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:18px;
    padding:24px 14px;
  }

  h1{
    font-size:40px;
  }

  .bio{
    font-size:24px;
  }

  .list>.post{
    grid-template-columns:1fr;
    gap:8px;
  }

  .post-content{
    flex-direction:column;
    gap:12px;
  }

  .post-image{
    width:min(260px,100%);
    max-width:100%;
  }

  .post .meta{
    font-size:16px;
  }
}

/* Final SN mark alignment, shared with messenger. */
.profile-brand-mark{
  position:relative;
  display:inline-block;
  padding-right:10px;
}

.profile-brand-mark::after{
  content:"\00B0";
  position:absolute;
  left:calc(100% - 4px);
  top:4px;
  display:block;
  margin-left:0;
  font-size:17px;
  line-height:1;
  transform:none;
  opacity:.75;
  letter-spacing:0;
}