/* 1. CONFIGURAÇÕES GERAIS E FONTES */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap');

:root {
    --neon-blue: #00f0ff;
    --neon-blue-dim: rgba(0, 240, 255, 0.4);
    --bg-dark: #02060c;
    --text-white: #ffffff;
    --text-gray: #b0b3b8;
    --gold: #ffc107;
    --glass-bg: rgba(12, 20, 35, 0.75);
    --glass-border: rgba(0, 240, 255, 0.3);
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-white);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 2. FUNDO (CITY BACKGROUND) */
.app-background {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('../img/city.png') no-repeat center center;
    background-size: cover;
    z-index: -1;
}
.app-background::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(5, 11, 25, 0.7) 0%, var(--bg-dark) 95%);
}

.mobile-container {
    width: 100%;
    max-width: 480px;
    padding: 20px 15px 80px 15px;
    position: relative;
}

/* 3. HEADER & LOGO (Efeito Coração e Linhas) */
.top-header { 
    text-align: center; 
    margin-bottom: 30px; 
    position: relative;
    padding-top: 10px;
}

.logo-area { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 12px; 
}

/* Coração com degradê igual à imagem */
.heart-icon i {  
    font-size: 2.2rem;  
    background: linear-gradient(180deg, #ff4d4d 0%, #f9d423 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 77, 77, 0.8));
}

.app-name { 
    font-size: 2.5rem; 
    font-weight: 700; 
    font-family: 'Rajdhani', sans-serif; 
    color: #fff;
    letter-spacing: 1px;
}

.location-tag { 
    color: #fff; 
    font-size: 0.95rem; 
    margin-top: 5px; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.location-tag i { color: #ff3b30; }

/* Linhas Neon Horizontais do Topo */
.tech-line-left, .tech-line-right {
    position: absolute; 
    height: 2px; 
    width: 30%; 
    top: 55px;
    background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
    box-shadow: 0 0 10px var(--neon-blue);
    transform: none; /* Remove a rotação anterior */
}
.tech-line-left { left: 0; }
.tech-line-right { right: 0; }

/* 4. HERO SECTION (Moldura e Efeito Cabeça para Fora) */
.hero-section { 
    margin-bottom: 40px; 
    padding-top: 30px; /* Espaço para a cabeça subir */
}

.neon-frame-wrapper { 
    position: relative; 
    width: 92%; 
    max-width: 380px;
    margin: 0 auto;
}

.neon-frame {
    position: relative; 
    padding: 3px; 
    border-radius: 15px;
    border: 2px solid var(--neon-blue);
    box-shadow: 0 0 25px var(--neon-blue-dim), inset 0 0 15px var(--neon-blue-dim);
    background: rgba(0,0,0,0.5);
    /* IMPORTANTE: overflow visible para a cabeça não ser cortada */
    overflow: visible; 
}

.hero-img { 
    width: 100%; 
    border-radius: 12px; 
    display: block;
    position: relative;
    /* Faz a imagem subir e sobrepor a borda superior */
    top: -25px; 
    z-index: 2;
    /* Ajuste para não deixar buraco embaixo */
    margin-bottom: -25px; 
}

/* Cantos Brancos (Corner Accents) - Deixando-os mais vivos */
.corner-accents span {
    position: absolute; 
    width: 35px; 
    height: 35px;
    border: 3px solid #ffffff; 
    box-shadow: 0 0 15px #ffffff;
    z-index: 10; /* Fica acima da imagem */
}
/* Posicionamento exato nos cantos da moldura */
.corner-accents span:nth-child(1) { top: -5px; left: -5px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.corner-accents span:nth-child(2) { top: -5px; right: -5px; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.corner-accents span:nth-child(3) { bottom: -5px; left: -5px; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.corner-accents span:nth-child(4) { bottom: -5px; right: -5px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }

/* Texto Lucas Almeida */
.hero-overlay-text {
    position: absolute; 
    bottom: 15px; 
    width: 100%; 
    text-align: center;
    z-index: 5;
}
.hero-overlay-text h1 { 
    font-size: 2.2rem; 
    font-weight: 700; 
    text-shadow: 0 0 15px rgba(0,0,0,1), 0 2px 5px rgba(0,0,0,1);
    margin-bottom: 0;
}
.hero-overlay-text p { 
    font-size: 1.1rem; 
    color: #eee;
    text-shadow: 0 2px 5px rgba(0,0,0,1);
}

/* 5. GLASS PANEL (COMENTÁRIOS) */
.glass-panel {
    background: var(--glass-bg); backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border); border-radius: 20px;
    padding: 15px; margin-bottom: 20px;
}
.comment-row { display: flex; gap: 12px; padding: 10px 0; }
.avatar-col { position: relative; flex-shrink: 0; }
.avatar-circle { width: 45px; height: 45px; border-radius: 50%; border: 2px solid transparent; }
.avatar-circle.active-status { border-color: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue-dim); }

.badge-icon {
    position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px;
    background: var(--neon-blue); border-radius: 50%; font-size: 9px;
    display: flex; align-items: center; justify-content: center; color: #000; border: 1.5px solid #fff;
}
.badge-icon.blue { background: #007bff; color: #fff; }

.meta-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.username { font-weight: 600; font-size: 0.95rem; }
.actions-right { font-size: 0.8rem; color: var(--text-gray); display: flex; gap: 10px; }
.actions-right i { color: var(--neon-blue); }

.comment-text { font-size: 0.9rem; margin-bottom: 6px; color: #e0e0e0; }
.rating-stars { color: var(--gold); font-size: 0.8rem; display: flex; align-items: center; gap: 3px; }
.rating-stars .count { color: #fff; margin-left: 5px; font-weight: 600; }

.divider-line { height: 1px; background: rgba(255,255,255,0.1); margin: 8px 0; }

.sub-actions { display: flex; gap: 15px; font-size: 0.75rem; color: var(--text-gray); margin-top: 8px; }

/* 6. MEDIA GRID (CARDS INFERIORES) */
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.media-card {
    background: rgba(15, 30, 55, 0.6); border: 1px solid var(--glass-border);
    border-radius: 15px; padding: 10px; backdrop-filter: blur(5px);
}
.media-thumb { position: relative; margin-bottom: 8px; }
.media-thumb img { width: 100%; border-radius: 10px; height: 110px; object-fit: cover; }
.play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 35px; height: 35px; background: rgba(0,0,0,0.5); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: 1px solid #fff;
}

.user-inline { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.mini-avatar { width: 22px; height: 22px; border-radius: 50%; }
.u-name { font-size: 0.75rem; font-weight: 600; }
.u-time { font-size: 0.7rem; color: var(--text-gray); }
.u-likes { margin-left: auto; font-size: 0.75rem; color: var(--neon-blue); }

.comment-snippet { font-size: 0.75rem; color: #ccc; line-height: 1.2; margin-bottom: 8px; }

.mini-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 8px; }
.stars-mini { color: var(--gold); font-size: 0.65rem; }
.btns { font-size: 0.7rem; color: var(--text-gray); display: flex; gap: 5px; }

/* 7. BOTTOM DECORATION */
.bottom-glow-bar {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 3px;
    background: var(--neon-blue); box-shadow: 0 0 15px var(--neon-blue);
}