body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* Animated background elements */
        .animated-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        
        .animated-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(59, 130, 246, 0.05);
            filter: blur(50px);
            animation: float 20s infinite ease-in-out;
        }
        
        .animated-circle:nth-child(1) {
            width: 400px;
            height: 400px;
            top: -100px;
            left: -100px;
            animation-delay: 0s;
        }
        
        .animated-circle:nth-child(2) {
            width: 600px;
            height: 600px;
            bottom: -200px;
            right: -200px;
            background: rgba(139, 92, 246, 0.05);
            animation-delay: 5s;
        }
        
        .animated-circle:nth-child(3) {
            width: 300px;
            height: 300px;
            top: 40%;
            left: 30%;
            background: rgba(236, 72, 153, 0.03);
            animation-delay: 2s;
        }
        
        .animated-circle:nth-child(4) {
            width: 250px;
            height: 250px;
            top: 20%;
            right: 20%;
            background: rgba(16, 185, 129, 0.03);
            animation-delay: 7s;
        }
        
        .animated-circle:nth-child(5) {
            width: 350px;
            height: 350px;
            bottom: 30%;
            left: 10%;
            background: rgba(245, 158, 11, 0.02);
            animation-delay: 3s;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0) translateX(0) scale(1);
            }
            25% {
                transform: translateY(-50px) translateX(50px) scale(1.1);
            }
            50% {
                transform: translateY(20px) translateX(20px) scale(0.9);
            }
            75% {
                transform: translateY(40px) translateX(-30px) scale(1.05);
            }
        }
        
        /* Particles */
       /* .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            animation: particle-float 15s infinite linear;
        } */
        
        @keyframes particle-float {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-700px) translateX(100px) rotate(360deg);
                opacity: 0;
            }
        }
        
        /* Floating icons */
        .floating-icon {
            position: absolute;
            opacity: 0.15;
            filter: blur(0.5px);
            animation: icon-float 15s infinite ease-in-out;
        }
        
        @keyframes icon-float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(-20px) rotate(5deg);
            }
            50% {
                transform: translateY(10px) rotate(-5deg);
            }
            75% {
                transform: translateY(-15px) rotate(3deg);
            }
        }
        
        @keyframes logo-steady-glow {
  0%   { -webkit-filter: drop-shadow(0 0 6px rgba(96,165,250,0.55)) drop-shadow(0 0 2px rgba(96,165,250,0.3)); filter: drop-shadow(0 0 6px rgba(96,165,250,0.55)) drop-shadow(0 0 2px rgba(96,165,250,0.3)); }
  50%  { -webkit-filter: drop-shadow(0 0 9px rgba(96,165,250,0.7))  drop-shadow(0 0 3px rgba(147,197,253,0.4)); filter: drop-shadow(0 0 9px rgba(96,165,250,0.7))  drop-shadow(0 0 3px rgba(147,197,253,0.4)); }
  100% { -webkit-filter: drop-shadow(0 0 6px rgba(96,165,250,0.55)) drop-shadow(0 0 2px rgba(96,165,250,0.3)); filter: drop-shadow(0 0 6px rgba(96,165,250,0.55)) drop-shadow(0 0 2px rgba(96,165,250,0.3)); }
}

.glow-logo {
  -webkit-animation: logo-steady-glow 3.5s ease-in-out infinite;
          animation: logo-steady-glow 3.5s ease-in-out infinite;
  width: 100px;
  height: auto;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block;
  /* no opacity change — stays fully visible */
  opacity: 1 !important;
}
        
        /* Glowing dots */
        .glow-dot {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: white;
            box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7);
            animation: glow 4s infinite alternate;
        }
        
        @keyframes glow {
            0% {
                opacity: 0.3;
                box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);
            }
            100% {
                opacity: 0.7;
                box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.7);
            }
        }
        
        /* Floating lines */
        .floating-line {
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            animation: line-float 10s infinite ease-in-out;
        }
        
        @keyframes line-float {
            0%, 100% {
                transform: translateY(0) scaleX(1);
                opacity: 0.1;
            }
            50% {
                transform: translateY(-20px) scaleX(1.2);
                opacity: 0.3;
            }
        }
        
        /* Password modal */
        .password-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .password-container {
            background: rgba(15, 23, 42, 0.97); /* solid fallback for old Android */
            background: rgba(255, 255, 255, 0.05);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
            padding: 2rem;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            animation: fadeIn 0.5s ease-out;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .password-input {
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            width: 100%;
            margin-top: 1rem;
            transition: all 0.3s ease;
        }
        
        .password-input:focus {
            outline: none;
            border-color: rgba(59, 130, 246, 0.5);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
        }
        
        .password-button {
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            margin-top: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            font-weight: 500;
        }
        
        .password-button:hover {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }
        
        .error-message {
            color: #f87171;
            margin-top: 0.5rem;
            font-size: 0.875rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .error-message.show {
            opacity: 1;
        }
        
        /* Search container */
        .search-container {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
            padding: 0.5rem;
            position: relative;
        }
        
        .search-input {
            background: rgba(255, 255, 255, 0.07);
            border: none;
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 0.75rem;
            width: 100%;
            transition: all 0.3s ease;
        }
        
        .search-input:focus {
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
            outline: none;
        }
        
        .search-button {
            position: absolute;
            right: 0.5rem;
            top: 0.5rem;
            bottom: 0.5rem;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
            border: none;
            padding: 0 1.5rem;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .search-button:hover {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }
        
        /* Product cards */
        .product {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.75rem;
            padding: 1.5rem;
            transition: all 0.3s ease;
            animation: fadeInUp 0.5s ease-out;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .product:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        
        .product h2 {
            color: white;
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
        }
        
        .product p {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 0.5rem;
        }
        
        .product p strong {
            color: white;
            font-weight: 500;
        }
        
        .product-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .product-description {
            max-height: 100px;
            overflow-y: auto;
            margin-bottom: 1rem;
            scrollbar-width: thin;
            scrollbar-color: rgba(59, 130, 246, 0.5) rgba(255, 255, 255, 0.1);
        }
        
        .product-description::-webkit-scrollbar {
            width: 6px;
        }
        
        .product-description::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
        
        .product-description::-webkit-scrollbar-thumb {
            background-color: rgba(59, 130, 246, 0.5);
            border-radius: 10px;
        }
        
        .get-design-btn {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            transition: all 0.3s ease;
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            color: white;
            font-weight: 500;
            margin-top: auto;
            width: 100%;
            text-align: center;
        }
        
        .get-design-btn:hover {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }
        
        .category-badge {
            display: inline-block;
            background: rgba(59, 130, 246, 0.2);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            margin-bottom: 0.75rem;
        }
        
        .thumbnail-container {
            width: 100%;
            height: 200px;
            overflow: hidden;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            background-color: rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .thumbnail {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .placeholder-thumbnail {
            width: 64px;
            height: 64px;
            color: rgba(59, 130, 246, 0.3);
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
            }
        }
        
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        @keyframes floating {
            0% { transform: translate(0, 0px); }
            50% { transform: translate(0, -15px); }
            100% { transform: translate(0, 0px); }
        }
        
        /* Logo styles */
        .logo-container {
            width: 120px;
            height: 50px;
            margin-right: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .logo {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        /* No results message */
        .no-results {
            text-align: center;
            padding: 3rem 0;
            color: rgba(255, 255, 255, 0.7);
            animation: fadeIn 0.5s ease-out;
        }
        
        /* Shake animation for password error */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        
        .shake {
            animation: shake 0.5s ease-in-out;
        }
        
        /* Floating design elements */
        .design-element {
            position: absolute;
            opacity: 0.15;
            z-index: -1;
        }
        
        .design-element.square {
            width: 40px;
            height: 40px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            animation: rotate 15s infinite linear;
        }
        
        .design-element.triangle {
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 40px solid rgba(255, 255, 255, 0.2);
            animation: rotate 20s infinite linear reverse;
        }
        
        .design-element.circle {
            width: 30px;
            height: 30px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            animation: pulse-size 8s infinite alternate;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @keyframes pulse-size {
            0% { transform: scale(0.8); }
            100% { transform: scale(1.2); }
        }
        
        /* Debug overlay for thumbnails */
        .debug-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            font-size: 10px;
            padding: 2px 4px;
            display: none; /* Hidden by default */
        }
        

        
        /* Gradient text */
        .gradient-text {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline;
        }
        
        /* Subtle glowing text animation */
        .subtle-glow-text {
            animation: subtle-glow 4s infinite alternate;
            text-shadow: 0 0 2px rgba(59, 130, 246, 0.3), 
                         0 0 4px rgba(139, 92, 246, 0.2);
        }
        
        @keyframes subtle-glow {
            0% {
                text-shadow: 0 0 2px rgba(59, 130, 246, 0.3), 
                             0 0 4px rgba(139, 92, 246, 0.2);
            }
            100% {
                text-shadow: 0 0 4px rgba(59, 130, 246, 0.4), 
                             0 0 8px rgba(139, 92, 246, 0.3);
            }
        }
        
        /* Pagination styles */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 2rem;
            margin-bottom: 2rem;
        }
        
        .pagination-button {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.5rem 1rem;
            margin: 0 0.25rem;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 40px;
            text-align: center;
        }
        
        .pagination-button:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.4);
        }
        
        .pagination-button.active {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            border-color: transparent;
        }
        
        .pagination-button.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .pagination-button.disabled:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
        }
        
        /* Search suggestion chips */
        .search-suggestions {
            animation: fadeIn 0.6s ease-out 0.3s both;
        }

        .suggestion-label {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            font-weight: 500;
            white-space: nowrap;
        }

        .suggestion-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.75);
            padding: 0.35rem 0.85rem;
            border-radius: 9999px;
            font-size: 0.8rem;
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
            cursor: pointer;
            transition: all 0.25s ease;
            white-space: nowrap;
            backdrop-filter: blur(6px);
        }

        .suggestion-chip:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.5);
            color: #93c5fd;
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
            transform: translateY(-2px);
        }

        .suggestion-chip:active {
            transform: translateY(0);
            background: rgba(59, 130, 246, 0.3);
        }

        @media (max-width: 480px) {
            .suggestion-label { display: none; }
            .suggestion-chip { font-size: 0.73rem; padding: 0.3rem 0.7rem; }
        }

        /* Search placeholder text */
        .search-placeholder-text {
            position: absolute;
            left: 1rem;
            right: 8rem;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.5);
            pointer-events: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
            transition: opacity 0.2s ease;
        }

*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-4{margin-left:1rem}.mr-2{margin-right:0.5rem}.mt-2{margin-top:0.5rem}.mt-8{margin-top:2rem}.flex{display:flex}.grid{display:grid}.h-12{height:3rem}.h-16{height:4rem}.h-5{height:1.25rem}.min-h-\[50vh\]{min-height:50vh}.w-12{width:3rem}.w-16{width:4rem}.w-5{width:1.25rem}.w-full{width:100%}.max-w-3xl{max-width:48rem}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.rounded-full{border-radius:9999px}.border-4{border-width:4px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-t-transparent{border-top-color:transparent}.px-4{padding-left:1rem;padding-right:1rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-16{padding-bottom:4rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-500\/50{color:rgb(59 130 246 / 0.5)}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity:1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-purple-300{--tw-text-opacity:1;color:rgb(216 180 254 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}

/* =====================================================
   MATPROHUB — MOBILE & SOPHISTICATION IMPROVEMENTS
   ===================================================== */

/* ── Header: tighter on mobile ── */
header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0;
}
header h1 { font-size: clamp(1.4rem, 5vw, 1.875rem) !important; }
header p.text-sm { font-size: clamp(0.65rem, 2.5vw, 0.875rem) !important; }

/* ── Logo spacing tighter on small screens ── */
.logo-container { margin-right: 10px; }

/* ── Search input — bigger tap target, readable on mobile ── */
.search-input {
  font-size: 16px !important; /* prevents iOS zoom-on-focus */
  -webkit-text-size-adjust: 100%;
  padding: 0.85rem 8rem 0.85rem 1rem !important;
}
@media (max-width: 480px) {
  .search-input { padding-right: 6.5rem !important; }
  .search-placeholder-text { right: 6.5rem; }
  .search-button { font-size: 0.8rem; padding: 0 0.85rem; }
}

/* ── Card grid: single column on narrow screens ── */
@media (max-width: 639px) {
  #results-container {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ── Cards: consistent height, no overflow ── */
.card {
  min-height: unset !important;
  word-break: break-word;
}
.card-title {
  font-size: clamp(0.85rem, 3vw, 1rem) !important;
  line-height: 1.4;
}

/* ── Pagination: wrap on mobile ── */
.pagination {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.pagination button {
  min-width: 36px;
  min-height: 36px; /* accessible tap target */
}

/* ── Hero section: reduce min-height on short phones ── */
.hero-section { min-height: clamp(30vh, 50vh, 50vh) !important; }

/* ── Bottom safe-area padding (notch phones) ── */
body { padding-bottom: env(safe-area-inset-bottom, 0); }

/* ── Loading spinner: always visible ── */
#loading-indicator p {
  font-size: clamp(0.8rem, 3vw, 1rem);
}

/* ── Subtle page shimmer on results cards ── */
@-webkit-keyframes card-in {
  from { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); }
  to   { opacity: 1; -webkit-transform: none;             transform: none; }
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.card { -webkit-animation: card-in 0.28s ease-out both; animation: card-in 0.28s ease-out both; }

/* ── Developer credit: smaller, dimmer ── */
.developer-credit {
  font-size: 0.7rem !important;
  color: rgba(156,163,175,0.55) !important;
  letter-spacing: 0.03em;
}

/* ── Scrollbar subtle styling (Chrome/WebKit) ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.25); border-radius: 3px; }

/* ── Focus rings: visible but clean ── */
button:focus-visible, input:focus-visible {
  outline: 2px solid rgba(59,130,246,0.6);
  outline-offset: 2px;
}

/* FAB - hidden by default, shown after login */
  #yield-fab {
    display: none;
    position: fixed;
    bottom: 22px;
    right: 18px;
    z-index: 9990;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border: none;
    cursor: pointer;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    box-shadow: 0 4px 18px rgba(59,130,246,0.5);
    -webkit-transition: -webkit-transform 0.2s ease, box-shadow 0.2s ease;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  #yield-fab:active {
    -webkit-transform: scale(0.91);
        -ms-transform: scale(0.91);
            transform: scale(0.91);
  }
  #yield-fab svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }
  #yield-fab::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(59,130,246,0.55);
    -webkit-animation: fab-ring 2.2s ease-out infinite;
            animation: fab-ring 2.2s ease-out infinite;
  }
  @-webkit-keyframes fab-ring {
    0%   { -webkit-transform: scale(1); transform:scale(1); opacity:.7; }
    100% { -webkit-transform: scale(1.8); transform:scale(1.8); opacity:0; }
  }
  @keyframes fab-ring {
    0%   { transform:scale(1); opacity:.7; }
    100% { transform:scale(1.8); opacity:0; }
  }

  /* MODAL OVERLAY */
  #ym-overlay {
    display: none;
    position: fixed;
    top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.6);
    z-index: 9995;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }
  #ym-overlay.open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  /* BOTTOM SHEET */
  #ym-sheet {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 440px;
    padding-bottom: 20px;
    -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
            transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32,0.72,0,1);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    overflow: hidden;
  }
  #ym-overlay.open #ym-sheet {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }

  .ym-handle {
    width: 38px; height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
    margin: 12px auto 0;
  }
  .ym-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .ym-head-info { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:10px; }
  .ym-icon-wrap {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.3);
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-align:center; -ms-flex-align:center; align-items:center;
    -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  }
  .ym-icon-wrap svg { width:18px; height:18px; fill:none; stroke:#60a5fa; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .ym-title { font-family:'Poppins',sans-serif; font-size:15px; font-weight:600; color:#fff; margin:0; }
  .ym-sub { font-family:'Poppins',sans-serif; font-size:11px; color:#93c5fd; margin:0; }
  #ym-close {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%; width:30px; height:30px;
    cursor:pointer; color:rgba(255,255,255,0.65);
    font-size:17px; line-height:1;
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-align:center; -ms-flex-align:center; align-items:center;
    -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
    -webkit-tap-highlight-color:transparent; outline:none;
    -ms-flex-negative:0; flex-shrink:0;
  }
  #ym-close:active { background:rgba(255,255,255,0.13); }

  .ym-body { padding: 18px 18px 0; }

  /* TABS */
  .ym-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0;
    padding: 10px 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .ym-tab {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 9px 4px 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    -webkit-transition: color .2s, border-color .2s;
    transition: color .2s, border-color .2s;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    text-align: center;
  }
  .ym-tab.active {
    color: #60a5fa;
    border-bottom-color: #3b82f6;
  }
  .ym-tab:active { opacity: .75; }

  /* PANEL */
  .ym-panel { padding: 16px 18px 0; }

  /* green variant for rendemen */
  .ym-formula-green {
    background: rgba(34,197,94,0.08) !important;
    border-color: rgba(34,197,94,0.2) !important;
  }
  .ym-btn-green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  }
  .ym-result-green {
    background: rgba(34,197,94,0.07) !important;
    border-color: rgba(34,197,94,0.25) !important;
  }

  /* formula chip */
  .ym-formula {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    text-align: center;
  }
  .ym-formula-text {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #93c5fd;
    margin: 0;
    line-height: 1.6;
  }
  .ym-formula-frac {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }
  .ym-formula-num, .ym-formula-den {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #bfdbfe;
  }
  .ym-formula-line {
    display: block;
    border-top: 1.5px solid #60a5fa;
    margin: 2px 0;
  }
  .ym-formula-eq {
    font-size: 15px;
    color: #60a5fa;
    font-weight: 700;
    vertical-align: middle;
    margin: 0 6px;
  }
  .ym-formula-lhs {
    font-size: 13px;
    font-weight: 600;
    color: #bfdbfe;
    vertical-align: middle;
  }

  /* fields */
  .ym-field { margin-bottom: 13px; }
  .ym-label {
    display:block;
    font-family:'Poppins',sans-serif;
    font-size:12px; font-weight:500;
    color:rgba(255,255,255,0.7);
    margin-bottom:5px;
  }
  .ym-input-wrap { position:relative; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
  .ym-input {
    width:100%; -webkit-box-sizing:border-box; box-sizing:border-box;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:15px; font-weight:500;
    padding:11px 44px 11px 13px;
    outline:none;
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    -webkit-transition:border-color .2s, box-shadow .2s;
    transition:border-color .2s, box-shadow .2s;
  }
  .ym-input:focus {
    border-color:rgba(59,130,246,0.55);
    box-shadow:0 0 0 3px rgba(59,130,246,0.13);
  }
  .ym-input::-webkit-input-placeholder{color:rgba(255,255,255,0.22);font-size:13px;}
  .ym-input::-moz-placeholder{color:rgba(255,255,255,0.22);font-size:13px;}
  .ym-input:-ms-input-placeholder{color:rgba(255,255,255,0.22);font-size:13px;}
  .ym-unit {
    position:absolute; right:12px;
    font-family:'Poppins',sans-serif;
    font-size:12px; color:rgba(255,255,255,0.3);
    pointer-events:none;
  }

  /* calc button */
  /* === EXECUTE BUTTONS === */
  .ym-btn-calc {
    display: block;
    width: 100%;
    /* solid fallback for very old Android */
    background: #2563eb;
    background: -webkit-linear-gradient(left, #3b82f6, #1d4ed8);
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 15px 20px;
    cursor: pointer;
    margin-top: 14px;
    margin-bottom: 0;
    /* shadow layers: spread glow + depth */
    -webkit-box-shadow: 0 4px 0 #1e40af, 0 6px 18px rgba(37,99,235,0.45);
            box-shadow: 0 4px 0 #1e40af, 0 6px 18px rgba(37,99,235,0.45);
    /* smooth press */
    -webkit-transition: -webkit-box-shadow 0.12s ease, -webkit-transform 0.12s ease, background 0.15s;
            transition: box-shadow 0.12s ease, transform 0.12s ease, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    position: relative;
    overflow: hidden;
    /* prevent text-size-adjust on older Android */
    -webkit-text-size-adjust: 100%;
  }
  /* shine strip */
  .ym-btn-calc::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: rgba(255,255,255,0.12);
    border-radius: 14px 14px 50% 50%;
    pointer-events: none;
  }
  .ym-btn-calc:active {
    -webkit-transform: translateY(3px);
        -ms-transform: translateY(3px);
            transform: translateY(3px);
    -webkit-box-shadow: 0 1px 0 #1e40af, 0 2px 8px rgba(37,99,235,0.3);
            box-shadow: 0 1px 0 #1e40af, 0 2px 8px rgba(37,99,235,0.3);
  }

  /* green variant for rendemen tab */
  .ym-btn-green {
    background: #16a34a !important;
    background: -webkit-linear-gradient(left, #22c55e, #15803d) !important;
    background: linear-gradient(90deg, #22c55e 0%, #15803d 100%) !important;
    -webkit-box-shadow: 0 4px 0 #14532d, 0 6px 18px rgba(22,163,74,0.45) !important;
            box-shadow: 0 4px 0 #14532d, 0 6px 18px rgba(22,163,74,0.45) !important;
  }
  .ym-btn-green:active {
    -webkit-box-shadow: 0 1px 0 #14532d, 0 2px 8px rgba(22,163,74,0.3) !important;
            box-shadow: 0 1px 0 #14532d, 0 2px 8px rgba(22,163,74,0.3) !important;
  }

  /* reset button */
  .ym-btn-reset {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    color: rgba(255,255,255,0.4);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 10px;
    cursor: pointer;
    margin-top: 10px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-transition: border-color .2s, color .2s;
            transition: border-color .2s, color .2s;
  }
  .ym-btn-reset:active {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.65);
  }

  /* error */
  .ym-err {
    display:none;
    background:rgba(239,68,68,0.1);
    border:1px solid rgba(239,68,68,0.25);
    border-radius:9px; padding:9px 12px;
    font-family:'Poppins',sans-serif;
    font-size:12px; color:#fca5a5;
    margin-top:8px;
  }
  .ym-err.show { display:block; }

  /* result */
  #ym-result {
    display:none;
    margin-top:16px;
    background:rgba(59,130,246,0.08);
    border:1px solid rgba(59,130,246,0.25);
    border-radius:14px;
    padding:14px 16px 16px;
    -webkit-animation:ym-in .25s ease-out;
            animation:ym-in .25s ease-out;
  }
  @-webkit-keyframes ym-in {
    from{opacity:0;-webkit-transform:translateY(7px);transform:translateY(7px);}
    to{opacity:1;-webkit-transform:none;transform:none;}
  }
  @keyframes ym-in {
    from{opacity:0;transform:translateY(7px);}
    to{opacity:1;transform:none;}
  }
  .ym-res-lbl {
    font-family:'Poppins',sans-serif;
    font-size:11px; font-weight:600;
    color:#93c5fd; text-transform:uppercase;
    letter-spacing:.07em; margin:0 0 4px;
  }
  .ym-res-row {
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-align:baseline; -ms-flex-align:baseline; align-items:baseline;
    gap:6px; margin-bottom:10px;
  }
  .ym-res-val {
    font-family:'Poppins',sans-serif;
    font-size:30px; font-weight:700; color:#60a5fa;
  }
  .ym-res-unit {
    font-family:'Poppins',sans-serif;
    font-size:14px; color:#93c5fd; font-weight:500;
  }
  .ym-res-chips {
    display:-ms-grid; display:grid;
    -ms-grid-columns:1fr 1fr; grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .ym-chip {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px; padding:8px 10px;
  }
  .ym-chip-lbl {
    font-family:'Poppins',sans-serif;
    font-size:10px; color:rgba(255,255,255,0.38);
    display:block; margin-bottom:2px;
  }
  .ym-chip-val {
    font-family:'Poppins',sans-serif;
    font-size:13px; font-weight:600; color:#e2e8f0;
  }

.ci-orb {
    position: fixed;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #60a5fa;
    -webkit-box-shadow:
      0 0 0   3px rgba(96,165,250,0.4),
      0 0 14px 4px rgba(59,130,246,0.7),
      0 0 28px 8px rgba(59,130,246,0.3);
    box-shadow:
      0 0 0   3px rgba(96,165,250,0.4),
      0 0 14px 4px rgba(59,130,246,0.7),
      0 0 28px 8px rgba(59,130,246,0.3);
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    /* GPU-composited transition */
    -webkit-transition:
      left 1.1s cubic-bezier(0.4, 0, 0.8, 1),
      top  1.1s cubic-bezier(0.4, 0, 0.8, 1),
      opacity 0.25s ease;
    transition:
      left 1.1s cubic-bezier(0.4, 0, 0.8, 1),
      top  1.1s cubic-bezier(0.4, 0, 0.8, 1),
      opacity 0.25s ease;
    will-change: left, top;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }

  .ci-trail {
    position: fixed;
    border-radius: 50%;
    background: #93c5fd;
    z-index: 999998;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity 0.15s ease;
            transition: opacity 0.15s ease;
  }

  .ci-badge {
    position: fixed;
    right: 70px;
    width: 180px;
    background: #1e293b;
    border: 1px solid rgba(59,130,246,0.45);
    border-radius: 12px;
    padding: 10px 12px;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    -webkit-box-shadow: 0 4px 18px rgba(59,130,246,0.3);
            box-shadow: 0 4px 18px rgba(59,130,246,0.3);
    -webkit-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
    -webkit-text-size-adjust: 100%;
  }
  /* right-pointing arrow toward FAB */
  .ci-badge-arrow {
    position: absolute;
    right: -6px;
    top: 50%;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    background: #1e293b;
    border-top:   1px solid rgba(59,130,246,0.45);
    border-right: 1px solid rgba(59,130,246,0.45);
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .ci-badge-t {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #93c5fd;
    line-height: 1.4;
    margin-bottom: 2px;
  }
  .ci-badge-s {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    line-height: 1.4;
  }

  @-webkit-keyframes ci-pop {
    0%   { -webkit-transform: scale(1.35); transform: scale(1.35); }
    60%  { -webkit-transform: scale(0.92); transform: scale(0.92); }
    100% { -webkit-transform: scale(1);    transform: scale(1);    }
  }
  @keyframes ci-pop {
    0%   { transform: scale(1.35); }
    60%  { transform: scale(0.92); }
    100% { transform: scale(1);    }
  }
  .ci-fab-pop {
    -webkit-animation: ci-pop 0.45s cubic-bezier(.34,1.56,.64,1) forwards !important;
            animation: ci-pop 0.45s cubic-bezier(.34,1.56,.64,1) forwards !important;
  }

  @-webkit-keyframes ci-ring {
    0%   { -webkit-transform: scale(1);   transform: scale(1);   opacity: 0.75; }
    100% { -webkit-transform: scale(2.6); transform: scale(2.6); opacity: 0;    }
  }
  @keyframes ci-ring {
    0%   { transform: scale(1);   opacity: 0.75; }
    100% { transform: scale(2.6); opacity: 0;    }
  }

#ls-wrap { position: relative; }
#ls-loader { display: none; }