/* Revolutionary Minimalist Design System */

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

:root {
    --void: #050505; /* Slightly softer black */
    --light: #ffffff;
    --pulse: #3b82f6; /* Modern energetic blue */
    --pulse-glow: rgba(59, 130, 246, 0.5);
    --surface: rgba(255, 255, 255, 0.03);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.08);
    --transition: cubic-bezier(0.645, 0.045, 0.355, 1);
    --smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--void);
    color: var(--light);
    position: relative;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Dynamic Background Canvas */
#background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.3;
    transition: opacity 1s var(--smooth);
}

/* Experience Container */
.experience-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

/* Ambient Light Effect */
.ambient-light {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 120vw;
    height: 120vw;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.6;
}

/* TECH HUD OVERLAY (New) */
.tech-hud {
    position: fixed;
    inset: 20px;
    pointer-events: none;
    z-index: 50;
    opacity: 0.6;
}

.hud-crosshair {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: rgba(255, 255, 255, 0.3);
    border-style: solid;
    transition: all 0.3s ease;
}

.hud-crosshair.top-left { top: 0; left: 0; border-width: 1px 0 0 1px; }
.hud-crosshair.top-right { top: 0; right: 0; border-width: 1px 1px 0 0; }
.hud-crosshair.bottom-left { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.hud-crosshair.bottom-right { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

.hud-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
}

.hud-line.left { left: 0; top: 50%; width: 40px; height: 1px; transform: translateY(-50%); }
.hud-line.right { right: 0; top: 50%; width: 40px; height: 1px; transform: translateY(-50%); }

.tech-footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
    pointer-events: none;
    z-index: 50;
}

.footer-coords {
    font-family: 'Inter', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    display: inline-block;
}

[data-theme="light"] .hud-crosshair { border-color: rgba(0, 0, 0, 0.2); }
[data-theme="light"] .hud-line { background: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .footer-coords { color: rgba(0, 0, 0, 0.4); }


/* Navigation Orb */
.nav-orb {
    position: fixed;
    top: 32px;
    right: 32px;
    z-index: 100;
}

.orb-button {
    width: 48px;
    height: 48px;
    border: 1px solid var(--border);
    background: var(--surface);
    backdrop-filter: blur(12px);
    cursor: pointer;
    position: relative;
    transition: all 0.3s var(--smooth);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orb-button:hover {
    background: var(--surface-hover);
    border-color: rgba(59, 130, 246, 0.3);
    transform: scale(1.05);
}

.orb-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--light), rgba(255,255,255,0.5));
    box-shadow: 0 0 10px rgba(255,255,255,0.3);
    transition: all 0.5s var(--bounce);
}

[data-theme="light"] .orb-icon {
    background: linear-gradient(135deg, #000, #333);
    box-shadow: none;
}

/* Main Stage */
.stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
}

.stage-content {
    text-align: center;
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 800px;
}

/* Title Typography */
.stage-title {
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    margin-bottom: 5vh;
    opacity: 0;
    animation: titleReveal 1.6s var(--bounce) 0.2s forwards;
    position: relative;
    z-index: 5;
    mix-blend-mode: overlay;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
        filter: blur(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.title-word {
    font-family: 'Bebas Neue', sans-serif;
    background: linear-gradient(to bottom, #fff, rgba(255,255,255,0.5));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* Upload Portal - The Quantum Lens (Monochrome Architecture) */
.upload-portal {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
    cursor: pointer;
    isolation: isolate;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.upload-portal:hover {
    transform: scale(1.02);
}

.upload-portal:active {
    transform: scale(0.98);
}

/* Outer Orbit - Dashed Technical Ring */
.upload-portal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* Create a dashed ring effect using a mask or conic gradient */
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 10deg,
        rgba(255, 255, 255, 0.1) 10deg,
        rgba(255, 255, 255, 0.1) 80deg,
        transparent 80deg,
        transparent 90deg,
        rgba(255, 255, 255, 0.1) 90deg,
        rgba(255, 255, 255, 0.1) 160deg,
        transparent 160deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.1) 180deg,
        rgba(255, 255, 255, 0.1) 260deg,
        transparent 260deg,
        transparent 270deg,
        rgba(255, 255, 255, 0.1) 270deg,
        rgba(255, 255, 255, 0.1) 350deg,
        transparent 350deg
    );
    -webkit-mask: radial-gradient(transparent 68%, black 69%);
    mask: radial-gradient(transparent 68%, black 69%);
    
    animation: techRotate 20s linear infinite;
    transition: all 0.5s ease;
}

.upload-portal:hover::before {
    background-color: rgba(255, 255, 255, 0.2);
    animation-duration: 5s; /* Speed up on hover */
}

/* Middle Orbit - The "Scanner" Ring */
.portal-ring {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    z-index: 5;
    pointer-events: none;
    
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.8); /* Bright arc */
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    
    animation: gyroSpin 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transition: all 0.5s ease;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}

.upload-portal:hover .portal-ring {
    inset: 10px; /* Expand slightly */
    border-top-color: #fff;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.15);
}

/* Inner Core - Matte Sphere */
.portal-core {
    position: absolute;
    inset: 40px;
    z-index: 10;
    
    /* Matte Black / Dark Grey */
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
    
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Subtle Rim Light */
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.1),
        inset -1px -1px 2px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.5);
        
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Core Interaction */
.upload-portal:hover .portal-core {
    transform: scale(0.92);
    background: linear-gradient(145deg, #222, #111);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        inset 1px 1px 3px rgba(255, 255, 255, 0.2),
        0 15px 40px rgba(0, 0, 0, 0.6);
}

.portal-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.4s ease;
}

.upload-portal:hover .portal-text {
    color: #fff;
    letter-spacing: 0.4em;
}

/* Clean up unused particles */
.portal-particles { display: none; }
.upload-portal::after { display: none; } /* Remove extra layer */

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

@keyframes gyroSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================
   LIGHT THEME (Technical Drawing Style)
   ========================================= */
[data-theme="light"] .upload-portal::before {
    /* Black ink on paper look */
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 10deg,
        rgba(0, 0, 0, 0.08) 10deg,
        rgba(0, 0, 0, 0.08) 80deg,
        transparent 80deg,
        transparent 90deg,
        rgba(0, 0, 0, 0.08) 90deg,
        rgba(0, 0, 0, 0.08) 160deg,
        transparent 160deg,
        transparent 180deg,
        rgba(0, 0, 0, 0.08) 180deg,
        rgba(0, 0, 0, 0.08) 260deg,
        transparent 260deg,
        transparent 270deg,
        rgba(0, 0, 0, 0.08) 270deg,
        rgba(0, 0, 0, 0.08) 350deg,
        transparent 350deg
    );
    -webkit-mask: radial-gradient(transparent 68%, black 69%);
    mask: radial-gradient(transparent 68%, black 69%);
}

[data-theme="light"] .upload-portal:hover::before {
    background-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .portal-ring {
    border-color: rgba(0, 0, 0, 0.05);
    border-top-color: rgba(0, 0, 0, 0.8);
    border-left-color: rgba(0, 0, 0, 0.2);
    box-shadow: none;
}

[data-theme="light"] .upload-portal:hover .portal-ring {
    border-top-color: #000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .portal-core {
    /* Pure White / Porcelain */
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 1);
}

[data-theme="light"] .upload-portal:hover .portal-core {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 1);
}

[data-theme="light"] .portal-text {
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
}

[data-theme="light"] .upload-portal:hover .portal-text {
    color: #000;
}

/* File Constellation */
.file-constellation {
    position: relative;
    width: 360px;
    height: 360px;
    margin: 0 auto;
    pointer-events: none;
    z-index: 1;
}

.constellation-node {
    position: absolute;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    animation: nodeFloat 6s ease-in-out infinite, nodeAppear 0.5s var(--bounce);
    z-index: 10;
}

.constellation-node::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(8px);
    transition: all 0.3s var(--smooth);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.constellation-node:hover::before {
    border-color: var(--pulse);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.node-content {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 2;
}

/* File Name Tooltip */
.file-name-display {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s var(--smooth);
    width: max-content;
}

.constellation-node:hover .file-name-display {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.file-name-inner {
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(12px);
    color: var(--light);
    padding: 8px 16px;
    border-radius: 99px;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Add More Node */
.add-more-node::before {
    border: 1px dashed rgba(255, 255, 255, 0.3);
    background: transparent;
}

.add-more-node:hover::before {
    border: 1px solid var(--pulse);
    background: rgba(59, 130, 246, 0.1);
}

@keyframes nodeAppear {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes nodeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Transfer Beam Button */
.transfer-beam {
    margin-top: 40px;
    padding: 16px 48px;
    border: none;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--light);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--smooth);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.transfer-beam:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

.beam-energy {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--pulse);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.transfer-beam:hover .beam-energy {
    transform: scaleX(1);
}

/* Progress Ring */
.progress-ring {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    pointer-events: none;
    z-index: 150;
}

.progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 2;
}

.ring-progress {
    fill: none;
    stroke: var(--pulse);
    stroke-width: 3;
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}

.ring-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: 200;
    letter-spacing: -0.02em;
    font-family: 'Inter', sans-serif;
    color: var(--light);
}

/* Success State - Modernized */
.success-state {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background: rgba(15, 15, 15, 0.6);
    backdrop-filter: blur(24px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: smoothFadeIn 0.8s var(--smooth);
    text-align: left;
}

.success-title {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    text-align: center;
}

.success-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
    margin-bottom: 40px;
}

/* Input/Button Groups */
.success-link, .uploaded-file-link {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 6px;
    transition: border-color 0.3s ease;
    margin-bottom: 8px;
}

.success-link:focus-within, .uploaded-file-link:focus-within {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.success-link input, .uploaded-file-link input {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    padding: 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    outline: none;
    width: 100%;
}

.success-link button, .uploaded-file-link button {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--light);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.success-link button:hover, .uploaded-file-link button:hover {
    background: rgba(255, 255, 255, 0.15);
}

.share-section {
    background: rgba(45, 212, 191, 0.04);
    border: 1px solid rgba(45, 212, 191, 0.15);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: 0 0 20px rgba(45, 212, 191, 0.05);
}

.share-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    margin-top: 0;
}

.files-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.files-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 16px;
    margin-top: 0;
}

.uploaded-files-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 8px;
}

.uploaded-files-list::-webkit-scrollbar {
    width: 4px;
}
.uploaded-files-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

.uploaded-file-item {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.uploaded-file-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

.uploaded-file-name {
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.single-file-name {
    text-align: center;
    font-size: 1rem;
    margin-bottom: 16px;
    word-break: break-word;
}

/* Reset Button */
.reset-button {
    display: block;
    width: 100%;
    margin-top: 40px;
    padding: 16px;
    background: var(--light);
    color: var(--void);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s var(--smooth), box-shadow 0.2s ease;
}

.reset-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);
}

/* Light Theme Overrides */
[data-theme="light"] {
    --void: #f8f9fa;
    --light: #111111;
    --surface: rgba(0, 0, 0, 0.03);
    --surface-hover: rgba(0, 0, 0, 0.06);
    --border: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
}

[data-theme="light"] .stage-title .title-word {
    background: linear-gradient(to bottom, #111, #444);
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="light"] .upload-portal::after {
    background: radial-gradient(circle at var(--mx) var(--my), 
        rgba(0, 0, 0, 0.1) 0%, 
        transparent 40%
    );
}

/* Utilities */
.hidden {
    display: none !important;
}

/* Global Drop Overlay */
.drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.drop-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.drop-message {
    font-family: 'Inter', monospace;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 24px 48px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
    animation: pulseBorder 2s infinite;
}

@keyframes pulseBorder {
    0% { border-color: rgba(255, 255, 255, 0.2); }
    50% { border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 60px rgba(255, 255, 255, 0.2); }
    100% { border-color: rgba(255, 255, 255, 0.2); }
}

[data-theme="light"] .drop-overlay {
    background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .drop-message {
    color: #000;
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
}

/* Upload State Enhancements */
.stage-content:has(.progress-ring:not(.hidden)) .stage-title,
.stage-content:has(.progress-ring:not(.hidden)) .upload-portal,
.stage-content:has(.progress-ring:not(.hidden)) .file-constellation,
.stage-content:has(.progress-ring:not(.hidden)) .transfer-beam {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

@keyframes smoothFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
    .stage-title { font-size: 3rem; margin-bottom: 30px; }
    .upload-portal { width: 180px; height: 180px; }
    .success-state { padding: 24px; }
}