/* ---- Theme Tokens ---- */
:root {
  --bg:#1a0f08;          /* deep blackened brown with orange undertone */
  --fg:#fff5e6;          /* warm creamy text */
  --muted:#e0b894;       /* muted tan/orange beige */
  --card:#26150b;        /* dark roasted brown-orange for cards */
  --accent:#ff6a00;      /* main vibrant orange */
  --accent-glow:#ffae42; /* glowing amber highlight */
  --acc1:#ff6a00;        /* bright flame orange */
  --acc2:#ff8c1a;        /* vivid pumpkin orange */
  --acc3:#ffc266;        /* golden honey */
  --edge:#803300;        /* burnt orange edge line */
  --shadow:0 0 16px rgba(255,106,0,.25); /* warm orange glow shadow */
}


/* ---- Page Base ---- */
*{box-sizing:border-box}
html,body{
  margin:0; height:100%;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif;
  overflow-x:hidden;
}

/* Animated gradient glow backdrop */
body::before{
  content:"";
  position:fixed; inset:-20%;
  background:
    radial-gradient(800px 500px at 15% 10%, rgba(255,106,0,.25), transparent 55%),
    radial-gradient(700px 420px at 85% 15%, rgba(255,174,66,.22), transparent 60%),
    radial-gradient(900px 520px at 50% 120%, rgba(255,194,102,.18), transparent 65%);
  filter: blur(30px) saturate(120%);
  animation: drift 18s ease-in-out infinite alternate;
  z-index:-2;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(2%, -1%, 0) scale(1.05)}
}

/* subtle scanlines for texture */
body::after{
  content:"";
  position:fixed; inset:0;
  background:
    linear-gradient(transparent 96%, rgba(255,255,255,.04) 96%) 0 0/100% 3px,
    linear-gradient(90deg, rgba(255,255,255,.03), transparent 30%, rgba(255,255,255,.03)) 0 0/6px 100%;
  pointer-events:none; z-index:-1; opacity:.35;
}

/* Layout container */
.container{ max-width:1100px; margin:0 auto; padding:2rem; }

/* ---- Type & Utilities ---- */
.center{text-align:center}
h1{
  margin:0 0 .75rem; font-size:2.1rem; letter-spacing:.4px; line-height:1.2;
  background: linear-gradient(90deg, var(--acc2), var(--acc1) 40%, var(--acc3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 8px rgba(255,174,66,.3));
}
.muted{ color:var(--muted) }
.s{ font-size:.9rem }

/* Fancy link underline */
a{ color: var(--acc2); text-decoration:none; position:relative }
a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background: linear-gradient(90deg, var(--acc1), var(--acc2), var(--acc3));
  transform-origin:left; transform:scaleX(.2); transition:transform .18s ease;
  border-radius:2px; opacity:.8;
}
a:hover::after{ transform:scaleX(1) }

/* ---- Cards (holo edge + slight lift) ---- */
.card{
  position:relative;
  background: var(--card);
  padding:1rem; border-radius:16px;
  box-shadow: var(--shadow);
  border:1px solid var(--edge);
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-1px;
  border-radius:16px;
  background:
    conic-gradient(from 90deg,
      rgba(255,106,0,.0) 0deg,
      rgba(255,106,0,.35) 40deg,
      rgba(255,174,66,.35) 120deg,
      rgba(255,194,102,.28) 200deg,
      rgba(255,106,0,.0) 360deg);
  mask:
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; opacity:.35;
  animation: spin 8s linear infinite;
  pointer-events:none;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

label{ display:block; font-weight:700; margin:.5rem 0; letter-spacing:.2px }
textarea{
  width:100%; padding:.9rem .9rem;
  border-radius:12px; border:1px solid #4d2a0d;
  background:#0e0a06; color:var(--fg);
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
textarea:focus{
  border-color: var(--acc1);
  box-shadow: 0 0 0 3px rgba(255,106,0,.22), 0 0 0 1px rgba(255,106,0,.55) inset;
  outline: none; transform: translateY(-1px);
}

/* ---- Buttons (neon pulse) ---- */
button,.btn{
  display:inline-block; margin-top:.75rem; padding:.75rem 1.05rem;
  border-radius:14px; border:0; cursor:pointer; font-weight:900; letter-spacing:.3px;
  color:#1a0f08;
  background: linear-gradient(135deg, var(--acc1), #ff944d 35%, var(--acc2) 80%);
  box-shadow: 0 0 14px rgba(255,106,0,.55), 0 0 24px rgba(255,174,66,.3);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  position:relative;
}
button::after,.btn::after{
  content:""; position:absolute; inset:-2px; border-radius:16px;
  background: radial-gradient(120px 40px at 20% 20%, rgba(255,255,255,.25), transparent 60%);
  filter: blur(8px); opacity:.35; pointer-events:none;
}
button:hover,.btn:hover{ filter:brightness(1.08); box-shadow: 0 0 18px rgba(255,106,0,.65), 0 0 30px rgba(255,174,66,.38) }
button:active,.btn:active{ transform: translateY(1px) scale(.99) }
button[disabled],.btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; box-shadow:none }

/* Hidden honeypot */
.hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }

/* ---- Feed Items ---- */
.item{ padding:.65rem .3rem; border-bottom:1px solid #3a2415 }
.item:last-child{ border-bottom:0 }
.time{ font-size:.8rem; color:var(--muted); margin-bottom:.25rem }
.msg{ white-space:pre-wrap; word-break:break-word }

/* ---- Chart ---- */
.chart-wrap{
  position:relative; width:100%; height:420px; border-radius:16px; overflow:hidden;
  border:1px solid var(--edge);
  background:
    radial-gradient(1200px 420px at 50% -20%, rgba(255,106,0,.15), transparent 60%),
    radial-gradient(800px 300px at 95% 120%, rgba(255,174,66,.12), transparent 65%),
    #0e0a06;
}
.chart-wrap iframe{ width:100%; height:100%; border:0; background:transparent }

/* ---- Layout ---- */
.krn-layout{ display:grid; gap:1.25rem }

@media (min-width:700px){
  .krn-layout{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "form feed"
      "chart chart";
    align-items:stretch;
    grid-auto-rows:minmax(0,auto);
  }
  .form-col{ grid-area:form; display:flex; flex-direction:column }
  .feed-col{ grid-area:feed; display:flex; flex-direction:column }
  .chart-col{ grid-area:chart }
}

@media (min-width:700px){
  .form-col .card{
    min-height:70vh; display:flex; flex-direction:column;
  }
}

@media (min-width:700px){
  .feed{
    height:100%;
    max-height:70vh;
    overflow:auto;
    border-radius:16px;
    background:var(--card);
    border:1px solid var(--edge);
  }
}

/* ---- A11y focus ---- */
:focus-visible{ outline:2px solid var(--acc2); outline-offset:3px }
button:focus-visible,.btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(255,174,66,.3), 0 0 0 1px rgba(255,174,66,.55) inset
}

/* ---- Nice Scrollbar ---- */
.feed{ scrollbar-width:thin; scrollbar-color:#4d2a0d transparent }
.feed::-webkit-scrollbar{ width:8px }
.feed::-webkit-scrollbar-thumb{ background:#4d2a0d; border-radius:8px }
.feed::-webkit-scrollbar-track{ background:transparent }

/* ---- Textarea comfy ---- */
textarea{ min-height:10rem }

/* ---- Small spacing tweak ---- */
.card + .card{ margin-top:1rem }

.buy-social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem auto;
  width: 90%;
  max-width: 800px;
}

.buy-social .left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.social-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  color: var(--accent);
  transition: background .2s, color .2s, box-shadow .2s;
}
.buy-social { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; width: 100%; }

.social-x:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 10px var(--accent);
}

.grid-2 {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: 1fr 1fr;
}
.strong { font-weight: 700; }
.holders { list-style: none; padding: 0; margin: .5rem 0 0; }
.holders li { display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px solid rgba(255,255,255,.06); }
.holders li:last-child { border-bottom: 0; }
.holders .addr { opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 70%; }
.holders .amt { font-weight:600; }

/* ===== Desktop: equal height, no form scrollbars, animated border clipped ===== */
@media (min-width: 900px) {
  .krn-layout {
    align-items: stretch;
    grid-auto-rows: minmax(0, auto);
  }

  .form-col,
  .feed-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* LEFT: form never scrolls; hide conic-gradient bleed */
  .form-col .card {
    flex: 1 1 auto;
    min-height: auto;
    overflow: hidden !important;   
  }
  .form-col .card::before {
    inset: 0;             
  }
  .form-col textarea {
    flex-grow: 1;               
    min-height: 10rem;
    max-height: 40vh;         
  }

  /* RIGHT: feed is the only scroller */
  .feed-col .feed {
    flex: 1 1 auto;
    min-height: auto;
    max-height: 72vh;
    overflow: auto;        
  }
}

/* Optional: avoid layout shift when feed gets a scrollbar (desktop only) */
@media (min-width: 900px) {
  .feed-col .feed { scrollbar-gutter: stable both-edges; }
}

/* Feed item compact mode when no reveal link */
.item {
  padding: .55rem .25rem;
  border-bottom: 1px solid #3a2415;
}
.item:last-child { border-bottom: 0; }

.item .time {
  margin-bottom: .2rem;
  font-size: .8rem;
  color: var(--muted);
}
.item .msg {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* If no reveal link inside the item → compact spacing */
.item:not(:has(.reveal-link)) {
  padding-bottom: .35rem;
}
.item:not(:has(.reveal-link)) .msg {
  margin-bottom: 0;
}

/* Reveal link styling */
.reveal-link {
  display: inline-block;
  margin-top: .3rem;
  font-size: .9rem;
  color: var(--accent);
  text-decoration: none;
  opacity: .9;
}
.reveal-link:hover { text-decoration: underline; opacity: 1; }
.reveal-link.is-loading { pointer-events: none; opacity: .6; }

/* Inline toggle helpers */
.inline { display: inline; }
.hidden { display: none !important; }

.feed-link {
  display: inline-block;
  margin: .5rem .75rem;
  font-size: .9rem;
  color: var(--accent);
  text-decoration: none;
  opacity: .9;
  cursor: pointer;
}
.feed-link:hover { text-decoration: underline; opacity: 1; }
.feed-link.hidden { display: none; }

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;          /* compact spacing */
  margin: 0.5rem 0;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.45rem;   /* smaller pill size */
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.7rem;         /* smaller text */
  color: #fff;
  text-decoration: none;
  background: var(--acc1, #ff6a00);
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.badge:hover {
  background: var(--acc2, #ff8c1a);
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Brand accents */
.badge.github { background: #24292e; }
.badge.x { background: #000; }
.badge.buy { background: var(--acc1, #ff6a00); }
.badge.scan { background: #1a73e8; }
.badge.telegram { background: #0088cc; }