@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap";:root{--bg-main: #0b0f19;--bg-card: #151d30;--bg-card-hover: #1b263e;--border-color: #24324f;--text-primary: #f3f4f6;--text-secondary: #9ca3af;--text-muted: #6b7280;--primary: #6366f1;--primary-hover: #4f46e5;--primary-glow: rgba(99, 102, 241, .15);--accent: #d946ef;--accent-hover: #c084fc;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--font-sans: "Plus Jakarta Sans", "Outfit", system-ui, sans-serif;--font-mono: "Fira Code", monospace;--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, .5);--radius-lg: 16px;--radius-md: 10px}*{box-sizing:border-box;margin:0;padding:0}html,body{overflow-x:hidden;width:100%;position:relative}body{background-color:var(--bg-main);color:var(--text-primary);font-family:var(--font-sans);line-height:1.6;-webkit-font-smoothing:antialiased}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:#0b0f19d9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:1000}.nav-brand{display:flex;align-items:center;gap:.5rem;font-family:Outfit,sans-serif;font-weight:700;font-size:1.5rem;color:var(--text-primary);text-decoration:none;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.mobile-menu-btn{display:none;background:none;border:none;color:var(--text-primary);cursor:pointer;padding:.5rem;transition:var(--transition-smooth)}.mobile-menu-btn:hover{color:var(--primary)}.nav-container{display:flex;align-items:center}.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}.nav-link{color:var(--text-secondary);text-decoration:none;font-size:.95rem;font-weight:500;transition:var(--transition-smooth)}.nav-link:hover{color:var(--primary)}.nav-dropdown-wrapper{position:relative}.nav-dropdown-trigger{display:flex;align-items:center;gap:.25rem;background:none;border:none;color:var(--text-secondary);font-family:var(--font-sans);font-size:.95rem;font-weight:500;cursor:pointer;transition:var(--transition-smooth)}.nav-dropdown-trigger:hover,.nav-dropdown-trigger.active{color:var(--primary)}.chevron-icon{transition:transform .3s ease}.nav-dropdown-trigger:hover .chevron-icon,.nav-dropdown-trigger.active .chevron-icon{transform:rotate(180deg)}.nav-dropdown-content{position:absolute;top:calc(100% + 1rem);right:0;width:480px;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-premium),0 0 30px #6366f10d;padding:1.25rem;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1100}@media (min-width: 769px){.nav-dropdown-wrapper:hover .nav-dropdown-content{opacity:1;visibility:visible;transform:translateY(0)}.nav-dropdown-wrapper:hover .nav-dropdown-trigger .chevron-icon{transform:rotate(180deg)}}.nav-dropdown-content.active{opacity:1;visibility:visible;transform:translateY(0)}.nav-dropdown-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.nav-dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;font-size:.85rem;font-weight:500;transition:var(--transition-smooth)}.nav-dropdown-item:hover{background-color:var(--bg-card-hover);color:var(--text-primary)}.nav-item-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background-color:#ffffff08;border:1px solid rgba(255,255,255,.08);color:var(--text-secondary);transition:var(--transition-smooth)}.nav-dropdown-item:hover .nav-item-icon{transform:translateY(-1px);color:#fff}.nav-item-icon.color-ascii{background:linear-gradient(135deg,#3b82f6,#60a5fa);border-color:#60a5fa66;color:#fff}.nav-item-icon.color-dot{background:linear-gradient(135deg,#10b981,#34d399);border-color:#34d39966;color:#fff}.nav-item-icon.color-compress{background:linear-gradient(135deg,#f59e0b,#fbbf24);border-color:#fbbf2466;color:#fff}.nav-item-icon.color-format{background:linear-gradient(135deg,#ec4899,#f472b6);border-color:#f472b666;color:#fff}.nav-item-icon.color-palette{background:linear-gradient(135deg,#8b5cf6,#a78bfa);border-color:#a78bfa66;color:#fff}.nav-item-icon.color-word{background:linear-gradient(135deg,#14b8a6,#2dd4bf);border-color:#2dd4bf66;color:#fff}.nav-item-icon.color-json{background:linear-gradient(135deg,#6366f1,#818cf8);border-color:#818cf866;color:#fff}.nav-item-icon.color-case{background:linear-gradient(135deg,#06b6d4,#22d3ee);border-color:#22d3ee66;color:#fff}.nav-item-icon.color-b64{background:linear-gradient(135deg,#f97316,#fb923c);border-color:#fb923c66;color:#fff}.nav-item-icon.color-token{background:linear-gradient(135deg,#84cc16,#a3e635);border-color:#a3e63566;color:#fff}.nav-item-icon.color-pwd{background:linear-gradient(135deg,#ef4444,#f87171);border-color:#f8717166;color:#fff}.nav-item-icon.color-interest{background:linear-gradient(135deg,#22c55e,#4ade80);border-color:#4ade8066;color:#fff}.nav-item-icon.color-resize{background:linear-gradient(135deg,#d946ef,#e879f9);border-color:#e879f966;color:#fff}.nav-item-icon.color-retro{background:linear-gradient(135deg,#a855f7,#c084fc);border-color:#c084fc66;color:#fff}.nav-item-icon.color-ai-detector{background:linear-gradient(135deg,#a855f7,#ec4899);border-color:#ec489966;color:#fff}.nav-dropdown-item[href*=bmi-calculator] .nav-item-icon{background:linear-gradient(135deg,#10b981,#3b82f6)!important;border-color:#3b82f666!important;color:#fff!important}.nav-dropdown-item[href*=mortgage-calculator] .nav-item-icon{background:linear-gradient(135deg,#818cf8,#4f46e5)!important;border-color:#4f46e566!important;color:#fff!important}.nav-dropdown-item:hover .color-ascii{border-color:#60a5fa;box-shadow:0 0 12px #60a5fa99}.nav-dropdown-item:hover .color-dot{border-color:#34d399;box-shadow:0 0 12px #34d39999}.nav-dropdown-item:hover .color-compress{border-color:#fbbf24;box-shadow:0 0 12px #fbbf2499}.nav-dropdown-item:hover .color-format{border-color:#f472b6;box-shadow:0 0 12px #f472b699}.nav-dropdown-item:hover .color-palette{border-color:#a78bfa;box-shadow:0 0 12px #a78bfa99}.nav-dropdown-item:hover .color-word{border-color:#2dd4bf;box-shadow:0 0 12px #2dd4bf99}.nav-dropdown-item:hover .color-json{border-color:#818cf8;box-shadow:0 0 12px #818cf899}.nav-dropdown-item:hover .color-case{border-color:#22d3ee;box-shadow:0 0 12px #22d3ee99}.nav-dropdown-item:hover .color-b64{border-color:#fb923c;box-shadow:0 0 12px #fb923c99}.nav-dropdown-item:hover .color-token{border-color:#a3e635;box-shadow:0 0 12px #a3e63599}.nav-dropdown-item:hover .color-pwd{border-color:#f87171;box-shadow:0 0 12px #f8717199}.nav-dropdown-item:hover .color-interest{border-color:#4ade80;box-shadow:0 0 12px #4ade8099}.nav-dropdown-item:hover .color-resize{border-color:#e879f9;box-shadow:0 0 12px #e879f999}.nav-dropdown-item:hover .color-retro{border-color:#c084fc;box-shadow:0 0 12px #c084fc99}.nav-dropdown-item:hover .color-ai-detector{border-color:#ec4899;box-shadow:0 0 12px #ec489999}.nav-dropdown-item[href*=bmi-calculator]:hover .nav-item-icon{border-color:#3b82f6!important;box-shadow:0 0 12px #3b82f699!important}.nav-dropdown-item[href*=mortgage-calculator]:hover .nav-item-icon{border-color:#818cf8!important;box-shadow:0 0 12px #818cf899!important}@media (max-width: 768px){.mobile-menu-btn{display:block;z-index:1200}.mobile-menu-btn.active svg{transform:rotate(90deg)}.nav-container{position:fixed;top:0;right:0;width:280px;height:100vh;background-color:var(--bg-card);border-left:1px solid var(--border-color);padding:6rem 1.5rem 2rem;box-shadow:-10px 0 30px #0009;transform:translate(100%);visibility:hidden;pointer-events:none;transition:transform .4s cubic-bezier(.4,0,.2,1),visibility .4s;z-index:1000;display:block;overflow-y:auto}.nav-container.active{transform:translate(0);visibility:visible;pointer-events:auto}.nav-links{flex-direction:column;align-items:stretch;gap:1.5rem}.nav-link{display:block;font-size:1.1rem;padding:.5rem 0}.nav-dropdown-wrapper{display:block}.nav-dropdown-trigger{width:100%;justify-content:space-between;font-size:1.1rem;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.nav-dropdown-content{position:static;width:100%;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:none;padding:.5rem 0 0;display:none}.nav-dropdown-content.active{display:block}.nav-dropdown-grid{grid-template-columns:1fr;gap:.25rem}.nav-dropdown-item{padding:.5rem}}.ad-slot{background-color:#f3f4f6;border:1px dashed #9ca3af;border-radius:var(--radius-md);display:block;padding:1.5rem 0;color:#374151;font-family:var(--font-mono);font-size:.8rem;margin:1.5rem auto;text-align:center}.ad-top{width:100%;max-width:728px;min-height:90px;height:90px}.ad-sidebar{width:300px;min-height:600px;height:600px;position:sticky;top:90px}.ad-bottom{width:100%;max-width:728px;min-height:90px;height:90px}.container{max-width:1280px;margin:0 auto;padding:2rem 1.5rem}.hero-section{text-align:center;margin-bottom:3rem}.hero-section h1{font-family:Outfit,sans-serif;font-size:3rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(135deg,#fff 40%,var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-section p{color:var(--text-secondary);font-size:1.15rem;max-width:600px;margin:0 auto}.two-column-layout{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}.two-column-layout>*{min-width:0}@media (min-width: 1024px){.two-column-layout{grid-template-columns:7fr 3fr}}.card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-premium)}.tool-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:2rem;text-decoration:none;color:inherit;transition:var(--transition-smooth);display:flex;flex-direction:column;gap:.75rem;position:relative;overflow:hidden}.tool-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at top right,var(--primary-glow),transparent 60%);opacity:0;transition:var(--transition-smooth)}.tool-card:hover{transform:translateY(-4px);border-color:var(--primary);background-color:var(--bg-card-hover)}.tool-card:hover:before{opacity:1}.tool-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#ffffff08;border:1px solid var(--border-color);color:var(--text-secondary);transition:var(--transition-smooth);margin-bottom:.5rem}.tool-card:hover .tool-icon{color:#fff;transform:translateY(-2px)}a.tool-card[href*=image-to-ascii] .tool-icon{background:linear-gradient(135deg,#3b82f6,#60a5fa);border-color:#60a5fa66;color:#fff}a.tool-card[href*=image-to-dot-art] .tool-icon{background:linear-gradient(135deg,#10b981,#34d399);border-color:#34d39966;color:#fff}a.tool-card[href*=image-compressor] .tool-icon{background:linear-gradient(135deg,#f59e0b,#fbbf24);border-color:#fbbf2466;color:#fff}a.tool-card[href*=image-format-converter] .tool-icon{background:linear-gradient(135deg,#ec4899,#f472b6);border-color:#f472b666;color:#fff}a.tool-card[href*=color-palette-extractor] .tool-icon{background:linear-gradient(135deg,#8b5cf6,#a78bfa);border-color:#a78bfa66;color:#fff}a.tool-card[href*=word-counter] .tool-icon{background:linear-gradient(135deg,#14b8a6,#2dd4bf);border-color:#2dd4bf66;color:#fff}a.tool-card[href*=json-xml-formatter] .tool-icon{background:linear-gradient(135deg,#6366f1,#818cf8);border-color:#818cf866;color:#fff}a.tool-card[href*=text-case-converter] .tool-icon{background:linear-gradient(135deg,#06b6d4,#22d3ee);border-color:#22d3ee66;color:#fff}a.tool-card[href*=base64-multi-converter] .tool-icon{background:linear-gradient(135deg,#f97316,#fb923c);border-color:#fb923c66;color:#fff}a.tool-card[href*=json-to-ai-token-optimizer] .tool-icon{background:linear-gradient(135deg,#84cc16,#a3e635);border-color:#a3e63566;color:#fff}a.tool-card[href*=password-generator] .tool-icon{background:linear-gradient(135deg,#ef4444,#f87171);border-color:#f8717166;color:#fff}a.tool-card[href*=compound-interest-calculator] .tool-icon{background:linear-gradient(135deg,#22c55e,#4ade80);border-color:#4ade8066;color:#fff}a.tool-card[href*=bmi-calculator] .tool-icon{background:linear-gradient(135deg,#10b981,#3b82f6)!important;border-color:#3b82f666!important;color:#fff!important}a.tool-card[href*=mortgage-calculator] .tool-icon{background:linear-gradient(135deg,#818cf8,#4f46e5)!important;border-color:#4f46e566!important;color:#fff!important}a.tool-card[href*=image-resizer] .tool-icon{background:linear-gradient(135deg,#d946ef,#e879f9);border-color:#e879f966;color:#fff}a.tool-card[href*=retro-game-avatar] .tool-icon{background:linear-gradient(135deg,#a855f7,#c084fc);border-color:#c084fc66;color:#fff}a.tool-card[href*=ai-text-detector] .tool-icon{background:linear-gradient(135deg,#a855f7,#ec4899);border-color:#ec489966;color:#fff}a.tool-card[href*=qr-gift-card] .tool-icon{background:linear-gradient(135deg,#f97316,#fb923c);border-color:#fb923c66;color:#fff}a.tool-card[href*=p2p-file-transfer] .tool-icon{background:linear-gradient(135deg,#3b82f6,#60a5fa);border-color:#60a5fa66;color:#fff}a.tool-card[href*=image-to-ascii]:hover .tool-icon{border-color:#60a5fa;box-shadow:0 0 15px #60a5fa99}a.tool-card[href*=image-to-dot-art]:hover .tool-icon{border-color:#34d399;box-shadow:0 0 15px #34d39999}a.tool-card[href*=image-compressor]:hover .tool-icon{border-color:#fbbf24;box-shadow:0 0 15px #fbbf2499}a.tool-card[href*=image-format-converter]:hover .tool-icon{border-color:#f472b6;box-shadow:0 0 15px #f472b699}a.tool-card[href*=color-palette-extractor]:hover .tool-icon{border-color:#a78bfa;box-shadow:0 0 15px #a78bfa99}a.tool-card[href*=word-counter]:hover .tool-icon{border-color:#2dd4bf;box-shadow:0 0 15px #2dd4bf99}a.tool-card[href*=json-xml-formatter]:hover .tool-icon{border-color:#818cf8;box-shadow:0 0 15px #818cf899}a.tool-card[href*=text-case-converter]:hover .tool-icon{border-color:#22d3ee;box-shadow:0 0 15px #22d3ee99}a.tool-card[href*=base64-multi-converter]:hover .tool-icon{border-color:#fb923c;box-shadow:0 0 15px #fb923c99}a.tool-card[href*=json-to-ai-token-optimizer]:hover .tool-icon{border-color:#a3e635;box-shadow:0 0 15px #a3e63599}a.tool-card[href*=password-generator]:hover .tool-icon{border-color:#f87171;box-shadow:0 0 15px #f8717199}a.tool-card[href*=compound-interest-calculator]:hover .tool-icon{border-color:#4ade80;box-shadow:0 0 15px #4ade8099}a.tool-card[href*=bmi-calculator]:hover .tool-icon{border-color:#3b82f6!important;box-shadow:0 0 15px #3b82f699!important}a.tool-card[href*=mortgage-calculator]:hover .tool-icon{border-color:#818cf8!important;box-shadow:0 0 15px #818cf899!important}a.tool-card[href*=image-resizer]:hover .tool-icon{border-color:#e879f9;box-shadow:0 0 15px #e879f999}a.tool-card[href*=retro-game-avatar]:hover .tool-icon{border-color:#c084fc;box-shadow:0 0 15px #c084fc99}a.tool-card[href*=ai-text-detector]:hover .tool-icon{border-color:#ec4899;box-shadow:0 0 15px #ec489999}a.tool-card[href*=qr-gift-card]:hover .tool-icon{border-color:#fb923c;box-shadow:0 0 15px #fb923c99}a.tool-card[href*=p2p-file-transfer]:hover .tool-icon{border-color:#60a5fa;box-shadow:0 0 15px #60a5fa99}.tool-card h3{font-family:Outfit,sans-serif;font-size:1.35rem;font-weight:600;color:var(--text-primary)}.tool-card p{color:var(--text-secondary);font-size:.95rem}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:4rem}.form-group{margin-bottom:1.5rem}.form-label{display:block;font-size:.9rem;font-weight:600;color:var(--text-secondary);margin-bottom:.5rem}.form-input,.form-select,.form-textarea{width:100%;padding:.75rem 1rem;background-color:#0b0f1999;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;font-size:.95rem;transition:var(--transition-smooth)}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.form-textarea{resize:vertical;min-height:120px}.file-upload-area{border:2px dashed var(--border-color);border-radius:var(--radius-lg);padding:3rem 2rem;text-align:center;cursor:pointer;transition:var(--transition-smooth);background-color:#0b0f1933}.file-upload-area:hover,.file-upload-area.drag-over{border-color:var(--primary);background-color:var(--primary-glow)}.file-upload-icon{font-size:2.5rem;color:var(--primary);margin-bottom:1rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none;width:100%}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-hover);box-shadow:0 0 20px #6366f166}.btn-secondary{background-color:transparent;color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--border-color)}.output-pre{background-color:#080c14;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;font-family:var(--font-mono);font-size:.85rem;overflow-x:auto;white-space:pre-wrap;word-break:break-all;color:#a7f3d0;max-height:500px}input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:var(--border-color);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;transition:var(--transition-smooth)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.seo-section{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border-color)}.seo-section h2{font-family:Outfit,sans-serif;font-size:1.75rem;margin-bottom:1.5rem;background:linear-gradient(135deg,#fff,var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.seo-section h3{font-family:Outfit,sans-serif;font-size:1.25rem;margin-top:1.5rem;margin-bottom:.75rem}.seo-section p{color:var(--text-secondary);margin-bottom:1rem}.seo-section ul,.seo-section ol{margin-left:1.5rem;margin-bottom:1.5rem;color:var(--text-secondary)}footer{margin-top:5rem;padding:3rem 2rem;border-top:1px solid var(--border-color);text-align:center;background-color:#080c14}.footer-links{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem}.footer-links a{color:var(--text-secondary);text-decoration:none;font-size:.9rem;transition:var(--transition-smooth)}.footer-links a:hover{color:var(--primary)}footer p{color:var(--text-muted);font-size:.85rem}.flex-between{display:flex;justify-content:space-between;align-items:center}.grid-cols-2{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width: 640px){.grid-cols-2{grid-template-columns:1fr 1fr}}.margin-top-md{margin-top:1rem}.text-center{text-align:center}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.nav-item-icon.color-periodic{background:linear-gradient(135deg,#a855f7,#6366f1);border-color:#818cf866;color:#fff}.nav-dropdown-item:hover .color-periodic{border-color:#818cf8;box-shadow:0 0 12px #818cf899}a.tool-card[href*=periodic-table] .tool-icon{background:linear-gradient(135deg,#a855f7,#6366f1);border-color:#818cf866;color:#fff}a.tool-card[href*=periodic-table]:hover .tool-icon{border-color:#818cf8;box-shadow:0 0 15px #818cf899}.periodic-table-scroll-container{width:100%;overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border-color);background-color:#0b0f194d;padding:1.5rem;margin-bottom:2rem;position:relative;scrollbar-color:var(--primary) rgba(255,255,255,.05);scrollbar-width:thin}.scroll-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.85rem;color:var(--text-secondary);margin-bottom:1rem;font-weight:500}@media (min-width: 1025px){.scroll-hint{display:none}}.periodic-table-grid{display:grid;grid-template-columns:repeat(18,minmax(50px,1fr));grid-template-rows:repeat(9,minmax(58px,1fr));gap:6px;min-width:980px}.group-headers-space{grid-row:1 / 4;grid-column:3 / 13;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px dashed var(--border-color);border-radius:var(--radius-md);background:#ffffff03;padding:1rem;text-align:center;color:var(--text-muted);font-size:.9rem}.element-cell{position:relative;border-radius:var(--radius-md);padding:6px 4px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 5px #0003}.element-cell:hover{transform:scale(1.12);z-index:50;box-shadow:0 10px 25px #00000080;filter:brightness(1.2)}.element-cell.dimmed{opacity:.15!important;transform:scale(.92);filter:grayscale(.8) blur(.5px);pointer-events:none}.element-number{font-size:.75rem;font-weight:700;align-self:flex-start;line-height:1}.element-symbol{font-family:Outfit,sans-serif;font-size:1.3rem;font-weight:800;line-height:1.1;letter-spacing:-.5px}.element-name{font-size:.62rem;font-weight:500;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.element-mass{font-size:.55rem;opacity:.8;font-weight:500;letter-spacing:-.2px}.cat-alkali-metal{background:#ef44441f;border:1px solid rgba(239,68,68,.4);color:#fca5a5}.cat-alkaline-earth{background:#f973161f;border:1px solid rgba(249,115,22,.4);color:#fdba74}.cat-transition-metal{background:#eab3081f;border:1px solid rgba(234,179,8,.4);color:#fef08a}.cat-lanthanide{background:#f43f5e1f;border:1px solid rgba(244,63,94,.4);color:#fda4af}.cat-actinide{background:#d946ef1f;border:1px solid rgba(217,70,239,.4);color:#f5d0fe}.cat-post-transition{background:#22c55e1f;border:1px solid rgba(34,197,94,.4);color:#86efac}.cat-metalloid{background:#14b8a61f;border:1px solid rgba(20,184,166,.4);color:#99f6e4}.cat-reactive-nonmetal{background:#06b6d41f;border:1px solid rgba(6,182,212,.4);color:#67e8f9}.cat-noble-gas{background:#a855f71f;border:1px solid rgba(168,85,247,.4);color:#d8b4fe}.cat-unknown{background:#6b72801f;border:1px solid rgba(107,114,128,.4);color:#d1d5db}.filter-tags-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.filter-btn{padding:.4rem .8rem;border-radius:var(--radius-md);font-size:.8rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);background-color:#101625;border:1px solid var(--border-color);color:var(--text-secondary)}.filter-btn:hover{background-color:var(--bg-card-hover);color:var(--text-primary)}.filter-btn.active{background-color:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 10px var(--primary-glow)}dialog.element-modal{width:90%;max-width:520px;border:1px solid var(--border-color);border-radius:var(--radius-lg);background-color:var(--bg-card);color:var(--text-primary);padding:2rem;box-shadow:var(--shadow-premium),0 0 50px #000c;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;outline:none;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;overflow:hidden;z-index:2000}dialog.element-modal[open]{opacity:1;visibility:visible}dialog.element-modal::backdrop{background:#080c14cc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.modal-header-section{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}.modal-close-btn{background:#ffffff0d;border:1px solid var(--border-color);color:var(--text-secondary);font-size:1.25rem;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-smooth)}.modal-close-btn:hover{background:#ef444426;color:var(--danger);border-color:#ef44444d}.modal-badge-container{display:flex;align-items:center;gap:1rem}.modal-big-symbol{width:68px;height:68px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-family:Outfit,sans-serif;font-size:2.2rem;font-weight:800;box-shadow:inset 0 0 10px #ffffff0d}.modal-title-group h3{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:700;line-height:1.2}.modal-title-group .modal-category{font-size:.8rem;font-weight:600;opacity:.9;text-transform:uppercase;letter-spacing:.5px}.modal-properties-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.modal-prop-item{display:flex;flex-direction:column}.modal-prop-label{font-size:.75rem;color:var(--text-secondary);font-weight:600;text-transform:uppercase}.modal-prop-value{font-size:.95rem;font-weight:700;color:var(--text-primary)}.modal-uses-section{font-size:.9rem;line-height:1.5;color:var(--text-secondary);background-color:#0b0f1966;border:1px solid var(--border-color);padding:1rem;border-radius:var(--radius-md)}.modal-uses-title{font-weight:700;color:var(--text-primary);margin-bottom:.35rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}.quiz-wrapper{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.75rem;margin-top:3rem;box-shadow:var(--shadow-premium)}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px dashed var(--border-color)}.quiz-stat-card{display:flex;gap:1rem}.quiz-stat-item{font-size:.9rem;color:var(--text-secondary)}.quiz-stat-item strong{color:var(--primary);font-size:1.05rem}.quiz-question-box{text-align:center;padding:1.5rem;margin-bottom:1.5rem;background-color:#0d1220;border-radius:var(--radius-md);border:1px solid var(--border-color)}.quiz-question-hint{font-size:.85rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}.quiz-question-term{font-family:Outfit,sans-serif;font-size:2.2rem;font-weight:800;color:var(--text-primary);line-height:1.2}.quiz-options-grid{display:grid;grid-template-columns:1fr;gap:.75rem}@media (min-width: 640px){.quiz-options-grid{grid-template-columns:1fr 1fr}}.quiz-option-btn{padding:1rem;background-color:#ffffff05;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);text-align:center;outline:none}.quiz-option-btn:hover:not(:disabled){background-color:var(--bg-card-hover);border-color:var(--primary);transform:translateY(-1px)}.quiz-option-btn:disabled{cursor:not-allowed}.quiz-option-btn.correct-choice{background-color:#10b98126!important;border-color:var(--success)!important;color:#10b981!important;box-shadow:0 0 15px #10b98133}.quiz-option-btn.incorrect-choice{background-color:#ef444426!important;border-color:var(--danger)!important;color:#ef4444!important;box-shadow:0 0 15px #ef444433}.nav-item-icon.color-jwt{background:linear-gradient(135deg,#ec4899,#8b5cf6);border-color:#ec489966;color:#fff}.nav-dropdown-item:hover .color-jwt{border-color:#f472b6;box-shadow:0 0 12px #f472b699}a.tool-card[href*=jwt-decoder] .tool-icon{background:linear-gradient(135deg,#ec4899,#8b5cf6);border-color:#ec489966;color:#fff}a.tool-card[href*=jwt-decoder]:hover .tool-icon{border-color:#f472b6;box-shadow:0 0 15px #f472b699}.jwt-layout{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}@media (min-width: 1024px){.jwt-layout{grid-template-columns:1.1fr .9fr}}.jwt-textarea-wrapper{position:relative;width:100%}.jwt-input-textarea{min-height:220px;font-family:var(--font-mono);font-size:.9rem;line-height:1.6;resize:vertical;background-color:#080c1499;border:1px solid var(--border-color);padding:1rem}.jwt-section-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow-premium)}.jwt-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem}.jwt-section-title{font-family:Outfit,sans-serif;font-size:1.15rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.jwt-header-color{color:#f43f5e}.jwt-payload-color{color:#3b82f6}.jwt-signature-color{color:#10b981}.jwt-header-border{border-left:4px solid #f43f5e!important}.jwt-payload-border{border-left:4px solid #3b82f6!important}.jwt-signature-border{border-left:4px solid #10b981!important}.jwt-code-output{background-color:#080c14;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1rem;font-family:var(--font-mono);font-size:.85rem;overflow-x:auto;white-space:pre-wrap;word-break:break-all;color:#d1d5db;line-height:1.5}.jwt-key{color:#f472b6;font-weight:600}.jwt-string{color:#a7f3d0}.jwt-number{color:#fde047}.jwt-boolean{color:#93c5fd}.jwt-null{color:#9ca3af;font-style:italic}.jwt-badge{display:inline-flex;align-items:center;padding:.25rem .65rem;border-radius:9999px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.jwt-badge-success{background-color:#10b98126;border:1px solid rgba(16,185,129,.3);color:#10b981}.jwt-badge-danger{background-color:#ef444426;border:1px solid rgba(239,68,68,.3);color:#ef4444}.jwt-badge-warning{background-color:#f59e0b26;border:1px solid rgba(245,158,11,.3);color:#f59e0b}.jwt-claim-info-table{width:100%;margin-top:1rem;border-collapse:collapse;font-size:.85rem}.jwt-claim-info-table th,.jwt-claim-info-table td{padding:.5rem;text-align:left;border-bottom:1px solid var(--border-color)}.jwt-claim-info-table th{color:var(--text-secondary);font-weight:600}.jwt-claim-info-table td code{background-color:#ffffff0d;padding:.1rem .3rem;border-radius:3px;color:var(--text-primary)}.jwt-textarea{width:100%;min-height:140px;background-color:#080c14;border:1px solid var(--border-color);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:.85rem;color:#d1d5db;padding:1rem;resize:vertical;line-height:1.5;outline:none;transition:border-color var(--transition-smooth),box-shadow var(--transition-smooth)}.jwt-textarea:focus{border-color:var(--primary);box-shadow:0 0 8px var(--primary-glow)}.jwt-header-textarea:focus{border-color:#f43f5e;box-shadow:0 0 8px #f43f5e4d}.jwt-payload-textarea:focus{border-color:#3b82f6;box-shadow:0 0 8px #3b82f64d}.jwt-key-textarea{min-height:100px;font-size:.8rem}.jwt-header-controls{display:flex;align-items:center;gap:.5rem}.jwt-algo-select{padding:.25rem .5rem;border-radius:var(--radius-sm);font-size:.85rem;background-color:#0d1220;border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;outline:none;font-family:Outfit,sans-serif;font-weight:600;transition:border-color var(--transition-smooth)}.jwt-algo-select:focus{border-color:var(--primary)}.jwt-json-status{font-size:.75rem;margin-top:.35rem;font-weight:600}.jwt-json-status.valid{color:#10b981}.jwt-json-status.invalid{color:#ef4444}.jwt-signature-key-container{margin-bottom:1rem}.jwt-key-group{display:flex;flex-direction:column;gap:.5rem}.jwt-secret-input{font-family:var(--font-mono);font-size:.9rem;background-color:#080c14;border:1px solid var(--border-color);border-radius:var(--radius-md);color:#d1d5db;padding:.5rem .75rem;width:100%;outline:none;transition:border-color var(--transition-smooth)}.jwt-secret-input:focus{border-color:#10b981;box-shadow:0 0 8px #10b9814d}.jwt-checkbox-label{-webkit-user-select:none;user-select:none;cursor:pointer}.jwt-signature-status-alert{padding:.75rem 1rem;border-radius:var(--radius-md);margin-top:1rem;font-family:var(--font-mono);font-size:.85rem;line-height:1.5}.jwt-signature-status-alert.verified{background-color:#10b98126;border:1px solid rgba(16,185,129,.3);color:#34d399}.jwt-signature-status-alert.unverified{background-color:#ef444426;border:1px solid rgba(239,68,68,.3);color:#f87171}.jwt-signature-status-alert.info{background-color:#3b82f626;border:1px solid rgba(59,130,246,.3);color:#60a5fa}.nav-item-icon.color-mockup{background:linear-gradient(135deg,#f59e0b,#ef4444);border-color:#f59e0b66;color:#fff}.nav-dropdown-item:hover .color-mockup{border-color:#fca5a5;box-shadow:0 0 12px #f59e0b99}a.tool-card[href*=mockup-generator] .tool-icon{background:linear-gradient(135deg,#f59e0b,#ef4444);border-color:#f59e0b66;color:#fff}a.tool-card[href*=mockup-generator]:hover .tool-icon{border-color:#fca5a5;box-shadow:0 0 15px #f59e0b99}.mockup-schema-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.mockup-field-row{display:grid;grid-template-columns:1fr;gap:.75rem;background-color:#ffffff05;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1rem;align-items:center;transition:var(--transition-smooth)}@media (min-width: 768px){.mockup-field-row{grid-template-columns:auto 1.5fr 1.5fr 2.5fr auto;gap:1rem}}.mockup-drag-handle{display:flex;align-items:center;justify-content:center;color:var(--text-secondary);cursor:grab;padding:.25rem}.mockup-drag-handle:active{cursor:grabbing}.mockup-field-name-input{font-family:inherit;font-size:.9rem;padding:.5rem .75rem;border-radius:var(--radius-sm);background-color:#0d1220;border:1px solid var(--border-color);color:var(--text-primary);width:100%}.mockup-field-type-select{font-family:inherit;font-size:.9rem;padding:.5rem .75rem;border-radius:var(--radius-sm);background-color:#0d1220;border:1px solid var(--border-color);color:var(--text-primary);width:100%;cursor:pointer}.mockup-field-params{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.mockup-param-input{font-family:var(--font-mono);font-size:.8rem;padding:.35rem .5rem;border-radius:var(--radius-sm);background-color:#080c14;border:1px solid var(--border-color);color:var(--text-primary);max-width:120px}.mockup-param-label{font-size:.75rem;color:var(--text-secondary);font-weight:600;text-transform:uppercase}.mockup-row-delete{background:#ef44441a;border:1px solid rgba(239,68,68,.2);color:#ef4444;width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-smooth)}.mockup-row-delete:hover{background:#ef4444;color:#fff;border-color:#ef4444}.mockup-generate-bar{display:flex;flex-direction:column;gap:1rem;background-color:#ffffff05;border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:2rem}@media (min-width: 640px){.mockup-generate-bar{flex-direction:row;align-items:flex-end;justify-content:space-between}}.mockup-preview-container{overflow-x:auto;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#080c1499;margin-top:1rem;margin-bottom:1.5rem}.mockup-table{width:100%;border-collapse:collapse;font-size:.85rem;text-align:left}.mockup-table th{background-color:#ffffff0a;padding:.75rem 1rem;font-weight:700;color:var(--text-primary);border-bottom:2px solid var(--border-color)}.mockup-table td{padding:.75rem 1rem;color:var(--text-secondary);border-bottom:1px solid var(--border-color);white-space:nowrap}.mockup-table tr:hover td{background-color:#ffffff05;color:var(--text-primary)}.mockup-export-bar{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;background-color:#ffffff03;border-top:1px solid var(--border-color);margin-top:1rem}@media (min-width: 768px){.mockup-export-bar{flex-direction:row;align-items:center;justify-content:space-between}}.mockup-export-actions{display:flex;flex-wrap:wrap;gap:.5rem}.btn-export{padding:.5rem 1rem;font-size:.85rem;font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-smooth);border:1px solid var(--border-color);background-color:#0d1220;color:var(--text-primary)}.btn-export:hover{background-color:var(--bg-card-hover);border-color:var(--primary);box-shadow:0 0 8px var(--primary-glow)}.btn-export.active{background-color:var(--primary);border-color:var(--primary);color:#fff}