.shell.social-shell {
  height: 100dvh;
  grid-template-columns: 72px minmax(0, 1fr);
}
.social-shell .sidebar, .social-shell .details { display: none; }
.social-shell .main { display: flex; min-height: 0; }
.social-shell .rail { min-height: 0; overflow-y: auto; }
.social-rail { display: grid; place-items: center; color: #587587; }
.social-rail-icon {
  width: 19px;
  height: 19px;
  background:
    linear-gradient(currentColor,currentColor) 0 0 / 8px 8px,
    linear-gradient(currentColor,currentColor) 100% 0 / 8px 8px,
    linear-gradient(currentColor,currentColor) 0 100% / 8px 8px,
    linear-gradient(currentColor,currentColor) 100% 100% / 8px 8px;
  background-repeat: no-repeat;
}
.social-page {
  --social-ink: #193d52;
  --social-muted: #526e7e;
  --social-accent: #176a95;
  --social-line: #d9e8ef;
  --social-paper: #ffffff;
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  background: #edf5f8;
  color: var(--social-ink);
}
.social-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:none;
  gap:8px;
  min-height:60px;
  padding: 0 clamp(10px,4vw,36px);
  background:var(--social-paper);
  border-bottom:1px solid var(--social-line);
}
.social-navigation,.social-tools,.social-filters,.social-card-actions,.social-profile-actions,.social-form-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.social-navigation button,.social-tools button,.social-filters button {
  padding:8px 10px;
  border-radius:9px;
  color:var(--social-muted);
  font-size:13px;
  font-weight:600;
}
.social-navigation button[aria-current],.social-filters button[aria-current] {
  color:var(--social-accent);
  background:#deeff9;
}
.social-tools .social-own { padding:2px; }
.social-content { flex:1; min-height:0; overflow:auto; }
.social-column { width:min(640px,100%); margin:auto; padding:24px 16px 52px; }
.social-intro-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px; }
.social-intro h1 { margin:0; font-size:clamp(26px,5vw,42px); line-height:1.06; letter-spacing:-.04em; overflow-wrap:anywhere; }
.social-intro-header p,.social-bio { margin:7px 0 0; color:var(--social-muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.social-intro-clips { padding:17px; border-radius:16px; color:#edf9ff; background:#163a52; }
.social-intro-clips p { color:#bddcea; }
.social-page .primary { background:var(--social-accent); font-size:13px; white-space:nowrap; }
.social-intro-clips .primary { background:#e5f6ff; color:#163a52; }
.social-filters { margin-bottom:14px; }
.social-profile,.social-card {
  background:var(--social-paper);
  border:1px solid var(--social-line);
  border-radius:16px;
}
.social-card { margin-bottom:13px; overflow:hidden; }
.social-profile { padding:18px; margin-bottom:12px; }
.social-profile-main,.social-counts { display:flex; gap:12px; align-items:center; }
.social-profile-main > div { min-width:0; }
.social-profile-actions { margin-top:12px; }
.social-counts { flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--social-muted); }
.social-counts strong { color:var(--social-ink); }
.social-handle { margin-top:5px; color:var(--social-muted); font-size:13px; overflow-wrap:anywhere; }
.social-avatar {
  display:grid;
  flex:none;
  place-items:center;
  overflow:hidden;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#dcedf7;
  color:#235975;
  font-size:13px;
  font-weight:700;
}
.social-avatar.large { width:62px; height:62px; font-size:19px; }
.social-avatar img { width:100%; height:100%; object-fit:cover; }
.social-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px 6px;
}
.social-person { display:flex; min-width:0; align-items:center; gap:8px; padding:2px; text-align:left; }
.social-person > span:last-child { min-width:0; overflow-wrap:anywhere; }
.social-person strong,.social-person small { display:block; }
.social-person strong { font-size:13px; }
.social-person small,.social-card-top time { color:var(--social-muted); font-size:11px; }
.social-card-top time { flex:none; }
.social-post-text { margin:0; padding:9px 14px 12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.social-photo { display:block; width:100%; max-height:560px; object-fit:contain; background:#e8f1f6; }
.social-video-frame { background:#102b3e; margin:6px 0; }
.social-video {
  display:block;
  margin:auto;
  width:100%;
  height:min(62dvh,560px);
  object-fit:contain;
}
.social-card-actions { padding:6px 10px 10px; }
.social-card-actions button,.social-secondary,.social-more {
  min-height:35px;
  padding:6px 8px;
  border-radius:8px;
  font-size:12px;
  color:var(--social-accent);
}
.social-card-actions button[aria-pressed="true"] { background:#deeff9; color:#145679; }
.social-card-actions button:hover,.social-secondary:hover,.social-more:hover { background:#eaf5fb; }
.social-more[hidden] { display:none; }
.social-status,.social-dialog-status { color:var(--social-muted); font-size:13px; }
.social-status:empty,.social-dialog-status:empty,.social-form-error:empty { display:none; }
.social-dialog {
  color:var(--social-ink);
  width:min(450px,calc(100vw - 20px));
  max-height:calc(100dvh - 20px);
  overflow:auto;
  padding:15px;
  border:1px solid var(--social-line);
  border-radius:17px;
  background:#fff;
}
.social-dialog::backdrop { background:#0e263f72; }
.social-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; }
.social-dialog-heading h2 { margin:0; font-size:19px; }
.social-form { display:grid; gap:10px; }
.social-form label { display:grid; gap:5px; color:var(--social-muted); font-size:13px; }
.social-form input,.social-form textarea {
  padding:8px;
  width:100%;
  min-width:0;
  border:1px solid var(--social-line);
  border-radius:8px;
  color:var(--social-ink);
  font:inherit;
  font-size:16px;
}
.social-form .social-checkbox { display:flex; flex-direction:row; align-items:center; }
.social-form .social-checkbox input { width:auto; }
.social-form .primary { justify-self:end; }
.social-form-error,.social-danger { color:#a23746; font-size:13px; }
.social-form-actions { justify-content:flex-end; }
.social-people-list { padding-top:9px; }
.social-people-list button { width:100%; padding:8px; border-bottom:1px solid var(--social-line); }
.social-comment { padding:10px 0; border-bottom:1px solid var(--social-line); font-size:13px; }
.social-comment button:first-child { color:var(--social-accent); font-weight:600; padding-left:0; }
.social-comment time { color:var(--social-muted); font-size:11px; }
.social-comment p { margin:5px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.social-comment-delete { color:#a23746; padding-left:0; }
.social-comment-form { margin-top:12px; }
@media(max-width:700px) {
  .shell.social-shell { grid-template-columns:52px minmax(0,1fr); }
  .social-shell .railbtn { width:38px; height:40px; }
  .social-shell .rail { padding-top:12px; gap:7px; }
  .social-shell .rail .logo { margin-bottom:8px; }
  .social-column { padding:16px 8px 32px; }
  .social-header { padding:0 3px; gap:2px; min-height:49px; }
  .social-navigation,.social-tools { gap:0; }
  .social-navigation button,.social-tools button { padding:7px 5px; font-size:12px; }
  .social-card-top { padding:8px; }
  .social-intro-clips { padding:10px; }
  .social-intro-header { flex-wrap:wrap; }
  .social-card-top time { max-width:64px; text-align:right; }
}

.social-counts button {
  min-height:40px;
  padding:5px 8px;
  border-radius:8px;
  color:inherit;
}
.social-counts button:not(:disabled):hover,
.social-counts button:focus-visible {
  background:#eaf5fb;
  color:var(--social-ink);
}
.social-counts button:disabled { cursor:default; }

.social-feed-search {
  display:flex;
  align-items:center;
  gap:6px;
  margin:10px 0;
}
.social-feed-search input {
  flex:1;
  min-width:0;
  margin:0;
}
.social-feed-search input::-webkit-search-cancel-button { appearance:none; }
.social-feed-search [hidden] { display:none; }

.clip-controls {
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  color:#f1f8ff;
}
.clip-controls button {
  flex:none;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border-radius:8px;
  color:inherit;
}
.clip-controls button:hover { background:#ffffff22; }
.clip-controls button:focus-visible { outline:2px solid currentColor; }
.clip-controls input[type=range] {
  flex:1;
  width:auto;
  min-width:0;
  margin:0;
  padding:0;
  accent-color:#71d0ff;
}
.clip-icon { width:22px; height:22px; }
.clip-controls .clip-pause,
.clip-controls .clip-sound,
.clip-controls .is-playing .clip-play,
.clip-controls .has-sound .clip-mute { display:none; }
.clip-controls .is-playing .clip-pause,
.clip-controls .has-sound .clip-sound { display:block; }
.clip-status { margin:0; padding:0 12px 10px; color:#f1f8ff; }
.social-video-frame:fullscreen { display:flex; flex-direction:column; }
.social-video-frame:fullscreen video { flex:1; height:auto; min-height:0; }