:root{
  --fw-bg:#0f1116; --fw-card:#121622; --fw-edge:#222735;
  --fw-ink:#e8ecf8; --fw-muted:#9aa3b2; --fw-accent:#56b4ff;
}

html,body{ margin:0; background:var(--fw-bg); color:var(--fw-ink);
  font:14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }

.wrapper{ max-width:100%; }
.wire-head{ position:sticky; top:0; z-index:5; margin:14px 0; padding:10px 12px;
  background: color-mix(in hsl, var(--fw-bg) 65%, transparent);
  backdrop-filter: blur(10px); border:1px solid var(--fw-edge); border-radius:14px; }
.wire-head h1{ margin:0; font-size:18px; letter-spacing:.3px; }
.wire-feed{ display:flex; flex-direction:column; gap:50px; float:right; }

/* Card (square edges, IG-like) */
.wire-card{ background:var(--fw-card); border:1px solid var(--fw-edge);
  border-radius:0; overflow:hidden; box-shadow:none; position:relative; }

.post-head{ display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--fw-edge); position:relative; }
.post-head .user{ display:flex; align-items:center; gap:10px; }
.avatar{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:14px; color:#fff;
  background: radial-gradient(120% 100% at 50% 0%, rgba(86,180,255,.5), rgba(86,180,255,.15)); }
.user-meta{ display:flex; align-items:center; gap:6px; }
.username{ font-weight:700; }
.timeago,.dot{ color:var(--fw-muted); }

/* 3-dots menu */
.menu-toggle{ appearance:none; border:0; background:transparent; color:var(--fw-ink);
  font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; }
.post-menu{ position:absolute; top:44px; right:10px; min-width:160px; z-index:1; 
  background: #0b0e14; border:1px solid var(--fw-edge);
  box-shadow: 0 8px 24px rgba(0,0,0,.45); border-radius:12px; padding:6px; }
.menu-item{ width:100%; text-align:left; padding:8px 10px; border:0; background:transparent;
  color:var(--fw-ink); cursor:pointer; border-radius:8px; }
.menu-item:hover{ background:rgba(255,255,255,.06); }

/* Media: portrait 4:5 */
.card-media{ display:block; color:inherit; text-decoration:none; position:relative; }
.media-5x4{ aspect-ratio:4/5; position:relative; width:100%; background:#000; overflow:hidden; }
.media-5x4 img,.wire-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.media-5x4 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Actions */
.post-actions{ display:flex; align-items:center; gap:8px; padding:8px 10px; }
.icon-btn{ appearance:none; border:0; background:transparent; color:var(--fw-ink); padding:6px; cursor:pointer; }
.icon-btn.right{ margin-left:auto; }

/* Caption */
.post-caption{ padding:0 12px 8px 12px; font-size:14px; }
.post-caption .username{ margin-right:6px; }
.post-caption .caption-text{ white-space:pre-wrap; display:inline; overflow-wrap:anywhere; }
.more-toggle{ border:0; background:transparent; color:var(--fw-muted); font-weight:600; margin-left:6px; cursor:pointer; }
.post-time{ color:var(--fw-muted); text-transform:uppercase; font-size:11px; letter-spacing:.04em;
  padding:0 12px 12px 12px; border-bottom:1px solid var(--fw-edge); }

/* Legacy/optional blocks kept for compatibility */
.card-caption{ position:absolute; left:10px; right:10px; bottom:10px; padding:10px 12px;
  border-radius:14px; background: color-mix(in hsl, rgba(12,14,18,.1) 60%, transparent);
  backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.08); color:var(--fw-ink);
  text-shadow:0 1px 2px rgba(0,0,0,.5); }
.caption-meta{ font-size:12px; color:var(--fw-muted); margin-bottom:4px; }
.caption-title{ margin:0; font-weight:700; font-size:16px; line-height:1.25; }

.card-actions{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--fw-edge);
  background: color-mix(in hsl, var(--fw-card) 85%, transparent); }
.action-btn{ appearance:none; border:1px solid var(--fw-edge); background:transparent; color:var(--fw-ink);
  font-weight:600; padding:8px 10px; border-radius:12px; cursor:pointer; }
.action-btn:hover{ border-color: color-mix(in hsl, var(--fw-accent) 60%, var(--fw-edge)); }

/* Loader/empty */
.loader{ clear:both; display:flex; justify-content:center; padding:22px; color:var(--fw-muted); }
.empty{ color:var(--fw-muted); text-align:center; padding:40px 10px; }

/* Tiny toast for copy feedback */
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#0b0e14; color:#e8ecf8; border:1px solid var(--fw-edge); border-radius:10px;
  padding:10px 14px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.45); z-index:9999; opacity:0; transition:opacity .15s; }
.toast.show{ opacity:1; }

.more-link{ color:var(--fw-muted); font-weight:600; text-decoration:none; }
.more-link:hover{ text-decoration:underline; }

/* BIG, TALL overlaid headline on news images */
.media-title{
  position:absolute;
  left:0; right:0; bottom:0;

  /* take up a big slice of the image (bottom 65–70%) */
  height: min(70%, 420px);

  /* comfy padding */
  padding: clamp(14px, 2.2vw, 22px) clamp(14px, 2.8vw, 24px) clamp(18px, 3vw, 26px);

  /* deeper gradient so white text pops on bright images */
  background: linear-gradient(
    0deg,
    rgba(0,0,0,.90) 0%,
    rgba(0,0,0,.78) 35%,
    rgba(0,0,0,.55) 65%,
    rgba(0,0,0,0) 100%
  );

  display:flex;
  align-items:flex-end;   /* text sits at the bottom edge of the panel */
  pointer-events:none;    /* clicks still hit the image link */
}

.media-title > span{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;              /* up to 5 lines now */
  overflow:hidden;

  font-weight: 900;
  line-height: 1.02;
  letter-spacing: .005em;

  /* bigger headline */
  font-size: clamp(26px, 5.2vw, 44px);

  color:#fff;
  text-shadow:
    0 4px 14px rgba(0,0,0,.55),
    0 1px 3px rgba(0,0,0,.45);

  /* uncomment for SHOUTY look */
  /* text-transform: uppercase; */
}


/* Top update bar */
.updates{
  display:flex; justify-content:center; margin:6px 0 14px 0;
}
.updates-btn{
  appearance:none; border:1px solid var(--fw-edge); background:var(--fw-accent);
  color:#00131f; font-weight:800; border-radius:999px;
  padding:8px 14px; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.updates-btn:hover{ filter:brightness(0.95); }

/* Wire divider (appears between batches) */
.wire-divider{ display:flex; justify-content:center; }
.wire-divider__inner{
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding:10px 12px;
  border-top:1px dashed var(--fw-edge);
  border-bottom:1px dashed var(--fw-edge);
  background: color-mix(in hsl, var(--fw-card) 92%, transparent);
}
.wire-chip{
  font: 600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#9ad0ff; background:#0d2230;
  border:1px solid var(--fw-edge); border-radius:999px; padding:6px 8px;
}
.save-wire-btn{
  appearance:none; cursor:pointer;
  padding:8px 12px; border-radius:999px;
  font-weight:800; border:1px solid var(--fw-edge);
  background: var(--fw-accent); color:#00131f;
}
.save-wire-btn:hover{ filter:brightness(.95); }
.save-wire-btn.saved{ background:#1f8c3a; color:#eaffef; border-color:#246b38; }

/* Divider hint: shows direction and reduces confusion */
.save-hint{
  display:flex; align-items:center; gap:8px;
  margin-left:auto; color:var(--fw-muted); font-weight:600; font-size:12px;
  white-space:nowrap;
}
.save-hint .arrow-up{
  width:16px; height:16px; display:inline-block;
  /* gentle bounce to draw attention once */
  animation: bumpUp 1.2s ease-out 1;
}
@keyframes bumpUp{
  0%{ transform: translateY(0); opacity:.6; }
  30%{ transform: translateY(-4px); opacity:1; }
  60%{ transform: translateY(0); opacity:1; }
  100%{ opacity:1; }
}

/* If you want a very subtle divider background on hover */
.wire-divider__inner:hover .save-hint{ color:#c6d2e3; }

.icon-btn[data-action="save"].bookmarked { color:#1ee07a; }
.icon-btn[data-action="save"].bookmarked svg { filter: drop-shadow(0 2px 6px rgba(30,224,122,.25)); }


/* Solid look when bookmarked */
.icon-btn[data-action="save"].bookmarked {
  color:#1ee07a; /* keep your green glow if you like */
}
.icon-btn[data-action="save"].bookmarked svg path {
  fill: currentColor;          /* makes it solid */
  stroke: currentColor;        /* optional: matches edge */
  stroke-width: 0;             /* optional: remove outline */
}
/* (nice glow, optional) */
.icon-btn[data-action="save"].bookmarked svg {
  filter: drop-shadow(0 2px 6px rgba(30,224,122,.25));
}

.media-5x4 { position: relative; }
.media-5x4.img-broken { background: #000; }

/* Plain-black block for missing image case */
.media-5x4 .wire-fallback.black {
  position: absolute;
  inset: 0;
  background: #000;
}


.wrapper {
	width:100% !important;
}

.rightsidebar {
	max-width: 390px !important;
	width:35% !important;
	z-index:5 !important;
}

#mobile_button {
	z-index: 6 !important;
}

.maincolumn {
	width:550px !important;
}

.mainwrapper {
	margin: 0px auto !important;
}

@media (max-width: 680px){
	.maincolumn {
		width: -webkit-fill-available !important;
	}
	.mainwrapper {
		width: 100% !important;
	}
	.media-title > span{
		font-size: 45px !important;
	}
	.media-title {
		font-size: 45px !important;
	}
	
	
	.rightsidebar {
		min-width:100px !important;
	}
}

@media only screen and (max-width: 1432px) {
	.maincolumn {
		margin: 0 auto !important;
		float:none !important;
	}
	.mainwrapper {
		max-width: 100% !important;
	}
}