:root {
    --primary-neon: #D4AF37;
    --secondary-neon: #8B4513;
    --bg-dark: #2C241B;
    --card-bg: #3E3226;
    --text-main: #FFF8E7;
    --glass: rgba(255, 255, 255, 0.05);

    --font-heading: 'Fredoka', sans-serif;
    --font-code: 'JetBrains Mono', monospace;
}

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

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-heading);
    overflow-x: hidden;
    min-height: 100vh;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(139, 69, 19, 0.05) 0%, transparent 20%);
}

.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Typography & Hero */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem;
    position: relative;
    padding: 0 1rem;
}

.hero-text-wrapper {
    text-align: right;
    /* Text on left, so maybe align it right towards the image? Or left? Let's try right-aligned so it properly abuts the image visually, or just centered within itself. Actually, let's stick to standard text alignment or right align to look cool next to the image. Let's do right align for the text block. */
    text-align: right;
}

.hero-image-wrapper {
    position: relative;
}

.hero-logo {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    /* Circular or rounded square? Let's go with rounded square for "tech" feel */
    border-radius: 20px;
    border: 3px solid var(--primary-neon);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
    animation: float 6s ease-in-out infinite;
}

.glitch {
    font-size: 5rem;
    font-weight: 600;
    position: relative;
    color: var(--text-main);
    letter-spacing: 5px;
    text-shadow: 2px 2px var(--secondary-neon);
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
}

.glitch::before {
    left: 2px;
    text-shadow: -1px 0 var(--primary-neon);
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -1px 0 var(--secondary-neon);
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

.subtitle {
    font-family: var(--font-code);
    color: var(--primary-neon);
    font-size: 1.2rem;
    margin-top: 1rem;
    opacity: 0.8;
}

/* Layout */
.main-content {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    justify-content: center;
    width: 100%;
}

/* Input Zone */
.glass-panel {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    border-left: 4px solid var(--primary-neon);
}

.input-zone h2 {
    margin-bottom: 2rem;
    font-size: 1.8rem;
    color: var(--text-main);
}

.input-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.input-group label {
    display: block;
    font-family: var(--font-code);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: #aaa;
}

input[type="text"] {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-bottom: 2px solid #333;
    padding: 1rem;
    color: white;
    font-family: var(--font-code);
    font-size: 1rem;
    transition: all 0.3s ease;
}

input[type="text"]:focus {
    outline: none;
    border-bottom-color: var(--primary-neon);
    background: rgba(212, 175, 55, 0.05);
}

.file-upload-wrapper {
    position: relative;
    overflow: hidden;
    margin-top: 5px;
}

input[type="file"] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.custom-file-btn {
    background: #333;
    color: white;
    padding: 0.8rem;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    border: 1px dashed #666;
    transition: 0.3s;
}

.custom-file-btn:hover {
    border-color: var(--primary-neon);
    color: var(--primary-neon);
}

.cta-button {
    width: 100%;
    padding: 1rem;
    background: var(--primary-neon);
    border: none;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.2rem;
    color: #000;
    cursor: pointer;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s;
}

.cta-button:active {
    transform: scale(0.98);
}

.cta-button:hover {
    background: #fff;
    box-shadow: 0 0 15px var(--primary-neon);
}

/* Card Zone */
.card-zone {
    width: 100%;
    max-width: 450px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.hidden {
    display: none !important;
}

/* Loader */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #333;
    border-top: 5px solid var(--primary-neon);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

.status-text {
    font-family: var(--font-code);
    color: var(--primary-neon);
    letter-spacing: 2px;
    animation: blink 1s infinite;
}

/* Seismic Card */
.seismic-card {
    background: linear-gradient(135deg, #3E3226 0%, #2A2118 100%);
    width: 100%;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform-style: preserve-3d;
    animation: float 6s ease-in-out infinite;
    overflow: hidden;
}

.hologram-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, 0.05) 45%, transparent 50%);
    pointer-events: none;
    z-index: 10;
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-family: var(--font-code);
    font-size: 0.8rem;
    color: #666;
}

.lock-icon {
    color: var(--primary-neon);
}

.card-body {
    display: flex;
    gap: 20px;
    align-items: center;
}

.image-frame {
    width: 100px;
    height: 100px;
    border-radius: 15px;
    border: 2px solid var(--secondary-neon);
    position: relative;
    overflow: hidden;
    background: #000;
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-neon);
    box-shadow: 0 0 10px var(--primary-neon);
    animation: scan 2s linear infinite;
}

.user-info {
    flex: 1;
}

.label {
    display: block;
    font-family: var(--font-code);
    font-size: 0.6rem;
    color: #888;
    margin-bottom: 2px;
}

.user-info h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    word-break: break-all;
}

.status-badge {
    background: rgba(212, 175, 55, 0.1);
    color: var(--primary-neon);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    display: inline-block;
    border: 1px solid var(--primary-neon);
    font-family: var(--font-code);
}

.card-footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.chip {
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.chip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.3);
}

.hash {
    font-family: var(--font-code);
    color: #444;
    font-size: 0.7rem;
}

/* Animations */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    50% {
        opacity: 0.5;
    }
}

@keyframes scan {
    0% {
        top: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotateX(0);
    }

    50% {
        transform: translateY(-10px) rotateX(2deg);
    }
}

@keyframes glitch-anim {
    0% {
        clip: rect(44px, 9999px, 56px, 0);
    }

    5% {
        clip: rect(82px, 9999px, 11px, 0);
    }

    /* ... shortened for brevity, browser handles interpolation well enough for effect */
    100% {
        clip: rect(10px, 9999px, 90px, 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip: rect(12px, 9999px, 88px, 0);
    }

    100% {
        clip: rect(65px, 9999px, 12px, 0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .glitch {
        font-size: 3rem;
    }

    .hero-section {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .hero-text-wrapper {
        text-align: center;
    }

    .main-content {
        gap: 2rem;
    }
}

.brand-logo {
    height: 25px;
    width: auto;
    object-fit: contain;
}

/* Download Button */
.download-btn {
    width: 100%;
    margin-top: 2rem;
    padding: 1rem;
    background: transparent;
    border: 1px solid var(--primary-neon);
    color: var(--primary-neon);
    font-family: var(--font-code);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}

.download-btn:hover {
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    text-shadow: 0 0 5px var(--primary-neon);
}

.download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
    transition: 0.5s;
}

.download-btn:hover::before {
    left: 100%;
}