/* Handle My Socials: connect app. Uses tokens from style.css. */
.hms-page { background: var(--soft); }
.cap {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink); color: #fff;
  font-size: 15px; font-weight: 600; text-align: center;
  padding: 12px 16px; line-height: 1.35;
}
.hms { max-width: 560px; margin: 0 auto; padding: 20px 16px 48px; }
.hms h1 { font-size: 26px; line-height: 1.25; margin: 18px 0 26px; color: var(--ink); text-align: center; }
.hms h2 { font-size: 22px; margin: 6px 0 16px; color: var(--ink); }
.hms h3 { font-size: 16px; margin: 24px 0 10px; color: var(--ink2); }
.hms small { display: block; color: var(--muted); font-size: 13px; }
.muted { color: var(--muted); }
.scr[hidden], [hidden] { display: none !important; }

/* login */
#s-login { text-align: center; padding-top: 7vh; }
.hero-mark svg { width: 72px; height: 72px; }
.big-fb {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; max-width: 380px; min-height: 60px;
  background: #1877f2; color: #fff; border: 0; border-radius: 14px;
  font-size: 19px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(24, 119, 242, .28);
}
.big-fb:hover { background: #166fe0; }
.big-fb svg { width: 26px; height: 26px; }
.err { color: var(--err); min-height: 1.4em; margin-top: 14px; }

/* page picker */
.pages { display: grid; gap: 10px; }
.pagecard {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; text-align: left; cursor: pointer; font-size: 16px; color: var(--ink);
}
.pagecard:hover { border-color: var(--brand); }
.pagecard img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* home */
.who {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
}
.who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.who > div { flex: 1; min-width: 0; }
.who b { display: block; font-size: 17px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { color: var(--muted); font-size: 14px; }
.pill { background: #eef2ff; color: var(--brand-dark) !important; font-weight: 700; font-size: 13px !important; padding: 6px 10px; border-radius: 999px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  cursor: pointer; font-size: 18px; color: var(--ink);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.tile:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(79, 70, 229, .12); transform: translateY(-2px); }
.ti { width: 56px; height: 56px; border-radius: 16px; display: block; background: var(--brand) center / 30px no-repeat; }
.ti-post  { background-color: #4f46e5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ti-com   { background-color: #0ea5e9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.ti-dm    { background-color: #db2777; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E"); }
.ti-stats { background-color: #f59e0b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E"); }
.ti-upload{ background-color: #eef2ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); }
.link { display: block; margin: 8px auto; background: none; border: 0; color: var(--muted); font-size: 15px; text-decoration: underline; cursor: pointer; }

/* shared controls */
.back { background: none; border: 0; color: var(--brand); font-size: 16px; font-weight: 600; padding: 6px 0; cursor: pointer; }
.go {
  display: block; width: 100%; min-height: 54px; margin-top: 14px;
  background: var(--brand); color: #fff; border: 0; border-radius: 14px;
  font-size: 18px; font-weight: 700; cursor: pointer;
}
.go:hover { background: var(--brand-dark); }
.go:disabled { opacity: .55; cursor: wait; }
.go.sm, .ghost.sm { width: auto; min-height: 40px; margin: 0; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.ghost { background: #fff; color: var(--err); border: 1px solid var(--line); cursor: pointer; font-weight: 600; }
.hms textarea, .hms input[type=text], .hms input:not([type]) {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; color: var(--ink);
}
.result { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.result a { color: var(--brand); font-weight: 700; margin-right: 12px; }
.result.good { color: var(--ink); }
.result.bad, .bad { color: var(--err); }

/* post */
.drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #fff; border: 2px dashed #c7d2fe; border-radius: 18px;
  padding: 34px 16px; text-align: center; cursor: pointer; font-size: 18px; color: var(--ink);
}
.drop:hover { border-color: var(--brand); }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 12px 0; }
.thumbs img, .thumbs video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: var(--line); }
.thumbs video { grid-column: span 2; aspect-ratio: 9 / 16; }
.where { display: flex; gap: 20px; margin-top: 12px; font-size: 17px; }
.where label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.where input { width: 22px; height: 22px; accent-color: var(--brand); }

/* lists */
.list { display: grid; gap: 10px; }
.item {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
  text-align: left; color: var(--ink); text-decoration: none; font: inherit;
}
button.item { cursor: pointer; }
button.item:hover, a.item:hover { border-color: var(--brand); }
.item > img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; background: var(--line); }
.item .body { flex: 1; min-width: 0; }
.item .body p { margin: 4px 0 0; word-wrap: break-word; }
.item small { display: inline; margin-left: 4px; }
.net { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.net.fb { background: #e7f0fe; color: #1459c7; }
.net.ig { background: #fce7f3; color: #9d174d; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.box { display: flex; gap: 8px; margin-top: 10px; }
.av { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #eef2ff; color: var(--brand-dark); display: grid; place-items: center; font-weight: 700; font-size: 18px; }

/* thread */
.thread { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; min-height: 160px; }
.bub { max-width: 80%; padding: 9px 13px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); align-self: flex-start; word-wrap: break-word; }
.bub.me { align-self: flex-end; background: var(--brand); color: #fff; border-color: var(--brand); }
.send { display: flex; gap: 8px; margin-top: 12px; }
.send .go { width: auto; margin: 0; padding: 0 22px; }

/* stats */
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.num { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.num b { display: block; font-size: 26px; color: var(--ink); }

/* settings */
.row { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; }
.row b { color: var(--ink); }

@media (max-width: 420px) {
  .hms h1 { font-size: 22px; }
  .tile { font-size: 16px; }
}

/* layout fixes: site-wide section padding off here, footer at bottom, tiles capped on desktop */
.hms-page { min-height: 100vh; display: flex; flex-direction: column; }
.hms-page .hms { flex: 1; width: 100%; box-sizing: border-box; }
.hms section.scr { padding: 0; }
.hms section#s-login { padding-top: 7vh; }
.tiles { max-width: 420px; margin-left: auto; margin-right: auto; }
.who { max-width: 420px; margin: 0 auto; box-sizing: border-box; }