* { margin:0; padding:0; box-sizing:border-box; }

body {
  background-color: #12000e;
  background-image:
    radial-gradient(ellipse at 15% 15%, #3d0030 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, #1a0030 0%, transparent 45%);
  color: #f0d6e8;
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
}

/* === AERO GLASS MIXIN === */
.aero {
  background: linear-gradient(180deg,
    rgba(255,100,180,0.18) 0%,
    rgba(180,30,100,0.08) 40%,
    rgba(80,0,60,0.22) 100%
  );
  border: 1px solid rgba(255,150,200,0.35);
  border-top-color: rgba(255,200,230,0.6);
  border-bottom-color: rgba(80,0,60,0.7);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,200,230,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 4px 16px rgba(0,0,0,0.5),
    0 1px 3px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.aero::before {
  content: '';
  position: absolute;
  top: 0; left: 8px; right: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,220,240,0.8), transparent);
  border-radius: 0 0 4px 4px;
  pointer-events: none;
}

.aero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg,
    rgba(255,180,220,0.12) 0%,
    rgba(255,255,255,0.03) 100%
  );
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}

/* === PAGE LAYOUT === */
.page-outer {
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 8px;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 10px;
}

/* === BLING SIDEBAR === */
.bling-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
}
.bling { font-size: 22px; cursor: default; display: block; line-height: 1; }
.bp { animation: bp 1.6s ease-in-out infinite; }
.bs { animation: bs 4s linear infinite; }
.bb { animation: bb 0.9s step-end infinite; }
.bf { animation: bf 4s ease-in-out infinite; }
.bling:nth-child(2)  { font-size:18px; animation-delay:0.5s; }
.bling:nth-child(3)  { font-size:25px; animation-delay:1s; }
.bling:nth-child(4)  { font-size:16px; animation-delay:1.5s; }
.bling:nth-child(5)  { font-size:20px; animation-delay:2s; }
.bling:nth-child(6)  { font-size:17px; animation-delay:0.7s; }
.bling:nth-child(7)  { font-size:22px; animation-delay:1.2s; }
.bling:nth-child(8)  { font-size:16px; animation-delay:2.2s; }
.bling:nth-child(9)  { font-size:23px; animation-delay:0.3s; }
.bling:nth-child(10) { font-size:18px; animation-delay:1.8s; }
@keyframes bp { 0%,100%{opacity:1} 50%{opacity:0.45} }
@keyframes bs { to{transform:rotate(360deg)} }
@keyframes bb { 50%{opacity:0} }
@keyframes bf { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* === HEADER === */
.site-header {
  text-align: center;
  padding: 16px 0 12px;
  margin-bottom: 6px;
}
.site-header .aero { padding: 14px 20px 16px; }

.header-deco { font-size: 12px; color: rgba(255,180,210,0.5); letter-spacing: 6px; margin-bottom: 4px; }

.site-title {
  font-family: 'VT323', monospace;
  font-size: 52px;
  color: #ff2d78;
  text-shadow:
    1px 1px 0 #6b0040,
    0 0 20px rgba(255,45,120,0.5),
    0 0 40px rgba(255,45,120,0.2);
  letter-spacing: 5px;
  line-height: 1;
}

.site-subtitle { font-size: 11px; color: #e0a0cc; letter-spacing: 3px; margin-top: 5px; }
.site-subtitle em { color: #ff79c6; font-style: normal; }

/* === AERO NAVBAR === */
nav.nav-bar {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 14px;
}

nav.nav-bar a {
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: #ffd6ee;
  text-decoration: none;
  padding: 4px 14px 5px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    rgba(255,120,180,0.25) 0%,
    rgba(120,0,80,0.15) 50%,
    rgba(60,0,40,0.3) 100%
  );
  border: 1px solid rgba(255,150,200,0.4);
  border-top-color: rgba(255,210,235,0.65);
  border-bottom-color: rgba(80,0,50,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,220,240,0.4),
    0 2px 6px rgba(0,0,0,0.4);
  transition: all 0.15s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

nav.nav-bar a::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,200,230,0.15), transparent);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}

nav.nav-bar a:hover {
  background: linear-gradient(180deg,
    rgba(255,45,120,0.45) 0%,
    rgba(180,0,90,0.25) 50%,
    rgba(80,0,50,0.35) 100%
  );
  border-top-color: rgba(255,180,210,0.8);
  color: #fff;
}

/* === MARQUEE === */
.marquee-strip {
  border-radius: 6px;
  overflow: hidden;
  margin: 8px 0;
  background: linear-gradient(90deg, rgba(255,45,120,0.8), rgba(180,0,120,0.9), rgba(255,45,120,0.8));
  border: 1px solid rgba(255,150,200,0.5);
  border-top-color: rgba(255,210,235,0.7);
  box-shadow: inset 0 1px 0 rgba(255,230,245,0.4), 0 2px 8px rgba(0,0,0,0.4);
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: 15px;
  letter-spacing: 2px;
  padding: 3px 0;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.marquee-inner { display: inline-block; animation: mq 22s linear infinite; }
@keyframes mq { 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }

/* === INNER LAYOUT === */
.inner-layout {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 10px;
  align-items: start;
}

/* === CAIXAS AERO === */
.box {
  padding: 12px 13px;
  margin-bottom: 10px;
}

.box-title {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: #ffb0d8;
  padding-bottom: 6px;
  margin-bottom: 9px;
  border-bottom: 1px solid rgba(255,120,180,0.25);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 8px rgba(255,45,120,0.3);
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

/* === INTRO === */
.intro-box {
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.avatar-frame {
  width: 82px; height: 82px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,80,150,0.2), rgba(80,0,60,0.3));
  border: 1px solid rgba(255,150,200,0.4);
  border-top-color: rgba(255,210,235,0.6);
  box-shadow: inset 0 1px 0 rgba(255,220,240,0.3), 0 3px 10px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}
.avatar-frame::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,200,230,0.15), transparent);
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}

.intro-text h2 { font-family: 'VT323', monospace; font-size: 24px; color: #ff79c6; margin-bottom: 6px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); position: relative; z-index:1; }
.intro-text p  { font-size: 11.5px; color: #d4a0c0; line-height: 1.7; position: relative; z-index:1; }
.heart-row     { color: #ff2d78; font-size: 14px; margin-top: 6px; letter-spacing: 4px; position: relative; z-index:1; }

/* === BLOG === */
.blog-entry { padding: 9px 0; border-bottom: 1px solid rgba(255,80,150,0.15); position: relative; z-index:1; }
.blog-entry:last-child { border-bottom: none; }
.blog-date { font-size: 10px; color: #bf5fff; letter-spacing: 2px; margin-bottom: 2px; }
.blog-etitle { font-family: 'VT323', monospace; font-size: 19px; color: #ff79c6; margin-bottom: 3px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.blog-entry p { font-size: 11px; color: #9070a0; line-height: 1.6; }
.read-more { display: inline-block; font-size: 11px; color: #ff2d78; text-decoration: none; margin-top: 3px; }

/* === AERO BUTTON === */
.aero-btn {
  display: inline-block;
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: #ffd6ee;
  text-decoration: none;
  padding: 3px 12px 4px;
  border-radius: 5px;
  cursor: pointer;
  background: linear-gradient(180deg,
    rgba(255,100,170,0.3) 0%,
    rgba(120,0,80,0.18) 50%,
    rgba(50,0,35,0.3) 100%
  );
  border: 1px solid rgba(255,140,190,0.4);
  border-top-color: rgba(255,200,230,0.6);
  border-bottom-color: rgba(60,0,40,0.5);
  box-shadow: inset 0 1px 0 rgba(255,220,240,0.35), 0 1px 4px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  margin-top: 4px;
}
.aero-btn::after {
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,200,230,0.15),transparent);
  border-radius:5px 5px 0 0;
  pointer-events:none;
}

/* === TAGS === */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; position: relative; z-index:1; }
.tag {
  font-family: 'VT323', monospace;
  font-size: 15px;
  padding: 3px 11px 4px;
  border-radius: 20px;
  cursor: default;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.tag::after {
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.1),transparent);
  border-radius:20px 20px 0 0;
  pointer-events:none;
}
.t-pink   { background: linear-gradient(180deg,rgba(255,80,150,0.35),rgba(120,0,70,0.25)); color:#ffc0e0; border:1px solid rgba(255,120,170,0.45); border-top-color:rgba(255,200,230,0.6); box-shadow:inset 0 1px 0 rgba(255,220,240,0.25),0 1px 4px rgba(0,0,0,0.35); }
.t-purple { background: linear-gradient(180deg,rgba(180,80,255,0.3),rgba(80,0,140,0.2));  color:#ddb0ff; border:1px solid rgba(180,80,255,0.4); border-top-color:rgba(220,180,255,0.55); box-shadow:inset 0 1px 0 rgba(230,200,255,0.2),0 1px 4px rgba(0,0,0,0.35); }
.t-gray   { background: linear-gradient(180deg,rgba(200,160,200,0.2),rgba(80,40,80,0.15)); color:#e0c8e0; border:1px solid rgba(180,120,180,0.35); border-top-color:rgba(230,200,230,0.5); box-shadow:inset 0 1px 0 rgba(240,220,240,0.15),0 1px 4px rgba(0,0,0,0.35); }
.tag:hover { transform:scale(1.05); filter:brightness(1.2); }

/* === SIDEBAR === */
.sidebar { display: flex; flex-direction: column; gap: 10px; }
.box ul  { list-style: none; position: relative; z-index:1; }
.box ul li { font-size: 11px; color: #c090b0; line-height: 1.85; }
.box ul li::before { content: "♡ "; color: #ff2d78; }
.box a { color: #bf5fff; text-decoration: none; }
.box a:hover { color: #ff79c6; }

.status-dot {
  display: inline-block; width:7px; height:7px; border-radius:50%;
  background:#ff2d78; margin-right:5px; vertical-align:middle;
  animation: hb 1.2s ease-in-out infinite;
}
@keyframes hb { 0%,100%{transform:scale(1)} 14%{transform:scale(1.4)} 28%{transform:scale(1)} }

.np-box {
  margin-top: 8px; padding: 7px 9px; border-radius: 6px;
  background: linear-gradient(180deg,rgba(80,0,60,0.4),rgba(30,0,25,0.5));
  border: 1px solid rgba(255,100,160,0.25);
  border-top-color: rgba(255,180,220,0.4);
  box-shadow: inset 0 1px 0 rgba(255,200,230,0.15);
  position: relative; z-index:1;
}
.np-label { font-size:9px; color:rgba(255,100,160,0.5); letter-spacing:2px; }
.np-track { font-size:11px; color:#ff79c6; margin-top:2px; line-height:1.5; }
.progress-bar { height:3px; background:rgba(40,0,30,0.6); border-radius:2px; margin-top:5px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,0.4); }
.progress-fill { height:100%; width:60%; background:linear-gradient(90deg,#ff2d78,#bf5fff); animation:prog 12s linear infinite; border-radius:2px; }
@keyframes prog { 0%{width:0%} 100%{width:100%} }

.mood-bar  { background:rgba(30,0,20,0.5); border:1px solid rgba(255,80,140,0.2); height:5px; border-radius:3px; overflow:hidden; margin:3px 0; box-shadow:inset 0 1px 2px rgba(0,0,0,0.4); position:relative;z-index:1; }
.mood-fill { height:100%; background:linear-gradient(90deg,#ff2d78,#bf5fff); border-radius:3px; }

.visitor-count {
  font-family:'VT323',monospace; font-size:28px; color:#ff79c6;
  text-align:center; letter-spacing:4px; padding:6px; border-radius:5px;
  background:linear-gradient(180deg,rgba(80,0,60,0.4),rgba(30,0,20,0.5));
  border:1px solid rgba(255,100,160,0.3);
  border-top-color:rgba(255,180,220,0.45);
  box-shadow:inset 0 1px 0 rgba(255,200,230,0.2),inset 0 -1px 0 rgba(0,0,0,0.3);
  text-shadow:0 0 10px rgba(255,45,120,0.5);
  position:relative;z-index:1;
}

.hearts-deco { text-align:center;font-size:13px;color:#ff2d78;letter-spacing:4px;margin:4px 0;animation:hp 2s ease-in-out infinite;position:relative;z-index:1; }
@keyframes hp { 0%,100%{opacity:1} 50%{opacity:0.4} }

.ascii-art { font-size:10px;line-height:1.3;color:rgba(255,100,160,0.35);text-align:center;white-space:pre;margin:4px 0;position:relative;z-index:1; }

/* === FOOTER === */
.site-footer {
  text-align:center; padding:14px;
  margin-top:6px;
  border-radius: 8px;
}
.footer-buttons { display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin:10px 0 8px; }

.btn88 {
  width:88px; height:31px; font-family:'VT323',monospace; font-size:13px;
  text-align:center; line-height:31px; border-radius:5px; cursor:pointer;
  display:inline-block; position:relative; overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
}
.btn88::after {
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.15),transparent);
  border-radius:5px 5px 0 0;
  pointer-events:none;
}
.btn-a { background:linear-gradient(180deg,rgba(255,80,140,0.7),rgba(150,0,70,0.8)); color:#fff; border:1px solid rgba(255,150,200,0.5); border-top-color:rgba(255,210,235,0.7); box-shadow:inset 0 1px 0 rgba(255,220,240,0.4),0 2px 6px rgba(0,0,0,0.4); }
.btn-b { background:linear-gradient(180deg,rgba(150,60,255,0.5),rgba(70,0,130,0.6));  color:#e8c8ff; border:1px solid rgba(180,80,255,0.45); border-top-color:rgba(220,180,255,0.6); box-shadow:inset 0 1px 0 rgba(230,200,255,0.3),0 2px 6px rgba(0,0,0,0.4); }
.btn-c { background:linear-gradient(180deg,rgba(255,80,150,0.3),rgba(80,0,50,0.4));   color:#ffc0e0; border:1px solid rgba(255,120,180,0.35); border-top-color:rgba(255,200,230,0.55); box-shadow:inset 0 1px 0 rgba(255,210,235,0.25),0 2px 6px rgba(0,0,0,0.4); }

.site-footer p { font-size:10px;color:rgba(255,150,200,0.4);letter-spacing:1px;margin-top:4px; position:relative;z-index:1; }
.site-footer .deco { color:#ff2d78;font-size:13px;letter-spacing:5px;margin-bottom:8px;position:relative;z-index:1; }

.cur-blink { animation:bl 1s step-end infinite; }
@keyframes bl { 50%{opacity:0} }

/* Last FM Audio widget layout inside preview */
#lastfm-widget {
  padding: 10px;
  background: linear-gradient(135deg, rgba(255,45,149,0.12) 0%, rgba(30,0,45,0.7) 100%);
  border: 1px solid rgba(255,45,149,0.4);
  border-top-color: rgba(255,150,220,0.6);
  border-bottom-color: rgba(30,0,20,0.8);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,200,230,0.2), 0 3px 10px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#lastfm-widget::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}

#lastfm-widget .player-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#lastfm-widget .cd-disc {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff2d95 20%, #4a0e30 40%, #12000c 80%);
  border: 1px dashed rgba(255,45,149,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(255,45,149,0.4);
  transition: transform 0.5s ease;
}

#lastfm-widget .cd-disc.playing {
  animation: spin-cd 4s linear infinite;
}

@keyframes spin-cd {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#lastfm-widget .player-info {
  flex: 1;
  min-width: 0;
}

#lastfm-widget .song-title {
  color: #ff2d95;
  font-weight: bold;
  font-size: 11.5px;
  font-family: 'Share Tech Mono', monospace;
  text-shadow: 0 0 5px rgba(255,45,149,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#lastfm-widget .artist-name {
  color: #d4b4cc;
  font-size: 10px;
  font-family: 'Share Tech Mono', monospace;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Equalizer Visualizer Bars */
#lastfm-widget .eq-container {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 12px;
}

#lastfm-widget .eq-bar {
  width: 3px;
  height: 12px;
  background: #ff2d95;
  border-radius: 1px 1px 0 0;
  box-shadow: 0 0 3px rgba(255,45,149,0.5);
  transition: height 0.15s ease;
}

#lastfm-widget .eq-bar.active {
  animation: bounce-eq 1s ease-in-out infinite alternate;
}

@keyframes bounce-eq {
  0% { height: 2px; }
  100% { height: 12px; }
}

/* Seek track slider */
#lastfm-widget .seek-track {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.3);
}

#lastfm-widget .seek-progress {
  height: 100%;
  background: linear-gradient(90deg, #ff2d95, #bf5fff);
  width: 0%;
}

#lastfm-widget .seek-progress.playing {
  animation: fill-track 11s linear infinite;
}

@keyframes fill-track {
  0% { width: 0%; }
  100% { width: 100%; }
}