/* ==========================================================
   SIGNAL.tech — design tokens
   ========================================================== */
:root{
  --bg:            #0F1420;
  --bg-alt:        #131928;
  --panel:         #171D2B;
  --panel-raised:  #1D2436;
  --line:          #2A3346;
  --paper:         #EDEFF4;
  --muted:         #8892A6;
  --muted-dim:     #5C6478;
  --amber:         #FFB238;
  --amber-dim:     #B8811F;
  --cyan:          #4FD1E8;
  --red:           #FF6B6B;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius: 3px;
  --radius-lg: 6px;
  --max: 1280px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
.mono{ font-family:var(--font-mono); }
.muted{ color:var(--muted); }

::selection{ background:var(--amber); color:var(--bg); }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================
   TICKER
   ========================================================== */
.ticker-bar{
  display:flex;
  align-items:stretch;
  background:var(--amber);
  color:var(--bg);
  height:34px;
  overflow:hidden;
  position:relative;
  z-index:60;
}
.ticker-label{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 14px;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:11px;
  letter-spacing:0.08em;
  background:var(--bg);
  color:var(--amber);
  white-space:nowrap;
  flex-shrink:0;
}
.ticker-label .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--red);
  animation:pulse 1.6s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(0.7); }
}
.ticker-track-wrap{
  flex:1;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
}
.ticker-track{
  display:flex;
  gap:48px;
  white-space:nowrap;
  padding-left:100%;
  animation:scroll-left 55s linear infinite;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
}
.ticker-track:hover{ animation-play-state:paused; }
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}
.ticker-item{ display:inline-flex; align-items:center; gap:10px; }
.ticker-item::before{ content:'▸'; opacity:0.6; }

/* ==========================================================
   MAIN NAV
   ========================================================== */
.main-nav{
  background:rgba(15,20,32,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:28px;
}
.logo{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  flex-shrink:0;
}
.logo-mark{ color:var(--amber); font-size:18px; }
.logo-sub{ color:var(--cyan); font-weight:500; }

.nav-links{
  display:flex;
  gap:4px;
  flex:1;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{ display:none; }
.nav-link{
  background:none;
  border:1px solid transparent;
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  padding:7px 13px;
  border-radius:20px;
  white-space:nowrap;
  transition:all .15s ease;
}
.nav-link:hover{ color:var(--paper); border-color:var(--line); }
.nav-link.is-active{
  background:var(--panel-raised);
  color:var(--amber);
  border-color:var(--line);
}

.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.search-box{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:7px 12px;
  color:var(--muted-dim);
  transition:border-color .15s ease;
}
.search-box:focus-within{ border-color:var(--amber-dim); }
.search-box input{
  background:none;
  border:none;
  outline:none;
  color:var(--paper);
  font-size:13px;
  width:150px;
  font-family:var(--font-body);
}
.search-box input::placeholder{ color:var(--muted-dim); }

.refresh-btn{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--muted);
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s ease;
}
.refresh-btn:hover{ color:var(--amber); border-color:var(--amber-dim); transform:rotate(45deg); }
.refresh-btn.spinning svg{ animation:spin 0.8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.lang-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  padding:7px 12px;
  border-radius:20px;
  white-space:nowrap;
  transition:all .15s ease;
}
.lang-toggle:hover{ color:var(--paper); border-color:var(--amber-dim); }
.lang-toggle.is-active{
  background:rgba(255,178,56,0.12);
  border-color:var(--amber-dim);
  color:var(--amber);
}

.menu-toggle{
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  padding:6px;
}
.menu-toggle span{ width:20px; height:2px; background:var(--paper); }

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:40px 24px 24px;
  min-height:220px;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.1em;
  color:var(--amber);
  background:rgba(255,178,56,0.1);
  border:1px solid rgba(255,178,56,0.3);
  padding:5px 10px;
  border-radius:20px;
  margin-bottom:18px;
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(28px,4.2vw,46px);
  line-height:1.08;
  font-weight:700;
  margin:0 0 16px;
  letter-spacing:-0.01em;
}
.hero-title a:hover{ color:var(--amber); }
.hero-deck{
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
  margin:0 0 20px;
  max-width:60ch;
}
.hero-meta{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted-dim);
}
.hero-meta .src{ color:var(--cyan); font-weight:600; }
.hero-visual{
  aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--panel-raised), var(--panel));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
}
.hero-visual img{ width:100%; height:100%; object-fit:cover; }

.hero-skeleton{ padding-top:10px; }
.skel-tag, .skel-line{
  background:var(--panel);
  border-radius:4px;
  animation:shimmer 1.4s ease-in-out infinite;
}
.skel-tag{ width:110px; height:22px; border-radius:20px; margin-bottom:20px; }
.skel-line{ height:34px; margin-bottom:12px; width:100%; }
.skel-line.sm{ height:18px; width:40%; }
.skel-line.w80{ width:80%; }
.skel-line.w60{ width:60%; }
@keyframes shimmer{ 0%,100%{ opacity:0.5; } 50%{ opacity:0.9; } }

/* ==========================================================
   NEWSLETTER
   ========================================================== */
.newsletter-banner{
  max-width:var(--max);
  margin:0 auto 32px;
  padding:0 24px;
}
.newsletter-inner{
  background:
    radial-gradient(600px 200px at 12% 0%, rgba(255,178,56,0.10), transparent 60%),
    linear-gradient(135deg, var(--panel-raised), var(--panel));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.newsletter-copy{ flex:1 1 320px; min-width:0; }
.newsletter-title{
  font-family:var(--font-display);
  font-size:clamp(19px,2.4vw,25px);
  font-weight:700;
  line-height:1.25;
  margin:0 0 8px;
  letter-spacing:-0.01em;
}
.newsletter-sub{ color:var(--muted); font-size:14px; margin:0; }
.newsletter-form-wrap{ flex:0 1 380px; min-width:280px; }
.newsletter-form{ display:flex; gap:10px; }
.newsletter-form input{
  flex:1;
  min-width:0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:20px;
  padding:12px 16px;
  color:var(--paper);
  font-size:14px;
  font-family:var(--font-body);
  outline:none;
  transition:border-color .15s ease;
}
.newsletter-form input::placeholder{ color:var(--muted-dim); }
.newsletter-form input:focus{ border-color:var(--amber-dim); }
.newsletter-form button{
  background:var(--amber);
  border:1px solid var(--amber);
  color:var(--bg);
  font-weight:700;
  font-size:13px;
  padding:12px 22px;
  border-radius:20px;
  white-space:nowrap;
  transition:all .15s ease;
}
.newsletter-form button:hover{ background:transparent; color:var(--amber); }
.newsletter-form button:disabled{ opacity:0.6; cursor:default; }
.newsletter-status{
  margin:10px 2px 0;
  font-family:var(--font-mono);
  font-size:12px;
  min-height:16px;
  color:var(--muted-dim);
}
.newsletter-status.is-success{ color:#4ADE80; }
.newsletter-status.is-error{ color:var(--red); }
.newsletter-status.is-warn{ color:var(--amber); }

/* ==========================================================
   ARTE GERATIVA (usada quando a notícia não tem foto própria —
   principalmente posts do Hacker News). Ícone + padrão + cor
   escolhidos por um hash do título: sempre igual pro mesmo
   artigo, mas variando de artigo pra artigo. Zero dependência
   externa — nunca quebra, nunca repete visualmente sem sentido.
   ========================================================== */
.art-tile{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:linear-gradient(150deg, var(--panel-raised), var(--panel));
}
.art-tile::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(420px 260px at var(--gx,40%) var(--gy,30%), currentColor, transparent 60%);
  opacity:0.12;
}
.art-tile::before{
  content:'';
  position:absolute; inset:0;
  opacity:0.5;
}
.art-tile.pattern-dots::before{
  background-image:radial-gradient(rgba(237,239,244,0.09) 1.2px, transparent 1.2px);
  background-size:16px 16px;
  background-position:var(--gx,0) var(--gy,0);
}
.art-tile.pattern-grid::before{
  background-image:
    linear-gradient(rgba(237,239,244,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,239,244,0.07) 1px, transparent 1px);
  background-size:22px 22px;
  background-position:var(--gx,0) var(--gy,0);
}
.art-tile.pattern-diag::before{
  background-image:repeating-linear-gradient(45deg, rgba(237,239,244,0.06) 0 2px, transparent 2px 14px);
}
.art-tile.accent-amber{ color:var(--amber); }
.art-tile.accent-cyan{ color:var(--cyan); }
.art-tile svg{
  width:42%;
  height:42%;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  transition:transform .3s ease;
}

/* ==========================================================
   STATUS BAR
   ========================================================== */
.status-bar{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  font-family:var(--font-mono);
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
}
.status-left{ display:flex; align-items:center; gap:8px; }
.live-dot{
  width:7px; height:7px; border-radius:50%;
  background:#4ADE80;
  box-shadow:0 0 0 rgba(74,222,128,0.5);
  animation:ring 2s infinite;
}
@keyframes ring{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,0.5); }
  70%{ box-shadow:0 0 0 6px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}
.status-right .sep{ margin:0 8px; opacity:0.4; }

/* ==========================================================
   CONTENT GRID
   ========================================================== */
.content-grid{
  max-width:var(--max);
  margin:0 auto;
  padding:28px 24px 60px;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:36px;
  align-items:start;
}

.feed-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:20px;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  opacity:0;
  animation:card-in .4s ease forwards;
}
@keyframes card-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.card:hover{
  transform:translateY(-3px);
  border-color:var(--amber-dim);
  box-shadow:0 12px 24px -12px rgba(0,0,0,0.5);
}
.card-media{
  aspect-ratio:16/9;
  background:var(--panel-raised);
  position:relative;
  overflow:hidden;
}
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.card:hover .card-media img{ transform:scale(1.05); }
.card:hover .art-tile svg{ transform:scale(1.08); }
.card-cat{
  position:absolute; top:10px; left:10px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:rgba(15,20,32,0.85);
  color:var(--amber);
  padding:4px 8px;
  border-radius:20px;
  backdrop-filter:blur(4px);
}
.card-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.card-title{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  line-height:1.32;
  margin:0;
}
.card-title a:hover{ color:var(--amber); }
.card-snippet{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-meta{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted-dim);
  padding-top:8px;
  border-top:1px solid var(--line);
}
.card-meta .src{ color:var(--cyan); font-weight:600; }

.feed-empty{
  text-align:center;
  padding:60px 20px;
  color:var(--muted);
}
.feed-empty p:first-child{ color:var(--amber); margin-bottom:6px; }

.load-more{
  display:block;
  margin:32px auto 0;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--paper);
  padding:11px 26px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  transition:all .15s ease;
}
.load-more:hover{ border-color:var(--amber-dim); color:var(--amber); }

/* ==========================================================
   SIDEBAR
   ========================================================== */
.sidebar{ display:flex; flex-direction:column; gap:20px; position:sticky; top:80px; }
.side-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
}
.side-title{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted-dim);
  margin:0 0 14px;
}
.trend-list{ display:flex; flex-direction:column; gap:2px; }
.trend-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.trend-row:last-child{ border-bottom:none; }
.trend-rank{ font-family:var(--font-mono); color:var(--amber-dim); font-size:12px; margin-right:10px; }
.trend-word{ flex:1; color:var(--paper); font-weight:500; text-transform:capitalize; }
.trend-count{ font-family:var(--font-mono); color:var(--muted-dim); font-size:11px; }
.trend-skel{ height:22px; background:var(--panel-raised); border-radius:4px; margin-bottom:10px; animation:shimmer 1.4s ease-in-out infinite; }

.source-list li{
  display:flex;
  justify-content:space-between;
  padding:7px 0;
  font-size:13px;
  border-bottom:1px solid var(--line);
}
.source-list li:last-child{ border-bottom:none; }
.source-list .cnt{ font-family:var(--font-mono); color:var(--muted-dim); font-size:11px; }

.about-card p{ font-size:13px; color:var(--muted); line-height:1.6; margin:0; }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg-alt);
}
.footer-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:36px 24px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
}
.footer-brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  max-width:420px;
}
.footer-brand p{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--muted);
  font-size:13px;
  margin:10px 0 0;
  line-height:1.6;
}
.footer-meta{ text-align:right; font-size:11px; color:var(--muted-dim); }
.footer-meta p{ margin:4px 0; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:960px){
  .content-grid{ grid-template-columns:1fr; }
  .sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
  .side-card{ flex:1 1 240px; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; aspect-ratio:16/9; }
}

@media (max-width:720px){
  .nav-links{ display:none; }
  .menu-toggle{ display:flex; }
  .search-box input{ width:100px; }
  .nav-inner{ flex-wrap:wrap; }
  .nav-links.is-open{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    order:3;
    padding-top:10px;
    border-top:1px solid var(--line);
    margin-top:10px;
  }
  .footer-inner{ flex-direction:column; }
  .footer-meta{ text-align:left; }
}

@media (max-width:480px){
  .ticker-label{ padding:0 10px; font-size:10px; }
  .hero{ padding:28px 16px 16px; }
  .nav-inner{ padding:12px 16px; }
  .content-grid{ padding:20px 16px 40px; }
  .lang-toggle-label{ display:none; }
  .lang-toggle{ padding:7px 9px; }
  .newsletter-banner{ padding:0 16px; }
  .newsletter-inner{ padding:22px 18px; }
  .newsletter-form{ flex-direction:column; }
}