:root {
  --bg-0:#05070d;--bg-1:#0a0f1c;--bg-2:#111a2e;
  --line:rgba(180,200,255,.12);--line-2:rgba(180,200,255,.22);
  --line-strong:rgba(77,214,255,.42);
  --text:#e6ecf5;--text-dim:#94a0b8;--text-mute:#5d6a83;
  --gold:#f5c452;--gold-deep:#c89329;
  --cyan:#4dd6ff;--cyan-2:#aef0ff;--cyan-glow:rgba(77,214,255,.55);
  --green:#6cff8a;--red:#ff6464;
  --sith:#e23a3a;--rep:#4dabff;
  --hair:rgba(127,227,255,.35);--hair-2:rgba(127,227,255,.15);
  --surf-news-1:rgba(8,18,30,.95);--surf-news-2:rgba(4,10,18,.95);
  --glow-rgb:77,214,255;
  --display:"Orbitron","Eurostile",system-ui,sans-serif;
  --ui:"Rajdhani","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--ui);background:var(--bg-0);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}

.stars{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1px 1px at 20% 30%,#fff 50%,transparent 100%),
    radial-gradient(1px 1px at 70% 80%,#cfe5ff 50%,transparent 100%),
    radial-gradient(2px 2px at 40% 70%,#fff 50%,transparent 100%),
    radial-gradient(1px 1px at 85% 15%,#fff 50%,transparent 100%),
    radial-gradient(1.5px 1.5px at 10% 90%,#ffe6a8 50%,transparent 100%),
    radial-gradient(circle at 80% 20%,rgba(77,171,255,.08),transparent 40%),
    radial-gradient(circle at 15% 85%,rgba(226,58,58,.06),transparent 40%),
    var(--bg-0);
  background-size:600px 600px,600px 600px,800px 800px,700px 700px,900px 900px,100% 100%,100% 100%;
}

/* ============================================================
   NAV / HERO / BTN — compartilhados com eventos.css
   ============================================================ */
.nav{position:sticky;top:0;z-index:100;padding:14px 0;background:linear-gradient(180deg,rgba(5,7,13,.92),rgba(5,7,13,.6) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1320px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:34px;height:34px;object-fit:contain}
.brand .txt{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:2.4px;line-height:1}
.brand .txt small{display:block;font-family:var(--mono);font-weight:400;font-size:8px;letter-spacing:1.6px;color:var(--gold);margin-top:5px;opacity:.85}
.nav-back{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;padding:10px 18px;background:rgba(15,25,45,.5);box-shadow:inset 0 0 0 1px var(--line);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));transition:color .2s,box-shadow .2s,background .2s}
.nav-back:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:rgba(245,196,82,.06)}

.container{max-width:1320px;margin:0 auto;padding:0 32px;width:100%;position:relative}
.container.guides-container{max-width:none;padding:0 24px}

.hero{padding:60px 0 28px;position:relative}
.hero.hero-merge{padding:36px 0 0}
.hero.hero-merge .hero-row{align-items:flex-end;padding-bottom:14px;border-bottom:1px solid rgba(var(--glow-rgb),.18);position:relative}
.hero.hero-merge .hero-row::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 10px var(--cyan-glow);opacity:.55;
}
.hero.hero-merge .eyebrow{margin-bottom:10px}
.hero.hero-merge h1{
  font-size:clamp(28px,3.4vw,46px);
  margin:0 0 8px;
  letter-spacing:-.6px;
}
.hero.hero-merge h1 .ac{
  background:linear-gradient(180deg,#aef0ff 0%,#4dd6ff 60%,#1a8fb8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(77,214,255,.45));
}
.hero.hero-merge p{font-size:14px;line-height:1.5;max-width:680px}
.guides-panel-wrap{margin-top:0;margin-bottom:0;padding-bottom:48px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:18px}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--gold)}
.eyebrow .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 8px var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(36px,5.5vw,72px);line-height:.95;letter-spacing:-1.2px;margin:0 0 14px}
.hero h1 .ac{background:linear-gradient(180deg,#ffe14d,#c89329 80%,#a06f0c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(245,196,82,.25))}
.hero h1 .lt{background:linear-gradient(180deg,#fff 0%,#e6ecf5 60%,#94a0b8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:17px;color:var(--text-dim);max-width:660px;margin:0;text-wrap:pretty}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}

.btn{
  --btn-cut:12px;
  display:inline-flex;align-items:center;gap:10px;padding:12px 26px;
  font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:2.6px;
  text-transform:uppercase;cursor:pointer;border:none;position:relative;isolation:isolate;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#1a1408;
  box-shadow:inset 0 0 0 1px rgba(255,230,160,.55),0 0 22px rgba(245,196,82,.28);
  transition:transform .2s,filter .2s,box-shadow .2s;
  clip-path:polygon(0 var(--btn-cut),var(--btn-cut) 0,calc(100% - var(--btn-cut)) 0,100% var(--btn-cut),100% calc(100% - var(--btn-cut)),calc(100% - var(--btn-cut)) 100%,var(--btn-cut) 100%,0 calc(100% - var(--btn-cut)));
  text-decoration:none;
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(255,230,160,.7),0 0 32px rgba(245,196,82,.4)}
.btn-ghost{background:rgba(77,171,255,.06);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(77,214,255,.45),0 0 18px rgba(77,214,255,.12)}
.btn-ghost:hover{background:rgba(77,214,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(77,214,255,.7),0 0 24px rgba(77,214,255,.25)}
.btn-danger{background:rgba(226,58,58,.08);color:#ff8a8a;box-shadow:inset 0 0 0 1px rgba(226,58,58,.4)}
.btn-danger:hover{background:rgba(226,58,58,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(226,58,58,.7),0 0 22px rgba(226,58,58,.35)}
.btn-sm{padding:9px 18px;font-size:11px;letter-spacing:2px;--btn-cut:8px}

/* ============================================================
   NEWS-WRAP (FRAME COM CORNER BRACKETS)
   adaptado da seção "Galactic News Feed" do design de referência
   ============================================================ */
.news-wrap{
  display:grid;
  grid-template-columns:280px 1fr 60px;
  gap:0;
  margin:18px 0 0;
  position:relative;
  min-height:min(82vh, 980px);
  border:1px solid var(--line-strong);
  border-top:none;
  background:linear-gradient(180deg,var(--surf-news-1),var(--surf-news-2));
  box-shadow:inset 0 0 0 1px rgba(var(--glow-rgb),.06),
             inset 0 0 24px rgba(var(--glow-rgb),.06),
             0 0 0 1px rgba(0,0,0,.6);
}
.frame::before,.frame::after,
.frame > .c-tl,.frame > .c-tr,.frame > .c-bl,.frame > .c-br{
  content:"";position:absolute;width:18px;height:18px;
  border:2px solid var(--cyan);
  box-shadow:0 0 8px var(--cyan-glow);
  pointer-events:none;
}
.frame::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.frame::after{top:-2px;right:-2px;border-left:none;border-bottom:none}
.frame > .c-bl{bottom:-2px;left:-2px;border-right:none;border-top:none}
.frame > .c-br{bottom:-2px;right:-2px;border-left:none;border-top:none}

/* sidebar de canais */
.news-side{
  width:280px;padding:24px 22px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(var(--glow-rgb),.08),transparent);
}
.panel-title{
  font-family:var(--display);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan-2);text-shadow:0 0 8px var(--cyan-glow);
  font-size:12px;margin-bottom:14px;
}
.news-side .channel{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:11px;color:var(--text-mute);letter-spacing:.14em;
  padding:8px 10px;border-left:2px solid transparent;
  text-transform:uppercase;cursor:pointer;
  transition:color .25s,background .25s,border-color .25s;
  margin-bottom:2px;
}
.news-side .channel:hover{color:var(--text);background:rgba(var(--glow-rgb),.04)}
.news-side .channel.active{
  color:var(--cyan-2);border-color:var(--cyan);background:rgba(var(--glow-rgb),.06);
  box-shadow:inset 0 0 10px rgba(var(--glow-rgb),.1);
}
.news-side .channel .count{
  font-size:10px;color:var(--text-mute);letter-spacing:.12em;
}
.news-side .channel.active .count{color:var(--gold)}

/* terminal feed */
.news-feed{
  padding:22px 26px;min-width:0;
  display:flex;flex-direction:column;
}
.news-terminal-head{
  font-family:var(--mono);font-size:11px;color:var(--text-mute);letter-spacing:.14em;
  display:flex;gap:18px;align-items:center;
  padding-bottom:10px;border-bottom:1px dashed var(--hair-2);margin-bottom:14px;
  flex-wrap:wrap;
}
.news-terminal-head .blink{color:var(--green);animation:blink 1.2s infinite}
.news-terminal-head .grow{flex:1}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.3}}

.news-scroll{
  flex:1;min-height:0;
  max-height:calc(min(82vh, 980px) - 80px);
  overflow-y:auto;padding-right:8px;
  scrollbar-width:thin;scrollbar-color:var(--cyan) transparent;
  mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.news-scroll::-webkit-scrollbar{width:6px}
.news-scroll::-webkit-scrollbar-track{background:transparent}
.news-scroll::-webkit-scrollbar-thumb{background:var(--cyan);box-shadow:0 0 6px var(--cyan-glow);border-radius:3px}

.news-loading,.news-empty{
  padding:32px 8px;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--text-mute);
  text-transform:uppercase;font-style:italic;
}

/* card de guia (post) */
.guide-post{
  display:grid;grid-template-columns:220px 1fr auto;gap:18px;
  padding:18px 6px;border-bottom:1px solid var(--hair-2);
  align-items:center;cursor:pointer;
  transition:background .25s,padding .25s;
  text-decoration:none;color:inherit;
}
.guide-post:last-child{border-bottom:none}
.guide-post:hover{background:rgba(var(--glow-rgb),.06);padding-left:14px}
.guide-post .stamp{
  font-family:var(--mono);font-size:11px;color:var(--gold);
  letter-spacing:.14em;line-height:1.55;
  display:flex;flex-direction:column;gap:6px;
}
.guide-post .stamp .meta-row{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  color:var(--gold);font-size:10.5px;
}
.guide-post .stamp .meta-row .cat{color:var(--cyan-2);text-transform:uppercase;font-weight:500}
.guide-post .stamp .meta-row .dot{color:var(--text-mute);opacity:.7}
.guide-post .stamp .meta-row .dt{color:var(--gold);opacity:.85}
.guide-post .stamp .author{
  color:var(--text-dim);font-size:11px;
  display:inline-flex;align-items:center;gap:8px;
  min-width:0;
}
.guide-post .stamp .author .guide-author-avatar{
  width:26px;height:26px;border-radius:50%;object-fit:cover;
  background:rgba(8,13,24,.9);
  border:1px solid rgba(245,196,82,.4);
  flex-shrink:0;
}
.guide-post .stamp .author .guide-author-name{
  font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
  font-size:11px;font-weight:600;color:#eaf6ff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.guide-post .body{min-width:0}
.guide-post .body h4{
  margin:0 0 6px;font-family:var(--display);font-size:16px;letter-spacing:.06em;
  color:#eaf6ff;text-transform:uppercase;line-height:1.25;
  transition:color .25s,text-shadow .25s;
}
.guide-post:hover .body h4{color:var(--cyan-2);text-shadow:0 0 8px var(--cyan-glow)}
.guide-post .body p{margin:0;color:var(--text-dim);font-size:13px;line-height:1.5}
.guide-post .arrow{
  font-family:var(--mono);color:var(--cyan-2);letter-spacing:.2em;
  transition:transform .25s;
}
.guide-post:hover .arrow{transform:translateX(4px)}

.guide-post[hidden]{display:none}

/* ações inline (Editar / Excluir) — só aparecem pra dono ou Officer+ */
.guide-post.is-editable{position:relative}
.guide-post-actions{
  position:absolute;top:14px;right:54px;
  display:flex;gap:6px;
  z-index:2;
}
.gp-action{
  width:32px;height:32px;display:grid;place-items:center;
  background:rgba(8,18,30,.85);color:var(--cyan-2);
  border:1px solid var(--cyan);cursor:pointer;
  font-family:var(--mono);font-size:14px;line-height:1;
  text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(77,214,255,.15),0 0 8px rgba(var(--glow-rgb),.18);
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s,transform .12s;
}
.gp-action:hover{
  color:var(--gold);border-color:var(--gold);
  background:rgba(245,196,82,.08);
  box-shadow:0 0 14px rgba(245,196,82,.35);
  transform:translateY(-1px);
}
.gp-action.delete{color:#ff9c9c;border-color:#ff5566;box-shadow:inset 0 0 0 1px rgba(255,85,102,.2),0 0 8px rgba(255,85,102,.2)}
.gp-action.delete:hover{
  color:#fff;border-color:#ff5566;background:rgba(226,58,58,.18);
  box-shadow:0 0 14px rgba(226,58,58,.5);
}

/* badge "MEU" no título dos guides que o usuário criou */
.guide-post .own-badge{
  display:inline-block;margin-left:10px;
  padding:2px 8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  background:rgba(245,196,82,.12);color:var(--gold);
  border:1px solid var(--gold);
  vertical-align:middle;line-height:1.4;
  box-shadow:0 0 8px rgba(245,196,82,.2);
}

/* destaque do canal "Meus guias" */
.news-side .channel-mine{
  color:var(--gold);
  border-left:2px solid transparent;
}
.news-side .channel-mine:hover,
.news-side .channel-mine.active{
  color:var(--gold);border-left-color:var(--gold);
  background:rgba(245,196,82,.06);box-shadow:inset 0 0 10px rgba(245,196,82,.1);
}
.news-side .channel-mine.active .count{color:var(--cyan-2)}

@media (max-width: 920px){
  .guide-post-actions{position:static;justify-content:flex-end;margin-top:6px}
}

/* rail direito (scroll progress) */
.news-rail{
  width:60px;border-left:1px solid var(--line);
  background:linear-gradient(180deg,rgba(var(--glow-rgb),.05),transparent);
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0;
}
.news-rail .marker{
  width:10px;height:10px;border:1px solid var(--cyan);transform:rotate(45deg);
  box-shadow:0 0 6px var(--cyan-glow);
}
.news-rail .marker.dim{border-color:var(--text-mute);box-shadow:none}
.news-rail .scroll{
  flex:1;width:1px;background:var(--hair);margin:6px 0;position:relative;
}
.news-rail .scroll-thumb{
  position:absolute;left:-2px;width:5px;height:30%;background:var(--cyan);
  box-shadow:0 0 6px var(--cyan-glow);
  transform:translateY(calc(var(--guides-progress, 0) * 230%));
  transition:transform .15s ease-out;
}

/* footer */
footer{border-top:1px solid var(--line);padding:32px 0;background:rgba(5,7,13,.6);margin-top:60px}
footer .ft{font-family:var(--mono);font-size:11px;color:var(--text-mute);letter-spacing:1px;text-align:center}

@media (max-width: 920px){
  .news-wrap{grid-template-columns:1fr}
  .news-side{width:auto;border-right:none;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px;padding:14px}
  .news-side .panel-title{flex-basis:100%;margin-bottom:6px}
  .news-side .channel{margin-bottom:0;border-left:none;border-bottom:2px solid transparent;padding:6px 8px}
  .news-side .channel.active{border-color:var(--cyan);box-shadow:none}
  .news-rail{display:none}
  .guide-post{grid-template-columns:1fr;gap:6px}
  .guide-post .arrow{display:none}
}
@media (max-width: 720px){
  .container,.nav-inner{padding:0 20px}
}