/* =========================================
   1. VARIABLES & CONFIGURATION
   ========================================= */
:root {
    /* --- Color Palette --- */
    --t-color-black: #000000;
    --t-color-white: #ffffff;
    --t-color-green: #25cb55; /* Neon Green for CTA */
    
    /* --- Ring/Border Colors --- */
    --t-ring-outer:  #666666;
    --t-ring-inner:  #3b0e0e; 

    /* --- Typography --- */
    --t-font-primary: 'Montserrat', sans-serif;
    --t-font-secondary: 'Rajdhani', sans-serif;
    --t-font-digital: 'Orbitron', sans-serif;

    /* --- Spacing --- */
    --t-space-md: 1rem;
    --t-space-lg: 2rem;
    --t-space-xl: 3vh;

    /* --- Base Unit (Responsive Root) --- */
    --t-font-size-root: 25px; 
}

/* =========================================
   2. RESET & GLOBAL STYLES
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: var(--t-font-size-root);
}

body {
    background-color: var(--t-color-black);
    color: var(--t-color-white);
    font-family: var(--t-font-primary);
    margin: 0;
    padding: 0;
    
    /* Center Content Vertically & Horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; 
    overflow-x: hidden;
}

/* =========================================
   3. ANIMATIONS
   ========================================= */
@keyframes brand-shake {
    0% { transform: translate(0, 1px) rotate(0deg); }
    10% { transform: translate(0, -1px) rotate(-1deg); }
    20% { transform: translate(0, 0) rotate(1deg); }
    30% { transform: translate(0, 2px) rotate(0deg); }
    40% { transform: translate(0, -1px) rotate(1deg); }
    50% { transform: translate(0, 2px) rotate(-1deg); }
    60% { transform: translate(0, 1px) rotate(0deg); }
    70% { transform: translate(0, 1px) rotate(-1deg); }
    80% { transform: translate(0, -1px) rotate(1deg); }
    90% { transform: translate(0, 2px) rotate(0deg); }
    100% { transform: translate(0, 1px) rotate(0); }
}

@keyframes text-pulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); text-shadow: 0 0 15px rgba(37, 203, 85, 0.8); }
}

/* =========================================
   4. COMPONENT LAYOUT
   ========================================= */
.authcode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.authcode-logo {
    width: 80vmin;
    max-width: 512px;
    height: auto;
    aspect-ratio: 512/201; 
    display: block;
    
   
    animation: brand-shake 5s infinite ease-in-out forwards;
}

.authcode-pane {
    width: 100%;
    max-width: 24rem; /* Limits width on large screens */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.authcode-pane-display {
    /* Removed negative margin to create breathing room */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--t-space-md);
    padding: var(--t-space-xl);
}

/* =========================================
   5. QR CODE BADGE
   ========================================= */
.qr-ring {
    /* SIZE REDUCTION: 13rem * 0.75 = ~9.75rem */
    width: 12rem;
    height: 12rem;
    
    /* Shape: Rounded Square */
    border-radius: 1rem;
    
    /* Layer 1: Outer Grey Border */
    border: 0.25rem solid var(--t-ring-outer);
    
    /* Layer 2: Middle Red Border */
    background-color: var(--t-ring-inner);
    padding: 0.4rem; 
    
    /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 1rem rgba(0,0,0,0.8);
}

.qr-image {
    /* Layer 3: Inner Black Border */
    border: 0.3rem solid var(--t-color-black);
    
    /* Layer 4: White Background */
    background-color: var(--t-color-white);
    
    /* Spacing inside the white box */
    padding: 0.25rem;
    
    /* Sizing & Shape */
    width: 100%;
    height: 100%;
    border-radius: 0.6rem;
    object-fit: contain;
}

/* =========================================
   6. TEXT ELEMENTS
   ========================================= */
.scan-cta {
    font-family: var(--t-font-digital);
    color: var(--t-color-green);
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 0 5px rgba(37, 203, 85, 0.5);
    animation: text-pulse 2.5s infinite ease-in-out;
}

.authcode-pane-disclaimer {
    padding: var(--t-space-md);
    text-align: center;
    font-size: 1rem; 
    line-height: 1.4;
    max-width: 90%;
}

.authcode-pane-disclaimer b u {
    font-size: 1.1rem;
    text-transform: uppercase;
    font-family: var(--t-font-primary);
    letter-spacing: 0.05rem;
    display: inline-block;
    margin-bottom: 0.4rem;
    white-space: nowrap;
}

/* =========================================
   7. RESPONSIVE SCALING
   ========================================= */
/* Large Vertical Screens */
@media screen and (min-height: 1400px) {
    :root { --t-font-size-root: 26px; }
}

/* Standard Laptop/Tablet */
@media screen and (max-width: 1200px), screen and (max-height: 800px) {
    :root { --t-font-size-root: 22px; }
}

/* Small Laptop */
@media screen and (max-height: 1100px) {
   /* Redundant overlap, but kept for specific height logic */
   :root { --t-font-size-root: 22px; }
}

/* Tablet Portrait */
@media screen and (max-width: 1000px){
    :root { --t-font-size-root: 18px; }
}

/* Mobile Landscape / Small Tablet */
@media screen and (max-width: 800px), screen and (max-height: 600px) {
    :root { --t-font-size-root: 16px; }
}

/* Mobile Portrait */
@media screen and (max-width: 600px){
    :root { --t-font-size-root: 12px; }
}