/*
Theme Name: Newslinker Theme
Theme URI: https://newslinker.com
Description: Multi-language news portal theme with admin settings
Version: 2.0.0
Author: Newslinker
Text Domain: newslinker
*/

:root{
  --bg0: #070a11;
  --bg1: #0b1020;
  --panelA: rgba(255,255,255,.06);
  --panelB: rgba(255,255,255,.02);
  --line: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);
  --muted2: rgba(255,255,255,.52);
  --accent: #4b8bff;
  --shadow: 0 16px 40px rgba(0,0,0,.40);
  --glow-blue: rgba(75,139,255,.22);
  --glow-green: rgba(53,208,127,.12);
  --glow-orange: rgba(255,176,32,.06);
  --b-12: rgba(0,0,0,.12);
  --b-10: rgba(0,0,0,.10);
  --b-08: rgba(0,0,0,.08);
  --w-02: rgba(255,255,255,.02);
  --w-03: rgba(255,255,255,.03);
  --w-04: rgba(255,255,255,.04);
  --w-05: rgba(255,255,255,.05);
  --w-06: rgba(255,255,255,.06);
  --w-08: rgba(255,255,255,.08);
  --w-10: rgba(255,255,255,.10);
  --w-12: rgba(255,255,255,.12);
  --w-14: rgba(255,255,255,.14);
  --w-18: rgba(255,255,255,.18);
  --w-20: rgba(255,255,255,.20);
  --w-44: rgba(255,255,255,.44);
  --w-45: rgba(255,255,255,.45);
  --w-62: rgba(255,255,255,.62);
  --w-78: rgba(255,255,255,.78);
  --w-86: rgba(255,255,255,.86);
  --radius: 14px;
  --gap: 12px;
  --rowPadY: 7px;
  --rowPadX: 10px;
}

html[data-theme="light"] {
  --bg0: #f4f6f9;
  --bg1: #e9ecef;
  --panelA: #ffffff;
  --panelB: #fdfdfd;
  --line: rgba(0,0,0,.08);
  --text: #1a1a1a;
  --muted: #5c626a;
  --muted2: #7d848c;
  --accent: #2863eb;
  --shadow: 0 16px 40px rgba(0,0,0,.08);
  --glow-blue: rgba(75,139,255,.10);
  --glow-green: rgba(53,208,127,.06);
  --glow-orange: rgba(255,176,32,.04);
  --b-12: rgba(0,0,0,.05);
  --b-10: rgba(0,0,0,.04);
  --b-08: rgba(0,0,0,.03);
  --w-02: rgba(0,0,0,.02);
  --w-03: rgba(0,0,0,.03);
  --w-04: rgba(0,0,0,.04);
  --w-05: rgba(0,0,0,.05);
  --w-06: rgba(0,0,0,.06);
  --w-08: rgba(0,0,0,.08);
  --w-10: rgba(0,0,0,.10);
  --w-12: rgba(0,0,0,.12);
  --w-14: rgba(0,0,0,.14);
  --w-18: rgba(0,0,0,.18);
  --w-20: rgba(0,0,0,.20);
  --w-44: rgba(0,0,0,.55);
  --w-45: rgba(0,0,0,.45);
  --w-62: rgba(0,0,0,.65);
  --w-78: rgba(0,0,0,.78);
  --w-86: rgba(0,0,0,.86);
}

*{ box-sizing:border-box; }
html,body{ height:100%; transition: background 0.3s ease; margin:0; padding:0; }

body{
  font-family: ui-sans-serif, system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 18% 0%, var(--glow-blue), transparent 62%),
    radial-gradient(700px 520px at 88% 18%, var(--glow-green), transparent 60%),
    radial-gradient(900px 640px at 40% 110%, var(--glow-orange), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.surface{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panelA), var(--panelB));
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: all 0.3s ease;
}

.app{
  height: 100vh;
  display:grid;
  grid-template-columns: 270px 1fr;
  gap: var(--gap);
  padding: var(--gap);
}

.sidebar{
  display:flex;
  flex-direction:column;
  min-width: 240px;
}
.brand{
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--b-12);
}
.brandTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.logo{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}
.mark{
  width:34px;height:34px;border-radius: 12px;
  background: linear-gradient(135deg, rgba(75,139,255,.40), rgba(75,139,255,.10));
  border: 1px solid var(--w-14);
  display:grid;place-items:center;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 13px;
  color: #fff;
}
.brand h1{
  margin:0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.status{
  font-size: 10.5px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--b-10);
  color: var(--muted);
  white-space:nowrap;
}
.subtitle{
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.35;
}
.section{
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex: 1;
  overflow: auto;
}
.search{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--b-12);
}
.search input{
  width:100%;
  background: transparent;
  border:0;
  outline:none;
  color: var(--text);
  font-size: 12.5px;
}
.search input::placeholder { color: var(--muted2); }
.sectionTitle{
  margin: 2px 0 0;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted2);
}

.tree{
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.treeRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor:pointer;
  color: var(--muted);
  user-select:none;
}
.treeRow:hover{
  border-color: var(--line);
  background: var(--w-03);
  color: var(--text);
}
.treeRow.active{
  border-color: rgba(75,139,255,.35);
  background: rgba(75,139,255,.12);
  color: var(--text);
}
.treeLeft{
  display:flex;
  align-items:center;
  gap: 9px;
  min-width:0;
}
.icon{
  width:26px;height:26px;border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--w-04);
  display:grid;place-items:center;
  flex:0 0 auto;
  font-size: 14px;
}
.icon img { width: 16px; height: 16px; object-fit: contain; }
.treeRow.active .icon{
  border-color: rgba(75,139,255,.35);
  background: rgba(75,139,255,.14);
}
.treeName{
  font-size: 12.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.treeRight{
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.count{
  font-size: 10.5px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--w-03);
  color: var(--muted);
}
.addHighlightBtn {
  font-size: 14px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--w-05);
  border: 1px solid var(--w-10);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.addHighlightBtn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.addHighlightBtn.added {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: rotate(45deg);
}
.chev{
  margin-left: 6px;
  opacity:.75;
  font-size: 12px;
  transform: rotate(0deg);
  transition: transform .18s ease;
}
.treeRow.expanded .chev{
  transform: rotate(90deg);
}
.submenu{
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--w-08);
  display:none;
  flex-direction:column;
  gap:2px;
}
.submenu.open{ display:flex; }
.sub .icon{ width:24px;height:24px;border-radius: 9px; font-size: 13px; }
.sub .treeName{ font-size: 12.3px; }
.subRow{
  padding: 4px 8px;
  border-radius: 12px;
}
.subRow:hover{ background: var(--w-03); }
.subRow.active{
  border-color: rgba(75,139,255,.30);
  background: rgba(75,139,255,.10);
}

.sidebarFooter{
  margin-top:auto;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--b-10);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.footerItem {
  position: relative;
  display: inline-block;
}
.footerLink {
  color: var(--muted2);
  font-size: 11.5px;
  text-decoration: none;
  transition: color 0.2s;
}
.footerLink:hover { color: var(--text); }
.footerPopup {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: linear-gradient(180deg, var(--panelA), var(--panelB));
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text);
  width: max-content;
  max-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 100;
  backdrop-filter: blur(10px);
}
.footerItem:hover .footerPopup {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.main{
  min-width:0;
  display:grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--gap);
}
.topbar{
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  overflow: visible !important; 
}
.topLeft{
  display:flex;
  flex-direction:column;
  gap: 3px;
  min-width:0;
}
.pageTitle{
  margin:0;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: .2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pageMeta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.metaPill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--b-10);
  color: var(--muted);
  font-size: 11.5px;
  white-space:nowrap;
  transition: all 0.2s;
  cursor: default;
}
.modeToggle { cursor: pointer; }
.modeToggle:hover {
  border-color: var(--accent);
  color: var(--text);
}

.langDropdown {
  position: relative;
  display: inline-block;
}
.langBtnCompact {
  padding: 5px 7px; 
  gap: 4px;
}
.langMenu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: linear-gradient(180deg, var(--panelA), var(--panelB));
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  min-width: 45px;
  z-index: 999; 
  backdrop-filter: blur(10px);
  padding: 4px;
}
.langMenu.open { display: flex; }
.langOption {
  padding: 6px 10px;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.langOption:hover { background: var(--w-06); }
.langOption.hidden { display: none; }

.strip{
  padding: 8px 10px;
  display:flex;
  align-items:center;
  gap: 8px;
  overflow:auto;
  scrollbar-width: thin;
  min-height: 48px;
}
.stripLabel{
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted2);
  flex:0 0 auto;
  margin-right: 2px;
}
.highlight{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--w-14);
  background: var(--b-10);
  color: var(--text);
  font-size: 11.5px;
  white-space:nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.highlight:hover {
  border-color: rgba(255,120,120,.5);
  background: rgba(255,120,120,.1);
}
.highlight .dot{
  width:7px;height:7px;border-radius:999px;
  background: var(--w-45);
  box-shadow: 0 0 0 3px var(--w-06);
}
.highlight.selectedCat {
  border-color: rgba(75,139,255,.40);
  background: rgba(75,139,255,.15);
}
.highlight.selectedCat .dot {
  background: rgba(75,139,255,.90);
  box-shadow: 0 0 0 3px rgba(75,139,255,.12);
}

.grid{
  min-height:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.grid.single-column {
  grid-template-columns: 1fr;
}
.panel{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.panelHeader{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--b-12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.panelHeader h2{
  margin:0;
  font-size: 12.5px;
  font-weight: 780;
  letter-spacing: .2px;
}
.tabs{
  display:flex;
  gap: 6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.tab{
  font-size: 10.8px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--w-03);
  color: var(--muted);
  cursor:pointer;
  user-select:none;
}
.tab.active{
  border-color: var(--w-18);
  background: var(--w-06);
  color: var(--text);
}
.scroll{
  padding: 10px;
  overflow:auto;
  min-height:0;
  flex: 1;
}

.trendWrap{ padding: 10px 10px 0; }
.trendBar{
  display:flex;
  align-items:center;
  gap: 8px;
  overflow:auto;
  scrollbar-width: thin;
  padding: 8px 8px;
  border: 1px solid var(--w-08);
  border-radius: 12px;
  background: var(--b-10);
}
.trendLabel{
  flex:0 0 auto;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted2);
  margin-right: 2px;
}
.topicPill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--w-14);
  background: var(--w-03);
  color: var(--text);
  font-size: 11.5px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.topicPill:hover{
  border-color: var(--w-20);
  background: var(--w-05);
}
.topicPill.active{
  border-color: rgba(75,139,255,.35);
  background: rgba(75,139,255,.10);
}
.topicPill .hash{ color: var(--w-86); }
.clearTopic{
  margin-left:auto;
  flex:0 0 auto;
  font-size: 10.8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--w-14);
  background: var(--b-12);
  color: var(--muted);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.clearTopic:hover{ color: var(--text); border-color: var(--w-20); }

.sentMini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 16px;
  height: 16px;
  border-radius: 6px;
  border: 1px solid var(--w-14);
  background: var(--b-10);
  font-size: 10px;
  line-height: 1;
  opacity: .92;
}
.sentMini.pos{ border-color: rgba(53,208,127,.26); background: rgba(53,208,127,.10); }
.sentMini.neg{ border-color: rgba(255,120,120,.24); background: rgba(255,120,120,.08); }
.sentMini.neu{ border-color: rgba(255,255,255,.14); background: var(--b-10); }
html[data-theme="light"] .sentMini.neu { border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.05); }

.newsRow{
  --brand: var(--w-06);
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items:center;
  padding: var(--rowPadY) var(--rowPadX);
  border: 1px solid var(--w-06);
  border-radius: 12px;
  background: linear-gradient(90deg, var(--b-10), var(--b-08));
  margin-bottom: 8px;
  cursor: default;
}
.newsRow:hover{
  background: linear-gradient(90deg, var(--w-05), var(--b-08));
  border-color: var(--w-10);
}
.newsTitle{
  display: flex;
  align-items: center;
  gap: 8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size: 13.2px;
  line-height: 1.25;
  font-weight: 760;
  letter-spacing: .15px;
}
.newsTitle a{
  color: var(--text);
  text-decoration:none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newsTitle a:hover{ color: var(--accent); }
.sourcePill{
  display:inline-flex;
  align-items:center;
  gap: 7px;
  font-size: 10.8px;
  padding: 4px 10px 4px 7px;
  border-radius: 999px;
  border: 1px solid var(--w-14);
  color: var(--muted);
  white-space:nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 22%, var(--w-03)), var(--w-02));
  border-color: color-mix(in srgb, var(--brand) 38%, var(--w-12));
}
.sourcePillGroup{
  display:flex;
  align-items:center;
  gap: 8px;
  justify-content:flex-end;
}
.favicon{
  width:16px;height:16px;
  border-radius: 5px;
  border: 1px solid var(--w-14);
  background: var(--w-04);
  flex:0 0 auto;
}
.time{
  font-size: 10.8px;
  width: 44px;
  text-align:right;
  white-space:nowrap;
  color: var(--muted);
}
.time.fresh{ color: var(--w-86); }
.time.mid  { color: var(--w-62); }
.time.old  { color: var(--w-44); }

.post{
  padding: 9px 10px;
  border: 1px solid var(--w-06);
  border-radius: 12px;
  background: var(--b-10);
  margin-bottom: 8px;
}
.postTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 3px;
}
.postUser{
  font-weight: 780;
  font-size: 12px;
  color: var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.postTime{
  font-size: 10.8px;
  color: var(--muted);
  white-space:nowrap;
}
.postText{
  color: var(--muted);
  font-size: 12.3px;
  line-height: 1.35;
  margin:0;
}

.no-news {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.loading-spinner {
  text-align: center;
  padding: 40px;
  color: var(--muted);
}

@media(max-width: 980px){
  .app{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .sidebar { display: none; }
}