@import "tailwindcss";

:root {
  --ink: #172322;
  --muted: #71807d;
  --line: #e6ebe8;
  --paper: #ffffff;
  --canvas: #f5f7f5;
  --green: #194f45;
  --coral: #f17b66;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.topbar {
  height: 76px; position: sticky; top: 0; z-index: 10; display: grid;
  grid-template-columns: 250px minmax(280px, 560px) 250px; justify-content: space-between;
  align-items: center; padding: 0 34px; background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(16px);
}
.brand { display: flex; gap: 11px; align-items: center; font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.brand > span:last-child span { color: var(--coral); }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 11px 11px 11px 3px; font-family: Georgia, serif; font-size: 22px; }
.search { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 13px; background: #f4f6f4; border: 1px solid transparent; border-radius: 12px; color: #9aa5a2; }
.search:focus-within { border-color: #acc6bf; background: white; box-shadow: 0 0 0 3px #dceae6; }
.search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.search kbd { padding: 3px 7px; border: 1px solid #dbe1de; border-radius: 5px; color: #96a19e; background: white; font-size: 11px; }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
.icon-button { position: relative; width: 38px; height: 38px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; font-size: 20px; }
.icon-button:hover { background: #f1f4f2; }
.has-alert::after { content: ""; position: absolute; width: 7px; height: 7px; top: 8px; right: 8px; background: var(--coral); border: 2px solid white; border-radius: 50%; }

.layout { max-width: 1440px; margin: auto; display: grid; grid-template-columns: 230px minmax(480px, 680px) 310px; gap: 38px; padding: 28px 34px 60px; }
.left-rail, .right-rail { position: sticky; top: 104px; align-self: start; }
.left-rail nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 14px; height: 47px; padding: 0 15px; border-radius: 12px; color: #60706c; font-size: 14px; font-weight: 600; }
.nav-item > span { width: 22px; color: #657671; font-size: 21px; text-align: center; }
.nav-item b { margin-left: auto; width: 21px; height: 21px; display: grid; place-items: center; background: var(--coral); border-radius: 50%; color: white; font-size: 11px; }
.nav-item:hover { background: #ebf0ed; }
.nav-item.active { color: var(--green); background: #e7efec; }
.nav-item.active > span { color: var(--green); }
.new-post { width: 100%; height: 46px; margin: 19px 0 24px; display: flex; justify-content: center; align-items: center; gap: 12px; border: 0; border-radius: 12px; background: var(--green); color: white; font-weight: 700; cursor: pointer; box-shadow: 0 7px 16px rgba(25,79,69,.15); }
.new-post:hover { background: #123f37; transform: translateY(-1px); }
.new-post span { font-size: 20px; font-weight: 400; }
.rail-card { padding: 18px; border: 1px solid #dfe7e3; border-radius: 14px; background: #eef3f0; }
.eyebrow { color: #7b8c87; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.rail-card strong { display: block; margin-top: 10px; font-family: Georgia, serif; font-size: 16px; line-height: 1.25; }
.rail-card p { margin: 6px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.meter { height: 4px; background: #d8e2de; border-radius: 4px; overflow: hidden; }
.meter i { display: block; width: 68%; height: 100%; background: var(--coral); border-radius: inherit; }
.left-rail footer { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 22px 7px; color: #98a39f; font-size: 10px; }
.left-rail footer span { width: 100%; }

.welcome { min-height: 94px; display: flex; align-items: flex-start; justify-content: space-between; padding: 8px 2px 18px; }
.welcome h1 { margin: 6px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 3vw, 38px); font-weight: 500; letter-spacing: -.7px; }
.welcome p { margin: 0; color: var(--muted); font-size: 13px; }
.date-card { width: 48px; height: 57px; display: grid; place-items: center; padding: 5px 0; background: #e4ebe8; border-radius: 10px; color: var(--green); line-height: 1; }
.date-card strong { font-family: Georgia, serif; font-size: 21px; }
.date-card span { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.composer, .post-card, .side-card { background: var(--paper); border: 1px solid var(--line); box-shadow: 0 5px 20px rgba(30,50,46,.025); }
.composer { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 17px 18px 11px; border-radius: 16px; }
.avatar { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .2px; }
.avatar-small { width: 34px; height: 34px; cursor: pointer; }
.avatar-mini { width: 29px; height: 29px; margin-left: -7px; border: 2px solid white; font-size: 8px; }
.avatar-coral, .face-0 { background: #e98270; }
.avatar-blue, .face-1 { background: #4d7790; }
.avatar-violet, .face-2 { background: #776f9e; }
.face-3 { background: #5b8a72; }.face-4 { background: #b18357; }
.composer-prompt { height: 42px; padding: 0 16px; border: 0; border-radius: 21px; color: #84908d; background: #f4f6f4; text-align: left; cursor: text; font-size: 13px; }
.composer-actions { grid-column: 2; display: flex; border-top: 1px solid #edf0ee; padding-top: 9px; }
.composer-actions button { flex: 1; padding: 4px; border: 0; color: #687772; background: none; cursor: pointer; font-size: 11px; }
.composer-actions button:hover { color: var(--green); }
.composer-actions span { margin-right: 5px; color: #778e87; font-size: 15px; }
.feed-heading { display: flex; align-items: end; justify-content: space-between; height: 66px; border-bottom: 1px solid #dfe5e2; }
.tabs { align-self: stretch; display: flex; gap: 28px; }
.tabs button { position: relative; border: 0; background: transparent; color: #8a9692; cursor: pointer; font-size: 12px; font-weight: 700; }
.tabs .selected { color: var(--green); }
.tabs .selected::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: -1px; background: var(--green); border-radius: 2px; }
.sort { margin-bottom: 14px; border: 0; background: transparent; color: #8c9895; font-size: 10px; cursor: pointer; }
.feed { display: grid; gap: 13px; margin-top: 15px; }
.post-card { display: grid; grid-template-columns: 42px 1fr; gap: 13px; padding: 18px; border-radius: 16px; }
.post-meta { display: flex; justify-content: space-between; }
.post-meta strong { font-size: 13px; }
.post-meta span { margin-left: 6px; color: #8a9693; font-size: 10px; }
.post-meta button { border: 0; background: none; color: #a2aaa8; cursor: pointer; letter-spacing: 1px; }
.post-content > p { margin: 11px 0 9px; font-size: 13px; line-height: 1.65; }
.source-label { display: inline-block; margin-top: 12px; color: var(--coral); font-size: 8px; font-weight: 900; letter-spacing: 1.2px; }
.external-title { margin: 6px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.3; font-weight: 600; }
.external-title a:hover { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-tag { display: inline-block; padding: 5px 9px; border-radius: 6px; background: #edf3f0; color: var(--green); font-size: 9px; font-weight: 700; }
.post-actions { display: flex; align-items: center; gap: 26px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #f0f2f1; }
.post-actions button { border: 0; background: none; color: #7d8986; cursor: pointer; font-size: 15px; }
.post-actions button:hover { color: var(--coral); }
.post-actions button span { margin-left: 3px; font-size: 9px; }
.post-actions .save { margin-left: auto; }
.post-actions .original-link { color: var(--green); font-size: 10px; font-weight: 800; }
.post-actions .original-link:hover { text-decoration: underline; }

.right-rail { display: grid; gap: 14px; }
.side-card { padding: 18px; border-radius: 15px; }
.card-title { display: flex; align-items: center; justify-content: space-between; }
.card-title > div { color: #73827e; font-size: 9px; font-weight: 800; letter-spacing: 1.1px; }
.card-title h2 { margin: 0; font-family: Georgia, serif; font-size: 16px; font-weight: 600; }
.card-title button, .card-title a { border: 0; background: transparent; color: #83908c; font-size: 9px; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #59a878; box-shadow: 0 0 0 4px #e6f4eb; }
.pulse-card > strong { display: block; margin-top: 15px; font-family: Georgia, serif; font-size: 15px; font-weight: 600; }
.face-row { display: flex; align-items: center; margin-top: 14px; padding-left: 7px; }
.more-faces { margin-left: 7px; color: #7c8885; font-size: 9px; font-weight: 700; }
.community-list { display: grid; gap: 15px; margin-top: 17px; }
.community { display: grid; grid-template-columns: 38px 1fr 25px; gap: 10px; align-items: center; }
.community-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; font-family: Georgia, serif; font-size: 11px; font-weight: 800; }
.community-mark.sun { background: #f8e9c2; color: #8a692a; }
.community-mark.mint { background: #dcece3; color: #356c55; }
.community-mark.lilac { background: #e7e1f2; color: #6c5688; }
.community strong, .community span { display: block; }
.community strong { font-size: 11px; }
.community span { margin-top: 3px; color: #909b98; font-size: 8px; }
.community button { width: 24px; height: 24px; border: 1px solid #dfe6e3; border-radius: 7px; background: white; color: var(--green); cursor: pointer; }
.prompt-card { position: relative; overflow: hidden; color: white; background: var(--green); }
.prompt-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -45px; bottom: -50px; border: 16px solid rgba(255,255,255,.07); border-radius: 50%; }
.prompt-icon { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 17px; border-radius: 8px; background: rgba(255,255,255,.12); color: #f5cabb; }
.prompt-card .eyebrow { color: #a9c3bb; }
.prompt-card h2 { margin: 9px 0 7px; font-family: Georgia, serif; font-size: 18px; line-height: 1.28; font-weight: 500; }
.prompt-card p { color: #a9c3bb; font-size: 9px; }
.prompt-card button { position: relative; z-index: 1; width: 100%; height: 35px; margin-top: 8px; border: 0; border-radius: 8px; color: var(--green); background: white; cursor: pointer; font-size: 10px; font-weight: 800; }

@media (max-width: 1120px) {
  .layout { grid-template-columns: 210px minmax(460px, 1fr); }
  .right-rail { display: none; }
  .topbar { grid-template-columns: 210px minmax(280px, 520px) 130px; }
}
@media (max-width: 780px) {
  .topbar { height: 64px; grid-template-columns: 1fr auto; padding: 0 16px; }
  .brand > span:last-child, .search { display: none; }
  .layout { display: block; padding: 18px 14px 90px; }
  .left-rail { position: fixed; z-index: 11; inset: auto 0 0; background: white; border-top: 1px solid var(--line); }
  .left-rail nav { display: grid; grid-template-columns: repeat(6, 1fr); }
  .nav-item { height: 58px; justify-content: center; padding: 0; border-radius: 0; font-size: 0; }
  .nav-item > span { font-size: 20px; }.nav-item b { position: absolute; margin: -24px -27px 0 0; }
  .new-post, .rail-card, .left-rail footer { display: none; }
  .welcome { min-height: 86px; }.welcome h1 { font-size: 28px; }
  .composer { padding: 14px; }.post-card { padding: 15px; }
}
@media (max-width: 480px) {
  .composer-actions button { font-size: 0; }.composer-actions span { font-size: 18px; }
  .post-meta span { display: block; margin: 3px 0 0; }
  .post-actions { gap: 19px; }
}