:root { --bg: #f7f7f7; --paper: #fff; --ink: #111; --muted: #737373; --line: #e7e7e7; --blue: #1677e8; --night: #0b1018; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px; }
button, a { font: inherit; }
button { cursor: pointer; border: 0; background: none; }
.app-shell { min-height: 100vh; }
.home-view[hidden], .profile-view[hidden] { display: none !important; }
.topbar { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(22px, calc((100vw - 1080px) / 2)); background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.brand { color: #101010; text-decoration: none; font-family: Georgia, serif; font-size: 27px; letter-spacing: -1.5px; }
.topbar-actions { display: flex; align-items: center; gap: 20px; }
.icon-button { font-size: 28px; line-height: 1; padding: 0; color: #111; }
.avatar { display: grid; place-items: center; color: white; border-radius: 50%; font-weight: 800; background: linear-gradient(135deg, #192736, #568fc9); }
.avatar-small { width: 29px; height: 29px; font-size: 12px; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; }
.profile-trigger { cursor: pointer; }
.feed-layout { width: min(100%, 1000px); display: grid; grid-template-columns: minmax(0, 630px) 300px; gap: 56px; margin: 26px auto 80px; }
.feed { min-width: 0; }
.stories { display: flex; gap: 18px; overflow-x: auto; padding: 16px 18px 15px; margin-bottom: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; scrollbar-width: none; }
.stories::-webkit-scrollbar { display:none; }
.story { flex: 0 0 66px; display: grid; gap: 7px; justify-items: center; min-width: 0; }
.story > span { max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #3d3d3d; }
.story-ring { position: relative; display: grid; place-items: center; width: 58px; height: 58px; padding: 3px; border-radius: 50%; background: conic-gradient(#feda75, #fa7e1e, #d62976, #4f5bd5, #feda75); }
.ring-blue { background: linear-gradient(135deg, #73c6ff, #2454d3); }
.ring-teal { background: linear-gradient(135deg, #9be6d3, #147f8c); }
.ring-violet { background: linear-gradient(135deg, #d2a8ff, #673ab7); }
.ring-gold { background: linear-gradient(135deg, #ffe199, #b77811); }
.ring-pink { background: linear-gradient(135deg, #ffb1c2, #b71964); }
.story-avatar { width: 100%; height: 100%; border: 3px solid #fff; font-size: 18px; background: #152333; }
.guardian-avatar { color: transparent; background: url("assets/guardian-profile.png") center / cover no-repeat; }
.story-add { position: absolute; right: -1px; bottom: -1px; width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: #1683f7; border: 2px solid white; border-radius: 50%; font-weight: 700; line-height: 1; }
.post { overflow: hidden; margin-bottom: 25px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.post-header { height: 61px; display: flex; align-items: center; gap: 11px; padding: 10px 14px; }
.post-header .avatar { width: 34px; height: 34px; font-size: 13px; }
.post-meta { display: grid; gap: 2px; line-height: 1.1; }
.post-meta strong { font-size: 13px; }
.post-meta span { color: #777; font-size: 11px; }
.post-more { margin-left: auto; color: #777; font-size: 24px; letter-spacing: 1px; }
.media-frame { position: relative; background: var(--night); aspect-ratio: 1 / 1; }
.media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-frame .carousel-image { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; }
.media-frame .carousel-image.active { opacity: 1; }
.carousel-controls { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.carousel-controls button { pointer-events: auto; width: 29px; height: 29px; margin: 0 10px; color: #fff; background: rgba(0,0,0,.42); border-radius: 50%; font-size: 20px; opacity: 0; transition: opacity .2s; }
.media-frame:hover .carousel-controls button { opacity: 1; }
.dots { position: absolute; bottom: 11px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.54); }
.dot.active { background: #1683f7; }
.post-actions { display: flex; align-items: center; gap: 17px; padding: 12px 14px 4px; }
.action { color: #161616; font-size: 25px; line-height: 1; padding: 0; }
.action.liked { color: #ed4956; }
.save { margin-left: auto; }
.post-body { padding: 0 14px 16px; }
.likes { display: block; margin: 3px 0 8px; font-weight: 700; font-size: 13px; }
.caption { margin: 0; font-size: 13px; line-height: 1.4; }
.caption strong { margin-right: 5px; }
.comments { display: block; margin-top: 8px; color: #8a8a8a; font-size: 13px; }
.time { display: block; margin-top: 10px; color: #aaa; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.sidebar { position: sticky; top: 91px; align-self: start; padding: 9px 0; color: #646464; }
.profile-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.profile-row > div:nth-child(2) { display: grid; gap: 4px; flex: 1; min-width: 0; }
.profile-row strong { color: #151515; font-size: 13px; }
.profile-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.avatar-profile { width: 42px; height: 42px; flex: 0 0 auto; font-size: 16px; }
.text-button { color: var(--blue); font-size: 12px; font-weight: 700; }
.suggestion-heading { display: flex; justify-content: space-between; margin: 28px 0 17px; font-size: 13px; }
.suggestion-heading strong { color:#8a8a8a; }
.suggestion-heading a { color:#171717; text-decoration:none; font-size:12px; font-weight:600; }
.compact { margin: 15px 0; }
.compact .avatar-profile { width: 34px; height: 34px; font-size: 13px; }
.sidebar-foot { margin-top: 32px; color: #b1b1b1; font-size: 10px; line-height: 1.8; }
.bottom-nav { display: none; }
.profile-view { width: min(100%, 940px); margin: 0 auto 60px; background: var(--paper); }
.profile-topline { display: flex; align-items: center; justify-content: space-between; height: 62px; border-bottom: 1px solid var(--line); font-size: 16px; }
.profile-topline button { width: 42px; color: #111; font-size: 27px; }
.profile-topline .profile-menu { font-size: 20px; }
.profile-intro { display: flex; align-items: center; gap: 74px; padding: 32px 34px 18px; }
.profile-avatar { width: 118px; height: 118px; flex: 0 0 auto; font-size: 39px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #242f3b; }
.profile-stats { display: flex; align-items: center; gap: clamp(32px, 10vw, 90px); }
.profile-stats div { display: grid; justify-items: center; gap: 5px; }
.profile-stats strong { font-size: 19px; }
.profile-stats span { color: #555; font-size: 13px; }
.profile-copy { padding: 0 34px 14px; line-height: 1.45; }
.profile-copy strong { font-size: 14px; }
.profile-copy p { margin: 5px 0 0; font-size: 13px; }
.edit-profile { width: calc(100% - 68px); height: 33px; margin: 2px 34px 20px; border: 1px solid #d1d1d1; border-radius: 7px; font-size: 13px; font-weight: 600; }
.profile-highlights { display: flex; gap: 25px; padding: 0 34px 23px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.profile-highlights > div { display: grid; justify-items: center; gap: 7px; min-width: 64px; }
.profile-highlights > div > span { font-size: 11px; }
.highlight-ring { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid #c9c9c9; border-radius: 50%; font-size: 26px; }
.highlight-blue { border-color: #fff; box-shadow: 0 0 0 2px #55a7db; background: linear-gradient(135deg, #13283e, #4d8fbd); font-weight: 800; }
.highlight-blue span, .highlight-gold span, .highlight-teal span { color: #fff; }
.highlight-gold { border-color: #fff; box-shadow: 0 0 0 2px #d69f52; background: linear-gradient(135deg, #302015, #be8651); }
.highlight-teal { border-color: #fff; box-shadow: 0 0 0 2px #4c9a99; background: linear-gradient(135deg, #0c2f36, #6ba6a2); }
.profile-tabs { display: flex; height: 49px; border-bottom: 1px solid var(--line); }
.profile-tabs button { flex: 1; color: #888; font-size: 23px; border-bottom: 1px solid transparent; }
.profile-tabs button.active { color: #111; border-bottom-color: #111; }
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--paper); }
.profile-grid a { display: block; aspect-ratio: 1; overflow: hidden; background: #10151c; }
.profile-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.profile-grid a:hover img { transform: scale(1.025); }
@media (max-width: 880px) { .profile-view { width: min(100%, 630px); } }
@media (max-width: 880px) { .feed-layout { display: block; width: min(100%, 630px); margin-top: 16px; padding: 0 10px; } .sidebar { display:none; } }
@media (max-width: 540px) { body { background: #fff; } .topbar { height: 53px; padding: 0 15px; } .brand { font-size: 25px; } .topbar-actions { gap: 16px; } .topbar-actions .icon-button { font-size: 25px; } .feed-layout { width: 100%; padding: 0; margin: 0 0 59px; } .stories { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; padding: 15px 16px 13px; gap: 17px; } .post { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; } .post-header { height: 57px; padding: 9px 13px; } .media-frame { aspect-ratio: 1 / 1; } .post-body { padding-bottom: 14px; } .carousel-controls button { opacity: 1; } .bottom-nav { position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; height: 55px; display: flex; align-items: center; justify-content: space-around; padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(18px); } .bottom-nav button { color: #111; font-size: 25px; line-height: 1; } .avatar-tiny { width: 24px; height: 24px; font-size: 10px; border: 1px solid #111; } .profile-view { width: 100%; margin-bottom: 55px; } .profile-topline { height: 53px; } .profile-intro { gap: 24px; padding: 23px 18px 16px; } .profile-avatar { width: 86px; height: 86px; font-size: 29px; } .profile-stats { flex: 1; justify-content: space-between; gap: 10px; } .profile-stats strong { font-size: 16px; } .profile-stats span { font-size: 11px; } .profile-copy { padding: 0 18px 13px; } .edit-profile { width: calc(100% - 36px); margin: 2px 18px 18px; } .profile-highlights { gap: 20px; padding: 0 18px 20px; } .profile-grid { gap: 2px; } }