:root { --bd:rgba(255,255,255,.14); --tx:#f3f7ff; --mut:rgba(243,247,255,.70); --card:rgba(255,255,255,.06); --card2:rgba(255,255,255,.04); --accent:#1d9bf0; --bg1:#05152f; --bg2:#071e3d; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; color:var(--tx); background: radial-gradient(1200px 600px at 20% 0%, rgba(29,155,240,.25), rgba(0,0,0,0) 60%), radial-gradient(1000px 600px at 90% 30%, rgba(125,88,255,.18), rgba(0,0,0,0) 55%), linear-gradient(180deg, var(--bg1), var(--bg2)); min-height:100vh; }
.topbar{ border-bottom:1px solid var(--bd); position:sticky; top:0; background:rgba(10,20,40,.75); backdrop-filter: blur(10px); z-index:10; }
.topbar-inner{ max-width:1280px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.brand{ font-weight:900; text-decoration:none; color:var(--tx); letter-spacing:.5px; }
.nav a{ margin-left:12px; text-decoration:none; color:var(--tx); }
.linkbtn{ border:none; background:transparent; color:var(--tx); cursor:pointer; margin-left:12px; padding:0; font:inherit; }
.container{ max-width:1280px; margin:0 auto; padding:18px 16px; }

.card{ display:block; border:1px solid var(--bd); border-radius:16px; padding:16px; margin:12px 0; background:var(--card); box-shadow:0 1px 0 rgba(17,24,39,.03); }
.meta{ color:var(--mut); font-size:12px; }
.badge{ display:inline-block; font-size:12px; padding:3px 10px; border-radius:999px; border:1px solid var(--bd); margin-right:8px; background:rgba(10,20,40,.75); backdrop-filter: blur(10px); }
.badge.rss{ background:rgba(29,155,240,.18); border-color:rgba(29,155,240,.35); color:var(--tx); }
.badge.original{ background:rgba(255,180,80,.16); border-color:rgba(255,180,80,.35); color:var(--tx); }
.news-title{ font-weight:900; text-decoration:none; color:var(--tx); }
.row{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.small{ font-size:12px; color:var(--mut); }

.btn{ display:inline-block; padding:9px 12px; border-radius:12px; border:1px solid var(--bd); text-decoration:none; color:var(--tx); background:rgba(10,20,40,.75); backdrop-filter: blur(10px); cursor:pointer; }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.danger{ border-color:#fecaca; color:#991b1b; }
.btn.soft{ background:#f9fafb; color:#111827; border-color:#e5e7eb; }
.btn.disabled{ opacity:.5; cursor:default; pointer-events:none; }

input, textarea, select{width:100%; padding:10px; border:1px solid var(--bd); border-radius:12px; background:rgba(10,20,40,.75); backdrop-filter: blur(10px); color: var(--tx); }

label.small{ display:block; margin-bottom:6px; }

.form-grid{ display:grid; grid-template-columns: 1fr; gap:12px; }
.form-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.form-row > *{ flex:1; min-width:220px; }

.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border-top:1px solid var(--bd); padding:10px 6px; vertical-align:top; }
.table th{ text-align:left; font-size:12px; color:var(--mut); }
.actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

.gallery{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:10px; }
.gallery img{ width:100%; height:120px; object-fit:cover; border-radius:12px; border:1px solid var(--bd); background:rgba(10,20,40,.75); backdrop-filter: blur(10px); }
@media (max-width: 720px){
  .gallery{ grid-template-columns:repeat(2, 1fr); }
  .gallery img{ height:110px; }
}

/* --- News list hover fade --- */
.news-card{
  position:relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.news-card-main{ padding-right:86px; }
.news-card:hover{
  /* transform removed to prevent hover jitter */
  box-shadow: 0 8px 22px rgba(17,24,39,.07);
  border-color:#d1d5db;
}
.news-teaser{
  position:relative;
  line-height:1.6;
  margin-top:6px;
  color:var(--mut);
}
.news-teaser::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1.2em;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  opacity:.55;
  transition: opacity .18s ease;
}
.news-card:hover .news-teaser::after{ opacity:.15; }
.news-readmore{
  display:inline-block;
  margin-left:6px;
  color:#6b7280;
  opacity:.7;
  transition: opacity .18s ease, transform .18s ease;
}
.news-card:hover .news-readmore{
  opacity:1;
  transform: translateX(1px);
}

/* clickable cards */
.news-card[data-href]{ cursor:pointer; }

/* thumbs with delete button (edit page) */
.thumb{ position:relative; }
.thumb-del{ position:absolute; top:6px; right:6px; margin:0; }
.thumb-del button{
  width:28px; height:28px; border-radius:999px;
  border:1px solid #e5e7eb;
  background:rgba(255,255,255,.92);
  cursor:pointer;
  font-size:18px; line-height:26px; padding:0;
}
.thumb-del button:hover{ background:#111827; color:#fff; border-color:#111827; }

.news-card{ position:relative; }
.news-card-actions{ pointer-events:auto; position:absolute; top:12px; right:12px; display:flex; gap:8px; align-items:center; z-index:2; }
.iconbtn{ border:1px solid #e5e7eb; background:rgba(255,255,255,.92); border-radius:999px; padding:6px 10px; font-size:12px; cursor:pointer; }
.iconbtn.attach{ display:inline-flex; align-items:center; gap:6px; }
.iconbtn.attach img{ width:18px; height:18px; display:block; }
.iconbtn.like.on{ background:#111827; color:#fff; border-color:#111827; }
.iconbtn.share{ width:36px; height:32px; display:flex; align-items:center; justify-content:center; padding:0; }
.news-hero{ margin:12px 0 14px; border-radius:16px; overflow:hidden; border:1px solid #e5e7eb; background:#000; }

.card .news-hero{ margin-left:0; margin-right:0; border-radius:14px; }
.news-hero img{ width:100%; display:block; max-height:360px; object-fit:cover; }
.news-hero iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }



/* --- News cover adjustments (content-aligned width + reliable YouTube sizing) --- */
.news-card-main .news-hero,
.news-detail .news-hero,
.news-hero{
  margin-left:0 !important;
  margin-right:0 !important;
  border-left:1px solid #e5e7eb;
  border-right:1px solid #e5e7eb;
}

.news-hero.video{
  position:relative;
  height:0;
  padding-top:56.25%; /* 16:9 */
  background:#000;
}

.news-hero.video iframe{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}


/* external link styling inside RSS detail */
.news-ext{ color:inherit; text-decoration:none; }
.news-ext:hover{ text-decoration:underline; }

/* --- SNS: posts --- */
.post{ padding-top:14px; }
.post-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.post-user{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.post-name{ font-weight:900; color:var(--tx); text-decoration:none; }
.post-handle{ color:var(--mut); font-size:12px; }
.post-body{ margin-top:10px; line-height:1.8; white-space:normal; word-break:break-word; }
.post-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.post-gallery{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:10px; }
.post-gallery img{ width:100%; height:140px; object-fit:cover; border-radius:14px; border:1px solid var(--bd); background:rgba(10,20,40,.75); backdrop-filter: blur(10px); display:block; }
@media (max-width: 820px){ .post-gallery{ grid-template-columns:repeat(2, 1fr);} .post-gallery img{ height:130px; } }
.post-embed{ margin-top:10px; border-radius:16px; overflow:hidden; border:1px solid var(--bd); background:#000; }
.post-embed iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

/* --- SNS: profile --- */
.profile{ padding:0; overflow:hidden; }
.profile-header{ height:180px; background:#111827; border-bottom:1px solid var(--bd); }
.profile-header.placeholder{ background:linear-gradient(120deg, #111827, #374151); }
.profile-header img{ width:100%; height:100%; object-fit:cover; display:block; }
.profile-inner{ display:flex; gap:14px; padding:14px 16px 16px; }
.profile-avatar{ width:86px; height:86px; margin-top:-48px; border-radius:999px; border:3px solid #fff; overflow:hidden; background:rgba(10,20,40,.75); backdrop-filter: blur(10px); box-shadow:0 8px 22px rgba(17,24,39,.08); flex:0 0 auto; }
.profile-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.profile-avatar-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:28px; color:#fff; background:#111827; }
.profile-meta{ flex:1; min-width:0; }
.profile-name{ font-weight:900; font-size:18px; }
.profile-bio{ margin-top:8px; line-height:1.7; }
.profile-web{ margin-top:8px; font-size:12px; }
.profile-web a{ color:inherit; }

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 820px){ .grid2{ grid-template-columns:1fr; } }
.profile-edit-preview{ margin-top:8px; border:1px solid var(--bd); border-radius:14px; overflow:hidden; height:130px; background:#000; }
.profile-edit-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.profile-edit-preview.header{ height:110px; }


/* ===== Header user button ===== */
.topbar-right{display:flex; align-items:center; gap:10px;}
.userbtn{display:flex; align-items:center; gap:10px; border:1px solid #e5e7eb; background:rgba(10,20,40,.75); backdrop-filter: blur(10px); padding:6px 10px; border-radius:999px; cursor:pointer;}
.userbtn .avatar{width:32px; height:32px; border-radius:999px; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:#f3f4f6; flex:0 0 auto;}
.userbtn .avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.userbtn .avatar-fallback{font-weight:900; color:#111827;}
.userbtn .uname{display:flex; flex-direction:column; line-height:1.05; text-align:left;}
.userbtn .dn{font-weight:900; font-size:14px;}
.userbtn .uid{font-size:12px; color:#9ca3af;}
.userbtn .caret{font-size:12px; color:#6b7280; margin-left:2px;}
.user-menu{position:relative;}
.user-menu .menu{position:absolute; right:0; top:calc(100% + 8px); min-width:200px; background:rgba(10,20,40,.75); backdrop-filter: blur(10px); border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08); padding:6px; display:none; z-index:50;}
.user-menu .menu a,.user-menu .menu .menubtn{display:block; width:100%; text-align:left; padding:10px 10px; border-radius:10px; color:#111827; text-decoration:none; background:transparent; border:0; cursor:pointer;}
.user-menu .menu a:hover,.user-menu .menu .menubtn:hover{background:#f3f4f6;}
.user-menu .menu .sep{height:1px; background:#e5e7eb; margin:6px 4px;}
.user-menu.open .menu{display:block;}

/* dropdown open/close */


/* ===== Home split layout ===== */
.home-split{display:flex; gap:12px; align-items:flex-start;}
.home-main{flex:1 1 auto; min-width:0;}
.home-side{flex:0 0 320px; max-width:360px;}
.home-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 10px;}
.home-title{font-weight:900; font-size:18px;}
.side-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 10px;}
.side-title{font-weight:900;}
.side-link{color:#6b7280; text-decoration:none; font-size:12px;}
.side-link:hover{text-decoration:underline;}

.news-mini-row{display:flex; gap:10px; padding:8px 8px; border-radius:12px; text-decoration:none; color:inherit;}
.news-mini-row:hover{background:#f9fafb;}
.news-mini-thumb{width:44px; height:44px; border-radius:10px; overflow:hidden; background:#f3f4f6; flex:0 0 auto;}
.news-mini-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.news-mini-body{min-width:0;}
.news-mini-title{font-weight:800; font-size:13px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.news-mini-meta{font-size:11px; color:#9ca3af; margin-top:2px;}
.news-mini-teaser{font-size:12px; color:#6b7280; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

.news-mini-top{display:none; margin-bottom:10px; border:1px solid #e5e7eb; border-radius:14px; padding:6px;}
@media (max-width: 820px){
  .home-split{display:block;}
  .home-side{display:none;}
  .news-mini-top{display:block;}
}

/* --- X-like timeline UI --- */
.feed{ border:1px solid var(--bd); border-radius:18px; background:rgba(10,20,40,.75); backdrop-filter: blur(10px); overflow:hidden; }
.feed-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--bd); }
.feed-title{ font-weight:900; font-size:18px; }
.feed-sub{ color:var(--mut); font-size:12px; margin-top:2px; }
.feed-actions{ display:flex; gap:8px; align-items:center; }

.tweet{ display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--bd); }
.tweet:last-child{ border-bottom:none; }
.tweet:hover{ background: rgba(255,255,255,.04); }

.avatar{ width:44px; height:44px; border-radius:999px; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; overflow:hidden; flex:0 0 44px; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.tweet-main{ flex:1; min-width:0; }
.tweet-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tweet-meta{ min-width:0; }
.tweet-name{ font-weight:800; text-decoration:none; color:var(--tx); }
.tweet-handle{ color:var(--mut); margin-left:6px; font-size:13px; }
.tweet-time{ color:var(--mut); margin-left:6px; font-size:13px; white-space:nowrap; }

.tweet-menu{ position:relative; }
.tweet-menu-btn{ border:none; background:rgba(255,255,255,.06); cursor:pointer; padding:6px; border-radius:999px; }
.tweet-menu-btn:hover{ background:rgba(255,255,255,.12); }
.tweet-menu-btn img{ width:18px; height:18px; display:block; opacity:1; }
.tweet-menu-pop{ position:absolute; right:0; top:34px; background:rgba(10,20,40,.75); backdrop-filter: blur(10px); border:1px solid var(--bd); border-radius:14px; min-width:220px; box-shadow:0 12px 30px rgba(17,24,39,.12); display:none; z-index:20; overflow:hidden; }
.tweet-menu-pop a, .tweet-menu-pop button{ display:block; width:100%; text-align:left; padding:10px 12px; border:none; background:rgba(10,20,40,.75); backdrop-filter: blur(10px); cursor:pointer; color:var(--tx); text-decoration:none; font-size:14px; }
.tweet-menu-pop a:hover, .tweet-menu-pop button:hover{ background:#f9fafb; }
.tweet-menu-pop .danger{ color:#b91c1c; }

.tweet-body{ margin-top:6px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.tweet-body a{ color:#2563eb; }

.tweet-media{ margin-top:10px; display:grid; gap:8px; grid-template-columns:repeat(2, 1fr); }
.tweet-media.one{ grid-template-columns:1fr; }
.tweet-media.three{ grid-template-columns:repeat(2, 1fr); }
.tweet-media.four{ grid-template-columns:repeat(2, 1fr); }
.tweet-media a{ border-radius:14px; overflow:hidden; border:1px solid var(--bd); background:rgba(10,20,40,.75); backdrop-filter: blur(10px); display:block; }
.tweet-media img{ width:100%; height:100%; max-height:360px; object-fit:cover; display:block; }

.tweet-embed{ margin-top:10px; border-radius:14px; overflow:hidden; border:1px solid var(--bd); background:#000; }
.tweet-embed iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

.tweet-actions{ margin-top:10px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.actionbtn{ display:flex; align-items:center; gap:6px; border:none; background:transparent; color:var(--mut); cursor:pointer; padding:6px 8px; border-radius:999px; font-size:13px; }
.actionbtn:hover{ background:#f3f4f6; color:var(--tx); }
.actionbtn img{ width:18px; height:18px; opacity:.9; }
.actionbtn.on{ color:#111827; font-weight:800; }

.pager{ display:flex; justify-content:space-between; gap:12px; padding:14px 16px; border-top:1px solid var(--bd); background:rgba(10,20,40,.75); backdrop-filter: blur(10px); }
.pager a{ text-decoration:none; color:var(--tx); border:1px solid var(--bd); border-radius:999px; padding:8px 12px; background:rgba(10,20,40,.75); backdrop-filter: blur(10px); }
.pager a:hover{ background: rgba(255,255,255,.10); }

.comment-box{ border:1px solid var(--bd); border-radius:16px; padding:12px; background:rgba(10,20,40,.75); backdrop-filter: blur(10px); }
.comment-box textarea{ min-height:90px; }

.comment-tree{ margin-top:14px; }
.comment{ display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--bd); }
.comment:first-child{ border-top:none; }
.comment .comment-main{ flex:1; min-width:0; }
.comment .comment-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.comment .comment-body{ margin-top:4px; white-space:pre-wrap; word-break:break-word; line-height:1.65; }
.comment .comment-actions{ margin-top:8px; display:flex; gap:10px; }
.comment .reply-wrap{ margin-left:56px; }

@media (max-width: 860px){
  .tweet{ padding:12px 12px; }
  .feed-head{ padding:12px 12px; }
  .pager{ padding:12px 12px; }
}


/* Dark theme tweaks */
.card{ border:1px solid var(--bd); box-shadow:none; }
.meta, .small{ color:var(--mut); }
.topnav a{ color:var(--tx); }
.topnav a:hover{ background:rgba(255,255,255,.06); }
.dropdown{ background:rgba(10,20,40,.92); border:1px solid var(--bd); }
.dropdown a{ color:var(--tx); }
.dropdown a:hover{ background:rgba(255,255,255,.08); }
.footer{ background:rgba(10,20,40,.75); border-top:1px solid var(--bd); }

/* X-like action hover/active (no PNG color change, circle background changes) */
.actionbtn{ position:relative; }
.actionbtn::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:32px;
  height:32px;
  transform:translateY(-50%);
  border-radius:999px;
  opacity:0;
  transition:opacity .12s ease, background-color .12s ease;
}
.actionbtn:hover::before{ opacity:1; background:rgba(29,155,240,.16); }
.actionbtn.on::before{ opacity:1; background:rgba(29,155,240,.22); }
.actionbtn[data-like-btn]:hover::before{ background:rgba(244,63,94,.18); }
.actionbtn[data-like-btn].on::before{ background:rgba(244,63,94,.26); }
.actionbtn[data-fav-btn]:hover::before{ background:rgba(250,204,21,.16); }
.actionbtn[data-fav-btn].on::before{ background:rgba(250,204,21,.24); }

/* Comment image preview + grids */
.cmt-tools{ display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; margin-top:8px; }
.cmt-preview{ display:flex; gap:8px; flex-wrap:wrap; }
.cmt-preview .thumb{ width:72px; height:72px; border-radius:12px; overflow:hidden; border:1px solid var(--bd); background:rgba(255,255,255,.03); }
.cmt-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.imggrid{ margin-top:10px; display:grid; gap:6px; grid-template-columns:repeat(2, minmax(0,1fr)); }
.imggrid .img{ display:block; border-radius:14px; overflow:hidden; border:1px solid var(--bd); background:rgba(255,255,255,.03); }
.imggrid .img img{ width:100%; height:auto; display:block; }
@media (min-width: 640px){
  .imggrid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}


/* --- X UI tweaks (hover, action pill) --- */
.tweet:hover{ background: rgba(255,255,255,.04) !important; }
.tweet:active{ background: rgba(255,255,255,.06) !important; }

/* action buttons: pill background (do not tint PNG) */
.actionbtn{
  position: relative;
  border-radius: 9999px !important;
  padding: 6px 12px !important;
  gap: 8px !important;
}
.actionbtn::before{
  content:"";
  position:absolute;
  left:-2px; right:-2px;
  top:50%;
  height:32px;
  transform:translateY(-50%);
  border-radius:9999px;
  opacity:0;
  transition: opacity .15s ease, background .15s ease;
  background: rgba(29,155,240,.22);
  z-index:-1;
}
.actionbtn:hover::before{ opacity:1; background: rgba(29,155,240,.22); }
.actionbtn[data-like-btn]:hover::before{ background: rgba(244,63,94,.28); }
.actionbtn[data-fav-btn]:hover::before{ background: rgba(250,204,21,.26); }

/* active/on state: make it obvious */
.actionbtn.is-on::before{ opacity:1; background: rgba(29,155,240,.40); }
.actionbtn.is-on[data-like-btn]::before{ background: rgba(244,63,94,.46); }
.actionbtn.is-on[data-fav-btn]::before{ background: rgba(250,204,21,.44); }


/* --- Media viewer (X-like) --- */
.media-modal{ position:fixed; inset:0; z-index:9999; }
.media-modal .media-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.72); }
.media-modal .media-shell{
  position:absolute; inset:24px;
  display:flex; gap:0;
  border-radius:16px;
  overflow:hidden;
  background: rgba(8,14,28,.92);
  border:1px solid rgba(255,255,255,.10);
}
.media-modal .media-left{ flex:1.2; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); }
.media-modal .media-left img{ max-width:100%; max-height:100%; object-fit:contain; }
.media-modal .media-right{ width: 420px; max-width: 44vw; background:rgba(10,18,36,.95); overflow:auto; }
.media-modal .media-right-inner{ padding:16px; }
.media-modal .media-close{
  position:absolute; top:10px; left:10px;
  width:40px; height:40px;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
@media (max-width: 900px){
  .media-modal .media-shell{ inset:10px; flex-direction:column; }
  .media-modal .media-right{ width:auto; max-width:none; }
}

/* Header user button + dropdown readability */
.topbar-right{ display:flex; align-items:center; gap:10px; }
.userbtn{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:9999px;
  border:1px solid var(--bd);
  background: rgba(5, 12, 28, .78);
  color: var(--tx);
  cursor:pointer;
}
.userbtn .dn{ font-size:14px; font-weight:800; line-height:1.05; color:var(--tx); }
.userbtn .uid{ font-size:12px; color:var(--mut); line-height:1.05; margin-top:2px; display:block; }
.userbtn .caret{ opacity:.85; }
.user-menu{ position:relative; }
.user-menu .menu{
  position:absolute;
  right:0; top:calc(100% + 8px);
  min-width:220px;
  border:1px solid var(--bd);
  border-radius:14px;
  background: rgba(5, 12, 28, .96);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  padding:8px;
  display:none;
  z-index:999;
}
.user-menu.open .menu{ display:block; }
.user-menu .menu a, .user-menu .menu .menubtn{
  display:block;
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  color:var(--tx);
  text-decoration:none;
  border:none;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.user-menu .menu a:hover, .user-menu .menu .menubtn:hover{ background: rgba(255,255,255,.08); }
.user-menu .sep{ height:1px; background: rgba(255,255,255,.10); margin:6px 6px; }

/* X-like hover + pointer on posts */
.tweet{ cursor:pointer; }
.tweet:hover{ background: rgba(255,255,255,.04) !important; }

/* Action buttons: pill hover + vivid on state */
.actionbtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  border-radius:9999px;
  border:1px solid transparent;
  background: transparent;
  color: var(--tx);
  text-decoration:none;
  cursor:pointer;
}
.actionbtn img{ width:16px; height:16px; display:block; }
.actionbtn .cnt{ font-size:12px; color: var(--mut); }
.actionbtn:hover{ background: rgba(29,155,240,.18); }
.actionbtn.on{ background: rgba(29,155,240,.42); }
.actionbtn.on .cnt{ color: #ffffff; opacity:.92; }
.actionbtn.like:hover{ background: rgba(255, 80, 140, .20); }
.actionbtn.like.on{ background: rgba(255, 80, 140, .55); }
.actionbtn.fav:hover{ background: rgba(255, 210, 80, .18); }
.actionbtn.fav.on{ background: rgba(255, 210, 80, .58); }

.media-btn{ border:0; padding:0; background:transparent; cursor:pointer; }

.media-modal{ position:fixed; inset:0; z-index:2000; display:none; }
.media-modal.open{ display:block; }
.media-modal .mm-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.70); }
.media-modal .mm-box{
  position:absolute; inset: 4vh 4vw;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(5, 12, 28, .92);
  backdrop-filter: blur(14px);
  display:flex;
  overflow:hidden;
}
.mm-left{ flex: 1 1 62%; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.18); }
.mm-left img{ max-width:100%; max-height:100%; object-fit:contain; }
.mm-right{ flex: 0 0 38%; overflow:auto; border-left:1px solid rgba(255,255,255,.10); }
.mm-close{
  position:absolute; top: 10px; right: 10px;
  width: 40px; height:40px;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(5,12,28,.75);
  color: var(--tx);
  cursor:pointer;
}
@media (max-width: 860px){
  .media-modal .mm-box{ inset: 2vh 2vw; flex-direction:column; }
  .mm-left{ flex-basis: 52%; }
  .mm-right{ flex-basis: 48%; border-left:none; border-top:1px solid rgba(255,255,255,.10); }
}


/* Post split view */

.p-split{ display:flex; gap:0; min-height: calc(100vh - 86px); }
.p-left{ flex: 0 0 58%; background: rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; position:relative; }
.p-right{ flex: 0 0 42%; border-left:1px solid rgba(255,255,255,.10); overflow:auto; }
.p-split.no-media .p-right{ flex:1 1 100%; border-left:none; }
.p-right-inner{ padding: 14px 16px; }
.p-empty{ color: var(--mut); padding: 24px; }
.p-carousel{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.p-media{ max-width:100%; max-height: calc(100vh - 86px); object-fit:contain; }
.p-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:9999px; border:1px solid rgba(255,255,255,.18); background: rgba(5,12,28,.55); color: var(--tx); font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.p-nav.prev{ left:12px; } .p-nav.next{ right:12px; }
.p-nav:hover{ background: rgba(5,12,28,.75); }
.p-sep{ border:0; border-top:1px solid rgba(255,255,255,.10); margin: 14px 0; }
.p-commentbox textarea{ width:100%; }
.p-comment-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
/* --- Attach label fix --- */
.p-comment-actions .iconbtn.attach{ width:auto; height:38px; padding:0 12px; border-radius:999px; gap:8px; }
.p-comment-actions .iconbtn.attach span{ white-space:nowrap; }
.mini-link{ margin-left:8px; font-size:12px; color:var(--mut); background:transparent; border:none; cursor:pointer; text-decoration:underline; }

.iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9999px; border:1px solid rgba(255,255,255,.14); background: rgba(10,20,40,.55); cursor:pointer; }
.iconbtn:hover{ background: rgba(255,255,255,.10); }
@media (max-width: 980px){
  .p-split{ flex-direction:column; }
  .p-left{ flex: 0 0 auto; min-height: 52vh; }
  .p-right{ flex: 1 1 auto; border-left:none; border-top:1px solid rgba(255,255,255,.10); }
  .p-media{ max-height: 52vh; }
}

.news-card .tweet-actions{ padding-top:10px; border-top:1px solid rgba(255,255,255,.10); }

/* --- Comment thread lines --- */
.comment{ position:relative; }
.comment.depth-1::before,
.comment.depth-2::before,
.comment.depth-3::before,
.comment.depth-4::before,
.comment.depth-5::before{ content:""; position:absolute; left:-12px; top:-6px; bottom:-6px; width:2px; background: rgba(255,255,255,.10); border-radius:2px; }
.comment.depth-1::after,
.comment.depth-2::after,
.comment.depth-3::after,
.comment.depth-4::after,
.comment.depth-5::after{ content:""; position:absolute; left:-12px; top:18px; width:12px; height:2px; background: rgba(255,255,255,.10); }

/* --- Image modal --- */
.img-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.img-modal.open{ display:block; }
.im-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.72); }
.im-box{ position:relative; max-width:min(92vw, 1100px); max-height:92vh; margin:4vh auto; display:flex; align-items:center; justify-content:center; }
.im-box img{ max-width:100%; max-height:92vh; object-fit:contain; border-radius:14px; box-shadow: 0 12px 30px rgba(0,0,0,.35); background:#000; }
.im-close{ position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background: rgba(5,12,28,.60); color:#fff; font-size:22px; cursor:pointer; }
.im-close:hover{ background: rgba(5,12,28,.80); }

.prof-details summary{ cursor:pointer; font-weight:900; list-style:none; }
.prof-details summary::-webkit-details-marker{ display:none; }
.prof-details summary::after{ content:'▾'; float:right; opacity:.7; }
.prof-details[open] summary::after{ content:'▴'; }