.app {
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  --sidebar-rail:72px;
  --sidebar-full:248px;
  --nav-icon-slot:44px;
  --sidebar-rail-gutter:calc((var(--sidebar-rail) - var(--nav-icon-slot)) / 2);
}

.sidebar {
  width:var(--sidebar-full);
  position:fixed;
  inset:0 auto 0 0;
  background:var(--bg);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  --sidebar-pad:20px;
  --sidebar-top-height:44px;
  padding:16px 0 0;
  overflow:hidden;
  z-index:30;
}

.sidebar-top {
  position:relative;
  flex-shrink:0;
  height:var(--sidebar-top-height);
  padding:0 var(--sidebar-pad);
}

.sidebar-top .sidebar-pin {
  position:absolute;
  top:4px;
  right:calc(var(--sidebar-pad) - 4px);
  z-index:2;
}

@media(min-width:761px) {
  .sidebar.rail {
    width:var(--sidebar-rail);
    transition:width 180ms ease,box-shadow 180ms ease;
  }

  .sidebar.rail:hover,
  .sidebar.rail.pinned {
    width:var(--sidebar-full);
  }

  .sidebar.rail:hover:not(.pinned) {
    box-shadow:12px 0 32px #19343e1f;
  }

  .sidebar.rail .sidebar-top .sidebar-pin {
    right:auto;
    left:50%;
    transform:translateX(-50%);
  }

  .sidebar.rail:hover .sidebar-top .sidebar-pin,
  .sidebar.rail.pinned .sidebar-top .sidebar-pin {
    left:calc(var(--sidebar-pad) - 4px);
    right:auto;
    transform:none;
  }

  .sidebar.rail:not(:hover):not(.pinned) .sidebar-community,
  .sidebar.rail:not(:hover):not(.pinned) .nav-text,
  .sidebar.rail:not(:hover):not(.pinned) .badge,
  .sidebar.rail:not(:hover):not(.pinned) .account-details,
  .sidebar.rail:not(:hover):not(.pinned) .account>svg,
  .sidebar.rail:not(:hover):not(.pinned) .sidebar-login {
    display:none;
  }

  .sidebar.rail:not(:hover):not(.pinned) .nav-item {
    width:var(--nav-icon-slot);
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
    padding:0;
    gap:0;
  }

  .sidebar.rail:not(:hover):not(.pinned) .nav-item.has-badge .nav-icon::after {
    content:"";
    position:absolute;
    top:8px;
    right:8px;
    width:6px;
    height:6px;
    background:var(--orange);
    border-radius:50%;
  }

  .sidebar.rail:not(:hover):not(.pinned) .sidebar-scroll {
    padding:0 var(--sidebar-rail-gutter);
  }

  .sidebar.rail:not(:hover):not(.pinned) .nav-divider {
    margin:18px 12px;
  }

  .sidebar.rail:not(:hover):not(.pinned) .sidebar-bottom {
    margin:8px 6px;
    padding:8px 6px;
    background:transparent;
    border:0;
    box-shadow:none;
  }

  .sidebar.rail:not(:hover):not(.pinned) .sidebar-bottom::before {
    display:none;
  }

  .sidebar.rail:not(:hover):not(.pinned) .account {
    justify-content:center;
    width:auto;
    margin:0;
    padding:6px;
  }

  .sidebar.rail:not(:hover):not(.pinned) .account .avatar {
    flex-shrink:0;
  }
}

.brand {
  display:block;
  flex-shrink:0;
  min-width:0;
  padding:0 calc(var(--sidebar-pad) + 10px) 28px;
}

.sidebar-top .brand {
  padding:0;
}

.brand-logo {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:640 / 427;
  object-fit:contain;
}

.nav-label {
  font-size:13px;
  font-weight:700;
  letter-spacing:1.6px;
  color:var(--muted);
  display:block;
  padding:0 12px;
  margin:0 0 16px;
}

.nav-item {
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 14px;
  margin:3px 0;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  border-radius:8px;
  position:relative;
}

.nav-icon {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:20px;
  height:20px;
}

@media(min-width:761px) {
  .sidebar.rail:not(:hover):not(.pinned) .nav-icon {
    width:var(--nav-icon-slot);
    height:var(--nav-icon-slot);
  }
}

.nav-item svg {
  flex-shrink:0;
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
}

.nav-item:hover {
  background:var(--surface);
  color:var(--ink);
}

.nav-item.active {
  background:#e8f9fa;
  color:#0e5164;
}

.nav-item.active .nav-icon::before {
  content:'';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:20px;
  width:3px;
  background:var(--cyan);
  border-radius:3px;
  left:0;
}

@media(min-width:761px) {
  .sidebar.rail:hover .nav-item.active .nav-icon::before,
  .sidebar.rail.pinned .nav-item.active .nav-icon::before {
    left:calc(var(--sidebar-pad) * -1 - 14px);
  }
}

.sidebar:not(.rail) .nav-item.active .nav-icon::before,
.sidebar.rail.open .nav-item.active .nav-icon::before {
  left:calc(var(--sidebar-pad) * -1 - 14px);
}

.nav-item.active svg {
  color:#0496ad;
}

.badge {
  margin-left:auto;
  background:#e9f2f4;
  color:var(--deep);
  border-radius:6px;
  font-size:13px;
  padding:2px 6px;
}

.nav-divider {
  border-top:1px solid var(--border);
  margin:18px 12px;
}

.sidebar-community {
  margin-top:25px;
}

.sidebar-community>a {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  font-weight:600;
  padding:7px 12px;
}

.mini-icon {
  width:29px;
  height:29px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  flex-shrink:0;
}

.cyan {
  background:#d9f5f7;
  color:#0e5164;
}

.lime {
  background:#e9f6d6;
  color:#496521;
}

.orange {
  background:#ffe6d2;
  color:#9a4d16;
}

.online-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:#72b75a;
  border-radius:100%;
  flex-shrink:0;
}

.sidebar-community .online-dot {
  margin-left:auto;
}

.discover {
  color:var(--muted);
  font-size:13px;
  display:block;
  padding:15px 12px;
}

.sidebar-scroll {
  flex:1 1 auto;
  min-height:0;
  overflow-x:clip;
  overflow-y:auto;
  padding:0 var(--sidebar-pad);
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--muted) 55%,transparent) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
  width:10px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background:transparent;
  margin:8px 0;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background-color:color-mix(in srgb,var(--muted) 45%,transparent);
  border:3px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background-color:color-mix(in srgb,var(--muted) 75%,transparent);
}

.sidebar-bottom {
  position:relative;
  z-index:2;
  flex-shrink:0;
  margin:8px;
  padding:2px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 24px #19343e18;
}

.sidebar-bottom::before {
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  bottom:calc(100% + 8px);
  height:72px;
  background:linear-gradient(to top,#000,transparent);
  pointer-events:none;
  opacity:1;
  z-index:2;
  transition:opacity 160ms ease;
}

.sidebar-bottom.at-end::before {
  opacity:0;
}

.account-menu {
  position:relative;
}

.sidebar-login {
  display:flex;
  width:100%;
  margin:6px 0 8px;
  text-decoration:none;
}

.account {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  width:calc(100% + 16px);
  margin:6px -8px 8px;
  padding:10px 8px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:inherit;
  text-align:left;
}

.account:hover,
.account[aria-expanded="true"] {
  background:#eef8f9;
}

.dark .account:hover,
.dark .account[aria-expanded="true"] {
  background:color-mix(in srgb,var(--surface) 72%,white);
}

.sidebar-bottom>.dropdown {
  left:0;
  right:0;
  top:auto;
  bottom:calc(100% + 8px);
  width:auto;
  z-index:3;
}

.topbar-end {
  margin-left:auto;
}

.account .account-details {
  flex:1;
}

.account strong {
  display:block;
  font-size:13px;
}

.account small {
  display:block;
  margin-top:3px;
  font-size:13px;
}

.account>svg {
  width:16px;
  color:var(--muted);
}

.shell {
  margin-left:var(--sidebar-full);
  transition:margin-left 180ms ease;
}

@media(min-width:761px) {
  .app .shell {
    margin-left:var(--sidebar-rail);
  }

  .app.sidebar-pinned .shell {
    margin-left:var(--sidebar-full);
  }
}

.sidebar-pin.pinned {
  color:var(--cyan);
}

.sidebar-pin {
  flex-shrink:0;
}

.topbar {
  height:81px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  padding:0 38px;
  display:flex;
  align-items:center;
  gap:22px;
  position:sticky;
  top:0;
  z-index:20;
}

.topbar-brand {
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.topbar-brand .brand-logo {
  display:block;
  width:auto;
  height:46px;
  max-width:min(168px,22vw);
  aspect-ratio:auto;
  object-fit:contain;
}

.global-search {
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  max-width:590px;
  color:var(--muted);
}

.global-search input {
  border:0;
  background:transparent;
  padding:8px 0;
  font-size:13px;
}

.global-search kbd {
  font-size:13px;
  border:1px solid var(--border);
  border-radius:4px;
  padding:2px 6px;
  color:#98a6aa;
}

.demo-pill {
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  border:1px solid var(--border);
  border-radius:5px;
  padding:5px 7px;
  color:var(--muted);
  white-space:nowrap;
  margin-left:auto;
}

.icon-button {
  border:0;
  background:transparent;
  padding:7px;
  color:var(--muted);
}

.notification-button {
  position:relative;
}

.notification-button i {
  position:absolute;
  width:5px;
  height:5px;
  background:var(--orange);
  border-radius:50%;
  top:4px;
  right:7px;
}

.notification-anchor {
  position:relative;
}

.notification-popover {
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  z-index:30;
  width:min(380px,calc(100vw - 24px));
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 14px 40px #0002;
  overflow:hidden;
}

.notification-popover-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}

.notification-popover-head strong {
  font-size:14px;
}

.notification-popover-head .text-link {
  font-size:12px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.notification-popover-list {
  max-height:min(360px,50vh);
  overflow:auto;
}

.notification-row.compact {
  gap:12px;
  padding:12px 16px;
}

.notification-popover-empty {
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:28px 16px;
}

.notification-popover-empty p {
  margin:8px 0 0;
  font-size:13px;
  color:var(--muted);
}

.notification-popover-all {
  display:block;
  text-align:center;
  margin:0;
  border-radius:0;
  border-top:1px solid var(--border);
}

.avatar {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius:50%;
  font-size:13px;
  font-weight:700;
  border:2px solid var(--surface);
  color:#38535c;
  background:#d4e5e9;
}

.avatar-1 {
  background:#d3e4e0;
  color:#355d50;
}

.avatar-2 {
  background:#eddccd;
  color:#765236;
}

.avatar-3 {
  background:#d8e2ec;
  color:#476581;
}

.avatar-4 {
  background:#e3ddee;
  color:#6b577c;
}

.avatar-0 {
  background:#f0dedc;
  color:#905c57;
}

.avatar.large {
  width:80px;
  height:80px;
  font-size:25px;
}

.feed-layout {
  display:grid;
  grid-template-columns:minmax(0,680px) 300px;
  gap:30px;
  max-width:1100px;
  padding:34px 38px;
  margin:0 auto;
}

.feed-main {
  min-width:0;
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:27px;
  gap:12px;
}

.eyebrow {
  font-size:13px;
  font-weight:700;
  letter-spacing:1.9px;
  color:var(--muted);
  display:block;
  margin-bottom:11px;
}

.page-heading h1 {
  font-size:28px;
}

.page-heading p {
  font-size:13px;
  color:var(--muted);
  margin-top:9px;
}

.date-label {
  font-size:13px;
  letter-spacing:1px;
  color:var(--muted);
  white-space:nowrap;
  align-self:flex-end;
  padding-bottom:5px;
}

.stories {
  display:flex;
  gap:12px;
  margin-bottom:25px;
  height:151px;
}

.story {
  position:relative;
  flex:1;
  min-width:0;
  border:0;
  border-radius:11px;
  background:#364e50;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  display:block;
  padding:13px;
  text-align:left;
  color:white;
}

.story:after {
  content:'';
  position:absolute;
  background:#132c3850;
  inset:0;
  z-index:0;
}

.story .avatar {
  position:relative;
  z-index:1;
  width:32px;
  height:32px;
  border:2px solid var(--cyan);
  font-size:13px;
}

.story strong {
  position:absolute;
  bottom:13px;
  left:13px;
  font-size:13px;
  z-index:1;
}

.story.own {
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-bottom:40px;
}

.story.own:after {
  display:none;
}

.story.own .avatar {
  border:0;
  width:42px;
  height:42px;
}

.story.own strong {
  left:0;
  right:0;
  text-align:center;
  bottom:17px;
  font-size:13px;
}

.story-plus {
  border:2px solid white;
  background:var(--cyan);
  border-radius:50%;
  height:20px;
  width:20px;
  color:var(--deep);
  font-size:15px;
  display:grid;
  place-items:center;
  z-index:2;
  margin-top:-10px;
  margin-left:27px;
}

.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:20px;
  overflow:hidden;
}

.composer {
  padding:18px 20px 13px;
}

.composer-input {
  display:flex;
  gap:13px;
  align-items:center;
}

.composer-input textarea {
  border:0;
  background:var(--bg);
  border-radius:8px;
  min-height:55px;
  height:55px;
  font-size:13px;
  padding:18px;
  resize:none;
}

.composer-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-top:16px;
}

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

.primary {
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  background:var(--deep);
  color:#fff;
  border:0;
  border-radius:7px;
  font-size:13px;
  font-weight:600;
  padding:11px 17px;
}

.primary:hover {
  background:#17687a;
}

.primary svg {
  width:15px;
  height:15px;
}

.quiet {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:4px 5px;
  font-size:13px;
  display:inline-flex;
  gap:6px;
  align-items:center;
}

.quiet svg {
  width:17px;
  height:17px;
}

.composer .quiet:first-child svg {
  color:#409967;
}

.composer .quiet:nth-child(2) svg {
  color:#d48750;
}

.composer .quiet:nth-child(3) svg {
  color:#6c85b2;
}

.feed-tabs {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  margin-bottom:19px;
  gap:15px;
  overflow-x:auto;
}

.feed-tabs>div {
  display:flex;
  gap:20px;
}

.feed-tabs button,.feed-tabs>a {
  border:0;
  background:transparent;
  border-radius:0;
  font-size:13px;
  padding:12px 2px;
  color:var(--muted);
  white-space:nowrap;
}

.feed-tabs .selected {
  color:var(--deep);
  border-bottom:2px solid var(--cyan);
  font-weight:700;
}

.post-header {
  display:flex;
  gap:11px;
  align-items:center;
  padding:20px 21px 0;
}

.post-header>div:nth-child(2) {
  flex:1;
}

.post-header strong {
  font-size:13px;
}

.post-header small {
  display:block;
  margin-top:4px;
  font-size:13px;
}

.post-menu {
  position:relative;
}

.dropdown {
  position:absolute;
  right:0;
  top:30px;
  z-index:10;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  padding:5px;
  width:150px;
  box-shadow:0 10px 25px #0002;
}

.dropdown button,
.dropdown a {
  display:flex;
  width:100%;
  border:0;
  border-radius:8px;
  background:transparent;
  font-size:13px;
  justify-content:flex-start;
  padding:9px 14px;
  cursor:pointer;
}

.dropdown button:hover,
.dropdown a:hover {
  background:var(--soft);
}

.menu-divider {
  border-top:1px solid var(--border);
  margin:4px 8px;
}

.post-copy {
  font-size:16px;
  line-height:1.85;
  white-space:pre-line;
  padding:16px 21px 19px;
}

.post-body-link {
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

.post-body-link:hover .post-copy {
  color:var(--deep);
}

.post-detail-page {
  max-width:700px;
}

.post-detail-back {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  border:0;
  padding:0;
  background:transparent;
  font:inherit;
  cursor:pointer;
}

.post-detail .post-copy-full {
  font-size:17px;
}

.post-comments-detail {
  border-top:1px solid var(--border);
  margin-top:4px;
  padding-top:8px;
}

.post-image {
  width:100%;
  height:310px;
  object-fit:cover;
  display:block;
}

.post-stats {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 21px;
  color:var(--muted);
  font-size:13px;
}

.post-stats>span {
  display:flex;
  gap:7px;
  align-items:center;
}

.reaction-circle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e7f7f9;
  border-radius:50%;
  width:20px;
  height:20px;
  color:#17a7ba;
}

.reaction-circle svg {
  width:11px;
  height:11px;
  fill:#17a7ba;
}

.post-actions {
  display:flex;
  border-top:1px solid var(--border);
  margin:0 20px;
  padding:10px 0;
  gap:20px;
}

.post-actions button {
  border:0;
  background:transparent;
  font-size:13px;
  color:var(--muted);
  padding:6px 5px;
  gap:7px;
}

.post-actions svg {
  width:17px;
  height:17px;
}

.post-actions .save-button {
  margin-left:auto;
}

.post-actions .saved {
  color:var(--deep);
}

.post-actions .saved svg,
.post-actions .saved svg path {
  fill:currentColor;
}

.post-actions .liked {
  color:#d27245;
}

.comments {
  border-top:1px solid var(--border);
  padding:15px 20px;
}

.comment {
  display:flex;
  gap:10px;
  margin-bottom:10px;
  font-size:16px;
}

.comment>div {
  background:var(--bg);
  padding:10px 14px;
  border-radius:10px;
}

.comment-form {
  display:flex;
  gap:8px;
}

.comment-form input {
  font-size:16px;
}

.feed-aside {
  padding-top:3px;
}

.welcome {
  background:#edf7f6;
  position:relative;
  padding:25px 23px;
  height:257px;
  color:#19343e;
}

.welcome .eyebrow {
  font-size:13px;
  color:#6f8c8d;
  margin-bottom:16px;
}

.welcome h2 {
  font-size:26px;
  line-height:1.2;
  letter-spacing:-1px;
}

.welcome p {
  font-size:13px;
  max-width:210px;
  color:#6b8387;
  margin-top:12px;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:var(--deep);
  font-weight:700;
  margin-top:17px;
}

.text-link svg {
  width:14px;
  height:14px;
}

.welcome-art {
  position:absolute;
  right:13px;
  bottom:15px;
  transform:rotate(-25deg);
  display:flex;
  align-items:center;
  gap:5px;
}

.welcome-art span {
  width:19px;
  border-radius:20px;
  display:block;
}

.art-cyan {
  height:39px;
  background:var(--cyan);
}

.art-orange {
  height:62px;
  background:var(--orange);
}

.art-lime {
  height:43px;
  background:var(--lime);
}

.recommendations {
  padding:20px;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:17px;
}

.section-heading h3 {
  font-size:13px;
}

.section-heading>a {
  font-size:13px;
  color:var(--muted);
}

.person-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
}

.person-row>div {
  flex:1;
}

.person-row strong {
  font-size:13px;
  display:block;
}

.person-row small {
  display:block;
  font-size:13px;
  margin-top:4px;
}

.person-row .avatar {
  width:34px;
  height:34px;
  font-size:13px;
}

.add-person {
  margin-left:auto;
  width:27px;
  height:27px;
  border:1px solid var(--border);
  border-radius:50%;
  padding:4px;
  color:var(--deep);
}

.add-person svg {
  width:13px;
}

.community-preview {
  display:block;
}

.community-image {
  height:106px;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:13px;
}

.design-image {
  background:#d7e5e2;
  position:relative;
  display:flex;
  align-items:center;
  padding:16px;
}

.design-image:before {
  content:'';
  width:87px;
  height:87px;
  border-radius:50%;
  border:18px solid #b8cdc6;
  position:absolute;
  right:5px;
  top:20px;
}

.design-image:after {
  content:'';
  height:80px;
  width:24px;
  background:#f7ba83;
  position:absolute;
  right:68px;
  top:-17px;
  transform:rotate(-30deg);
}

.design-image span {
  font-size:14px;
  font-weight:800;
  letter-spacing:1px;
  line-height:1.3;
  position:relative;
  z-index:1;
}

.tiny-label {
  font-size:13px;
  letter-spacing:1.3px;
  color:var(--muted);
  font-weight:700;
}

.community-preview h4 {
  margin:6px 0;
}

.community-preview p {
  color:var(--muted);
  font-size:13px;
}

.community-preview.compact {
  display:flex;
  gap:10px;
  align-items:center;
  border-top:1px solid var(--border);
  padding-top:16px;
  margin-top:16px;
}

.community-preview.compact>svg {
  margin-left:auto;
  width:14px;
  color:var(--muted);
}

.upcoming {
  padding:20px;
}

.upcoming h3 {
  margin:12px 0 9px;
  font-size:14px;
}

.upcoming p {
  color:var(--muted);
  font-size:13px;
}

.aside-links {
  font-size:13px;
  color:var(--muted);
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  padding:0 5px;
}

.aside-links span {
  width:100%;
  margin-top:-3px;
}

.caught-up {
  text-align:center;
  padding:15px 0 30px;
}

.check-circle {
  display:inline-grid;
  place-items:center;
  border:1px solid #b9cbd0;
  border-radius:50%;
  height:29px;
  width:29px;
  color:#87a1a8;
  margin-bottom:10px;
}

.check-circle svg {
  width:15px;
}

.caught-up strong {
  display:block;
  font-size:13px;
}

.caught-up p {
  font-size:13px;
  color:var(--muted);
  margin-top:5px;
}

footer {
  border-top:1px solid var(--border);
  padding:20px 38px;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:13px;
}

.page-container {
  padding:40px;
  max-width:1200px;
  margin:0 auto;
}

.page-container>h1 {
  margin-bottom:12px;
}

.subtitle {
  color:var(--muted);
  margin-bottom:30px;
  font-size:13px;
}

.padded {
  padding:25px;
}

.padded h2 {
  margin-bottom:14px;
}

.padded>p {
  margin-bottom:18px;
  color:var(--muted);
  font-size:13px;
}

.card-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.space-banner {
  height:140px;
  background:#d9eeee;
  display:grid;
  place-items:center;
  color:#0e5164;
}

.space-banner svg {
  width:50px;
  height:50px;
}

.space-card .button-row {
  margin-top:25px;
}

.space-card p {
  color:var(--muted);
  font-size:13px;
  margin:12px 0;
}

.inline-form {
  display:flex;
  gap:20px;
  align-items:end;
}

.inline-form label {
  flex:1;
}

.stack {
  display:flex;
  flex-direction:column;
  gap:18px;
}

.stack .primary {
  align-self:flex-start;
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.settings-layout {
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:30px;
  margin-top:30px;
}

.settings-nav {
  display:flex;
  flex-direction:column;
  gap:5px;
  align-self:start;
}

.settings-nav a {
  padding:12px 14px;
  border-radius:7px;
  font-size:13px;
  color:var(--muted);
}

.settings-nav a:hover,
.settings-nav a.active {
  background:var(--surface);
  color:var(--deep);
}

.settings-nav a.active {
  font-weight:600;
}

.settings-content {
  max-width:700px;
  min-width:0;
}

.saved-page {
  max-width:760px;
}

.saved-toolbar {
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:28px 0 24px;
}

.saved-categories {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.saved-categories a {
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
}

.saved-categories a:hover,
.saved-categories a.active {
  color:var(--deep);
  border-color:color-mix(in srgb,var(--deep) 35%,var(--border));
  background:color-mix(in srgb,var(--deep) 8%,var(--surface));
}

.saved-categories a.active {
  font-weight:600;
}

.saved-search {
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
}

.saved-search svg {
  width:16px;
  color:var(--muted);
  flex-shrink:0;
}

.saved-search input {
  flex:1;
  border:0;
  background:transparent;
  padding:12px 0;
  font-size:13px;
  min-width:0;
}

.saved-list {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.saved-row {
  padding:18px 20px;
}

.saved-row-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  font-size:12px;
  color:var(--muted);
}

.saved-kind {
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--deep);
}

.saved-row-body {
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.saved-row-body p {
  margin:6px 0 0;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

.saved-job-blurb {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.saved-empty {
  margin-top:8px;
  text-align:center;
  padding:36px 24px;
}

.preference-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid var(--border);
  gap:15px;
  font-size:13px;
}

.preference-row p {
  font-size:13px;
  color:var(--muted);
}

.toggle {
  width:40px;
  height:23px;
  padding:3px;
  border-radius:30px;
  justify-content:flex-start;
  background:var(--border);
}

.toggle span {
  height:15px;
  width:15px;
  background:white;
  border-radius:50%;
}

.toggle.on {
  background:#0e8298;
  justify-content:flex-end;
}

.checkbox {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:400;
}

.checkbox input {
  width:16px;
  margin:0;
}

.media-editor {
  margin-top:25px;
  border-top:1px solid var(--border);
  padding-top:25px;
}

.media-editor p {
  font-size:13px;
  color:var(--muted);
  margin:14px 0;
}

.media-editor label {
  margin:15px 0;
}

.media-preview {
  max-width:100%;
  max-height:300px;
  border-radius:8px;
}

.profile-cover {
  background:#ddebea;
  height:200px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#739790;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.5px;
  padding:20px;
}

.profile-header {
  display:flex;
  gap:25px;
  align-items:center;
  padding:25px;
  margin-top:-30px;
  position:relative;
}

.profile-header>div {
  flex:1;
}

.profile-header p {
  margin:8px 0;
  color:var(--muted);
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:15px 0;
}

.tags>* {
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:6px;
  font-size:13px;
  color:var(--muted);
}

.tags .selected {
  background:var(--soft);
  color:var(--deep);
}

.person-card {
  text-align:center;
}

.person-card p {
  font-size:13px;
  margin:12px 0;
}

.person-card .button-row {
  margin-top:20px;
  justify-content:center;
}

.job-card {
  display:flex;
  align-items:center;
  gap:25px;
  padding:25px;
}

.job-card>div:nth-child(2) {
  flex:1;
}

.job-card h2 {
  font-size:19px;
  margin:8px 0;
}

.job-card p {
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}

.job-card strong {
  font-size:13px;
}

.company-logo {
  width:60px;
  height:60px;
  background:var(--soft);
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:28px;
  font-weight:700;
  color:var(--deep);
}

.narrow {
  max-width:900px;
}

.notification-row {
  display:flex;
  text-align:left;
  align-items:center;
  width:100%;
  gap:18px;
  padding:24px;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
}

.notification-row.unread {
  background:var(--soft);
}

.notification-row>div {
  flex:1;
}

.notification-row strong {
  font-size:13px;
}

.notification-row small {
  display:block;
  margin-top:6px;
}

.notification-icon {
  background:#d6f0f3;
  border-radius:50%;
  padding:10px;
  color:#0e5164;
}

.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-top:25px;
}

.stats-grid h2 {
  margin-top:12px;
  font-size:29px;
}

.person-row select {
  width:160px;
}

.audit-entry {
  border-bottom:1px solid var(--border);
  padding:10px 0;
}

.auth-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:1000px;
  margin:60px auto;
  padding:40px;
  gap:70px;
  align-items:center;
}

.auth-intro h2 {
  font-size:50px;
  line-height:1.15;
  letter-spacing:-2px;
}

.auth-intro p {
  color:var(--muted);
  margin-top:25px;
  font-size:14px;
}

.auth-art {
  display:flex;
  gap:20px;
  margin-top:45px;
}

.auth-art .mini-icon {
  height:70px;
  width:70px;
  border-radius:20px;
  transform:rotate(-8deg);
}

.auth-art .mini-icon:nth-child(2) {
  transform:rotate(10deg);
}

.auth-art svg {
  height:30px;
  width:30px;
}

.auth-card {
  padding:30px;
}

.auth-card h1 {
  margin-top:20px;
  margin-bottom:12px;
  font-size:26px;
}

.auth-card>p {
  font-size:13px;
  color:var(--muted);
  margin-bottom:25px;
}

.auth-links {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--deep);
  margin-top:25px;
}

.password-field {
  display:flex;
  align-items:center;
}

.password-field button {
  font-size:13px;
  border:0;
}

.form-error {
  color:#b64934;
  background:#fff2ed;
  padding:12px;
  border-radius:7px;
  font-size:13px;
}

.chat-layout {
  display:flex;
  height:calc(100dvh - 81px);
  overflow:hidden;
}

.server-rail {
  width:62px;
  padding:18px 10px;
  display:flex;
  flex-direction:column;
  gap:13px;
  background:var(--bg);
  border-right:1px solid var(--border);
  flex-shrink:0;
}

.server-rail a {
  height:40px;
  width:40px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#d8f0ee;
  color:#0e5164;
  font-weight:700;
}

.channel-sidebar {
  background:var(--surface);
  width:222px;
  flex-shrink:0;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
}

.channel-title {
  height:76px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px;
  gap:10px;
}

.channel-title h3 {
  font-size:13px;
}

.channel-title svg {
  width:15px;
  color:var(--muted);
}

.channel-search {
  margin:18px 15px;
  width:calc(100% - 30px);
  font-size:13px;
  background:var(--bg);
  padding:10px;
}

.channel-sidebar .nav-label {
  margin:17px 0 10px;
  padding:0 20px;
  font-size:13px;
}

.channel-list {
  padding:0 10px;
}

.channel-list a {
  display:flex;
  gap:10px;
  padding:10px;
  border-radius:6px;
  color:var(--muted);
  font-size:13px;
}

.channel-list a span {
  font-size:17px;
  line-height:1;
}

.channel-list a.selected {
  background:var(--soft);
  color:var(--deep);
  font-weight:600;
}

.channel-voice {
  border:0;
  justify-content:flex-start;
  font-size:13px;
  padding:10px 20px;
}

.channel-voice svg {
  width:17px;
}

.channel-voice small {
  margin-left:auto;
  font-size:13px;
}

.channel-account {
  margin-top:auto;
  padding:17px 10px;
  border-top:1px solid var(--border);
  display:flex;
  gap:7px;
  align-items:center;
}

.channel-account strong {
  font-size:13px;
  display:block;
}

.channel-account small {
  display:block;
  font-size:13px;
  margin-top:3px;
}

.channel-account .avatar {
  width:30px;
  height:30px;
  font-size:13px;
}

.channel-account .icon-button {
  margin-left:auto;
}

.chat-main {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:var(--surface);
}

.chat-header {
  height:76px;
  border-bottom:1px solid var(--border);
  padding:18px 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-shrink:0;
}

.chat-header h2 {
  font-size:16px;
}

.chat-header small {
  font-size:13px;
}

.chat-header svg {
  width:18px;
}

.message-history {
  overflow-y:auto;
  flex:1;
  padding:30px 25px;
}

.chat-welcome {
  padding:25px 0 30px;
}

.channel-symbol {
  display:inline-grid;
  place-items:center;
  background:var(--soft);
  color:var(--deep);
  font-size:35px;
  border-radius:17px;
  height:60px;
  width:60px;
  margin-bottom:20px;
}

.chat-welcome h1 {
  font-size:25px;
}

.chat-welcome p {
  font-size:13px;
  color:var(--muted);
  margin-top:8px;
}

.date-separator {
  border-top:1px solid var(--border);
  text-align:center;
  position:relative;
  margin:20px 0 30px;
}

.date-separator span {
  position:relative;
  top:-9px;
  background:var(--surface);
  font-size:13px;
  padding:0 15px;
  color:var(--muted);
}

.chat-message {
  display:flex;
  gap:13px;
  margin-bottom:25px;
}

.message-body {
  min-width:0;
  flex:1;
}

.message-body strong {
  font-size:13px;
}

.message-body time,.message-body small {
  font-size:13px;
  color:var(--muted);
  margin-left:10px;
}

.message-body p {
  font-size:13px;
  margin-top:6px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.message-tools {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:7px;
}

.message-tools button {
  font-size:13px;
  border:0;
  background:var(--bg);
  padding:3px 6px;
}

.message-tools svg {
  width:12px;
  height:12px;
}

.typing-indicator {
  font-size:13px;
  color:var(--muted);
  padding:6px 25px;
}

.message-composer {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:10px;
  margin:8px 25px 25px;
  padding:8px;
  background:var(--bg);
}

.message-composer input {
  border:0;
  background:transparent;
  font-size:13px;
  padding:9px;
}

.member-sidebar {
  width:190px;
  border-left:1px solid var(--border);
  padding:25px 15px;
  background:var(--bg);
  flex-shrink:0;
  overflow:auto;
}

.member-sidebar .nav-label {
  padding:0 0 0 5px;
  font-size:13px;
}

.member {
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 0;
}

.member strong {
  font-size:13px;
  display:block;
}

.member small {
  font-size:13px;
  display:block;
  margin-top:4px;
}

.member .avatar {
  width:30px;
  height:30px;
  font-size:13px;
}

.member-note {
  border-top:1px solid var(--border);
  margin-top:35px;
  padding-top:25px;
  font-size:13px;
  color:var(--muted);
}

.member-note p {
  margin:10px 0;
}

.member-note a {
  font-size:13px;
  color:var(--deep);
}

.conversation-list a {
  display:flex;
  align-items:center;
  padding:14px;
  gap:10px;
}

.conversation-list strong {
  font-size:13px;
  display:block;
}

.conversation-list small {
  font-size:13px;
  display:block;
  margin-top:5px;
}

.conversation-list>button {
  margin:10px;
  font-size:13px;
}

.reply-banner {
  display:flex;
  justify-content:space-between;
  padding:8px 25px;
  background:var(--soft);
  font-size:13px;
  align-items:center;
}

.reply-banner button {
  font-size:13px;
  border:0;
}

.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:100;
  background:#07191db3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:25px;
  overflow:auto;
}

.modal {
  background:var(--surface);
  border-radius:20px;
  padding:35px;
  width:100%;
  max-width:480px;
  max-height:calc(100dvh - 50px);
  overflow:auto;
  box-shadow:0 20px 60px #0003;
}

.modal>p {
  margin:15px 0 25px;
  color:var(--muted);
  font-size:13px;
}

.modal label {
  margin:18px 0;
}

.call {
  text-align:center;
}

.call>h2 {
  margin-top:15px;
}

.call-stage {
  background:var(--bg);
  height:150px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:15px;
  align-items:center;
  justify-content:center;
  margin:15px 0;
}

.call-stage span:not(.avatar) {
  font-size:13px;
  color:var(--muted);
}

.call .button-row {
  justify-content:center;
}

.call .button-row button {
  font-size:13px;
}

.danger {
  color:#bc4b40;
}

.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  z-index:150;
  background:var(--deep);
  color:white;
  padding:15px 20px;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:20px;
  font-size:13px;
  box-shadow:0 8px 30px #0002;
  max-width:90vw;
}

.toast button {
  border:0;
  background:transparent;
  color:white;
  padding:0;
}

.toast svg {
  width:16px;
  height:16px;
}

.empty {
  text-align:center;
  color:var(--muted);
  padding:40px;
}

.empty h1,.empty h3 {
  margin:15px 0;
}

.empty .primary {
  margin-top:20px;
}

.button {
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 14px;
  font-size:13px;
}

.mobile-menu {
  display:none;
}

.skip {
  position:fixed;
  left:10px;
  top:-100px;
  z-index:200;
  background:var(--deep);
  color:#fff;
  padding:12px;
}

.skip:focus {
  top:10px;
}

.dark .nav-item.active {
  background:#213e47;
  color:#73deed;
}

.dark .primary {
  background:#13758b;
  color:white;
}

.dark .welcome {
  background:#233c3d;
  color:#d9ece9;
}

.dark .welcome p {
  color:#a4bbba;
}

.dark .welcome .eyebrow {
  color:#a4bbba;
}

.dark .welcome .text-link {
  color:#7ae0e6;
}

.dark .story.own {
  background:var(--surface);
}

.post-attachment {
  padding:15px 0;
  display:flex;
  align-items:center;
  gap:15px;
}

.post-attachment img {
  width:90px;
  height:65px;
  object-fit:cover;
  border-radius:8px;
}

.post-attachment button {
  font-size:13px;
}

.media-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.media-grid img {
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px;
}

.avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.hidden {
  display:none!important;
}

.thread-panel {
  width:300px;
  flex-shrink:0;
  border-left:1px solid var(--border);
  padding:20px;
  background:var(--surface);
  overflow-y:auto;
}

.thread-panel .section-heading button {
  border:0;
  padding:4px;
}

.thread-parent {
  font-size:13px;
  padding:15px;
  background:var(--soft);
  border-radius:8px;
  margin-bottom:20px;
}

.thread-panel .chat-message {
  gap:8px;
}

.thread-panel .avatar {
  width:27px;
  height:27px;
  font-size:13px;
}

.thread-panel .message-body p {
  font-size:13px;
}

.channel-setting {
  display:flex;
  align-items:center;
  gap:12px;
  margin:12px 0;
}

.channel-setting button {
  font-size:13px;
}

.channel-setting input {
  flex:1;
}

.thread-panel .tiny-label {
  line-height:1.7;
}

.post-gallery {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:3px;
}

.post-gallery img {
  width:100%;
  height:220px;
  object-fit:cover;
}

.gallery-preview {
  display:flex;
  gap:6px;
  align-items:center;
  padding:15px 0;
  flex-wrap:wrap;
}

.gallery-preview img {
  width:65px;
  height:50px;
  object-fit:cover;
  border-radius:6px;
}

.nested-comments {
  padding-left:35px;
  border-left:1px solid var(--border);
  margin-left:18px;
}

.comment-thread>.comment-form {
  margin:10px 0 15px 35px;
}

.message-image {
  max-width:100%;
  max-height:250px;
  object-fit:contain;
  border-radius:9px;
  margin:10px 0;
}


.story-viewer-image {
  width:100%;
  height:400px;
  object-fit:cover;
  border-radius:12px;
  margin:15px 0;
}

.call-participants {
  margin:15px 0;
  text-align:left;
}

.call-participants .person-row {
  padding:10px;
  border-bottom:1px solid var(--border);
}

.report-row {
  border-bottom:1px solid var(--border);
  padding:15px 0;
}

.report-row p {
  font-size:13px;
  margin-bottom:10px;
}

.app.reduced-motion * {
  animation:none!important;
  transition:none!important;
}
.history-entry { padding: 15px 0; border-bottom: 1px solid var(--border); }
.history-entry p { font-size: 13px; color: var(--muted); margin: 7px 0; }
.history-list { margin: 20px 0; }
.device-settings { margin: 25px 0; padding: 20px 0; border-top: 1px solid var(--border); }
.device-settings p { font-size: 13px; color: var(--muted); margin: 12px 0; }
.device-settings label { margin: 15px 0; }
.space-icon { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.skeleton-card { position: relative; padding: 22px; }
.skeleton { background: var(--border); border-radius: 6px; }
.skeleton-avatar { width: 38px; height: 38px; border-radius: 50%; margin-bottom: 18px; }
.skeleton-line { height: 12px; width: 85%; margin: 12px 0; }
.skeleton-line.short { width: 60%; }
.skeleton-image { height: 250px; margin-top: 25px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }