.tool-counter-navbar{align-items:center;animation:fadeInScale .6s ease-out;background:linear-gradient(135deg,#ff950033,#fc03);border:2px solid #ffb30080;border-radius:16px;box-shadow:0 4px 12px #ffb3004d;display:inline-flex;margin-right:80px;padding:0;vertical-align:middle}.tool-counter-navbar .counter-display{align-items:baseline;display:flex;gap:3px}.tool-counter-navbar .counter-number{-webkit-text-fill-color:#0000;font-feature-settings:"tnum";animation:countPulse 2s ease-in-out infinite;background:linear-gradient(135deg,#ff6b00,#ffb800 50%,gold);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 4px rgba(255,149,0,.4));font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:42px;font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:-.05em;line-height:1;min-width:60px;text-align:center}.tool-counter-navbar .counter-plus{animation:plusPulse 2s ease-in-out infinite;color:#ff9500;font-size:28px;font-weight:700;opacity:.9;text-shadow:0 2px 4px #ff950066}.tool-counter-navbar .counter-info{display:flex;flex-direction:column;gap:2px}.tool-counter-navbar .counter-label{color:#1f2937;color:var(--text-primary,#1f2937);font-size:13px;font-weight:700;letter-spacing:-.02em;line-height:1}.tool-counter-navbar .counter-subtitle{align-items:center;color:#6b7280;color:var(--text-secondary,#6b7280);display:flex;font-size:11px;font-weight:500;gap:4px;line-height:1}.tool-counter-navbar .pulse-dot{animation:pulse 2s ease-in-out infinite;background:#10b981;border-radius:50%;box-shadow:0 0 0 0 #10b981b3;height:6px;width:6px}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes countPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes plusPulse{0%,to{opacity:.8;transform:scale(1) rotate(0deg)}50%{opacity:1;transform:scale(1.1) rotate(5deg)}}body.dark-mode .tool-counter-navbar{background:linear-gradient(135deg,#ff950040,#ffcc0040);border-color:#ffb30099;box-shadow:0 4px 12px #ffb30066}@media (max-width:1200px){.tool-counter-navbar{gap:3px;padding:0}.tool-counter-navbar .counter-number{font-size:36px}.tool-counter-navbar .counter-plus{font-size:24px}}@media (max-width:900px){.tool-counter-navbar{display:none}}.layout{background:#f8f9fa;display:flex;min-height:100vh}.main-content{display:flex;flex:1 1;flex-direction:column;width:100%}.navbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid #ffffff1a;box-shadow:0 2px 10px #0000001a;position:-webkit-sticky;position:sticky;top:0;z-index:1000}.navbar-container{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:100%;min-height:90px;padding:12px 20px;position:relative}.navbar-left{align-items:flex-start;display:flex;flex-direction:column;gap:8px;left:20px;max-width:35%;position:absolute;z-index:5}.quote-container{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:2px solid #ffffff4d;border-radius:12px;display:flex;gap:8px;justify-content:center;min-height:40px;padding:8px 16px;transition:opacity .5s ease,transform .5s ease}.quote-container.visible{opacity:1;transform:translateY(0)}.quote-container.hidden{opacity:0;transform:translateY(-10px)}.quote-icon{font-size:20px;line-height:1}.motivational-quote{color:#fffffff2;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:13px;font-style:italic;font-weight:500;line-height:1.4;margin:0;text-align:center}.navbar-center{flex-direction:column;gap:6px;left:50%;position:absolute;transform:translateX(-50%);z-index:10}.logo-section,.navbar-center{align-items:center;display:flex}.logo-section{cursor:pointer;gap:12px;transition:transform .3s ease}.logo-section:hover{transform:scale(1.05)}.navbar-logo{animation:float 3s ease-in-out infinite;font-size:32px;line-height:1}.navbar-title{color:#fff;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:28px;font-weight:700;letter-spacing:-.5px;margin:0;white-space:nowrap}.taglines{align-items:center;display:flex;flex-direction:column;gap:2px;margin-top:4px}.tagline-primary{color:#fffffff2;font-size:18px;font-weight:600;letter-spacing:.3px;margin:0}.tagline-primary,.tagline-secondary{font-family:Inter,system-ui,-apple-system,sans-serif;text-align:center}.tagline-secondary{color:#ffffffe6;font-size:16px;font-style:italic;font-weight:500;margin:0 0 0 35px}.tagline-with-counter{align-items:center;display:flex;flex-wrap:wrap;gap:0;justify-content:center}.tagline-with-counter .tagline-secondary{margin:0}.rotating-badge{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff4d;border-radius:20px;display:flex;gap:6px;justify-content:center;padding:6px 16px;transition:opacity .3s ease,transform .3s ease}.rotating-badge.badge-visible{opacity:1;transform:translateY(0)}.rotating-badge.badge-hidden{opacity:0;transform:translateY(-5px)}.badge-icon{font-size:16px;line-height:1}.badge-text{color:#fffffff2;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:13px;font-weight:600;letter-spacing:.3px;white-space:nowrap}.load-time{align-items:center;animation:fadeInLoadTime .5s ease-in .3s forwards;color:#2ecc71;display:flex;font-size:11px;font-weight:600;gap:4px;justify-content:center;margin-top:4px;opacity:0}@keyframes fadeInLoadTime{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.load-time-icon{animation:sparkle 2s ease-in-out infinite;font-size:14px}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.load-time-text{color:#fffffff2;letter-spacing:.3px}.navbar-right{align-items:flex-end;display:flex;flex-direction:column;gap:8px;position:absolute;right:20px;z-index:5}.navbar-controls{align-items:center;display:flex;gap:12px}.datetime-env-group{align-items:center;display:flex;gap:10px}.datetime-display{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;border-radius:10px;box-shadow:0 2px 6px #0000001a;display:flex;padding:8px 12px;transition:all .3s ease}.datetime-display:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.datetime-text{font-feature-settings:"tnum";color:#ffffffe6;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem;font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:.3px;white-space:nowrap}.env-badge{align-items:center;animation:pulse-glow 2s ease-in-out infinite;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:linear-gradient(135deg,#0006,#1e1e1e4d);border:2px solid #eab3084d;border-radius:10px;display:flex;overflow:visible;padding:8px 16px;position:relative;transition:all .3s ease;width:-webkit-max-content;width:max-content}.env-badge:hover{transform:translateY(-2px) scale(1.05)}.env-badge.env-clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.env-badge.env-clickable:active{transform:translateY(0) scale(.98)}@keyframes envBlink{0%,to{background-color:#eab30833}50%{background-color:#eab30880}}.env-badge.env-blink{animation:envBlink 1.5s ease-in-out infinite}.env-text{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem;font-weight:700;letter-spacing:1.5px;text-shadow:0 1px 2px #0003}@keyframes pulse-glow{0%{border-color:#00000080;box-shadow:0 0 15px #000c,0 0 30px #0009,0 0 45px #0006,inset 0 0 10px #00000080}50%{border-color:#eab308cc;box-shadow:0 0 20px #eab308cc,0 0 40px #eab30899,0 0 60px #eab30866,inset 0 0 15px #eab3084d}to{border-color:#00000080;box-shadow:0 0 15px #000c,0 0 30px #0009,0 0 45px #0006,inset 0 0 10px #00000080}}.dark-mode-toggle{align-items:center;background:#fffffff2;border:1px solid #667eea4d;border-radius:8px;color:#333;cursor:pointer;display:flex;flex-direction:column;font-family:Inter,system-ui,-apple-system,sans-serif;gap:2px;justify-content:center;min-width:50px;padding:8px 10px;transition:all .3s ease}.dark-mode-toggle:hover{background:#fff;border-color:#667eea80;box-shadow:0 4px 12px #667eea4d;transform:translateY(-3px)}.dark-mode-toggle:active{transform:translateY(0)}.mode-icon{font-size:22px;line-height:1}.mode-label{color:#333;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}.social-links{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border-radius:12px;box-shadow:0 2px 6px #0000001a;display:flex;gap:8px;padding:4px}.social-link{align-items:center;border-radius:8px;display:flex;flex-direction:column;gap:2px;justify-content:center;min-width:50px;padding:8px 10px;text-decoration:none;transition:all .3s ease}.social-link:hover{box-shadow:0 4px 12px #0003;transform:translateY(-3px)}.social-icon{font-size:22px;line-height:1}.social-label{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.social-link.youtube{background:linear-gradient(135deg,red,#c00);color:#fff}.social-link.youtube:hover{background:linear-gradient(135deg,#f33,red)}.social-link.wordpress{background:linear-gradient(135deg,#21759b,#1a5f7a);color:#fff}.social-link.wordpress:hover{background:linear-gradient(135deg,#2e8bb5,#21759b)}.social-link.ultimatelearning{background:linear-gradient(135deg,#00d4aa,#00a88a);color:#fff}.social-link.ultimatelearning:hover{background:linear-gradient(135deg,#00f0c4,#00d4aa)}.social-link.learning{background:linear-gradient(135deg,#f39c12,#d68910);color:#fff}.social-link.learning:hover{background:linear-gradient(135deg,#f5b041,#f39c12)}.social-link.home{animation:homeWiggle .8s ease-in-out infinite;background:#fffffff2;border:2px solid #667eea;color:#667eea}.social-link.home:hover{animation:none;background:#fff;border-color:#764ba2;color:#764ba2;transform:translateY(-3px) scale(1.05)}@keyframes homeWiggle{0%,to{transform:rotate(0deg)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}.navbar-search{background:#90ee9033;border-top:1px solid #90ee904d;padding:12px 20px}.search-controls{align-items:center;display:flex;gap:12px;justify-content:center;margin:0 auto;max-width:1400px}.search-with-counter{align-items:center;display:flex;gap:0}.search-input-wrapper{align-items:center;background:#fffffff2;border-radius:25px;display:flex;padding:4px;position:relative;width:350px}.search-icon{color:#667eeacc;font-size:16px;left:16px;pointer-events:none;position:absolute;z-index:1}.search-input{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffffa;border:1px solid #667eea4d;border-radius:20px;color:#333;font-weight:500;padding:.5rem 1rem .5rem 2.5rem;transition:all .3s ease}.search-input::placeholder{color:#000;font-weight:400}.search-input:focus{background:#fff;border-color:#667eea99;box-shadow:0 4px 12px #667eea33;outline:none}.home-button{align-items:center;background:#fff3;border:2px solid #ffffff4d;border-radius:25px;color:#fff;cursor:pointer;display:flex;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.95rem;font-weight:600;gap:.5rem;padding:.65rem 1.25rem;text-decoration:none;transition:all .3s ease;white-space:nowrap}.home-button:hover{background:#ffffff4d;box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.home-button:active{transform:translateY(0)}.home-icon{font-size:1.2rem;line-height:1}.home-text{color:#fffffff2;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.9rem;font-weight:600;letter-spacing:.3px}.page-content{flex:1 1;margin:0 auto;max-width:1400px;padding:2rem;width:100%}.footer{background:linear-gradient(135deg,#667eea,#764ba2);margin-top:2rem;padding:.75rem 2rem}.footer-content{align-items:center;display:flex;justify-content:center;margin:0 auto;max-width:1400px;position:relative}.footer-center{text-align:center}.footer-right{position:absolute;right:-90px;top:50%;transform:translateY(-50%)}.footer-text{color:#fffffff2;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.9rem;font-weight:500;margin:0 0 .5rem}.footer-subtext{color:#ffffffd9;font-weight:400}.footer-deployment,.footer-subtext{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.8rem;margin:0}.footer-deployment{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:6px;color:#ffffffe6;font-weight:500;padding:.5rem 1rem;white-space:nowrap}@media (max-width:1200px){.navbar-left,.navbar-right{max-width:20%}.quote-container{padding:6px 12px}.motivational-quote{font-size:12px}.navbar-title{font-size:22px}.tagline-primary{font-size:13px}.tagline-secondary{font-size:11px}.badge-icon{font-size:14px}.badge-text{font-size:11px}.social-link-text{display:none}.social-link{padding:6px}}@media (max-width:968px){.navbar-container{align-items:center;flex-direction:column;min-height:auto;padding:16px 20px}.navbar-center,.navbar-left,.navbar-right{max-width:100%;position:static;transform:none;width:100%}.navbar-left{justify-content:center}.navbar-center,.navbar-left{margin-bottom:12px}.navbar-right{flex-wrap:wrap;justify-content:center}.search-input-wrapper{margin-bottom:8px;max-width:100%;width:100%}.search-bar{position:relative;top:auto}.search-bar-container{flex-direction:column;gap:12px}.about-section,.search-controls{width:100%}.search-container{max-width:100%}}@media (max-width:768px){.navbar{padding:12px 0}.navbar-container{padding:12px 16px}.navbar-logo{font-size:28px}.navbar-title{font-size:20px}.tagline-primary{font-size:12px}.tagline-secondary{font-size:11px}.load-time{font-size:10px}.datetime-display{padding:6px 10px}.datetime-text{font-size:.75rem}.dark-mode-toggle{min-width:45px;padding:6px 8px}.mode-icon{font-size:18px}.mode-label{font-size:8px}.social-links{gap:4px}.social-link{min-width:45px;padding:6px 8px}.social-icon{font-size:18px}.social-label{font-size:8px}.search-bar{padding:12px 16px}.about-title{font-size:13px}.about-description{font-size:11px}.search-input{font-size:13px;padding:.45rem 1rem .45rem 2.25rem}.search-input-wrapper{width:100%}.home-button{font-size:13px;padding:8px 16px}.page-content{padding:1rem}.footer-content{flex-direction:column;gap:1rem}.footer-right{position:static;transform:none}.footer-deployment{font-size:.75rem;padding:.4rem .8rem;white-space:normal}}@media (max-width:480px){.navbar-container{padding:10px 12px}.navbar-logo{font-size:24px}.navbar-title{font-size:18px}.tagline-primary{font-size:11px}.tagline-secondary{font-size:10px}.quote-icon{font-size:18px}.motivational-quote{font-size:11px}.datetime-display{padding:5px 8px}.datetime-text{font-size:.65rem}.dark-mode-toggle{font-size:12px;padding:5px 10px}.social-link{padding:5px}.social-link-emoji{font-size:14px}.about-section,.search-bar{padding:10px 12px}.about-title{font-size:12px}.about-description{font-size:10px}.search-input{font-size:12px;padding:.4rem .75rem .4rem 2rem}.search-icon{font-size:14px;left:12px}.search-input-wrapper{width:100%}.home-button{font-size:12px;padding:7px 14px}.page-content{padding:.75rem}.footer{padding:.75rem 1rem}.footer-deployment{font-size:.7rem;padding:.35rem .6rem;white-space:normal}}.modal-overlay{align-items:center;animation:fadeIn .3s forwards;background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;opacity:0;overflow:hidden;pointer-events:all;position:fixed;right:0;top:0;z-index:9999}.modal-content{animation:slideIn .5s forwards;background-color:#fff;border-radius:12px;box-shadow:0 5px 20px #00000026;max-width:900px;padding:30px;pointer-events:auto;position:relative;text-align:center;transform:translateY(-30px);width:100%;z-index:10000}.modal-content h2{color:#333;font-family:Arial,sans-serif;font-size:24px;font-weight:700;margin-bottom:15px}.modal-content p{color:#555;font-family:Verdana,sans-serif;font-size:16px;line-height:1.5;margin-bottom:25px}.modal-buttons{display:flex;gap:20px;justify-content:center}.buy-coffee-btn,.wait-btn{background-color:#28a745;border:none;border-radius:30px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;padding:12px 25px;text-decoration:none;transition:all .3s ease-in-out}.modal-content a,.modal-content button{cursor:pointer}.modal-content *{cursor:default}.buy-coffee-btn:hover{background-color:#218838;transform:scale(1.05)}.wait-btn{background-color:#007bff}.wait-btn:hover{background-color:#0056b3;transform:scale(1.05)}.buy-coffee-btn:focus,.wait-btn:focus{box-shadow:0 0 5px #007bffcc;outline:none}@keyframes slideIn{0%{transform:translateY(-30px)}to{transform:translateY(0)}}.tools-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(5,1fr);margin:0 auto;max-width:1400px;padding:2rem}.tool-tile{align-items:flex-start;animation:fadeInUp .5s ease-out both;background:#fff;border:2px solid #e0e7ff;border-radius:10px;box-shadow:0 2px 8px #00000014,0 1px 3px #0000000f;cursor:pointer;display:flex;flex-direction:row;gap:.85rem;height:50px;overflow:visible;padding:.85rem 1rem;position:relative;transition:border-color .2s ease}.dark-mode .tool-tile{background:#2d2d2d;border:2px solid #404040;box-shadow:0 2px 8px #0000004d,0 1px 3px #0003}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes wiggle{0%,to{transform:rotate(0deg)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.tool-tile:hover{border-color:#1a1a1a;cursor:pointer}.dark-mode .tool-tile:hover{border-color:#e0e7ff}.tool-icon{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;display:flex;flex-shrink:0;font-size:1.3rem;height:42px;justify-content:center;margin-top:2px;order:2;transition:all .3s ease;width:42px}.tool-tile:hover .tool-icon{animation:wiggle .5s ease-in-out infinite}.tool-content{display:flex;flex:1 1;flex-direction:column;gap:.35rem;min-width:0;order:1;overflow:hidden}.tool-name{color:#1f2937;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.9rem;font-weight:600;line-height:1.3;margin:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.dark-mode .tool-name{color:#e5e7eb}.tool-description{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;color:#6b7280;display:-webkit-box;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.75rem;font-weight:400;line-height:1.4;margin:0;overflow:hidden;text-align:left;text-overflow:ellipsis}.dark-mode .tool-description{color:#9ca3af}.tool-tile-in-progress{opacity:.7;position:relative}.tool-tile-in-progress:hover{opacity:1}.tool-overlay{align-items:center;background:#fffffff2;border-radius:10px;bottom:0;display:flex;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease;z-index:10}.dark-mode .tool-overlay{background:#2d2d2df2}.tool-tile-in-progress:hover .tool-overlay{opacity:1}.tool-overlay-content{align-items:center;display:flex;flex-direction:column;gap:.3rem;text-align:center}.tool-overlay-icon{animation:pulse 1.5s ease-in-out infinite;font-size:1.5rem}.tool-overlay-text{color:#1f2937;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.dark-mode .tool-overlay-text{color:#e5e7eb}.tool-overlay-subtext{color:#6b7280;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.65rem;font-weight:500}.dark-mode .tool-overlay-subtext{color:#9ca3af}@media (max-width:480px){.tools-grid{gap:.85rem;grid-template-columns:repeat(1,1fr);padding:1rem}.tool-tile{min-height:80px;padding:.75rem}.tool-icon{font-size:1.2rem;height:38px;width:38px}.tool-name{font-size:.85rem}.tool-description{font-size:.7rem}}@media (min-width:481px) and (max-width:768px){.tools-grid{gap:1rem;grid-template-columns:repeat(2,1fr);padding:1.5rem}.tool-tile{min-height:85px;padding:.8rem}.tool-icon{font-size:1.25rem;height:40px;width:40px}.tool-name{font-size:.875rem}.tool-description{font-size:.725rem}}@media (min-width:769px) and (max-width:1024px){.tools-grid{gap:1.25rem;grid-template-columns:repeat(3,1fr);padding:1.75rem}.tool-tile{min-height:88px}}@media (min-width:1025px) and (max-width:1280px){.tools-grid{gap:1.35rem;grid-template-columns:repeat(4,1fr);padding:2rem}}@media (min-width:1281px){.tools-grid{grid-template-columns:repeat(5,1fr)}}.feedback-modal-backdrop{align-items:center;animation:backdropFadeIn .3s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:9999}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}.feedback-modal{animation:modalSlideIn .4s ease-out;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;max-height:100vh;max-width:700px;overflow:hidden;width:100%}.dark-mode .feedback-modal{background:#1f2937;box-shadow:0 20px 60px #0009}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.feedback-modal-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:2px solid #fff3;display:flex;justify-content:space-between;padding:1.5rem 2rem}.dark-mode .feedback-modal-header{background:linear-gradient(135deg,#4c51bf,#5a3d8a)}.feedback-header-content{align-items:center;display:flex;gap:.75rem}.feedback-icon{animation:iconPulse 2s ease-in-out infinite;font-size:2rem}@keyframes iconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.feedback-title{color:#fff;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:700;margin:0;text-shadow:0 2px 4px #0003}.feedback-close-btn{align-items:center;background:#fff3;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:36px;justify-content:center;transition:all .2s ease;width:36px}.feedback-close-btn:hover{background:#ffffff4d;transform:rotate(90deg)}.feedback-modal-body{-ms-overflow-style:none;flex:1 1;overflow-y:auto;padding:2rem;scrollbar-width:none}.feedback-modal-body::-webkit-scrollbar{display:none}.feedback-form{display:flex;flex-direction:column;gap:1.5rem}.form-row{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-label{align-items:center;color:#374151;display:flex;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem;font-weight:600;gap:.25rem}.dark-mode .form-label{color:#e5e7eb}.required{color:#ef4444}.optional{color:#6b7280;font-size:.8125rem;font-weight:400}.dark-mode .optional{color:#9ca3af}.form-input,.form-select,.form-textarea{background:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#1f2937;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.9375rem;outline:none;padding:.75rem;transition:all .2s ease}.dark-mode .form-input,.dark-mode .form-select,.dark-mode .form-textarea{background:#374151;border-color:#4b5563;color:#e5e7eb}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:#667eea;border-width:3px;box-shadow:0 4px 12px #667eea33,0 0 0 3px #667eea1a;transform:translateY(-2px)}.dark-mode .form-input:focus,.dark-mode .form-select:focus,.dark-mode .form-textarea:focus{border-color:#4c51bf;border-width:3px;box-shadow:0 4px 12px #4c51bf4d,0 0 0 3px #4c51bf33;transform:translateY(-2px)}.form-textarea{font-family:inherit;min-height:80px;resize:vertical}.form-select{cursor:pointer}.feedback-success{align-items:center;display:flex;flex-direction:column;gap:1rem;justify-content:center;padding:3rem 2rem;text-align:center}.success-icon{animation:successBounce .6s ease-out;font-size:4rem}@keyframes successBounce{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.feedback-success h3{color:#10b981;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.75rem;font-weight:700;margin:0}.dark-mode .feedback-success h3{color:#34d399}.feedback-success p{color:#6b7280;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1rem;margin:0}.dark-mode .feedback-success p{color:#9ca3af}.success-subtext{font-size:.875rem!important;opacity:.8}.feedback-error{align-items:center;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;display:flex;gap:.75rem;margin-bottom:1rem;padding:1rem}.dark-mode .feedback-error{background:#7f1d1d;border-color:#991b1b}.error-icon{font-size:1.5rem}.feedback-error p{color:#dc2626;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem;margin:0}.dark-mode .feedback-error p{color:#fca5a5}.email-warning-modal-backdrop{align-items:center;animation:backdropFadeIn .3s ease-out;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000000bf;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10000}.email-warning-modal{animation:warningModalSlideIn .4s ease-out;background:linear-gradient(135deg,#fef3c7,#fde68a);border:3px solid #f59e0b;border-radius:20px;box-shadow:0 20px 60px #f59e0b66;max-width:500px;padding:2rem;text-align:center;width:90%}.dark-mode .email-warning-modal{background:linear-gradient(135deg,#78350f,#92400e);border-color:#d97706;box-shadow:0 20px 60px #d9770680}@keyframes warningModalSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.email-warning-modal-icon{animation:warningIconBounce 1.5s ease-in-out infinite;font-size:4rem;margin-bottom:1rem}@keyframes warningIconBounce{0%,to{transform:scale(1) rotate(0deg)}25%{transform:scale(1.1) rotate(-5deg)}75%{transform:scale(1.1) rotate(5deg)}}.email-warning-modal-title{color:#92400e;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:800;margin:0 0 1rem}.dark-mode .email-warning-modal-title{color:#fbbf24}.email-warning-modal-text{color:#78350f;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.6;margin:0 0 1rem}.dark-mode .email-warning-modal-text{color:#fde68a}.email-warning-privacy{align-items:flex-start;background:#ffffff80;border-radius:12px;display:flex;gap:.75rem;margin-bottom:1rem;padding:1rem}.dark-mode .email-warning-privacy{background:#0000004d}.privacy-icon{flex-shrink:0;font-size:1.5rem}.email-warning-privacy p{color:#78350f;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem;line-height:1.5;margin:0;text-align:left}.dark-mode .email-warning-privacy p{color:#fcd34d}.email-warning-modal-question{color:#92400e;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.05rem;font-weight:700;margin:1.5rem 0}.dark-mode .email-warning-modal-question{color:#fbbf24}.email-warning-actions{display:flex;gap:1rem;margin-top:1.5rem}.btn-changed-mind,.btn-continue-without-email{align-items:center;border:none;border-radius:12px;cursor:pointer;display:flex;flex:1 1;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1rem;font-weight:600;gap:.5rem;justify-content:center;padding:1rem 1.5rem;transition:all .3s ease}.btn-changed-mind{background:#fff;border:2px solid #f59e0b;color:#92400e}.dark-mode .btn-changed-mind{background:#1f2937;border-color:#d97706;color:#fbbf24}.btn-changed-mind:hover{background:#f59e0b;box-shadow:0 6px 20px #f59e0b66;color:#fff;transform:translateY(-2px)}.dark-mode .btn-changed-mind:hover{background:#d97706;color:#fff}.btn-continue-without-email{background:#92400e;border:2px solid #92400e;color:#fff}.dark-mode .btn-continue-without-email{background:#d97706;border-color:#d97706;color:#fff}.btn-continue-without-email:hover{background:#78350f;box-shadow:0 6px 20px #92400e66;transform:translateY(-2px)}.dark-mode .btn-continue-without-email:hover{background:#b45309}.form-actions{display:flex;gap:1rem;margin-top:1rem}.btn-cancel,.btn-submit{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1rem;font-weight:600;gap:.5rem;justify-content:center;padding:.875rem 1.5rem;transition:all .2s ease}.btn-cancel{background:#e5e7eb;color:#374151;flex:1 1}.dark-mode .btn-cancel{background:#4b5563;color:#e5e7eb}.btn-cancel:hover:not(:disabled){background:#d1d5db}.dark-mode .btn-cancel:hover:not(:disabled){background:#6b7280}.btn-submit{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 12px #667eea4d;color:#fff;flex:2 1}.dark-mode .btn-submit{background:linear-gradient(135deg,#4c51bf,#5a3d8a)}.btn-submit:hover:not(:disabled){box-shadow:0 6px 16px #667eea66;transform:translateY(-2px)}.btn-submit:active:not(:disabled){transform:translateY(0)}.btn-submit:disabled{cursor:not-allowed;opacity:.7}.submit-icon{font-size:1.2rem}.spinner{animation:spin .8s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:16px;width:16px}@media (max-width:768px){.feedback-modal{border-radius:16px;margin:0;max-width:100%}.feedback-modal-header{padding:1.25rem 1.5rem}.feedback-title{font-size:1.25rem}.feedback-modal-body{padding:1.5rem}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column-reverse}.btn-cancel,.btn-submit{flex:1 1;width:100%}.email-warning-modal{padding:1.5rem}.email-warning-modal-icon{font-size:3rem}.email-warning-modal-title{font-size:1.25rem}.email-warning-actions{flex-direction:column}.btn-changed-mind,.btn-continue-without-email{width:100%}}@media (max-width:480px){.feedback-modal-backdrop{padding:0}.feedback-modal{border-radius:0;max-height:100vh}.feedback-modal-header{padding:1rem 1.25rem}.feedback-title{font-size:1.1rem}.feedback-icon{font-size:1.5rem}.feedback-modal-body{padding:1.25rem}.email-warning-modal{padding:1.25rem;width:95%}.email-warning-modal-icon{font-size:2.5rem}.email-warning-modal-title{font-size:1.1rem}.email-warning-modal-text{font-size:.9rem}.btn-changed-mind,.btn-continue-without-email{font-size:.9rem;padding:.875rem 1rem}}.captcha-modal-backdrop{align-items:center;animation:backdropFadeIn .3s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10001}.captcha-modal{animation:captchaModalBounce .5s ease-out;background:linear-gradient(135deg,#fef3c7,#fed7aa);border:3px solid #f59e0b;border-radius:20px;box-shadow:0 25px 70px #f59e0b80;max-width:550px;padding:2rem;width:90%}.dark-mode .captcha-modal{background:linear-gradient(135deg,#78350f,#92400e);border-color:#d97706}@keyframes captchaModalBounce{0%{opacity:0;transform:scale(.7) translateY(-50px)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.captcha-header{margin-bottom:1.5rem;text-align:center}.captcha-title{color:#92400e;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.75rem;font-weight:800;line-height:1.3;margin:0}.dark-mode .captcha-title{color:#fbbf24}.captcha-body{display:flex;flex-direction:column;gap:1.5rem}.captcha-message{color:#78350f;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.6;margin:0;text-align:center}.dark-mode .captcha-message{color:#fde68a}.captcha-box{background:#ffffffb3;border-radius:16px;padding:2rem;text-align:center}.dark-mode .captcha-box{background:#0000004d}.math-problem{align-items:center;display:flex;font-family:Courier New,monospace;gap:1.5rem;justify-content:center;margin-bottom:2rem}.math-number{animation:numberFloat 3s ease-in-out infinite;background:#fff;border:3px solid #f59e0b;border-radius:12px;box-shadow:0 4px 12px #f59e0b4d;color:#92400e;font-size:3rem;font-weight:800;min-width:80px;padding:1rem 1.5rem}.dark-mode .math-number{background:#1f2937;border-color:#d97706;color:#fbbf24}.math-number:first-child{animation-delay:0s}.math-number:last-child{animation-delay:.5s}@keyframes numberFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.math-equals,.math-operator{color:#92400e;font-size:2.5rem;font-weight:700}.dark-mode .math-equals,.dark-mode .math-operator{color:#fbbf24}.math-question{animation:questionPulse 1.5s ease-in-out infinite;color:#f59e0b;font-size:3rem}.dark-mode .math-question{color:#fbbf24}@keyframes questionPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}.captcha-form{display:flex;flex-direction:column;gap:1rem}.captcha-input{background:#fff;border:3px solid #f59e0b;border-radius:12px;color:#92400e;font-family:Courier New,monospace;font-size:2rem;font-weight:700;outline:none;padding:1rem;text-align:center;transition:all .3s ease}.dark-mode .captcha-input{background:#1f2937;border-color:#d97706;color:#fbbf24}.captcha-input:focus{border-color:#92400e;box-shadow:0 0 0 4px #f59e0b33;transform:scale(1.02)}.dark-mode .captcha-input:focus{border-color:#fbbf24;box-shadow:0 0 0 4px #fbbf2433}.captcha-error{align-items:center;animation:errorShake .5s ease-out;background:#fef2f2;border:2px solid #fecaca;border-radius:8px;color:#dc2626;display:flex;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.9rem;font-weight:600;gap:.5rem;justify-content:center;padding:.75rem}.dark-mode .captcha-error{background:#7f1d1d;border-color:#991b1b;color:#fca5a5}.captcha-blocked{background:#dc2626;border-color:#991b1b;color:#fff}.dark-mode .captcha-blocked{background:#991b1b;border-color:#7f1d1d;color:#fff}@keyframes errorShake{0%,to{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}.error-icon{font-size:1.2rem}.captcha-actions{margin-top:.5rem}.btn-verify{align-items:center;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:12px;box-shadow:0 4px 12px #f59e0b66;color:#fff;cursor:pointer;display:flex;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.125rem;font-weight:700;gap:.75rem;justify-content:center;padding:1rem 2rem;transition:all .3s ease;width:100%}.dark-mode .btn-verify{background:linear-gradient(135deg,#d97706,#b45309)}.btn-verify:hover:not(:disabled){box-shadow:0 6px 20px #f59e0b80;transform:translateY(-2px)}.btn-verify:disabled{cursor:not-allowed;opacity:.5}.verify-icon{font-size:1.5rem;font-weight:900}.captcha-info{align-items:center;background:#ffffff80;border-radius:12px;display:flex;gap:.5rem;justify-content:center;margin-top:.5rem;padding:1rem}.dark-mode .captcha-info{background:#0003}.info-icon{flex-shrink:0;font-size:1.2rem}.captcha-info p{color:#78350f;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.8125rem;line-height:1.4;margin:0}.dark-mode .captcha-info p{color:#fcd34d}@media (max-width:768px){.captcha-modal{padding:1.5rem}.captcha-title{font-size:1.5rem}.captcha-message{font-size:.9rem}.math-problem{gap:1rem}.math-number{font-size:2.5rem;min-width:70px;padding:.75rem 1rem}.math-equals,.math-operator{font-size:2rem}.math-question{font-size:2.5rem}.captcha-input{font-size:1.75rem}}@media (max-width:480px){.captcha-modal{padding:1.25rem;width:95%}.captcha-title{font-size:1.25rem}.captcha-message{font-size:.85rem}.captcha-box{padding:1.5rem}.math-problem{flex-wrap:wrap;gap:.75rem}.math-number{font-size:2rem;min-width:60px;padding:.5rem .75rem}.math-equals,.math-operator{font-size:1.5rem}.math-question{font-size:2rem}.captcha-input{font-size:1.5rem;padding:.75rem}.btn-verify{font-size:1rem;padding:.875rem 1.5rem}}.alert-modal-backdrop{align-items:center;animation:alertBackdropFadeIn .3s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10000}@keyframes alertBackdropFadeIn{0%{opacity:0}to{opacity:1}}.alert-modal{animation:alertModalSlideIn .4s cubic-bezier(.34,1.56,.64,1);background:linear-gradient(135deg,#fef3c7,#fed7aa);border:3px solid;border-radius:24px;box-shadow:0 20px 60px #0000004d,inset 0 0 0 1px #ffffff80;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;max-width:650px;overflow:hidden;padding:0;position:relative;width:90%}@keyframes alertModalSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.alert-icon-container{align-items:center;animation:alertIconPulse 2s ease-in-out infinite;border-radius:50%;box-shadow:0 8px 24px #0003,0 0 0 4px #ffffff4d;display:flex;height:80px;justify-content:center;margin:32px auto 24px;width:80px}@keyframes alertIconPulse{0%,to{box-shadow:0 8px 24px #0003,0 0 0 4px #ffffff4d;transform:scale(1)}50%{box-shadow:0 8px 32px #0000004d,0 0 0 6px #fff6;transform:scale(1.05)}}.alert-icon{animation:alertIconBounce .6s ease-out;font-size:2.5rem}@keyframes alertIconBounce{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.alert-content{padding:0 32px 32px;text-align:center}.alert-title{animation:alertTextSlideIn .5s ease-out .1s both;color:#1f2937;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:1.75rem;font-weight:700;line-height:1.3;margin:0 0 16px}@keyframes alertTextSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.alert-message{animation:alertTextSlideIn .5s ease-out .2s both;color:#4b5563;font-size:1rem;line-height:1.6;margin:0;white-space:pre-line}.alert-btn-close,.alert-message{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.alert-btn-close{align-items:center;animation:alertButtonSlideIn .5s ease-out .3s both;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:12px;box-shadow:0 4px 12px #3b82f666;color:#fff;cursor:pointer;display:flex;font-size:1.125rem;font-weight:600;gap:8px;justify-content:center;margin:0 32px 32px;padding:16px 24px;transition:all .3s ease;width:calc(100% - 64px)}@keyframes alertButtonSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.alert-btn-close:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 6px 20px #3b82f680;transform:translateY(-2px)}.alert-btn-close:active{box-shadow:0 2px 8px #3b82f666;transform:translateY(0)}.btn-check{animation:alertCheckPulse 1.5s ease-in-out infinite;font-size:1.25rem}@keyframes alertCheckPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.alert-modal:before{animation:alertGlow 3s ease-in-out infinite;background:radial-gradient(circle,#ffffff4d 0,#0000 70%);content:"";height:200%;left:-50%;pointer-events:none;position:absolute;top:-50%;width:200%}@keyframes alertGlow{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}}@media (prefers-color-scheme:dark){.alert-modal-backdrop{background-color:#000c}.alert-title{color:#1f2937}.alert-message{color:#374151}}@media (max-width:768px){.alert-modal{max-width:90%;padding:0}.alert-icon-container{height:70px;margin:24px auto 20px;width:70px}.alert-icon{font-size:2rem}.alert-content{padding:0 24px 24px}.alert-title{font-size:1.5rem;margin-bottom:12px}.alert-message{font-size:.9375rem}.alert-btn-close{font-size:1rem;margin:0 24px 24px;padding:14px 20px;width:calc(100% - 48px)}}@media (max-width:480px){.alert-modal{border-radius:20px}.alert-icon-container{height:60px;margin:20px auto 16px;width:60px}.alert-icon{font-size:1.75rem}.alert-content{padding:0 20px 20px}.alert-title{font-size:1.25rem}.alert-message{font-size:.875rem}.alert-btn-close{margin:0 20px 20px;padding:12px 16px;width:calc(100% - 40px)}}.more-tools-note{animation:noteAppear .6s ease-out;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;box-shadow:0 10px 40px #667eea4d;grid-column:1/-1;margin-top:1rem;overflow:hidden;padding:2rem;position:relative}.dark-mode .more-tools-note{background:linear-gradient(135deg,#4c51bf,#5a3d8a);box-shadow:0 10px 40px #4c51bf66}.more-tools-note:before{animation:borderGlow 3s ease-in-out infinite;background:linear-gradient(45deg,#ff0080,#ff8c00,#40e0d0,#7b68ee,#ff0080);background-size:400% 400%;border-radius:20px;bottom:-2px;content:"";left:-2px;opacity:.8;position:absolute;right:-2px;top:-2px;z-index:-1}.dark-mode .more-tools-note:before{opacity:.6}@keyframes borderGlow{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.glow-effect{animation:glowPulse 2s ease-in-out infinite;background:radial-gradient(circle,#ffffff4d 0,#0000 70%);height:300px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:300px}.dark-mode .glow-effect{background:radial-gradient(circle,#ffffff26 0,#0000 70%)}@keyframes glowPulse{0%,to{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.2)}}.more-tools-content{align-items:center;display:flex;flex-direction:column;gap:1rem;position:relative;text-align:center;z-index:1}.more-tools-icons{display:flex;gap:1rem;margin-bottom:.5rem}.tool-icon-item{animation:iconBounce 2s ease-in-out infinite;display:inline-block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));font-size:2rem}.tool-icon-item:first-child{animation-delay:0s}.tool-icon-item:nth-child(2){animation-delay:.2s}.tool-icon-item:nth-child(3){animation-delay:.4s}.tool-icon-item:nth-child(4){animation-delay:.6s}.tool-icon-item:nth-child(5){animation-delay:.8s}@keyframes iconBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.more-tools-title{color:#fff;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.5px;line-height:1.2;margin:0;text-shadow:0 4px 12px #0000004d}.sparkle{animation:sparkleRotate 3s linear infinite;display:inline-block;font-size:1.8rem;margin:0 .5rem}@keyframes sparkleRotate{0%,to{transform:rotate(0deg) scale(1)}25%{transform:rotate(20deg) scale(1.2)}50%{transform:rotate(0deg) scale(1)}75%{transform:rotate(-20deg) scale(1.2)}}.more-tools-subtitle{color:#fffffff2;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.1rem;font-weight:500;margin:0;text-shadow:0 2px 8px #0003}.emoji-wave{animation:wave 2s ease-in-out infinite;display:inline-block;margin-right:.5rem}@keyframes wave{0%,to{transform:rotate(0deg)}25%{transform:rotate(20deg)}75%{transform:rotate(-20deg)}}.emoji-rocket{animation:rocketFloat 2s ease-in-out infinite;display:inline-block;margin-left:.5rem}@keyframes rocketFloat{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(5deg)}}.request-tool-btn{align-items:center;background:#fffffff2;border:2px solid #ffffff80;border-radius:12px;box-shadow:0 4px 12px #00000026;color:#667eea;cursor:pointer;display:flex;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1rem;font-weight:600;gap:.5rem;padding:.875rem 1.75rem;position:absolute;right:1.5rem;top:1.5rem;transition:all .3s ease;z-index:2}.dark-mode .request-tool-btn{background:#ffffff1a;border-color:#ffffff4d;color:#fff}.request-tool-btn:hover{background:#fff;box-shadow:0 6px 20px #00000040;transform:translateY(-2px)}.dark-mode .request-tool-btn:hover{background:#fff3;border-color:#ffffff80}.request-tool-btn:active{transform:translateY(0)}.btn-icon{animation:btnIconPulse 2s ease-in-out infinite;font-size:1.2rem}@keyframes btnIconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.btn-arrow{font-size:1.2rem;transition:transform .3s ease}.request-tool-btn:hover .btn-arrow{transform:translateX(4px)}.more-tools-footer{display:flex;gap:1.5rem;margin-top:.5rem}.footer-icon{animation:footerIconPulse 2s ease-in-out infinite;display:inline-block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));font-size:1.5rem;opacity:.9}.footer-icon:first-child{animation-delay:0s}.footer-icon:nth-child(2){animation-delay:.3s}.footer-icon:nth-child(3){animation-delay:.6s}.footer-icon:nth-child(4){animation-delay:.9s}.footer-icon:nth-child(5){animation-delay:1.2s}@keyframes footerIconPulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}@keyframes noteAppear{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width:768px){.more-tools-note{padding:1.5rem}.more-tools-title{font-size:1.5rem}.sparkle{font-size:1.3rem}.more-tools-subtitle{font-size:.95rem}.tool-icon-item{font-size:1.5rem}.footer-icon{font-size:1.2rem}.more-tools-icons{gap:.7rem}.more-tools-footer{gap:1rem}}@media (max-width:480px){.more-tools-note{padding:1.25rem}.more-tools-title{font-size:1.2rem}.sparkle{font-size:1rem;margin:0 .3rem}.more-tools-subtitle{font-size:.85rem}.tool-icon-item{font-size:1.2rem}.footer-icon{font-size:1rem}.more-tools-icons{gap:.5rem}.more-tools-footer{gap:.8rem}}.home-page{width:100%}.category-tabbar-container{--radius:0.75rem;align-items:center;background:linear-gradient(135deg,#e0f2fe,#dbeafe);border-radius:20px;display:flex;justify-content:flex-start;margin-left:-6.25rem;margin-top:-24px;width:115%}.category-tabbar{-ms-overflow-style:none;background-color:hsl(var(--muted));border-radius:calc(var(--radius) - 2px);color:hsl(var(--muted-foreground));display:inline-flex;height:1.5rem;justify-content:flex-start;margin-bottom:0;overflow-x:auto;padding:.25rem;scrollbar-width:none;width:-webkit-fit-content;width:fit-content}.category-tabbar::-webkit-scrollbar{display:none}.category-tab{align-items:center;background:#0000;border:1px solid #0000;border-radius:.375rem;color:inherit;cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;min-width:-webkit-fit-content;min-width:fit-content;padding:.75rem .375rem;transition:all .2s ease;white-space:nowrap}.category-tab:focus-visible{box-shadow:0 0 0 2px hsl(var(--ring)),0 0 0 4px hsl(--background);box-shadow:0 0 0 2px hsl(var(--ring)),0 0 0 4px hsl(var(--ring-offset-color,--background));outline:none}.category-tab:disabled{opacity:.5;pointer-events:none}.category-tab[data-state=active]{background-color:#3b82f6;border:1px solid #2563eb;box-shadow:0 2px 8px #3b82f64d;color:#fff}.category-tab:hover:not([data-state=active]){background-color:#add8e6;border:1px solid #c7d2fe}.category-icon{font-size:1rem;line-height:1}.category-name{font-weight:600}.category-count{font-feature-settings:"tnum";background:#ffffff40;border-radius:10px;display:inline-block;font-size:.8rem;font-variant-numeric:tabular-nums;min-width:1rem;opacity:.9;padding:.15rem .4rem;text-align:center}.dark-mode .category-tabbar{background:#1f2937;border-color:#374151}.dark-mode .category-tab{color:#d1d5db}.dark-mode .category-tab:hover{background:#667eea33}@media (max-width:768px){.category-tabbar-container{margin-bottom:.75rem}.category-tab{flex:none;font-size:.85rem;padding:.4rem .8rem}.category-icon{font-size:.9rem}.category-count{font-size:.75rem;padding:.1rem .3rem}}@media (max-width:480px){.category-tab{font-size:.8rem;padding:.35rem .6rem}.tab-content{gap:.3rem}}#tools-grid{padding:1rem 0}.no-results{align-items:center;animation:fadeIn .5s ease-in;display:flex;justify-content:center;padding:4rem 2rem}.no-results-content{align-items:center;display:flex;flex-direction:column;gap:1rem;text-align:center}.no-results-icon{font-size:3rem;opacity:.6}.no-results p{color:#6b7280;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.2rem;font-weight:500;margin:0}.category-filter-note{font-size:1rem!important;opacity:.7}.dark-mode .no-results p{color:#9ca3af}.scroll-to-top{align-items:center;animation:fadeInRight .3s ease-in-out;background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid #334155;border-radius:50%;box-shadow:0 4px 16px #0000004d,0 2px 8px #0003;color:#fff;cursor:pointer;display:flex;height:56px;justify-content:center;position:absolute;right:1rem;transition:transform .3s ease,box-shadow .3s ease,background .3s ease,border-color .3s ease;width:56px;will-change:top;z-index:1000}.scroll-to-top:hover{background:linear-gradient(135deg,#334155,#1e293b);border-color:#475569;box-shadow:0 6px 24px #0006,0 3px 12px #0000004d;transform:scale(1.1)}.scroll-to-top:active{transform:translateY(-2px)}@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.dark-mode .scroll-to-top{background:linear-gradient(135deg,#0f172a,#020617);border-color:#1e293b;box-shadow:0 4px 16px #00000080,0 2px 8px #0000004d}.dark-mode .scroll-to-top:hover{background:linear-gradient(135deg,#1e293b,#0f172a);border-color:#334155;box-shadow:0 6px 24px #0009,0 3px 12px #0006}@media (max-width:768px){.scroll-to-top{height:50px;right:.75rem;width:50px}}.json-formatter-container{--bg:#fff;--panel:#fff;--border:#e0e0e0;--text:#222;--muted:#666;--primary:#2563eb;--primary-600:#1d4ed8;--danger:#ef4444;--radius:12px;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;min-height:100vh;padding:20px}.formatter-header{margin-top:-28px}.formatter-title{color:#1a1294;font-size:1.9rem;font-weight:600}.btn{perspective:500px}.error-banner{background:#ef444414;border:4px solid red;border-radius:var(--radius);color:#b91c1c;font-size:15px;margin-bottom:12px;padding:10px 12px}.formatter-sections{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin-bottom:2rem}.panel{background:#fff;border:1px solid #d0d7e0;border-radius:12px;box-shadow:0 4px 12px #1a129414;display:flex;flex-direction:column;max-height:700px;min-height:500px;overflow:hidden}.panel-header{background:#f0f4ff;border-bottom:1px solid #d0d7e0;border-radius:12px 12px 0 0;box-shadow:inset 0 -1px 0 #0000000d;flex-wrap:wrap;gap:10px;padding:10px 14px}.panel-header h2{color:#1a1f36;font-size:1.5rem;letter-spacing:.5px}.panel-actions{flex-wrap:wrap;gap:8px}.output-actions,.panel-actions{align-items:center;display:flex}.output-actions{background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid #e5e7eb;flex-direction:column;gap:12px;padding:12px 16px}.action-btn{border:none;border-radius:8px;display:inline-flex;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem;font-weight:500;gap:6px;padding:6px 12px}.action-btn:disabled{cursor:not-allowed;opacity:.5}.load-sample-btn{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 6px #667eea4d;color:#fff}.load-sample-btn:hover:not(:disabled){box-shadow:0 4px 12px #667eea66;transform:translateY(-2px)}.upload-btn{background:linear-gradient(135deg,#f093fb,#f5576c);box-shadow:0 2px 6px #f5576c4d;color:#fff}.upload-btn:hover:not(:disabled){box-shadow:0 4px 12px #f5576c66;transform:translateY(-2px)}.copy-btn{background:#000;box-shadow:0 2px 6px #0000004d}.copy-btn:hover:not(:disabled){box-shadow:0 4px 12px #00000080;transform:translateY(-2px)}.download-btn{background:#000;box-shadow:0 2px 6px #0000004d;color:#fff}.download-btn:hover:not(:disabled){box-shadow:0 4px 12px #00000080;transform:translateY(-2px)}.search-box{align-items:center;background:#fff;border:1px solid #d0d7e0;border-radius:8px;display:flex;gap:6px;height:32px;min-width:180px;padding:6px 12px;transition:all .2s ease}.search-box:focus-within{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.search-box:has(input:disabled){cursor:not-allowed;opacity:.5}.search-icon{color:#666}.search-input{color:#1a1f36;font-size:.875rem;width:100%}.search-input::placeholder{color:#999}.search-input:disabled{cursor:not-allowed}.output-pre mark{background-color:#fff59d;border-radius:2px;color:#000;padding:0}.text-area{background:#fdfdff;border:none;color:#1a1f36;flex:1 1;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:13px;line-height:1.5;outline:none;resize:none;transition:box-shadow .3s ease,background .3s ease;width:100%}.text-area:focus{background:#fff;box-shadow:0 0 0 4px #2563eb}.text-area.has-error{box-shadow:inset 0 0 0 4px red}.output-pre{background:#f9faff;color:#1a1f36;flex:1 1;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:13px;line-height:1.5;margin:0;overflow:auto;padding:14px;white-space:pre}.json-output-text{background:#fff;flex:1 1;margin:0;overflow-x:auto;overflow-y:auto;padding:0}.json-output-text pre{padding:16px;white-space:pre-wrap;word-break:break-all}.json-output-text pre,.json-viewer{color:#1a1f36;font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:20px;margin:0}.json-viewer{background:#fff;flex:1 1;overflow-x:auto;overflow-y:auto;padding:0;position:relative}.json-line{align-items:center;display:flex;min-height:20px;min-width:-webkit-fit-content;min-width:fit-content;padding:2px 0;transition:background-color .1s ease}.json-line:hover{background-color:#f8f9fa}.line-number{align-items:center;background:#f9fafb;border-right:1px solid #e5e7eb;color:#9ca3af;display:inline-flex;flex-shrink:0;font-size:12px;font-weight:400;justify-content:flex-end;left:0;min-width:50px;padding:0 12px 0 8px;position:-webkit-sticky;position:sticky;text-align:right;-webkit-user-select:none;user-select:none;z-index:1}.json-content{align-items:center;display:flex;flex:1 1;min-width:-webkit-max-content;min-width:max-content;padding-left:8px;padding-right:8px;white-space:nowrap}.json-spacer{display:inline-block;flex-shrink:0;width:20px}.json-toggle{align-items:center;background:none;border:none;border-radius:3px;color:#6b7280;cursor:pointer;display:inline-flex;flex-shrink:0;height:20px;justify-content:center;margin:0;padding:0;transition:all .15s ease;width:20px}.json-toggle:hover{background-color:#e5e7eb;color:#1f2937}.json-toggle:active{background-color:#d1d5db}.json-key{color:#0f766e;font-weight:500;margin-right:2px}.json-string{color:#059669;word-break:break-word}.json-number{color:#2563eb;font-weight:500}.json-boolean{color:#7c3aed;font-weight:600}.json-null{color:#6b7280;font-style:italic;font-weight:500}.json-bracket{color:#374151;font-weight:600;margin:0 2px}.json-colon{color:#6b7280;margin:0 4px 0 2px}.json-comma{color:#6b7280;margin-left:2px}.json-ellipsis{color:#9ca3af;font-size:12px;font-style:italic;margin-left:4px}.json-highlight{background-color:#fef08a;border-radius:2px;color:#854d0e;font-weight:600;padding:1px 2px}.json-line.active-match-line{animation:pulse-row .5s ease;background-color:#fb923c!important}.json-line.active-match-line .line-number{background-color:#f97316!important;color:#fff;font-weight:700}.json-line.active-match-line .json-boolean,.json-line.active-match-line .json-bracket,.json-line.active-match-line .json-colon,.json-line.active-match-line .json-comma,.json-line.active-match-line .json-content,.json-line.active-match-line .json-key,.json-line.active-match-line .json-null,.json-line.active-match-line .json-number,.json-line.active-match-line .json-string{color:#fff!important}.json-line.active-match-line .json-highlight{background-color:#fff;color:#f97316;font-weight:700}@keyframes pulse-row{0%,to{transform:scale(1)}50%{transform:scale(1.002)}}.json-loading{align-items:center;color:var(--muted);display:flex;flex-direction:column;justify-content:center;padding:80px 20px}.json-loading p{font-size:1rem;font-weight:500;margin-top:16px}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.search-container{align-items:center;background:#fff;border:1px solid #d1d5db;border-radius:8px;display:flex;gap:6px;margin-right:20px;padding:6px 12px;transition:all .2s ease;width:395px}.search-container:focus-within{border-color:#2563eb;border-width:2px;box-shadow:0 0 0 2px #000}.search-icon{color:#6b7280;flex-shrink:0}.json-size-info{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border-radius:8px;box-shadow:0 2px 4px #05966933;flex-direction:row;gap:16px;justify-content:center;padding:8px 16px}.json-size-info,.size-item{align-items:center;display:flex}.size-item{font-size:.8rem;gap:6px;line-height:1;white-space:nowrap}.size-label{color:#047857;font-size:.7rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.size-value{align-items:center;color:#065f46;display:flex;font-weight:700;gap:6px}.savings-badge{background:#059669;border-radius:4px;color:#fff;font-size:.7rem;font-weight:700;padding:2px 6px}.json-size-badge{background:#d1fae5;border-radius:8px;display:flex;flex-direction:column;flex-shrink:0;height:20px;margin-right:8px;padding:8px 12px}.json-size-label{color:#047857;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.search-input{background:#0000;border:none;color:#1f2937;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:13px;outline:none;width:590px}.search-input::placeholder{color:#9ca3af}.search-count{background:#f3f4f6;border-radius:12px;color:#6b7280;flex-shrink:0;font-size:12px;font-weight:600;padding:2px 8px;white-space:nowrap}.search-clear{align-items:center;background:#0000;border:none;border-radius:50%;color:#9ca3af;cursor:pointer;display:flex;justify-content:center;margin-left:4px;padding:4px;transition:all .2s ease}.search-clear:hover{background:#f3f4f6;color:#ef4444}.search-navigation{display:flex;gap:4px;margin-left:4px}.nav-arrow{align-items:center;background:#fff;border:1px solid #d1d5db;border-radius:4px;color:#6b7280;cursor:pointer;display:flex;justify-content:center;padding:4px;transition:all .2s ease}.nav-arrow:hover{background:#f3f4f6;border-color:#9ca3af;color:#374151}.expand-btn{background:#000;box-shadow:0 2px 6px #0000004d;color:#fff}.expand-btn:hover:not(:disabled){box-shadow:0 4px 12px #00000080;transform:translateY(-2px)}.collapse-btn{background:#000;box-shadow:0 2px 6px #0000004d;color:#fff}.collapse-btn:hover:not(:disabled){box-shadow:0 4px 12px #00000080;transform:translateY(-2px)}.panel:hover{box-shadow:0 6px 18px #1a129426;transform:translateY(-2px);transition:all .25s ease}.json-documentation{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}.doc-header{border-bottom:2px solid #e0e7ff;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem}.doc-header,.doc-main-heading{align-items:center;display:flex}.doc-main-heading{color:#1a1294;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:800;gap:.5rem;margin:0}.doc-controls{display:flex;gap:.5rem}.doc-control-btn{align-items:center;background:#fff;border:1px solid #cbd5e1;border-radius:6px;color:#475569;cursor:pointer;display:flex;font-size:12px;font-weight:600;gap:4px;padding:6px 12px;transition:all .2s ease}.doc-control-btn:hover{background:#f8fafc;border-color:#94a3b8;color:#1e293b}.doc-section-header{cursor:pointer;margin-bottom:0;transition:all .2s ease;-webkit-user-select:none;user-select:none}.doc-section-header:hover{opacity:.8}.doc-section-header .doc-heading{margin-bottom:0}.doc-section-content{animation:slideDown .3s ease;margin-top:1rem}.two-column-list{grid-gap:0 2rem;display:grid;gap:0 2rem;grid-template-columns:repeat(2,1fr)}@media (max-width:768px){.two-column-list{grid-template-columns:1fr}}.implementation-table{margin-top:1rem}.table-row{grid-gap:0;gap:0;grid-template-columns:100px 1.5fr 2.5fr}.table-header{color:#fff!important}.table-header,.table-header:hover{background:linear-gradient(135deg,#667eea,#764ba2)!important}.table-header .table-cell{color:#fff!important;font-weight:600}.table-header .table-cell mark{background:#0000!important;color:#fff!important}.table-cell{padding:12px 16px;word-break:break-word}.table-cell.code{font-size:.85rem;padding:12px 16px}.json-element{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:6px;color:#fff;font-size:.85rem;font-weight:600;padding:.25rem .75rem}.json-syntax-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);margin-top:1rem}.syntax-card{background:#fff;border:1px solid #d0d7e0;border-radius:8px;box-shadow:0 2px 4px #0000000d;padding:1.25rem;transition:all .3s ease}.syntax-card:hover{border-color:#667eea;box-shadow:0 6px 16px #667eea33;transform:translateY(-3px)}.syntax-description,.syntax-header{margin-bottom:.75rem}.syntax-description{color:#475569;font-family:Inter,system-ui,-apple-system,sans-serif}.syntax-example{word-wrap:break-word;background:#f0f4ff;border-left:3px solid #667eea;border-radius:6px;color:#1a1294;font-family:Courier New,monospace;font-size:.875rem;font-weight:500;overflow-wrap:break-word;padding:.75rem 1rem}@media (max-width:768px){.json-syntax-grid{gap:1rem;grid-template-columns:1fr}}.practice-card{background:linear-gradient(135deg,#f8faff,#fff);border:1px solid #d0d7e0;border-radius:8px;display:flex;gap:.75rem}.practice-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26}.practice-content h4{color:#1a1294;font-size:.95rem;font-weight:600;margin:0 0 .25rem}.practice-content h4,.practice-content p{font-family:Inter,system-ui,-apple-system,sans-serif}.practice-content p{color:#4a5568;font-size:.85rem;line-height:1.4;margin:0}.dark-mode .doc-section,.dark-mode .panel{background:#2d2d2d;border-color:#404040;color:#e5e7eb}.dark-mode .panel-header{background:#1a1a1a;border-color:#404040}.dark-mode .json-size-info{background:linear-gradient(135deg,#10b98133,#05966926)}.dark-mode .size-label{color:#6ee7b7}.dark-mode .size-value{color:#a7f3d0}.dark-mode .savings-badge{background:#10b981}.dark-mode .doc-heading,.dark-mode .info-card h3,.dark-mode .panel-header h2,.dark-mode .practice-content h4{color:#a5b4fc}.dark-mode .doc-list,.dark-mode .doc-text,.dark-mode .practice-content p,.dark-mode .table-cell{color:#d1d5db}.dark-mode .info-card,.dark-mode .practice-card{background:#1a1a1a;border-color:#404040}.dark-mode .output-pre,.dark-mode .text-area{background:#1a1a1a;color:#e5e7eb}.json-key-clickable{border-radius:3px;cursor:pointer;padding:2px 4px;transition:all .2s ease}.json-key-clickable:hover{background:#2563eb1a;text-decoration:underline}.json-stats-container{align-items:center;display:flex;gap:12px}.json-minified-badge{background:linear-gradient(135deg,#10b981,#059669);border-radius:8px;box-shadow:0 2px 4px #10b98133;display:flex;flex-direction:column;gap:2px;padding:8px 12px}.json-minified-badge .json-size-label{color:#ffffffe6;font-size:.7rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.json-minified-badge .json-size-value{color:#fff;font-size:.9rem;font-weight:700}.json-savings{align-self:flex-start;background:#0003;border-radius:4px;color:#fffffff2;font-size:.75rem;font-weight:600;padding:2px 6px}.json-validation-stats{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border-radius:8px;display:flex;flex-wrap:wrap;gap:12px;padding:8px 12px}.validation-badge{align-items:center;border-radius:6px;display:flex;font-size:.85rem;font-weight:600;gap:4px;padding:6px 12px}.validation-badge.valid{background:#d1fae5;box-shadow:0 2px 4px #10b98133;color:#065f46}.dark-mode .validation-badge.valid{background:#10b98140;color:#6ee7b7}.stat-item{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#fff3;border-radius:6px;color:#fff;cursor:help;font-size:.8rem;font-weight:600;padding:6px 10px;transition:all .2s ease}.stat-item:hover{background:#ffffff4d;transform:translateY(-1px)}.dark-mode .stat-item{background:#ffffff26;color:#e5e7eb}.dark-mode .stat-item:hover{background:#ffffff40}.path-copied-toast{align-items:center;animation:slideInRight .3s ease,slideOutRight .3s ease 1.7s;background:#10b981;border-radius:8px;box-shadow:0 4px 12px #10b9814d;color:#fff;display:flex;font-size:.9rem;font-weight:500;gap:8px;padding:12px 20px;position:fixed;right:20px;top:80px;z-index:1000}@keyframes slideInRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}.action-btn.active{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px #10b98166;color:#fff}.action-btn.active:hover{box-shadow:0 6px 16px #10b98180;transform:translateY(-2px)}.shortcuts-modal-overlay{align-items:center;animation:fadeIn .2s ease;background:#0009;bottom:0;display:flex;justify-content:center;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:10000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.shortcuts-modal{animation:slideUp .3s ease;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-height:85vh;max-width:800px;overflow-y:auto;position:relative;width:90%}.shortcuts-modal-header{align-items:center;border-bottom:2px solid #e5e7eb;display:flex;justify-content:space-between;padding:24px 28px}.shortcuts-modal-header h2{color:#1a1294;font-size:1.5rem;font-weight:700;margin:0}.modal-close-btn{background:none;border:none;border-radius:8px;color:#6b7280;cursor:pointer;padding:8px;transition:all .2s ease}.modal-close-btn:hover{background:#f3f4f6;color:#1f2937}.shortcuts-modal-content{padding:28px}.shortcuts-table{border-collapse:collapse;margin-bottom:20px;width:100%}.shortcuts-table thead th{background:#f3f4f6;border-bottom:2px solid #e5e7eb;color:#374151;font-size:.95rem;font-weight:600;padding:12px 16px;text-align:left}.shortcuts-table tbody td{border-bottom:1px solid #e5e7eb;color:#4b5563;font-size:.95rem;padding:14px 16px}.shortcuts-table tbody tr:last-child td{border-bottom:none}.shortcuts-table tbody tr:hover{background:#f9fafb}.shortcuts-table tbody td:first-child{color:#374151;font-weight:500}.shortcuts-table kbd{background:linear-gradient(180deg,#f9fafb 0,#e5e7eb);border:1px solid #d1d5db;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#374151;display:inline-block;font-family:SF Mono,Monaco,Consolas,monospace;font-size:.85rem;font-weight:600;margin:0 2px;min-width:40px;padding:6px 12px;text-align:center}.shortcut-item{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;padding:14px 0}.shortcut-item:last-of-type{border-bottom:none}.shortcut-keys{align-items:center;display:flex;gap:6px}.shortcut-keys kbd{background:linear-gradient(180deg,#f9fafb 0,#e5e7eb);border:1px solid #d1d5db;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#374151;font-family:SF Mono,Monaco,Consolas,monospace;font-size:.85rem;font-weight:600;min-width:40px;padding:6px 12px;text-align:center}.shortcut-keys .os-label{color:#9ca3af;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.75rem;font-weight:500}.shortcut-description{color:#4b5563;font-size:.95rem;font-weight:500}.shortcut-tip{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-left:4px solid #3b82f6;border-radius:10px;color:#1e40af;font-size:.9rem;margin-top:20px;padding:16px}.shortcut-tip strong{font-weight:700}.dark-mode .shortcuts-modal{background:#1f1f1f}.dark-mode .shortcuts-modal-header{border-bottom-color:#404040}.dark-mode .shortcuts-modal-header h2{color:#a5b4fc}.dark-mode .modal-close-btn{color:#9ca3af}.dark-mode .modal-close-btn:hover{background:#ffffff1a;color:#e5e7eb}.dark-mode .shortcut-item{border-bottom-color:#404040}.dark-mode .shortcut-keys kbd{background:linear-gradient(180deg,#2d2d2d 0,#1a1a1a);border-color:#404040;box-shadow:0 2px 4px #0000004d;color:#e5e7eb}.dark-mode .shortcut-description{color:#d1d5db}.dark-mode .shortcut-tip{background:#3b82f626;border-left-color:#3b82f6;color:#93c5fd}@media (max-width:768px){.best-practices-grid,.implementation-info{grid-template-columns:1fr}.table-row{grid-template-columns:100px 1fr}.table-cell:last-child{border-top:1px solid #e0e7ff;grid-column:1/-1}.json-validation-stats{align-items:flex-start;flex-direction:column;gap:8px}.shortcuts-modal{max-height:90vh;width:95%}.shortcuts-modal-header{padding:18px 20px}.shortcuts-modal-content{padding:20px}.shortcut-item{align-items:flex-start;flex-direction:column;gap:8px}.path-copied-toast{left:10px;max-width:calc(100% - 20px);right:10px}.empty-state-guide{padding:15px}.guide-title{font-size:1rem}.guide-features,.guide-shortcuts{padding:10px}.guide-shortcuts-grid{grid-template-columns:1fr}}.empty-state-guide{background:linear-gradient(135deg,#f5f7fa,#fff);height:100%}.empty-state-guide,.empty-state-guide-overlay{align-items:center;border-radius:8px;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;padding:20px;text-align:center}.empty-state-guide-overlay{background:linear-gradient(135deg,#f5f7fafa,#fffffffa);bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:opacity .2s ease;z-index:1}.empty-state-guide-overlay:hover{background:linear-gradient(135deg,#f5f7faf2,#fffffff2)}.empty-state-guide-overlay .guide-tip{cursor:pointer}.guide-icon{animation:float 3s ease-in-out infinite;font-size:2.5rem;margin-bottom:8px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.guide-title{color:#1a1294;font-size:1.1rem;font-weight:700;letter-spacing:-.3px;margin:0 0 6px}.guide-subtitle{color:#6b7280;font-size:.8rem;line-height:1.4;margin:0 0 15px;max-width:400px}.guide-features{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000000f;margin-bottom:12px;padding:12px;width:100%}.feature-item{align-items:center;border-radius:6px;display:flex;gap:8px;padding:6px 8px;text-align:left;transition:all .2s ease}.feature-item:hover{background:#f9fafb;transform:translateX(5px)}.feature-icon{flex-shrink:0;font-size:1.2rem}.feature-text{color:#374151;font-size:.8rem;font-weight:500}.guide-shortcuts{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;box-shadow:0 4px 12px #667eea4d;margin-bottom:12px;padding:12px;width:100%}.guide-shortcuts-title{color:#fff;font-size:.85rem;font-weight:600;margin:0 0 10px}.guide-shortcuts-grid{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.guide-shortcut-item{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border-radius:6px;display:flex;flex-direction:column;gap:4px;padding:8px;transition:all .2s ease}.guide-shortcut-item:hover{background:#ffffff40;transform:translateY(-2px)}.guide-shortcut-item kbd{background:#0000004d;border:1px solid #fff3;border-radius:4px;box-shadow:0 2px 4px #0003;color:#fff;font-family:SF Mono,Monaco,Courier New,monospace;font-size:.75rem;font-weight:600;padding:4px 8px}.guide-shortcut-item span{color:#fffffff2;font-size:.75rem;font-weight:500}.guide-tip{align-items:center;background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #fbbf24;border-radius:8px;box-shadow:0 2px 8px #fbbf244d;display:flex;gap:8px;padding:10px 14px}.tip-icon{font-size:1.2rem}.tip-text{color:#92400e;font-size:.75rem;font-weight:600}.guide-stats{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000000f;margin-top:12px;padding:12px;width:100%}.stats-title{color:#1a1294;font-size:.85rem;font-weight:600;margin:0 0 10px}.stats-items{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.stat-badge{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;box-shadow:0 2px 6px #667eea4d;color:#fff;display:inline-flex;font-size:.7rem;font-weight:600;padding:6px 10px;transition:all .2s ease}.stat-badge:hover{box-shadow:0 4px 12px #667eea66;transform:translateY(-2px)}.sample-dropdown-wrapper{align-items:center;display:flex;gap:8px}.sample-dropdown-label{color:#fff;font-weight:600;white-space:nowrap}.sample-dropdown,.sample-dropdown-label{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.875rem}.sample-dropdown{background:#fff;border:2px solid #667eea;border-radius:8px;color:#333;cursor:pointer;font-weight:500;min-width:200px;outline:none;padding:6px 12px;transition:all .2s ease}.sample-dropdown:hover{border-color:#764ba2;box-shadow:0 2px 6px #667eea33}.sample-dropdown:focus{border-color:#764ba2;box-shadow:0 0 0 3px #667eea26}.sample-dropdown option{background:#fff;color:#333;font-size:.875rem;padding:8px}.sample-dropdown option:first-child{color:#999}.csv-btn{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 2px 6px #10b9814d;color:#fff}.csv-btn:hover:not(:disabled){box-shadow:0 4px 12px #10b98166;transform:translateY(-2px)}.validation-badge.csv-ready{background:linear-gradient(135deg,#10b981,#059669);border:1px solid #10b981}@media (max-width:768px){.sample-dropdown-wrapper{align-items:flex-start;flex-direction:column;gap:4px}.sample-dropdown-label{font-size:.75rem}.sample-dropdown{font-size:.8rem;min-width:160px;padding:5px 10px}}.back-to-tools-container{align-items:center;display:flex;justify-content:center;margin-top:-45px;padding:2px 0}.back-to-tools-btn{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;box-shadow:0 4px 12px #667eea4d;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:8px;padding:12px 24px;transition:all .3s ease}.back-to-tools-btn:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1);box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.back-to-tools-btn:active{box-shadow:0 2px 8px #667eea4d;transform:translateY(0)}.back-to-tools-btn .btn-icon{font-size:18px;line-height:1}.back-to-tools-btn:focus{box-shadow:0 0 0 3px #667eea4d;outline:none}@media (max-width:768px){.back-to-tools-container{margin-bottom:15px;padding:15px 0}.back-to-tools-btn{font-size:14px;padding:10px 20px}.back-to-tools-btn .btn-icon{font-size:16px}}.password-generator-container{font-family:Inter,system-ui,-apple-system,sans-serif;padding:1rem}.formatter-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.formatter-title{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:700}.formatter-actions{display:flex;gap:12px}.panel-header h2{color:#1e293b;margin-bottom:1rem}.options-horizontal{align-items:center;gap:1.5rem}.option-item{align-items:center}.length-slider{min-width:180px}.option-label{margin-right:.75rem}.slider-container{align-items:center;display:flex;gap:.75rem}.length-input{accent-color:#2563eb;cursor:pointer;width:100px}.length-value{color:#2563eb;font-size:.95rem;font-weight:700;min-width:28px;text-align:center}.checkbox-label{align-items:center;color:#475569;cursor:pointer;display:flex;font-size:.9rem;font-weight:500;gap:.5rem}.checkbox-label input[type=checkbox]{accent-color:#2563eb;cursor:pointer;height:18px;width:18px}.checkbox-label span{-webkit-user-select:none;user-select:none}.password-display{align-items:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:2px solid #e2e8f0;border-radius:10px;display:flex;justify-content:space-between;min-height:60px;padding:1.25rem}.password-text{color:#1e293b;flex:1 1;font-family:Courier New,monospace;font-size:1.1rem;font-weight:600;word-break:break-all}.password-actions{display:flex;gap:8px;margin-left:1rem}.icon-btn{border-radius:8px;padding:8px}.icon-btn:hover{box-shadow:0 4px 8px #2563eb4d;transform:translateY(-2px)}.icon-btn:disabled{cursor:not-allowed;opacity:.4}.icon-btn:disabled:hover{background:#fff;border-color:#e2e8f0;box-shadow:none;transform:none}.password-documentation{margin-top:2rem}.character-table{border:1px solid #e2e8f0;border-radius:8px;margin:1rem 0;overflow:hidden}.table-row{grid-template-columns:1.5fr .75fr 3fr}.col-character{align-items:center;display:flex}.col-count{color:#2563eb;font-size:1rem;font-weight:600}.col-description{color:#64748b;font-size:.9rem}.char-badge{border-radius:6px;display:inline-block;font-family:Courier New,monospace;font-size:.85rem;font-weight:700;padding:.35rem .75rem}.char-badge.uppercase{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.char-badge.lowercase{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.char-badge.numbers{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.char-badge.symbols{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}@media (max-width:768px){.options-horizontal{align-items:flex-start;flex-direction:column;gap:1rem}.length-slider,.slider-container{width:100%}.length-input{flex:1 1}.password-display{align-items:flex-start;flex-direction:column;gap:1rem}.password-actions{margin-left:0}.best-practices-grid,.implementation-info,.table-row{grid-template-columns:1fr}.table-row{gap:.5rem}.col-count,.col-description{padding-left:.5rem}}.dark-mode .doc-heading,.dark-mode .panel-header h2{color:#e5e7eb}.dark-mode .password-display{background:linear-gradient(135deg,#1e293b,#334155);border-color:#475569}.dark-mode .password-text{color:#e5e7eb}.dark-mode .icon-btn{background:#374151;border-color:#4b5563}.dark-mode .checkbox-label,.dark-mode .option-label{color:#d1d5db}.dark-mode .length-value{color:#60a5fa}.dark-mode .doc-list li,.dark-mode .doc-text{color:#d1d5db}.dark-mode .character-table{border-color:#475569}.dark-mode .col-count{color:#60a5fa}.dark-mode .col-description{color:#9ca3af}.uuid-generator-container{font-family:Inter,system-ui,-apple-system,sans-serif;padding:1rem}.uuid-formatter-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.uuid-formatter-title{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:700}.uuid-formatter-actions{display:flex;gap:12px}.generator-panel{background:#fff;border-radius:12px;box-shadow:0 4px 8px #00000014;margin-bottom:2rem;padding:1.5rem}.uuid-panel-header{margin-bottom:1rem}.uuid-panel-header h2{color:#1e293b;font-size:1.2rem;font-weight:600;margin:0}.options-horizontal{align-items:flex-start;display:flex;flex-wrap:wrap;gap:2rem;margin-bottom:1.5rem}.option-item{display:flex;flex-direction:column;gap:.5rem}.option-label{align-items:center;color:#475569;display:flex;font-size:.9rem;font-weight:600;height:1.2rem}.count-input,.version-select{background:#fff;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;font-family:Inter,sans-serif;font-size:.95rem;padding:.5rem .75rem;transition:all .2s}.version-select{min-width:220px}.count-input{width:80px}.count-input:hover,.version-select:hover{border-color:#2563eb}.count-input:focus,.version-select:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a;outline:none}.count-hint{color:#94a3b8;font-size:.8rem;margin-top:-.25rem}.uuid-output{grid-gap:.75rem;align-content:start;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:2px solid #e2e8f0;border-radius:10px;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));max-height:400px;min-height:200px;overflow-y:auto;padding:1rem}.empty-state{color:#94a3b8;font-size:1rem;font-style:italic;grid-column:1/-1;justify-content:center;min-height:180px}.empty-state,.uuid-item{align-items:center;display:flex}.uuid-item{background:#fff;border:1px solid #e2e8f0;border-radius:8px;height:-webkit-fit-content;height:fit-content;justify-content:space-between;min-width:320px;padding:.6rem .75rem;transition:all .2s}.uuid-item:hover{background:#e8ca23;border-color:#2563eb;box-shadow:0 2px 8px #2563eb26;transform:translateY(-2px)}.uuid-value{color:#1e293b;flex:1 1;font-family:Courier New,monospace;font-size:.75rem;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-btn{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;display:flex;justify-content:center;margin-left:.75rem;padding:6px;transition:all .2s}.icon-btn:hover{background:#2563eb;border-color:#2563eb;color:#fff;transform:scale(1.1)}.uuid-documentation{margin-top:2rem}.doc-section{box-shadow:0 2px 6px #0000000f}.doc-text{margin-bottom:.75rem}.doc-text code{background:#f1f5f9;border-radius:4px;color:#1e40af;font-family:Courier New,monospace;font-size:.9rem;padding:.2rem .5rem}.doc-list li{border-bottom:1px solid #f1f5f9}.doc-list li strong{color:#1e293b}.uuid-version-table{border:1px solid #e2e8f0;border-radius:8px;margin:1rem 0;overflow:hidden}.table-row{grid-template-columns:1.2fr 2fr 2fr}.table-row:not(.header-row):hover{background:#f8fafc}.header-row{background:linear-gradient(135deg,#2563eb,#1e40af)}.col-version{align-items:center;display:flex}.col-method,.col-use-case{color:#64748b;font-size:.9rem}.version-badge{border-radius:6px;display:inline-block;font-family:Courier New,monospace;font-size:.85rem;font-weight:700;padding:.35rem .75rem}.version-badge.v1{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.version-badge.v4{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.doc-note{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-left:4px solid #2563eb;border-radius:6px;color:#1e40af;font-size:.9rem;margin-top:1rem}.doc-note strong{color:#1e3a8a}.doc-note code{background:#bfdbfe;border-radius:4px;color:#1e3a8a;font-family:Courier New,monospace;font-size:.85rem;padding:.15rem .4rem}.info-card{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;padding:1.25rem}.info-card h3{color:#1e293b;font-size:1.05rem;font-weight:600;margin-bottom:.75rem}.info-card p{color:#475569;font-size:.9rem;line-height:1.6;margin-bottom:1rem}.info-card code{border-radius:4px;color:#10b981;padding:.15rem .4rem}.code-sample,.info-card code{background:#1e293b;font-family:Courier New,monospace;font-size:.85rem}.code-sample{border-radius:6px;color:#e2e8f0;line-height:1.6;overflow-x:auto;padding:1rem;white-space:pre}.best-practices-grid{grid-gap:1.25rem;gap:1.25rem}.practice-card{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;padding:1.25rem;transition:all .3s ease}.practice-card:hover{border-color:#2563eb;box-shadow:0 8px 16px #2563eb26;transform:translateY(-4px)}.practice-icon{margin-bottom:.75rem}.practice-card h3{color:#1e293b;font-weight:600;margin-bottom:.5rem}.practice-card p{color:#64748b;font-size:.9rem;line-height:1.6}.warning-section{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-left:4px solid #ef4444}.warning-section .doc-heading{color:#991b1b}.warning-list li{border-bottom-color:#fecaca;color:#7f1d1d}@media (max-width:768px){.options-horizontal{align-items:flex-start;flex-direction:column;gap:1rem}.version-select{width:100%}.best-practices-grid,.implementation-info,.table-row{grid-template-columns:1fr}.table-row{gap:.5rem}.col-method,.col-use-case{padding-left:.5rem}}.dark-mode .doc-section,.dark-mode .generator-panel{background:#2d2d2d;box-shadow:0 4px 12px #0000004d}.dark-mode .doc-heading,.dark-mode .uuid-panel-header h2{color:#e5e7eb}.dark-mode .uuid-output{background:linear-gradient(135deg,#1e293b,#334155);border-color:#475569}.dark-mode .empty-state{color:#9ca3af}.dark-mode .uuid-item{background:#374151;border-color:#4b5563}.dark-mode .uuid-item:hover{border-color:#60a5fa}.dark-mode .uuid-value{color:#e5e7eb}.dark-mode .icon-btn{background:#4b5563;border-color:#6b7280;color:#e5e7eb}.dark-mode .icon-btn:hover{background:#2563eb;border-color:#2563eb}.dark-mode .option-label{color:#d1d5db}.dark-mode .count-input,.dark-mode .version-select{background:#374151;border-color:#4b5563;color:#e5e7eb}.dark-mode .count-input:hover,.dark-mode .version-select:hover{border-color:#60a5fa}.dark-mode .count-hint{color:#9ca3af}.dark-mode .doc-text{color:#d1d5db}.dark-mode .doc-text code{background:#374151;color:#60a5fa}.dark-mode .doc-list li{color:#d1d5db}.dark-mode .doc-list li strong{color:#f3f4f6}.dark-mode .uuid-version-table{border-color:#475569}.dark-mode .table-row:not(.header-row){border-bottom-color:#374151}.dark-mode .table-row:not(.header-row):hover{background:#374151}.dark-mode .col-method,.dark-mode .col-use-case{color:#9ca3af}.dark-mode .doc-note{background:linear-gradient(135deg,#1e3a5f,#1e40af);border-left-color:#60a5fa;color:#dbeafe}.dark-mode .doc-note strong{color:#bfdbfe}.dark-mode .doc-note code{background:#1e3a5f;color:#93c5fd}.dark-mode .info-card,.dark-mode .practice-card{background:linear-gradient(135deg,#374151,#4b5563);border-color:#6b7280}.dark-mode .info-card h3,.dark-mode .practice-card h3{color:#f3f4f6}.dark-mode .info-card p,.dark-mode .practice-card p{color:#d1d5db}.dark-mode .info-card code{background:#1e293b;color:#34d399}.dark-mode .code-sample{background:#0f172a;color:#e2e8f0}.dark-mode .warning-section{background:linear-gradient(135deg,#3f1f1f,#5a2424);border-left-color:#ef4444}.dark-mode .warning-section .doc-heading{color:#fca5a5}.dark-mode .warning-list li{border-bottom-color:#7f1d1d;color:#fecaca}.caseconverter-container{font-family:Inter,system-ui,-apple-system,sans-serif;padding:1rem}.caseconverter-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.caseconverter-title{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:700}.converter-panel{background:#fff;border-radius:12px;box-shadow:0 4px 8px #00000014;margin-bottom:2rem;padding:1.5rem}.panel-sections{display:flex;flex-direction:column;gap:1.5rem}.section-header{margin-bottom:.75rem}.section-header h2{color:#1e293b;font-size:1.1rem;font-weight:600;margin:0}.input-section{display:flex;flex-direction:column}.input-textarea{border:2px solid #e2e8f0;border-radius:10px;font-family:Courier New,monospace;font-size:.95rem;height:50px;line-height:1.6;max-height:50px;padding:.5rem 1rem;resize:none;transition:all .2s;width:100%}.input-textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a;outline:none}.output-section{display:flex;flex-direction:column}.output-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));max-height:350px;overflow-y:auto;padding-right:.5rem}.output-item{display:flex;flex-direction:column;gap:.3rem}.case-label-container{align-items:center;display:flex;gap:.5rem}.case-badge{border-radius:50%;display:inline-block;height:10px;width:10px}.case-badge-camelCase{background:linear-gradient(135deg,#a78bfa,#8b5cf6)}.case-badge-PascalCase{background:linear-gradient(135deg,#60a5fa,#3b82f6)}.case-badge-snakecase{background:linear-gradient(135deg,#34d399,#10b981)}.case-badge-kebabcase{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.case-badge-CONSTANTCASE{background:linear-gradient(135deg,#f87171,#ef4444)}.case-badge-TitleCase{background:linear-gradient(135deg,#2dd4bf,#14b8a6)}.case-badge-lowercase{background:linear-gradient(135deg,#9ca3af,#6b7280)}.case-badge-UPPERCASE{background:linear-gradient(135deg,#fde68a,#fbbf24)}.case-label{color:#475569;font-size:.85rem;font-weight:600}.case-output{align-items:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;border-radius:8px;display:flex;justify-content:space-between;padding:.5rem .75rem;transition:all .2s}.case-output:hover{border-color:#2563eb;box-shadow:0 2px 6px #2563eb26}.output-text{color:#1e293b;flex:1 1;font-family:Courier New,monospace;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.copy-icon-btn{align-items:center;background:none;border:none;border-radius:6px;cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:.25rem;transition:all .2s}.copy-icon-btn:hover{background:#e2e8f0;transform:scale(1.1)}.case-documentation{margin-top:2rem}.doc-section{box-shadow:0 4px 8px #00000014;margin-bottom:1.5rem}.doc-list li{color:#475569;margin-bottom:.5rem}.doc-list li:last-child{margin-bottom:0}.case-types-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:1rem}.case-type-card{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:2px solid #e2e8f0;border-radius:10px;padding:1rem;transition:all .3s}.case-type-card:hover{border-color:#2563eb;box-shadow:0 6px 16px #2563eb26;transform:translateY(-4px)}.case-type-header{align-items:center;display:flex;gap:.5rem;margin-bottom:.75rem}.case-type-header h3{color:#1e293b;font-size:1.1rem;font-weight:700;margin:0}.case-example{background:#fff;border:1px solid #e2e8f0;border-radius:6px;color:#2563eb;font-family:Courier New,monospace;font-size:1rem;font-weight:600;margin:.5rem 0;padding:.5rem}.case-description{color:#64748b;font-size:.9rem;line-height:1.5;margin:0}.doc-code{background:#1e293b;border-radius:8px;color:#e2e8f0;font-family:Courier New,monospace;font-size:.9rem;margin:1rem 0;overflow-x:auto;padding:1rem}.best-practices-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);margin-top:1rem}@media (max-width:768px){.best-practices-grid{grid-template-columns:1fr}}.practice-card{background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #fbbf24;border-radius:10px;padding:1rem;transition:all .2s}.practice-card:hover{box-shadow:0 4px 12px #fbbf244d;transform:translateY(-2px)}.practice-icon{font-size:2rem;margin-bottom:.5rem}.practice-card h3{color:#78350f;font-size:1rem;font-weight:700;margin:0 0 .5rem}.practice-card p{color:#92400e;font-size:.85rem;line-height:1.5;margin:0}.quick-ref-table,.reference-table{background:#fff;border-collapse:initial;border-radius:10px;border-spacing:0;box-shadow:0 2px 8px #0000000d;margin-top:1rem;overflow:hidden;width:100%}.table-row{align-items:center;grid-template-columns:60px 1.5fr 1.5fr 2fr;transition:background .2s}.table-row:not(.header-row):hover{background:#fefce8}.header-row{background:linear-gradient(135deg,#eab308,#ca8a04);color:#fff;font-size:.9rem;font-weight:700}.table-row:not(.header-row){border-bottom:1px solid #f1f5f9}.col-number{align-items:center;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:50%;color:#78350f;display:flex;font-size:1rem;font-weight:700;height:32px;justify-content:center;margin:0 auto;text-align:center;width:32px}.header-row .col-number{background:#fff3;color:#fff;font-size:.9rem}.col-context{color:#1e293b;font-weight:600;text-align:center}.col-case,.col-recommended{color:#2563eb;font-weight:600}.col-case,.col-example,.col-recommended{font-family:Courier New,monospace;text-align:center}.col-example{color:#64748b;font-size:.85rem}.highlight-section{background:linear-gradient(135deg,#fefce8,#fef9c3);border:2px solid #eab308}.doc-note{background:linear-gradient(135deg,#fef3c7,#fde68a);border-left:4px solid #eab308;border-radius:8px;color:#78350f;font-size:.95rem;line-height:1.6;margin-top:1.5rem;padding:1rem}.doc-note strong{color:#92400e;font-weight:700}.base64-container{font-family:Inter,system-ui,-apple-system,sans-serif;padding:1rem}.base64-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.base64-title{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:700}.base64-actions{display:flex;gap:12px}.base64-sections{grid-gap:1.2rem;display:grid;gap:1.2rem;grid-template-columns:1fr 1fr}.base64-panel{background:#fff;border:1px solid #d0d7e0;border-radius:12px;box-shadow:0 4px 12px #1a129414;display:flex;flex-direction:column;min-height:250px;overflow:hidden}.base64-panel-header{align-items:center;background:#f0f4ff;border-bottom:1px solid #d0d7e0;border-radius:12px 12px 0 0;box-shadow:inset 0 -1px 0 #0000000d;display:flex;justify-content:space-between;padding:10px 14px}.base64-panel-header h2{color:#1a1f36;font-size:1.5rem;font-weight:600;letter-spacing:.5px;margin:0}.base64-textarea{background:#fff;border:none;color:#2d3748;flex:1 1;font-family:Courier New,Courier,monospace;font-size:.95rem;line-height:1.6;outline:none;padding:1rem;resize:none}.base64-textarea::placeholder{color:#a0aec0}.base64-output{word-wrap:break-word;background:#f7fafc;border:none;color:#2d3748;flex:1 1;font-family:Courier New,Courier,monospace;font-size:.95rem;line-height:1.6;margin:0;outline:none;overflow-y:auto;padding:1rem;white-space:pre-wrap}.base64-copy-btn{align-items:center;background:#1a1294;border:none;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#fff;cursor:pointer;display:flex;font-size:.85rem;font-weight:600;gap:.4rem;padding:.4rem .8rem;transition:all .2s ease}.base64-copy-btn:hover{background:linear-gradient(45deg,#1a1294,#4b3aff);box-shadow:0 4px 8px #1a12944d;transform:translateY(-2px)}.base64-copy-btn:active{transform:translateY(0)}@media (max-width:768px){.base64-sections{grid-template-columns:1fr}.base64-header{align-items:flex-start;flex-direction:column;gap:1rem}.base64-actions{flex-wrap:wrap;width:100%}.btn{flex:1 1;min-width:-webkit-fit-content;min-width:fit-content}.base64-panel{min-height:400px}.implementation-info{grid-template-columns:1fr}.table-row{grid-template-columns:60px 1fr}.table-cell:last-child{border-top:1px solid #e0e7ff;grid-column:1/-1}}.base64-documentation{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}.dark-mode .base64-panel,.dark-mode .doc-section{background:#2d2d2d;border-color:#404040;color:#e5e7eb}.dark-mode .base64-panel-header{background:#1a1a1a;border-color:#404040}.dark-mode .base64-panel-header h2,.dark-mode .doc-heading,.dark-mode .info-card h3{color:#a5b4fc}.url-container{font-family:Inter,system-ui,-apple-system,sans-serif;padding:1rem}.url-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.url-title{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:700}.url-actions{display:flex;gap:12px}.btn{box-shadow:0 4px 6px #00000026;padding:.5rem 1rem}.btn-primary:disabled{background:#888;box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}.btn-primary:not(:disabled):hover{background:linear-gradient(45deg,#1a1294,#4b3aff);box-shadow:0 12px 24px #1a129480;transform:translateY(-6px) scale(1.05)}.url-sections{grid-gap:1.2rem;display:grid;gap:1.2rem;grid-template-columns:1fr 1fr}.url-panel{background:#fff;border:1px solid #d0d7e0;border-radius:12px;box-shadow:0 4px 12px #1a129414;display:flex;flex-direction:column;min-height:250px;overflow:hidden}.url-panel-header{align-items:center;background:#f0f4ff;border-bottom:1px solid #d0d7e0;border-radius:12px 12px 0 0;box-shadow:inset 0 -1px 0 #0000000d;display:flex;justify-content:space-between;padding:10px 14px}.url-panel-header h2{color:#1a1f36;font-size:1.5rem;font-weight:600;letter-spacing:.5px;margin:0}.url-textarea{background:#fff;border:none;color:#2d3748;flex:1 1;font-family:Courier New,Courier,monospace;font-size:.95rem;line-height:1.6;outline:none;padding:1rem;resize:none}.url-textarea::placeholder{color:#a0aec0}.url-output{word-wrap:break-word;background:#f7fafc;border:none;color:#2d3748;flex:1 1;font-family:Courier New,Courier,monospace;font-size:.95rem;line-height:1.6;margin:0;outline:none;overflow-y:auto;padding:1rem;white-space:pre-wrap}.url-copy-btn{align-items:center;background:#1a1294;border:none;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#fff;cursor:pointer;display:flex;font-size:.85rem;font-weight:600;gap:.4rem;padding:.4rem .8rem;transition:all .2s ease}.url-copy-btn:hover{background:linear-gradient(45deg,#1a1294,#4b3aff);box-shadow:0 4px 8px #1a12944d;transform:translateY(-2px)}.url-copy-btn:active{transform:translateY(0)}.url-documentation{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}.implementation-table{background:#fff;border:1px solid #d0d7e0;border-radius:8px;overflow:hidden}.table-row{grid-template-columns:80px 1fr 1fr}.encoding-table{background:#fff;border:1px solid #d0d7e0;border-radius:8px;overflow:hidden}.encoding-table .table-row{display:grid;grid-template-columns:120px 1.5fr 1fr 1.5fr}.code-highlight{font-size:1.1rem}.comparison-table{background:#fff;border:1px solid #d0d7e0;border-radius:8px;overflow:hidden}.comparison-table .table-row{display:grid;grid-template-columns:200px 1.2fr 1.5fr 1fr}.implementation-info{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;margin-top:1rem}.info-card{background:linear-gradient(135deg,#f8faff,#f0f4ff);border:1px solid #d0d7e0;border-radius:10px;box-shadow:0 2px 6px #667eea1a;padding:1.5rem}.info-card h3{align-items:center;color:#1a1294;display:flex;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.1rem;font-weight:700;gap:.5rem;margin-bottom:1rem}.examples-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);margin-top:1rem}.example-card{background:linear-gradient(135deg,#f0fff4,#e6fffa);border:1px solid #9ae6b4;border-radius:10px;box-shadow:0 2px 6px #48bb781a;padding:1.5rem}.example-card h4{align-items:center;color:#276749;display:flex;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1rem;font-weight:700;gap:.5rem;margin:0 0 1rem}.example-content{display:flex;flex-direction:column;gap:.5rem}.example-label{color:#2d3748;font-size:.85rem;letter-spacing:.5px;text-transform:uppercase}.example-code{background:#fff;border:1px solid #c6f6d5;color:#276749;font-size:.9rem;padding:.75rem}@media (max-width:768px){.url-sections{grid-template-columns:1fr}.url-header{align-items:flex-start;flex-direction:column;gap:1rem}.url-actions{flex-wrap:wrap;width:100%}.btn{flex:1 1;min-width:-webkit-fit-content;min-width:fit-content}.url-panel{min-height:400px}.examples-grid,.implementation-info{grid-template-columns:1fr}.table-row{grid-template-columns:60px 1fr}.table-cell:nth-child(3),.table-cell:nth-child(4){border-top:1px solid #e0e7ff;grid-column:1/-1}.comparison-table .table-row,.encoding-table .table-row{grid-template-columns:1fr}.comparison-table .table-cell,.encoding-table .table-cell{border-bottom:1px solid #e0e7ff}.comparison-table .table-row:not(.table-header) .table-cell:last-child,.encoding-table .table-row:not(.table-header) .table-cell:last-child{border-bottom:none}}.dark-mode .doc-section,.dark-mode .url-panel{background:#2d2d2d;border-color:#404040;color:#e5e7eb}.dark-mode .url-panel-header{background:#1a1a1a;border-color:#404040}.dark-mode .doc-heading,.dark-mode .info-card h3,.dark-mode .url-panel-header h2{color:#a5b4fc}.dark-mode .doc-list,.dark-mode .doc-text,.dark-mode .table-cell{color:#d1d5db}.dark-mode .example-card,.dark-mode .info-card{background:#1a1a1a;border-color:#404040}.dark-mode .example-card h4{color:#a5b4fc}.dark-mode .example-code{background:#2d2d2d;border-color:#404040;color:#a5b4fc}.dark-mode .url-output,.dark-mode .url-textarea{background:#2d2d2d;color:#e5e7eb}.dark-mode .url-output{background:#1a1a1a}.jwt-container{font-family:Inter,system-ui,-apple-system,sans-serif;padding:1rem}.jwt-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.jwt-title{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:700}.jwt-actions{display:flex;gap:12px}.jwt-header-note{align-items:center;background:linear-gradient(135deg,#e0f2fe,#dbeafe);border:1px solid #bfdbfe;border-radius:8px;box-shadow:0 2px 4px #1a129414;color:#1e40af;display:flex;flex:1 1;font-size:.875rem;gap:.5rem;line-height:1.4;margin:0 2rem;padding:.75rem 1rem}.jwt-header-note.bounce{animation:bounce .82s cubic-bezier(.36,.07,.19,.97) both;background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#fbbf24;box-shadow:0 4px 8px #fbbf244d;color:#92400e}.jwt-input-section{margin-bottom:1.5rem}.jwt-header-payload-row{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:400px 1fr;margin-bottom:1.5rem}.jwt-panel{background:#fff;border:1px solid #d0d7e0;border-radius:12px;box-shadow:0 4px 12px #1a129414;display:flex;flex-direction:column;margin-bottom:1.5rem;overflow:hidden}.jwt-header-panel,.jwt-payload-panel{margin-bottom:0}.jwt-panel-header{align-items:center;background:#f0f4ff;border-bottom:1px solid #d0d7e0;border-radius:12px 12px 0 0;box-shadow:inset 0 -1px 0 #0000000d;display:flex;justify-content:space-between;padding:10px 14px}.jwt-panel-header h2{color:#1a1f36;font-size:1.5rem;font-weight:600;letter-spacing:.5px;margin:0}.jwt-header-section{background:linear-gradient(135deg,#e0f2fe,#bfdbfe);border-bottom-color:#93c5fd}.jwt-payload-section{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border-bottom-color:#86efac}.jwt-signature-section{background:linear-gradient(135deg,#fef3c7,#fde68a);border-bottom-color:#fcd34d}.jwt-textarea{background:#fff;border:none;color:#2d3748;font-family:Courier New,Courier,monospace;font-size:.95rem;line-height:1.6;min-height:150px;outline:none;padding:1rem;resize:vertical}.jwt-textarea::placeholder{color:#a0aec0}.jwt-output{background:#f7fafc;border:none;color:#2d3748;font-family:Courier New,Courier,monospace;font-size:.85rem;line-height:1.5;margin:0;max-height:200px;outline:none;overflow-x:auto;overflow-y:auto;padding:1rem;white-space:pre}.jwt-signature-output{white-space:pre-wrap;word-break:break-all}.jwt-copy-btn{align-items:center;background:#1a1294;border:none;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#fff;cursor:pointer;display:flex;font-size:.85rem;font-weight:600;gap:.4rem;padding:.4rem .8rem;transition:all .2s ease}.jwt-copy-btn:hover{background:linear-gradient(45deg,#1a1294,#4b3aff);box-shadow:0 4px 8px #1a12944d;transform:translateY(-2px)}.jwt-copy-btn:active{transform:translateY(0)}.jwt-error{align-items:center;background:linear-gradient(135deg,#fee2e2,#fecaca);border:2px solid #f87171;border-radius:12px;box-shadow:0 4px 12px #f8717133;color:#991b1b;display:flex;gap:1rem;padding:2rem}.jwt-error svg{flex-shrink:0}.jwt-error h3{font-size:1.2rem;font-weight:700;margin:0 0 .5rem}.jwt-error p{font-size:1rem;line-height:1.5;margin:0}.jwt-info-compact{background:#f8fafc;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:.75rem;padding:1rem}.jwt-info-row{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.jwt-info-item{display:flex;flex-direction:column;gap:.25rem}.jwt-info-full{grid-column:1/-1}.jwt-info-label{color:#64748b;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.jwt-info-value{color:#1e293b;font-family:Courier New,monospace;font-size:.95rem;font-weight:500}.jwt-badge{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:6px;color:#fff;display:inline-block;font-size:.9rem;font-weight:700;padding:.25rem .75rem;width:-webkit-fit-content;width:fit-content}.jwt-payload-content{grid-gap:0;display:grid;gap:0;grid-template-columns:1fr 1fr}.jwt-payload-json{border-right:1px solid #e2e8f0}.jwt-claims-side{background:#f8fafc;gap:.75rem;max-height:200px;overflow-y:auto;padding:1rem}.jwt-claim-item,.jwt-claims-side{display:flex;flex-direction:column}.jwt-claim-item{background:#fff;border:1px solid #e2e8f0;border-radius:6px;gap:.25rem;padding:.5rem .75rem}.jwt-claim-label{color:#475569;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.85rem;font-weight:600}.jwt-claim-value{color:#1e293b;font-family:Courier New,monospace;font-size:.85rem;word-break:break-word}.jwt-explanation{background:linear-gradient(135deg,#fef9f3,#fef3e7);border-top:1px solid #fed7aa;margin-top:auto;padding:1rem}.jwt-explanation h4{align-items:center;color:#9a3412;display:flex;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1rem;font-weight:700;gap:.5rem;margin:0 0 .75rem}.jwt-explanation p{font-size:.875rem;margin:0 0 .75rem}.jwt-explanation p,.jwt-explanation ul{color:#78350f;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6}.jwt-explanation ul{font-size:.85rem;margin:0;padding-left:1.25rem}.jwt-explanation ul li{margin-bottom:.5rem}.jwt-explanation ul li strong{color:#9a3412;font-weight:600}.jwt-warning{background:linear-gradient(135deg,#fef2f2,#fee2e2);border:1px solid #fca5a5;border-radius:6px;color:#991b1b!important;font-size:.85rem!important;margin-top:.75rem;padding:.75rem}.jwt-expired{color:#dc2626;font-weight:700}.jwt-valid{color:#16a34a;font-weight:600}.jwt-signature-note{align-items:center;background:#fffbeb;border-top:1px solid #fcd34d;color:#92400e;display:flex;font-size:.9rem;font-style:italic;gap:.75rem;padding:1rem}.jwt-signature-note svg{color:#f59e0b;flex-shrink:0}.jwt-documentation{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}.doc-section{border:1px solid #e0e7ff;box-shadow:0 2px 8px #0000000f;padding:1.5rem}.doc-section.important-note{background:linear-gradient(135deg,#fff9e6,#fff5cc);border-color:gold}.doc-heading{color:#1a1294;font-size:1.3rem}.doc-heading,.doc-list,.doc-text{font-family:Inter,system-ui,-apple-system,sans-serif}.doc-list{color:#4a5568;font-size:.95rem}.doc-list code,.doc-list li strong{color:#1a1294;font-weight:600}.doc-list code{background:#f0f4ff;border-radius:4px;font-family:Courier New,monospace;font-size:.9rem;padding:.15rem .4rem}.jwt-structure-visual{align-items:center;background:#f8fafc;margin-top:1rem;overflow-x:auto;padding:1.5rem}.jwt-structure-visual,.structure-part{border-radius:8px;display:flex;gap:.5rem}.structure-part{flex:1 1;flex-direction:column;min-width:200px;padding:1rem}.header-part{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:2px solid #60a5fa}.payload-part{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:2px solid #4ade80}.signature-part{background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #fbbf24}.part-label{color:#1e293b;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase}.part-content{color:#475569;font-family:Courier New,monospace;font-size:.75rem;line-height:1.4;word-break:break-all}.part-desc{color:#64748b;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.85rem;font-style:italic;margin-top:.5rem}.structure-separator{color:#94a3b8;font-size:2rem;font-weight:700}.claims-table{background:#fff;border:1px solid #d0d7e0;border-radius:8px;margin-top:1rem;overflow:hidden}.table-row{border-bottom:1px solid #e0e7ff;grid-template-columns:100px 150px 1.5fr 1fr}.table-row:not(.table-header):hover{background:#f8faff}.table-cell{color:#2d3748;font-family:Inter,system-ui,-apple-system,sans-serif;padding:1rem}.table-cell.code{background:#f0f4ff;color:#1a1294;font-weight:500}.code-highlight,.table-cell.code{font-family:Courier New,monospace}.code-highlight{background:linear-gradient(135deg,#fff4e6,#ffe8cc);color:#c05621;font-size:1rem;padding:.5rem}.algorithms-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(3,1fr);margin-top:1rem}.algorithm-card{background:linear-gradient(135deg,#f8faff,#f0f4ff);border:1px solid #d0d7e0;border-radius:10px;box-shadow:0 2px 6px #667eea1a;padding:1.5rem}.algorithm-card h3{align-items:center;color:#1a1294;display:flex;font-size:1.1rem;font-weight:700;gap:.5rem;margin:0 0 1rem}.algorithm-card h3,.algorithm-note{font-family:Inter,system-ui,-apple-system,sans-serif}.algorithm-note{border-top:1px solid #e2e8f0;color:#64748b;font-size:.85rem;font-style:italic;margin:1rem 0 0;padding-top:1rem}.usage-steps{display:flex;flex-direction:column}.usage-step{align-items:flex-start}.step-number{box-shadow:0 4px 8px #667eea4d;font-size:1.2rem;height:48px;width:48px}.step-content h4{color:#1a1294;font-weight:700}.step-content h4,.step-content p{font-family:Inter,system-ui,-apple-system,sans-serif}.step-content p{font-size:.95rem}.example-jwt{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin-top:1rem;padding:1.5rem}.example-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.75rem}.example-label{color:#475569;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.9rem;font-weight:600}.example-copy-btn{align-items:center;background:#1a1294;border:none;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#fff;cursor:pointer;display:flex;font-size:.85rem;font-weight:600;gap:.4rem;padding:.4rem .8rem;transition:all .2s ease}.example-copy-btn:hover{background:linear-gradient(45deg,#1a1294,#4b3aff);box-shadow:0 4px 8px #1a12944d;transform:translateY(-2px)}.example-copy-btn:active{transform:translateY(0)}.example-code{border-radius:6px;line-height:1.6;margin-bottom:1rem;padding:1rem}.example-decoded{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.decoded-section{background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:1rem}.decoded-section strong{color:#1a1294;display:block;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.9rem;margin-bottom:.5rem}.decoded-section pre{color:#475569;font-family:Courier New,monospace;font-size:.85rem;line-height:1.5;margin:0;overflow-x:auto}@media (max-width:1024px){.jwt-header{flex-wrap:wrap}.jwt-header-note{flex-basis:100%;margin:1rem 0 0;order:3}.jwt-header-payload-row{grid-template-columns:1fr}.jwt-header-panel,.jwt-payload-panel{margin-bottom:1.5rem}.jwt-payload-content{grid-template-columns:1fr}.jwt-payload-json{border-bottom:1px solid #e2e8f0;border-right:none}}@media (max-width:768px){.jwt-header{align-items:flex-start;flex-direction:column;gap:1rem}.jwt-actions{flex-wrap:wrap;width:100%}.btn{flex:1 1;min-width:-webkit-fit-content;min-width:fit-content}.jwt-info-row,.jwt-payload-content{grid-template-columns:1fr}.jwt-payload-json{border-bottom:1px solid #e2e8f0;border-right:none}.algorithms-grid{grid-template-columns:1fr}.jwt-structure-visual{flex-direction:column}.structure-separator{transform:rotate(90deg)}.table-row{grid-template-columns:1fr}.table-cell{border-bottom:1px solid #e0e7ff}.table-row .table-cell:last-child{border-bottom:none}.example-decoded{grid-template-columns:1fr}}.dark-mode .doc-section,.dark-mode .jwt-panel{background:#2d2d2d;border-color:#404040;color:#e5e7eb}.dark-mode .jwt-panel-header{background:#1a1a1a;border-color:#404040}.dark-mode .jwt-header-section{background:linear-gradient(135deg,#1e3a5f,#2d5a7b)}.dark-mode .jwt-payload-section{background:linear-gradient(135deg,#1e4620,#2d5a2f)}.dark-mode .jwt-signature-section{background:linear-gradient(135deg,#5a4620,#7b5a2f)}.dark-mode .algorithm-card h3,.dark-mode .doc-heading,.dark-mode .jwt-panel-header h2,.dark-mode .step-content h4{color:#a5b4fc}.dark-mode .doc-list,.dark-mode .doc-text,.dark-mode .jwt-claim-value,.dark-mode .jwt-info-value,.dark-mode .table-cell{color:#d1d5db}.dark-mode .algorithm-card{background:#1a1a1a;border-color:#404040}.dark-mode .jwt-error{background:linear-gradient(135deg,#4a1a1a,#5a2020);border-color:#dc2626;color:#fca5a5}.dark-mode .jwt-claims-side,.dark-mode .jwt-info-compact,.dark-mode .jwt-output{background:#1a1a1a}.dark-mode .jwt-claim-item{background:#2d2d2d;border-color:#404040}.dark-mode .jwt-payload-json{border-right-color:#404040}.dark-mode .doc-list code,.dark-mode .table-cell.code{background:#1a1a1a;color:#a5b4fc}.dark-mode .code-highlight{background:#2d2d2d;color:#fbbf24}.dark-mode .jwt-output,.dark-mode .jwt-textarea{background:#2d2d2d;color:#e5e7eb}.dark-mode .example-jwt,.dark-mode .jwt-structure-visual{background:#1a1a1a}.dark-mode .decoded-section{background:#2d2d2d;border-color:#404040}.dark-mode .example-code{background:#0f172a}.dark-mode .jwt-header-note{background:linear-gradient(135deg,#1e3a5f,#1e293b);border-color:#334155;color:#93c5fd}.dark-mode .jwt-header-note.bounce{background:linear-gradient(135deg,#78350f,#451a03);border-color:#92400e;color:#fde68a}.dark-mode .jwt-signature-note{background:#2d2416;border-top-color:#78350f;color:#fbbf24}.dark-mode .jwt-explanation{background:linear-gradient(135deg,#2d2416,#3d3416);border-top-color:#78350f}.dark-mode .jwt-explanation h4{color:#fbbf24}.dark-mode .jwt-explanation p,.dark-mode .jwt-explanation ul,.dark-mode .jwt-explanation ul li{color:#d4a574}.dark-mode .jwt-explanation ul li strong{color:#fbbf24}.dark-mode .jwt-warning{background:linear-gradient(135deg,#4a1a1a,#5a2020);border-color:#dc2626;color:#fca5a5!important}.hash-container{font-family:Inter,system-ui,-apple-system,sans-serif;padding:1rem}.hash-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.hash-title{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:700}.hash-actions{display:flex;gap:12px}.btn-icon{align-items:center;display:inline-flex;font-size:1.25rem;line-height:1}.btn-secondary:disabled{transform:none}.hash-input-section,.hash-panel{margin-bottom:1.5rem}.hash-panel{background:#fff;border:1px solid #d0d7e0;border-radius:12px;box-shadow:0 4px 12px #1a129414;display:flex;flex-direction:column;overflow:hidden}.hash-panel-header{align-items:center;background:linear-gradient(135deg,#e0f2fe,#bfdbfe);border-bottom:1px solid #93c5fd;border-radius:12px 12px 0 0;box-shadow:inset 0 -1px 0 #0000000d;display:flex;justify-content:space-between;padding:10px 14px}.hash-panel-header h2{color:#1a1f36;font-size:1.5rem;font-weight:600;letter-spacing:.5px;margin:0}.hash-generate-btn{background:#1a1294;border:none;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:.5rem 1rem;transition:all .2s ease}.hash-generate-btn:disabled{background:#cbd5e1;cursor:not-allowed;opacity:.6}.hash-generate-btn:not(:disabled):hover{background:linear-gradient(45deg,#1a1294,#4b3aff);box-shadow:0 4px 8px #1a12944d;transform:translateY(-2px)}.hash-textarea{background:#fff;border:none;color:#2d3748;font-family:Courier New,Courier,monospace;font-size:.95rem;line-height:1.6;min-height:2px;outline:none;padding:1rem;resize:vertical}.hash-textarea::placeholder{color:#a0aec0}.hash-output-section{margin-bottom:2rem}.hash-section-title{color:#1f2937;font-size:1.3rem;font-weight:600;margin-bottom:1rem}.hash-results{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(6,1fr)}.hash-result-item{background:#fff;border:1px solid #d0d7e0;border-radius:12px;box-shadow:0 2px 8px #1a12940d;padding:1rem}.hash-result-item:first-child,.hash-result-item:nth-child(2),.hash-result-item:nth-child(3){grid-column:span 2}.hash-result-item:nth-child(4),.hash-result-item:nth-child(5){grid-column:span 3}.hash-algorithm{align-items:center;display:flex;gap:.75rem;margin-bottom:.75rem}.algorithm-badge{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:6px;color:#fff;font-size:.85rem;font-weight:600;letter-spacing:.5px;padding:.3rem .75rem}.hash-length{color:#6b7280;font-size:.85rem;font-weight:500}.hash-value-container{align-items:center;background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;display:flex;gap:.75rem;padding:.75rem}.hash-value{color:#2d3748;flex:1 1;font-family:Courier New,Courier,monospace;font-size:.85rem;line-height:1.6;word-break:break-all}.hash-copy-btn{align-items:center;background:#1a1294;border:none;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#fff;cursor:pointer;display:flex;flex-shrink:0;padding:.4rem .6rem;transition:all .2s ease}.hash-copy-btn:hover{background:linear-gradient(45deg,#1a1294,#4b3aff);box-shadow:0 4px 8px #1a12944d;transform:translateY(-2px)}.hash-documentation{border-top:2px solid #e5e7eb;margin-top:3rem;padding-top:2rem}.hash-comparison-table{border:1px solid #e5e7eb;border-radius:8px;display:flex;flex-direction:column;overflow:hidden}.table-row{grid-template-columns:1fr 1.2fr 1fr 1.5fr}.security-badge{border-radius:4px;font-size:.75rem;font-weight:600;letter-spacing:.5px;padding:.25rem .6rem;text-transform:uppercase}.security-badge.deprecated{background:#fee2e2;color:#991b1b}.security-badge.weak{background:#fef3c7;color:#92400e}.security-badge.secure{background:#d1fae5;color:#065f46}.properties-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1rem}.property-card{background:linear-gradient(135deg,#f0f4ff,#e0f2fe);border:1px solid #bfdbfe;border-radius:8px;padding:1.25rem}.property-card h3{color:#1e3a8a;font-size:1rem;font-weight:600;margin:0 0 .5rem}.property-card p{color:#475569;font-size:.875rem;line-height:1.5;margin:0}.recommendations{display:flex;flex-direction:column;gap:.75rem}.recommendation-item{align-items:flex-start;border:1px solid;border-radius:8px;display:flex;gap:.75rem;padding:.85rem 1rem}.recommendation-item.good{background:#d1fae5;border-color:#86efac}.recommendation-item.bad{background:#fee2e2;border-color:#fca5a5}.recommendation-icon{flex-shrink:0;font-size:1.2rem}.recommendation-item strong{font-weight:600}.recommendation-item.good strong{color:#065f46}.recommendation-item.bad strong{color:#991b1b}.example-code{word-break:break-all}.dark-mode .hash-container{color:#e5e7eb}.dark-mode .doc-heading,.dark-mode .hash-section-title,.dark-mode .hash-title{color:#f3f4f6}.dark-mode .hash-panel{background:#2d2d2d;border-color:#404040}.dark-mode .hash-panel-header{background:linear-gradient(135deg,#1e3a5f,#1e293b);border-bottom-color:#334155}.dark-mode .hash-panel-header h2{color:#e5e7eb}.dark-mode .hash-textarea{background:#1a1a1a;color:#e5e7eb}.dark-mode .hash-result-item{background:#2d2d2d;border-color:#404040}.dark-mode .hash-value-container{background:#1a1a1a;border-color:#404040}.dark-mode .hash-value{color:#e5e7eb}.dark-mode .doc-section{border-color:#404040}.dark-mode .property-card{background:linear-gradient(135deg,#1e3a5f,#1e293b);border-color:#334155}.dark-mode .property-card h3{color:#93c5fd}.dark-mode .property-card p{color:#9ca3af}.dark-mode .recommendation-item.good{background:#064e3b;border-color:#065f46}.dark-mode .recommendation-item.bad{background:#7f1d1d;border-color:#991b1b}.dark-mode .recommendation-item.good strong{color:#86efac}.dark-mode .recommendation-item.bad strong{color:#fca5a5}@media (max-width:1024px){.hash-results{grid-template-columns:repeat(2,1fr)}.hash-result-item:first-child,.hash-result-item:nth-child(2),.hash-result-item:nth-child(3),.hash-result-item:nth-child(4),.hash-result-item:nth-child(5){grid-column:span 1}.table-row{grid-template-columns:1fr 1fr}.table-cell:nth-child(3),.table-cell:nth-child(4){grid-column:span 2}}@media (max-width:768px){.hash-results{grid-template-columns:1fr}.hash-result-item:nth-child(4),.hash-result-item:nth-child(5){grid-column:1}.hash-header{align-items:flex-start;flex-direction:column;gap:1rem}.hash-actions{flex-wrap:wrap;width:100%}.btn{flex:1 1;min-width:auto}.table-row{grid-template-columns:1fr}.table-cell{grid-column:span 1!important}.properties-grid{grid-template-columns:1fr}}.timestamp-container{font-family:Inter,system-ui,-apple-system,sans-serif;padding:1rem}.timestamp-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem}.timestamp-title-section{align-items:center;display:flex;gap:1rem}.timestamp-title{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:700;margin:0}.timestamp-note{align-items:center;background:linear-gradient(135deg,#e0f2fe,#dbeafe);border:1px solid #93c5fd;border-radius:8px;display:flex;gap:.5rem;padding:.5rem 1rem}.note-text{line-height:1.4}.timestamp-actions{display:flex;gap:12px}.btn{gap:.75rem}.btn-primary{background:#1a1294}.btn-secondary:disabled{background:#cbd5e1;box-shadow:none;opacity:.6}.btn-primary:hover{background:linear-gradient(45deg,#1a1294,#4b3aff);box-shadow:0 12px 24px #1a129480;transform:translateY(-6px) scale(1.05)}.btn-secondary:not(:disabled):hover{background:linear-gradient(45deg,#64748b,#94a3b8);box-shadow:0 12px 24px #64748b80;transform:translateY(-6px) scale(1.05)}.current-time-display{margin-bottom:2rem}.current-time-panel{align-items:flex-start;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;box-shadow:0 4px 12px #667eea4d;color:#fff;display:flex;gap:2rem;padding:2rem;position:relative}.current-time-icon{align-items:center;background:#fff3;border-radius:50%;display:flex;justify-content:center;padding:1rem}.current-time-info h3{font-size:1.1rem;font-weight:600;margin:0 0 .75rem;opacity:.95}.timezone-info{align-items:center;display:flex;flex-direction:row;gap:.5rem;position:absolute;right:1rem;top:1rem}.timezone-label{font-size:2rem;font-weight:600;opacity:.9}.timezone-value{background:#ffffff40;border-radius:6px;font-size:.95rem;font-weight:600;letter-spacing:.5px;padding:.4rem .8rem}.current-timestamp-row{align-items:center;display:flex;flex-wrap:wrap;gap:2rem;margin-bottom:.5rem}.timestamp-with-label{align-items:center;display:flex;gap:.5rem}.timestamp-label,.timestamp-value{font-family:Courier New,Courier,monospace;font-size:1.8rem;font-weight:700;letter-spacing:1px}.timestamp-label{opacity:.9}.timestamp-copy-btn{align-items:center;background:#ffffff40;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;padding:.5rem;transition:all .2s ease}.timestamp-copy-btn:hover{background:#ffffff59;transform:scale(1.1)}.current-date-text{font-size:.95rem;margin:0;opacity:.9}.conversion-sections{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);margin-bottom:2rem}.conversion-panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 8px #0000000d;padding:1.5rem}.panel-header{margin-bottom:1.5rem}.panel-header h2{align-items:center;color:#1f2937;display:flex;font-size:1.2rem;gap:.5rem}.convert-btn,.use-current-btn{background:#667eea;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.5rem 1rem;transition:all .2s ease}.convert-btn:not(:disabled):hover,.use-current-btn:hover{background:#764ba2;box-shadow:0 4px 8px #667eea4d;transform:translateY(-2px)}.convert-btn:disabled{background:#cbd5e1;cursor:not-allowed;opacity:.6}.input-group{margin-bottom:1rem}.input-group:last-child{margin-bottom:0}.input-group label{font-size:.875rem}.date-input,.time-input,.timestamp-input{border:1px solid #d1d5db;border-radius:6px;font-family:Courier New,Courier,monospace;font-size:.95rem;padding:.75rem;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.date-input:focus,.time-input:focus,.timestamp-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.datetime-inputs{display:flex;gap:1rem}.datetime-inputs .input-group{flex:1 1}.results-section{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 8px #0000000d;margin-bottom:2rem;padding:2rem}.results-title{color:#1f2937;font-size:1.4rem;font-weight:700;margin:0 0 1.5rem}.results-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr)}.result-category{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:1.25rem}.category-title{border-bottom:2px solid #667eea;color:#667eea;font-size:1rem;font-weight:600;margin:0 0 1rem;padding-bottom:.5rem}.result-items{display:flex;flex-direction:column;gap:.75rem}.result-item{align-items:center;display:flex;gap:1rem;justify-content:space-between}.result-label{color:#6b7280;font-size:.875rem;font-weight:500;white-space:nowrap}.result-value-container{align-items:center;display:flex;flex:1 1;gap:.5rem;min-width:0}.result-value{background:#fff;border:1px solid #e5e7eb;border-radius:4px;color:#1f2937;flex:1 1;font-family:Courier New,Courier,monospace;font-size:.875rem;overflow:hidden;padding:.4rem .6rem;text-overflow:ellipsis;white-space:nowrap}.copy-btn{align-items:center;background:#667eea;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;padding:.4rem;transition:all .2s ease}.copy-btn:hover{background:#764ba2;transform:scale(1.1)}.timestamp-documentation{border-top:2px solid #e5e7eb;margin-top:3rem;padding-top:2rem}.doc-section{border:1px solid #e5e7eb;margin-bottom:2.5rem}.doc-heading{font-size:1.4rem}.doc-list li{font-size:.95rem}.timestamp-comparison-table{border:1px solid #e5e7eb;border-radius:8px;display:flex;flex-direction:column;overflow:hidden}.table-row{grid-template-columns:1.2fr 1.5fr 1.3fr 1.5fr}.table-header{font-size:.9rem}.table-row:not(.table-header){background:#fff;border-bottom:1px solid #e5e7eb}.table-row:not(.table-header):last-child{border-bottom:none}.table-row:not(.table-header):hover{background:#f9fafb}.table-cell{color:#4b5563;padding:.85rem 1rem}.table-header .table-cell{color:#fff}.concepts-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1rem}.concept-card{background:linear-gradient(135deg,#f0f4ff,#e0f2fe);border:1px solid #bfdbfe;border-radius:8px;padding:1.25rem}.concept-card h3{color:#1e3a8a;font-size:1rem;font-weight:600;margin:0 0 .5rem}.concept-card p{color:#475569;font-size:.875rem;line-height:1.5;margin:0}.best-practices{gap:.75rem}.practice-item{align-items:flex-start;border:1px solid;gap:.75rem;padding:.85rem 1rem}.practice-item.good{background:#d1fae5}.practice-item.bad{background:#fee2e2}.practice-icon{font-size:1.2rem}.practice-item.good .practice-icon{color:#065f46}.practice-item.bad .practice-icon{color:#991b1b}.practice-content{font-size:.9rem;line-height:1.5}.practice-item.good strong{color:#065f46;font-weight:600}.practice-item.bad strong{color:#991b1b;font-weight:600}.use-case-example{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:1.5rem}.example-steps{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.example-step{align-items:flex-start;display:flex;gap:1rem}.step-number{font-size:.9rem;font-weight:600;height:32px;width:32px}.step-content{flex:1 1}.step-content strong{color:#1f2937;display:block;font-weight:600;margin-bottom:.25rem}.step-content p{color:#6b7280;margin:.25rem 0 .5rem}.example-code{background:#1e293b;border-radius:4px;color:#e2e8f0;display:block;font-size:.85rem;margin-top:.5rem;overflow-x:auto;padding:.5rem .75rem}.example-code,code{font-family:Courier New,monospace}code{background:#e2e8f0;border-radius:3px;color:#1e3a8a;font-size:.9em;padding:.2rem .4rem}.dark-mode .timestamp-container{color:#e5e7eb}.dark-mode .doc-heading,.dark-mode .results-title,.dark-mode .timestamp-title{color:#f3f4f6}.dark-mode .conversion-panel,.dark-mode .doc-section,.dark-mode .results-section{background:#2d2d2d;border-color:#404040}.dark-mode .panel-header h2,.dark-mode .result-label{color:#e5e7eb}.dark-mode .date-input,.dark-mode .time-input,.dark-mode .timestamp-input{background:#1a1a1a;border-color:#404040;color:#e5e7eb}.dark-mode .result-category{background:#1a1a1a;border-color:#404040}.dark-mode .category-title{color:#93c5fd}.dark-mode .result-value{background:#1a1a1a;border-color:#404040;color:#e5e7eb}.dark-mode .doc-list li,.dark-mode .doc-text{color:#9ca3af}.dark-mode .timestamp-note{background:linear-gradient(135deg,#1e3a5f,#1e293b);border-color:#334155}.dark-mode .table-row:not(.table-header){background:#2d2d2d}.dark-mode .table-row:not(.table-header):hover{background:#353535}.dark-mode .concept-card{background:linear-gradient(135deg,#1e3a5f,#1e293b);border-color:#334155}.dark-mode .concept-card h3{color:#93c5fd}.dark-mode .concept-card p{color:#9ca3af}.dark-mode .use-case-example{background:#1a1a1a;border-color:#404040}.dark-mode .step-content strong{color:#e5e7eb}.dark-mode .step-content p{color:#9ca3af}.dark-mode code{background:#334155;color:#93c5fd}@media (max-width:1024px){.conversion-sections,.results-grid{grid-template-columns:1fr}.table-row{grid-template-columns:1fr 1fr}.table-cell:nth-child(3),.table-cell:nth-child(4){grid-column:span 2}}@media (max-width:768px){.timestamp-header{align-items:flex-start;flex-direction:column;gap:1rem}.timestamp-actions{width:100%}.btn{flex:1 1;min-width:auto}.current-time-panel{flex-direction:column;gap:1rem;text-align:center}.current-timestamp-row{justify-content:center}.datetime-inputs{flex-direction:column}.table-row{grid-template-columns:1fr}.table-cell{grid-column:span 1!important}.concepts-grid{grid-template-columns:1fr}}.qr-container{font-family:Inter,system-ui,-apple-system,sans-serif;margin:0 auto;max-width:1400px;padding:2rem}.qr-header{align-items:flex-start;display:flex;gap:2rem;justify-content:space-between;margin-bottom:2rem}.qr-title-section{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.qr-title{color:#1f2937;font-size:2rem;font-weight:700;margin:0}.dark-mode .qr-title{color:#e5e7eb}.qr-note{align-items:center;background:linear-gradient(135deg,#e0f2fe,#dbeafe);border:1px solid #93c5fd;border-radius:8px;display:flex;gap:.5rem;padding:.5rem 1rem}.note-icon{font-size:1.1rem}.note-text{color:#1e3a8a;font-size:.875rem;font-weight:500}.dark-mode .qr-note{background:linear-gradient(135deg,#1e3a5f,#1e293b);border-color:#334155}.dark-mode .note-text{color:#93c5fd}.qr-actions{display:flex;flex-shrink:0;gap:1rem}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{box-shadow:0 4px 12px #667eea66;transform:translateY(-2px)}.btn-secondary{background:#f3f4f6;color:#374151}.btn-secondary:hover:not(:disabled){background:#e5e7eb}.dark-mode .btn-secondary{background:#374151;color:#e5e7eb}.dark-mode .btn-secondary:hover:not(:disabled){background:#4b5563}.qr-main-layout{grid-gap:1.5rem;align-items:start;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;margin-bottom:2rem}.qr-left-column{display:flex;flex-direction:column;gap:1.5rem}.qr-right-column{position:-webkit-sticky;position:sticky;top:6rem}.config-panel,.input-panel,.qr-display-panel{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;overflow:hidden}.dark-mode .config-panel,.dark-mode .input-panel,.dark-mode .qr-display-panel{background:#2d2d2d;box-shadow:0 2px 8px #0000004d}.panel-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:space-between;padding:.75rem 1rem}.panel-header h2{color:#fff;font-size:1.25rem;font-weight:600;margin:0}.input-group{padding:.75rem}.input-group label{color:#374151;display:block;font-size:.95rem;font-weight:600;margin-bottom:.5rem}.dark-mode .input-group label{color:#e5e7eb}.qr-input{border:2px solid #e5e7eb;border-radius:8px;font-family:Inter,system-ui,sans-serif;font-size:.95rem;padding:.75rem;resize:vertical;transition:border-color .2s ease;width:95%}.qr-input:focus{border-color:#667eea;outline:none}.dark-mode .qr-input{background:#1f1f1f;border-color:#404040;color:#e5e7eb}.dark-mode .qr-input:focus{border-color:#764ba2}.char-count{color:#6b7280;display:block;font-size:.875rem;margin-top:.5rem;text-align:right}.dark-mode .char-count{color:#9ca3af}.config-grid{display:flex;flex-direction:column;gap:1rem;padding:rem}.config-row{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:1fr 1fr}.colors-stacked{display:flex;flex-direction:column;gap:.5rem}.color-group-inline{align-items:center;display:flex;gap:.5rem}.color-label{color:#6b7280;font-size:.85rem;font-weight:500;min-width:70px}.dark-mode .color-label{color:#9ca3af}.qr-select-compact{background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:.95rem;padding:.75rem;transition:border-color .2s ease;width:100%}.qr-select-compact:focus{border-color:#667eea;outline:none}.dark-mode .qr-select-compact{background:#1f1f1f;border-color:#404040;color:#e5e7eb}.size-input-compact{border:2px solid #e5e7eb;border-radius:8px;font-size:.95rem;padding:.75rem;text-align:center;width:100%}.dark-mode .size-input-compact{background:#1f1f1f;border-color:#404040;color:#e5e7eb}.size-controls{align-items:center;display:flex;gap:.3rem}.size-slider{appearance:none;-webkit-appearance:none;background:#e5e7eb;border-radius:3px;flex:1 1;height:6px;outline:none}.size-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;cursor:pointer;height:18px;width:18px}.size-slider::-moz-range-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;cursor:pointer;height:18px;width:18px}.dark-mode .size-slider{background:#404040}.size-input{border:2px solid #e5e7eb;border-radius:8px;font-size:.95rem;padding:.5rem;text-align:center;width:80px}.dark-mode .size-input{background:#1f1f1f;border-color:#404040;color:#e5e7eb}.size-presets{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr)}.preset-btn{background:#fff;border:2px solid #e5e7eb;border-radius:6px;color:#374151;cursor:pointer;font-size:.875rem;font-weight:600;padding:.4rem .75rem;transition:all .2s ease}.preset-btn:hover{border-color:#667eea;color:#667eea}.preset-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#0000;color:#fff}.dark-mode .preset-btn{background:#1f1f1f;border-color:#404040;color:#e5e7eb}.dark-mode .preset-btn:hover{border-color:#764ba2}.qr-color-picker-container{align-items:center;display:flex;gap:.5rem}.qr-color-picker{border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;height:45px;width:60px}.dark-mode .color-picker{border-color:#404040}.qr-display-section{margin-bottom:2rem}.qr-display-panel{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;overflow:hidden}.dark-mode .qr-display-panel{background:#2d2d2d;box-shadow:0 2px 8px #0000004d}.display-actions{display:flex;gap:.75rem}.action-btn{align-items:center;background:#fff3;border:1px solid #ffffff4d;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:.9rem;font-weight:600;gap:.5rem;padding:.5rem 1rem;transition:all .2s ease}.action-btn:hover{background:#ffffff4d;transform:translateY(-1px)}.qr-display{align-items:center;background:#f9fafb;display:flex;justify-content:center;padding:3rem}.dark-mode .qr-display{background:#1f1f1f}.qr-canvas{border-radius:8px;box-shadow:0 4px 12px #0000001a}.qr-info{background:#f9fafb;border-top:1px solid #e5e7eb;display:flex;justify-content:space-around;padding:1.5rem}.dark-mode .qr-info{background:#1f1f1f;border-top-color:#404040}.info-item{display:flex;flex-direction:column;gap:.25rem;text-align:center}.info-label{color:#6b7280;font-size:.875rem;font-weight:500}.dark-mode .info-label{color:#9ca3af}.info-value{color:#1f2937;font-size:1rem;font-weight:700}.dark-mode .info-value{color:#e5e7eb}.qr-placeholder-content{align-items:center;display:flex;flex-direction:column;gap:1rem;justify-content:center;min-height:400px;padding:4rem 2rem;text-align:center}.placeholder-icon{font-size:4rem;margin-bottom:.5rem;opacity:.3}.qr-placeholder-content h3{color:#374151;font-size:1.5rem;font-weight:600;margin:0}.dark-mode .qr-placeholder-content h3{color:#e5e7eb}.qr-placeholder-content p{color:#6b7280;font-size:1rem;margin:0;max-width:300px}.dark-mode .qr-placeholder-content p{color:#9ca3af}.qr-documentation{display:flex;flex-direction:column;gap:2rem}.dark-mode .doc-section{background:#2d2d2d;box-shadow:0 2px 8px #0000004d}.doc-heading{color:#1f2937}.dark-mode .doc-heading{color:#e5e7eb}.doc-text{color:#4b5563;margin:0 0 1rem}.dark-mode .doc-text{color:#9ca3af}.doc-list li{border-bottom:1px solid #f3f4f6;color:#4b5563;padding:.75rem 0}.dark-mode .doc-list li{border-bottom-color:#374151;color:#9ca3af}.doc-list strong{color:#1f2937;font-weight:600}.dark-mode .doc-list strong{color:#e5e7eb}.error-correction-table{margin-top:1rem;overflow-x:auto}.table-row{border-bottom:1px solid #e5e7eb;grid-template-columns:repeat(4,1fr)}.table-row.table-header{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px 8px 0 0;color:#fff;font-weight:700}.table-row:not(.table-header){background:#f9fafb}.table-row:not(.table-header):hover{background:#f3f4f6}.dark-mode .table-row:not(.table-header){background:#1f1f1f;border-color:#404040}.dark-mode .table-row:not(.table-header):hover{background:#252525}.table-cell{color:#374151;font-size:.95rem}.dark-mode .table-cell{color:#9ca3af}.features-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(3,1fr);margin-top:1.5rem}.feature-card{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;border-radius:12px}.dark-mode .feature-card{background:linear-gradient(135deg,#1e3a5f,#1e293b);border-color:#334155}.feature-card h3{color:#0c4a6e;font-size:1.1rem;font-weight:700;margin:0 0 .75rem}.dark-mode .feature-card h3{color:#93c5fd}.feature-card p{color:#0369a1;font-size:.95rem;margin:0}.dark-mode .feature-card p{color:#9ca3af}.format-examples{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);margin-top:1.5rem}.format-item{background:#f9fafb;border-left:4px solid #667eea;border-radius:8px;padding:1.25rem}.dark-mode .format-item{background:#1f1f1f;border-left-color:#764ba2}.format-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.format-item h4{color:#1f2937;font-size:1rem;font-weight:700;margin:0}.dark-mode .format-item h4{color:#e5e7eb}.format-copy-btn{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#fff;cursor:pointer;display:flex;font-size:.85rem;font-weight:600;gap:.4rem;padding:.4rem .8rem;transition:all .2s ease}.format-copy-btn:hover{background:linear-gradient(135deg,#5568d3,#6a3e9a);box-shadow:0 4px 8px #667eea4d;transform:translateY(-2px)}.format-copy-btn:active{transform:translateY(0)}.dark-mode .format-copy-btn{background:linear-gradient(135deg,#667eea,#764ba2)}.dark-mode .format-copy-btn:hover{background:linear-gradient(135deg,#5568d3,#6a3e9a)}.format-code{background:#1f2937;border-radius:6px;color:#10b981;display:block;font-family:Courier New,monospace;font-size:.85rem;margin:.5rem 0;padding:.75rem;white-space:pre-wrap;word-break:break-all}.dark-mode .format-code{background:#0f0f0f}.format-item p{color:#6b7280;font-size:.875rem;margin:.5rem 0 0}.dark-mode .format-item p{color:#9ca3af}.best-practices{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.practice-item{background:#f0fdf4;border:2px solid #d1fae5;border-radius:8px;display:flex;gap:1rem;padding:1rem}.practice-item.good{background:#f0fdf4;border-color:#86efac}.practice-item.bad{background:#fef2f2;border-color:#fca5a5}.dark-mode .practice-item.good{background:#064e3b;border-color:#065f46}.dark-mode .practice-item.bad{background:#7f1d1d;border-color:#991b1b}.practice-icon{flex-shrink:0;font-size:1.5rem;font-weight:700}.practice-item.good .practice-icon,.practice-item.good strong{color:#166534}.practice-item.bad .practice-icon,.practice-item.bad strong{color:#991b1b}.dark-mode .practice-item.good .practice-icon,.dark-mode .practice-item.good strong{color:#86efac}.dark-mode .practice-item.bad .practice-icon,.dark-mode .practice-item.bad strong{color:#fca5a5}.practice-content{color:#374151;line-height:1.6}.dark-mode .practice-content{color:#9ca3af}.tips-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);margin-top:1.5rem}.tip-card{background:#fef3c7;border:2px solid #fcd34d;border-radius:12px;padding:1.5rem}.dark-mode .tip-card{background:#422006;border-color:#92400e}.tip-card h3{color:#92400e;font-size:1.1rem;font-weight:700;margin:0 0 1rem}.dark-mode .tip-card h3{color:#fcd34d}.tip-card ul{list-style:none;margin:0;padding:0}.tip-card li{color:#78350f;line-height:1.5;padding:.5rem 0 .5rem 1.25rem;position:relative}.tip-card li:before{color:#92400e;content:"▸";font-weight:700;left:0;position:absolute}.dark-mode .tip-card li{color:#fde68a}.dark-mode .tip-card li:before{color:#fcd34d}.tip-card strong{font-weight:700}@media (max-width:1024px){.qr-main-layout{grid-template-columns:1fr}.qr-right-column{position:static}.config-row{grid-template-columns:1fr}.features-grid{grid-template-columns:repeat(2,1fr)}.tips-grid{grid-template-columns:1fr}}@media (max-width:768px){.qr-container{padding:1rem}.qr-header{gap:1rem}.qr-header,.qr-title-section{align-items:flex-start;flex-direction:column}.qr-actions,.qr-title-section{width:100%}.btn{flex:1 1;justify-content:center}.features-grid,.format-examples,.table-row{grid-template-columns:1fr}.size-presets{justify-content:space-between}.preset-btn{flex:1 1}}.color-picker-container{font-family:Inter,system-ui,-apple-system,sans-serif;margin:0 auto;max-width:1200px;padding:2rem}.color-picker-header{margin-bottom:2rem}.header-content{align-items:center;display:flex;gap:2rem;justify-content:space-between}.header-text{text-align:left}.color-picker-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;font-size:2.5rem;font-weight:700;margin:0}.color-picker-note{align-items:center;background:linear-gradient(135deg,#e0f2fe,#dbeafe);border:1px solid #bfdbfe;border-radius:8px;box-shadow:0 2px 4px #1a129414;color:#1e40af;display:flex;flex:1 1;font-size:.875rem;gap:.5rem;line-height:1.4;margin:0 2rem;padding:.75rem 1rem}.action-buttons{display:flex;flex-shrink:0;gap:12px}.btn{border-radius:4px;box-shadow:0 2px 4px #0003;display:flex;font-size:1rem;font-weight:600;justify-content:center;min-width:120px;padding:.75rem 1.5rem;transition:transform .3s ease,box-shadow .3s ease,background .3s ease}.btn-secondary{background:#64748b;color:#fff}.btn-secondary:hover{background:linear-gradient(45deg,#64748b,#94a3b8);box-shadow:0 8px 16px #64748b4d;transform:translateY(-3px)}.color-picker-content{display:flex;flex-direction:column;gap:2rem}.color-picker-main{background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;padding:2rem}.color-preview-section{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.color-preview-large{align-items:center;border-radius:12px;box-shadow:0 8px 30px #0000001f;display:flex;height:200px;justify-content:center;overflow:hidden;position:relative;transition:all .3s ease}.color-preview-large:before{background:linear-gradient(45deg,#0000 48%,#ffffff1a 50%,#0000 52%);background-size:20px 20px;content:"";inset:0;position:absolute}.color-preview-text{color:#fff;font-size:2rem;font-weight:700;letter-spacing:2px;text-shadow:2px 2px 8px #0000004d;z-index:1}.color-input-section{align-items:center;display:flex;gap:1rem}.color-input-native{border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;height:50px;transition:all .3s ease;width:80px}.color-input-native:hover{border-color:#667eea;transform:scale(1.05)}.color-input-text{border:2px solid #e0e0e0;border-radius:8px;flex:1 1;font-size:1rem;font-weight:600;padding:.75rem 1rem;text-transform:uppercase;transition:all .3s ease}.color-input-text:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.random-color-btn,.save-color-btn{border:none;border-radius:8px;cursor:pointer;font-size:.95rem;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease;white-space:nowrap}.random-color-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.random-color-btn:hover{box-shadow:0 4px 12px #667eea4d;transform:translateY(-2px)}.save-color-btn{background:linear-gradient(135deg,#00d4aa,#00a88a);color:#fff}.save-color-btn:hover{box-shadow:0 4px 12px #00d4aa4d;transform:translateY(-2px)}.color-formats{margin-top:2rem}.color-formats h3{color:#333;font-size:1.3rem;font-weight:600;margin-bottom:1rem}.format-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.format-item{display:flex;flex-direction:column;gap:.5rem}.format-label{color:#666;font-size:.85rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.format-value-container{display:flex;gap:.5rem}.format-value{background:#f8f9fa;flex:1 1;font-family:Monaco,Courier New,monospace;font-size:.95rem;padding:.75rem}.copy-format-btn,.format-value{border:2px solid #e0e0e0;border-radius:8px}.copy-format-btn{background:#fff;cursor:pointer;font-size:1.2rem;padding:.75rem 1rem;transition:all .3s ease}.copy-format-btn:hover{background:#667eea;border-color:#667eea;transform:scale(1.1)}.color-palettes-section,.gradient-section,.preset-palettes-section,.saved-colors-section{background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;padding:2rem}.color-palettes-section h3,.gradient-section h3,.preset-palettes-section h3,.saved-colors-section h3{color:#333;font-size:1.5rem;font-weight:600;margin-bottom:1.5rem}.palette-category{margin-bottom:1.5rem}.palette-category h4{color:#555;font-size:1.1rem;font-weight:600;margin-bottom:.75rem}.palette-colors{display:flex;flex-wrap:wrap;gap:.75rem}.palette-color{align-items:flex-end;border-radius:12px;box-shadow:0 4px 12px #0000001a;cursor:pointer;display:flex;flex:1 1;height:80px;justify-content:center;min-width:80px;overflow:hidden;padding:.5rem;position:relative;transition:all .3s ease}.palette-color:hover{box-shadow:0 8px 24px #00000026;transform:translateY(-4px) scale(1.05)}.palette-color-text{color:#fff;font-size:.75rem;font-weight:600;opacity:0;text-shadow:1px 1px 4px #00000080;transition:opacity .3s ease}.palette-color:hover .palette-color-text{opacity:1}.preset-palette{background:#f8f9fa;border-radius:12px;display:flex;gap:.5rem;margin-bottom:1rem;padding:.5rem}.preset-color{border-radius:8px;box-shadow:0 2px 8px #0000001a;cursor:pointer;flex:1 1;height:60px;transition:all .3s ease}.preset-color:hover{box-shadow:0 6px 16px #00000026;transform:translateY(-3px)}.gradient-preview{display:flex;flex-direction:column;gap:1.5rem}.gradient-box{border-radius:12px;box-shadow:0 8px 30px #0000001f;height:150px}.gradient-controls{display:flex;flex-direction:column;gap:1rem}.gradient-controls label{color:#555;font-size:1rem;font-weight:600}.gradient-slider{-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:4px;height:8px;outline:none;width:100%}.gradient-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border-radius:50%;box-shadow:0 2px 8px #0003;cursor:pointer;height:24px;-webkit-transition:all .3s ease;transition:all .3s ease;width:24px}.gradient-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.gradient-slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;box-shadow:0 2px 8px #0003;cursor:pointer;height:24px;width:24px}.copy-gradient-btn{align-self:flex-start;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.copy-gradient-btn:hover{box-shadow:0 4px 12px #667eea4d;transform:translateY(-2px)}.saved-colors-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.saved-color-item{align-items:center;background:#f8f9fa;border-radius:12px;display:flex;flex-direction:column;gap:.5rem;padding:.75rem;transition:all .3s ease}.saved-color-item:hover{background:#e9ecef;transform:translateY(-2px)}.saved-color-preview{border-radius:8px;box-shadow:0 2px 8px #0000001a;cursor:pointer;height:60px;transition:all .3s ease;width:100%}.saved-color-preview:hover{box-shadow:0 4px 12px #00000026;transform:scale(1.05)}.saved-color-hex{color:#555;font-family:Monaco,Courier New,monospace;font-size:.85rem;font-weight:600}.remove-color-btn{align-items:center;background:#ff6b6b;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.2rem;font-weight:700;height:28px;justify-content:center;transition:all .3s ease;width:28px}.remove-color-btn:hover{background:#ff5252;transform:scale(1.1)}.color-picker-docs{background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;padding:2rem}.color-picker-docs h3{color:#333;font-size:1.8rem;font-weight:600;margin-bottom:1.5rem}.docs-content{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.docs-section{background:#f8f9fa;border-left:4px solid #667eea;border-radius:12px;padding:1.5rem}.docs-section h4{color:#667eea;font-size:1.2rem;font-weight:600;margin-bottom:1rem}.docs-section ul{list-style:none;margin:0;padding:0}.docs-section li{color:#555;line-height:1.6;padding:.5rem 0 .5rem 1.5rem;position:relative}.docs-section li:before{color:#667eea;content:"→";font-weight:700;left:0;position:absolute}.docs-section strong{color:#333;font-weight:600}@media (max-width:768px){.color-picker-container{padding:1rem}.color-picker-header h1{font-size:2rem}.color-picker-header .tool-description{font-size:1rem}.color-input-section{flex-wrap:wrap}.color-input-native{height:40px;width:60px}.color-input-text{flex:1 1 100%}.format-grid{grid-template-columns:1fr}.palette-colors{flex-direction:column}.palette-color{height:60px;min-width:100%}.docs-content{grid-template-columns:1fr}.saved-colors-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}@media (max-width:480px){.color-picker-header h1{font-size:1.5rem}.color-preview-large{height:150px}.color-preview-text{font-size:1.5rem}.color-palettes-section,.color-picker-docs,.color-picker-main,.gradient-section,.preset-palettes-section,.saved-colors-section{padding:1.5rem}.random-color-btn,.save-color-btn{font-size:.85rem;padding:.6rem 1rem}}.rt-container{font-family:Inter,system-ui,-apple-system,sans-serif;padding:1rem}.rt-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.rt-title{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.5rem;font-weight:700}.rt-actions{display:flex;gap:12px}.rt-header-note{align-items:center;background:linear-gradient(135deg,#e0f2fe,#dbeafe);border:1px solid #bfdbfe;border-radius:8px;box-shadow:0 2px 4px #1a129414;color:#1e40af;display:flex;flex:1 1;font-size:.875rem;gap:.5rem;line-height:1.4;margin:0 2rem;padding:.75rem 1rem}@keyframes bounce{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-8px)}20%,40%,60%,80%{transform:translateX(8px)}}.rt-header-note.bounce{animation:bounce .82s cubic-bezier(.36,.07,.19,.97) both;background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#fbbf24;box-shadow:0 4px 8px #fbbf244d;color:#92400e}.rt-panel{background:#fff;border:1px solid #d0d7e0;border-radius:12px;box-shadow:0 2px 8px #00000014;display:flex;flex-direction:column;margin-bottom:1.5rem;overflow:hidden}.rt-panel-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:2px solid #fff3;color:#fff;display:flex;justify-content:space-between;padding:1rem 1.5rem}.rt-panel-header h2{font-size:1.25rem;font-weight:600;margin:0}.rt-pattern-section{margin-bottom:1.5rem}.rt-pattern-input-wrapper{align-items:center;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;gap:.5rem;padding:1.5rem}.rt-pattern-prefix,.rt-pattern-suffix{color:#667eea;font-family:Roboto Mono,monospace;font-size:1.5rem;font-weight:700}.rt-pattern-input{background:#fff;border:2px solid #cbd5e1;border-radius:8px;flex:1 1;font-family:Roboto Mono,monospace;font-size:1rem;padding:.75rem 1rem;transition:all .3s ease}.rt-pattern-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.rt-pattern-input.rt-pattern-error{background:#fef2f2;border-color:#ef4444}.rt-valid-badge{background:#fff3;border-radius:6px;font-weight:500;gap:.5rem;padding:.5rem 1rem}.rt-error-message,.rt-valid-badge{align-items:center;display:flex;font-size:.875rem}.rt-error-message{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;gap:.75rem;margin:1rem 1.5rem;padding:1rem 1.5rem}.rt-flags-section{background:#fff;border-bottom:1px solid #e2e8f0;padding:1.5rem}.rt-flags-section h3{color:#334155;font-size:1rem;font-weight:600;margin:0 0 1rem}.rt-flags-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.rt-flag-item{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;display:flex;gap:.75rem;padding:.75rem;transition:all .2s ease}.rt-flag-item:hover{background:#f1f5f9;border-color:#cbd5e1}.rt-flag-item input[type=checkbox]{accent-color:#667eea;cursor:pointer;height:18px;width:18px}.rt-flag-label{color:#475569;font-size:.875rem;-webkit-user-select:none;user-select:none}.rt-flag-label strong{color:#667eea;font-family:Roboto Mono,monospace;font-size:1rem}.rt-examples-section{background:#fff;padding:1.5rem}.rt-examples-section h3{align-items:center;color:#334155;display:flex;font-size:1rem;font-weight:600;gap:.5rem;margin:0 0 1rem}.rt-examples-count{background:#ede9fe;border:1px solid #c4b5fd;border-radius:12px;color:#667eea;font-size:.875rem;font-weight:500;padding:.25rem .75rem}.rt-examples-grid{display:flex;flex-wrap:wrap;gap:.75rem}.rt-example-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;box-shadow:0 2px 4px #667eea4d;color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;padding:.5rem 1rem;position:relative;transition:all .3s ease}.rt-example-btn:hover{box-shadow:0 4px 8px #667eea66;transform:translateY(-2px)}.rt-example-btn-selected{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 0 0 3px #10b9814d,0 4px 8px #10b98166;font-weight:600;transform:translateY(-2px)}.rt-example-btn-selected:after{align-items:center;background:#10b981;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0003;color:#fff;content:"✓";display:flex;font-size:.75rem;height:20px;justify-content:center;position:absolute;right:-8px;top:-8px;width:20px}.rt-test-section{margin-bottom:1.5rem}.rt-textarea{background:#f8fafc;border:none;font-family:Roboto Mono,monospace;font-size:.9rem;line-height:1.6;min-height:150px;padding:1rem;resize:vertical;width:100%}.rt-textarea:focus{background:#fff;outline:none}.rt-match-count{align-items:center;background:#fff3;border-radius:6px;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;padding:.5rem 1rem}.rt-highlighted-output{background:#fff;border-top:1px solid #e2e8f0;padding:1.5rem}.rt-output-label{color:#475569;font-size:.875rem;font-weight:600;margin-bottom:.75rem}.rt-highlighted-text{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;font-family:Roboto Mono,monospace;font-size:.9rem;line-height:1.8;padding:1rem;white-space:pre-wrap;word-break:break-word}.rt-highlight{background:#fef08a;border:1px solid #fde047;border-radius:3px;color:#854d0e;font-weight:500;padding:2px 4px}.rt-matches-section{margin-bottom:1.5rem}.rt-matches-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));padding:1.5rem}.rt-match-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;transition:all .3s ease}.rt-match-card:hover{border-color:#cbd5e1;box-shadow:0 4px 12px #0000001a}.rt-match-header{align-items:center;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;padding:.75rem 1rem}.rt-match-number{color:#667eea;font-size:.875rem;font-weight:600}.rt-match-content{padding:1rem}.rt-match-text{background:#fef08a;border:1px solid #fde047;border-radius:6px;color:#854d0e;font-family:Roboto Mono,monospace;font-size:.9rem;margin-bottom:.75rem;padding:.75rem;word-break:break-word}.rt-match-info{display:flex;gap:1rem;margin-bottom:.75rem}.rt-match-detail{color:#64748b;font-size:.8rem}.rt-match-detail strong{color:#334155}.rt-groups-section{background:#fff;border:1px solid #e2e8f0;border-radius:6px;margin-top:.75rem;padding:.75rem}.rt-groups-section strong{color:#475569;display:block;font-size:.85rem;margin-bottom:.5rem}.rt-group-item{background:#f8fafc;border-radius:4px;display:flex;font-size:.85rem;gap:.5rem;margin-top:.5rem;padding:.5rem}.rt-group-index{color:#667eea;font-weight:600}.rt-group-index,.rt-group-value{font-family:Roboto Mono,monospace}.rt-group-value{color:#334155;word-break:break-word}.rt-copy-btn{align-items:center;background:#fff3;border:1px solid #ffffff4d;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;padding:.5rem 1rem;transition:all .2s ease}.rt-copy-btn:hover{background:#ffffff4d;border-color:#ffffff80}.rt-copy-btn-small{align-items:center;background:#667eea;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:.75rem;gap:.25rem;padding:.25rem .5rem;transition:all .2s ease}.rt-copy-btn-small:hover{background:#5568d3}.rt-documentation{margin-top:3rem}.doc-section{border:1px solid #e2e8f0;box-shadow:0 2px 8px #0000000d}.doc-heading{color:#1e293b;font-weight:700;gap:.75rem;margin:0 0 1rem}.doc-text{color:#475569;line-height:1.7;margin:0}.doc-list{color:#475569;line-height:1.8;margin:1rem 0;padding-left:1.5rem}.doc-list li{margin-bottom:.75rem}.doc-list strong{color:#1e293b}.rt-syntax-table{background:#fff;border:1px solid #e2e8f0;border-collapse:collapse;border-radius:8px;margin-top:1rem;overflow:hidden;width:100%}.table-row{grid-template-columns:120px 1fr 1fr;padding:.75rem 1rem}.table-header{font-size:.875rem}.table-row:not(.table-header):hover{background:#f8fafc}.table-cell{color:#475569;font-size:.875rem}.code-highlight{background:#f1f5f9;font-weight:600}.code,.code-highlight{border-radius:4px;font-family:Roboto Mono,monospace;padding:.25rem .5rem}.code{background:#f8fafc;color:#334155;font-size:.85rem}.rt-flags-docs{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:1rem}.flag-doc-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1.5rem}.flag-doc-item h4{color:#667eea;font-size:1.1rem;margin:0 0 .75rem}.flag-doc-item code{background:#f1f5f9;border-radius:4px;font-family:Roboto Mono,monospace;font-weight:600;padding:.25rem .5rem}.flag-doc-item p{color:#475569;font-size:.9rem;line-height:1.6;margin:0}.rt-patterns-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:1rem}.pattern-card{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;border-radius:8px;padding:1.25rem;transition:all .3s ease}.pattern-card:hover{border-color:#cbd5e1;box-shadow:0 4px 12px #0000001a;transform:translateY(-3px)}.pattern-card h4{color:#1e293b;font-size:1rem;margin:0 0 .75rem}.pattern-card code{background:#fff;border:1px solid #e2e8f0;border-radius:6px;color:#667eea;display:block;font-family:Roboto Mono,monospace;font-size:.8rem;line-height:1.5;margin-bottom:.75rem;padding:.75rem;word-break:break-all}.pattern-card p{color:#64748b;font-size:.85rem;line-height:1.5;margin:0}.usage-steps{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:1rem}.usage-step{background:#f8fafc;border-radius:8px;gap:1rem;transition:all .3s ease}.usage-step:hover{box-shadow:0 4px 12px #667eea1a}.step-number{font-size:1.25rem}.step-content h4{color:#1e293b;font-size:1rem;margin:0 0 .5rem}.step-content p{color:#64748b;font-size:.875rem}.important-note{background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #fbbf24}.important-note .doc-heading,.important-note .doc-list{color:#92400e}.important-note .doc-list strong{color:#78350f}@media (max-width:768px){.rt-header{align-items:stretch;flex-direction:column;gap:1rem}.rt-header-note{margin:0}.rt-actions{justify-content:center}.table-row{gap:.5rem}.rt-flags-grid,.rt-matches-grid,.table-row{grid-template-columns:1fr}.rt-examples-grid{flex-direction:column}.rt-flags-docs,.rt-patterns-grid,.usage-steps{grid-template-columns:1fr}}.hed-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;margin:0 auto;max-width:1400px;padding:2rem}.hed-header{align-items:center;display:flex;gap:1rem;justify-content:space-between;margin-bottom:2rem}.hed-header-content{align-items:center;display:flex;flex:1 1;flex-wrap:wrap;gap:.75rem}.hed-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;font-size:1.1rem;margin:0;white-space:nowrap}.hed-subtitle{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-left:4px solid #667eea;border-radius:8px;color:#4a5568;font-size:.85rem;font-weight:400;line-height:1.4;padding:.4rem .8rem;white-space:nowrap}.hed-actions{display:flex;flex-shrink:0;gap:.5rem}.hed-panel{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;margin-bottom:1.5rem;padding:1.5rem}.hed-panel-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.hed-panel-header h2{color:#2d3748;font-size:1.25rem;margin:0}.hed-mode-section{margin-bottom:2rem}.hed-mode-controls{align-items:center;display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.5rem}.hed-mode-buttons{background:#f7fafc;border:1px solid #e2e8f0;border-radius:10px;display:flex;gap:.5rem;padding:.375rem}.hed-mode-btn{align-items:center;background:#0000;border:none;border-radius:8px;color:#4a5568;cursor:pointer;display:flex;font-family:inherit;font-size:.95rem;font-weight:500;gap:.5rem;padding:.625rem 1.25rem;transition:all .2s ease}.hed-mode-btn:hover{background:#667eea1a;color:#667eea}.hed-mode-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px #667eea4d;color:#fff}.hed-encoding-type{align-items:center;display:flex;gap:.75rem}.hed-encoding-type label{color:#4a5568;font-size:.9rem;font-weight:500}.hed-select{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#2d3748;cursor:pointer;font-family:inherit;font-size:.9rem;padding:.625rem 1rem;transition:all .2s ease}.hed-select:focus,.hed-select:hover{border-color:#667eea}.hed-select:focus{box-shadow:0 0 0 3px #667eea1a;outline:none}.hed-swap-btn{background:linear-gradient(135deg,#f093fb,#f5576c);border:none;border-radius:8px;color:#fff;cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:500;padding:.625rem 1.25rem;transition:all .2s ease}.hed-swap-btn:hover:not(:disabled){box-shadow:0 4px 12px #f093fb66;transform:translateY(-1px)}.hed-swap-btn:disabled{cursor:not-allowed;opacity:.5}.hed-examples-section{border-top:1px solid #e2e8f0;margin-top:1.5rem;padding-top:1.5rem}.hed-examples-section h3{color:#2d3748;font-size:1rem;margin-bottom:1rem}.hed-examples-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.hed-example-btn{background:linear-gradient(135deg,#667eea0d,#764ba20d);border:1px solid #e2e8f0;border-radius:8px;color:#4a5568;cursor:pointer;font-family:inherit;font-size:.875rem;padding:.75rem 1rem;text-align:left;transition:all .2s ease}.hed-example-btn:hover{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea;box-shadow:0 2px 8px #667eea26;transform:translateY(-1px)}.hed-io-section{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));margin-bottom:2rem}.hed-copy-btn{align-items:center;background:#f7fafc;border:1px solid #e2e8f0;border-radius:6px;color:#4a5568;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;gap:.375rem;padding:.5rem 1rem;transition:all .2s ease}.hed-copy-btn:hover:not(:disabled){background:#667eea;border-color:#667eea;color:#fff}.hed-copy-btn:disabled{cursor:not-allowed;opacity:.5}.hed-textarea{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;font-family:Monaco,Menlo,Courier New,monospace;font-size:.9rem;line-height:1.6;padding:1rem;resize:vertical;transition:all .2s ease;width:100%}.hed-textarea:focus{background:#fff;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.hed-textarea.hed-output{background:#fafbfc;color:#2d3748}.hed-error-message{align-items:center;background:#fff5f5;border:1px solid #fc8181;border-radius:8px;color:#c53030;display:flex;font-size:.9rem;gap:.75rem;padding:1rem}.hed-reference-section{margin-bottom:2rem}.hed-entities-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.hed-entity-card{background:linear-gradient(135deg,#667eea0d,#764ba20d);border:1px solid #e2e8f0;border-radius:8px;padding:1rem;text-align:center;transition:all .2s ease}.hed-entity-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26;transform:translateY(-2px)}.hed-entity-char{color:#667eea;font-size:2rem;margin-bottom:.5rem}.hed-entity-code{background:#fff;border-radius:4px;color:#4a5568;font-family:Monaco,Menlo,Courier New,monospace;font-size:.875rem;margin-bottom:.5rem;padding:.375rem .5rem}.hed-entity-desc{color:#718096;font-size:.8rem}.hed-documentation{margin-top:3rem}.hed-contexts-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1.5rem}.context-card{background:linear-gradient(135deg,#667eea0d,#764ba20d);border:1px solid #e2e8f0;border-radius:10px;padding:1.5rem;transition:all .2s ease}.context-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26;transform:translateY(-2px)}.context-card h4{color:#667eea;font-size:1.1rem;margin-bottom:.75rem}.context-card p{color:#4a5568;font-size:.9rem;line-height:1.6;margin-bottom:.75rem}.context-card code{background:#fff;border:1px solid #e2e8f0;border-radius:6px;color:#2d3748;display:block;font-family:Monaco,Menlo,Courier New,monospace;font-size:.85rem;margin-bottom:.75rem;overflow-x:auto;padding:.75rem}.context-note{color:#718096;font-size:.8rem;font-style:italic}.hed-entity-types{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:1.5rem}.entity-type-card{background:#fff;border:2px solid #e2e8f0;border-radius:10px;padding:1.5rem;transition:all .2s ease}.entity-type-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26}.entity-type-card h4{color:#2d3748;font-size:1.1rem;margin-bottom:.75rem}.entity-type-card p{color:#718096;font-size:.9rem;margin-bottom:1rem}.entity-examples{color:#4a5568;font-family:Monaco,Menlo,Courier New,monospace;font-size:.875rem;line-height:1.8}.entity-examples code{background:#f7fafc;border-radius:4px;color:#667eea;padding:.25rem .5rem}.xss-examples{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));margin-top:1.5rem}.xss-card{border:2px solid;border-radius:10px;padding:1.5rem}.xss-card.danger{background:linear-gradient(135deg,#f565650d,#e53e3e0d);border-color:#fc8181}.xss-card.safe{background:linear-gradient(135deg,#48bb780d,#38a1690d);border-color:#68d391}.xss-card h4{font-size:1.1rem;margin-bottom:1rem}.xss-card.danger h4{color:#c53030}.xss-card.safe h4{color:#2f855a}.xss-card pre{background:#fff;border:1px solid #e2e8f0;border-radius:6px;color:#2d3748;font-family:Monaco,Menlo,Courier New,monospace;font-size:.85rem;line-height:1.6;overflow-x:auto;padding:1rem}.hed-chars-table{border:1px solid #e2e8f0;border-radius:8px;margin-top:1.5rem;overflow:hidden}.table-row{grid-gap:1rem;border-bottom:1px solid #e2e8f0;display:grid;gap:1rem;grid-template-columns:100px 150px 120px 120px 1fr;padding:1rem}.table-row:last-child{border-bottom:none}.table-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600}.table-row:not(.table-header):hover{background:#f7fafc}.table-cell{align-items:center;display:flex;font-size:.9rem}.code-highlight{color:#667eea;font-size:1.5rem;font-weight:700}.code-highlight,.table-cell.code{font-family:Monaco,Menlo,Courier New,monospace}.table-cell.code{background:#f7fafc;border-radius:4px;color:#4a5568;padding:.375rem .5rem}@media (max-width:768px){.hed-container{padding:1rem}.hed-header{align-items:stretch;flex-direction:column;gap:1rem}.hed-header-content{align-items:flex-start;flex-direction:column}.hed-title{font-size:1.25rem;white-space:normal}.hed-actions{justify-content:center;width:100%}.hed-mode-controls{align-items:stretch;flex-direction:column}.hed-mode-buttons{justify-content:stretch}.hed-mode-btn{flex:1 1}.hed-contexts-grid,.hed-entity-types,.hed-examples-grid,.hed-io-section,.table-row,.xss-examples{grid-template-columns:1fr}.table-row{gap:.5rem}.table-cell{justify-content:flex-start}.table-header .table-cell:before{content:attr(data-label) ": ";font-weight:700;margin-right:.5rem}.usage-step{flex-direction:column}.doc-section{padding:1.5rem}}@media (max-width:480px){.hed-title{font-size:1.25rem}.hed-subtitle{display:block;font-size:.85rem;margin-top:.5rem}.hed-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%}.btn{flex:0 1 auto;min-width:120px}.hed-entities-grid{grid-template-columns:1fr}}.mdp-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;margin:0 auto;max-width:1600px;padding:2rem}.mdp-header{align-items:center;display:flex;gap:1rem;justify-content:space-between;margin-bottom:2rem}.mdp-header-content{align-items:center;display:flex;flex:1 1;flex-wrap:wrap;gap:.75rem}.mdp-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;font-size:1.1rem;margin:0;white-space:nowrap}.mdp-subtitle{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-left:4px solid #667eea;border-radius:8px;color:#4a5568;font-size:.85rem;font-weight:400;line-height:1.4;padding:.4rem .8rem;white-space:nowrap}.mdp-actions{display:flex;flex-shrink:0;gap:.5rem}.mdp-panel{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;margin-bottom:1.5rem;padding:1.5rem}.mdp-panel-header{align-items:center;border-bottom:2px solid #e2e8f0;display:flex;justify-content:space-between;margin-bottom:1rem;padding-bottom:1rem}.mdp-header-left{align-items:center;display:flex;gap:.5rem}.mdp-header-left h2{color:#2d3748;font-size:1.25rem;margin:0}.mdp-header-actions{align-items:center;display:flex;gap:.5rem}.mdp-examples-section{margin-bottom:2rem}.mdp-examples-section h3{color:#2d3748;font-size:1rem;margin-bottom:1rem}.mdp-examples-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.mdp-example-btn{background:linear-gradient(135deg,#667eea0d,#764ba20d);border:1px solid #e2e8f0;border-radius:8px;color:#4a5568;cursor:pointer;font-family:inherit;font-size:.875rem;padding:.75rem 1rem;text-align:left;transition:all .2s ease}.mdp-example-btn:hover{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea;box-shadow:0 2px 8px #667eea26;transform:translateY(-1px)}.mdp-editor-section{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;margin-bottom:2rem}.mdp-editor-panel,.mdp-preview-panel{display:flex;flex-direction:column;height:600px}.mdp-textarea{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex:1 1;font-family:Monaco,Menlo,Courier New,monospace;font-size:.9rem;line-height:1.6;padding:1rem;resize:none;transition:all .2s ease;width:100%}.mdp-textarea:focus{background:#fff;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.mdp-preview-content{background:#fff;border:1px solid #e2e8f0;border-radius:8px;flex:1 1;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;overflow-y:auto;padding:1.5rem}.mdp-placeholder{color:#a0aec0;margin-top:2rem;text-align:center}.mdp-preview-content h1,.mdp-preview-content h2,.mdp-preview-content h3,.mdp-preview-content h4,.mdp-preview-content h5,.mdp-preview-content h6{color:#2d3748;font-weight:600;margin-bottom:.75rem;margin-top:1.5rem}.mdp-preview-content h1{border-bottom:2px solid #e2e8f0;font-size:2rem;padding-bottom:.5rem}.mdp-preview-content h2{font-size:1.5rem}.mdp-preview-content h3{font-size:1.25rem}.mdp-preview-content h4{font-size:1.1rem}.mdp-preview-content h5{font-size:1rem}.mdp-preview-content h6{font-size:.9rem}.mdp-preview-content p{color:#4a5568;margin:1rem 0}.mdp-preview-content strong{color:#2d3748;font-weight:600}.mdp-preview-content em{font-style:italic}.mdp-preview-content del{color:#718096;text-decoration:line-through}.mdp-preview-content code{background:#f7fafc;border-radius:3px;color:#e53e3e;font-family:Monaco,Menlo,Courier New,monospace;font-size:.875em;padding:.2rem .4rem}.mdp-preview-content pre{background:#2d3748;border-radius:6px;margin:1rem 0;overflow-x:auto;padding:1rem}.mdp-preview-content pre code{background:none;color:#f7fafc;font-size:.875rem;line-height:1.5;padding:0}.mdp-preview-content blockquote{border-left:4px solid #667eea;color:#718096;font-style:italic;margin:1rem 0;padding-left:1rem}.mdp-preview-content ol,.mdp-preview-content ul{color:#4a5568;margin:1rem 0;padding-left:2rem}.mdp-preview-content ul{list-style-type:disc}.mdp-preview-content ol{list-style-type:decimal}.mdp-preview-content li{margin:.5rem 0}.mdp-preview-content a{color:#667eea;text-decoration:none;transition:color .2s ease}.mdp-preview-content a:hover{color:#764ba2;text-decoration:underline}.mdp-preview-content img{border-radius:6px;height:auto;margin:1rem 0;max-width:100%}.mdp-preview-content hr{border:none;border-top:2px solid #e2e8f0;margin:2rem 0}.mdp-preview-content table{border:1px solid #e2e8f0;border-collapse:collapse;margin:1rem 0;width:100%}.mdp-preview-content td,.mdp-preview-content th{border:1px solid #e2e8f0;padding:.75rem;text-align:left}.mdp-preview-content th{background:#f7fafc;color:#2d3748;font-weight:600}.mdp-preview-content td{color:#4a5568}.mdp-action-btn,.mdp-copy-btn{align-items:center;background:#f7fafc;border:1px solid #e2e8f0;border-radius:6px;color:#4a5568;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;gap:.375rem;padding:.5rem 1rem;transition:all .2s ease}.mdp-action-btn:hover:not(:disabled),.mdp-copy-btn:hover:not(:disabled){background:#667eea;border-color:#667eea;color:#fff}.mdp-action-btn:disabled,.mdp-copy-btn:disabled{cursor:not-allowed;opacity:.5}.mdp-upload-btn{align-items:center;background:#f7fafc;border:1px solid #e2e8f0;border-radius:6px;color:#4a5568;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;gap:.375rem;padding:.5rem 1rem;transition:all .2s ease}.mdp-upload-btn:hover{background:#667eea;border-color:#667eea;color:#fff}.mdp-documentation{margin-top:3rem}.mdp-syntax-section{margin-bottom:2rem}.mdp-syntax-title{border-bottom:2px solid #e2e8f0;color:#2d3748;font-size:1.2rem;margin-bottom:1rem;padding-bottom:.5rem}.mdp-syntax-example{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;margin-bottom:1.5rem}.syntax-code{background:#2d3748;border-radius:8px;padding:1rem}.syntax-code pre{word-wrap:break-word;color:#f7fafc;font-family:Monaco,Menlo,Courier New,monospace;font-size:.875rem;line-height:1.6;margin:0;white-space:pre-wrap}.syntax-description{align-items:center;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-left:4px solid #667eea;border-radius:8px;color:#4a5568;display:flex;font-size:.9rem;line-height:1.6;padding:1rem}@media (max-width:1200px){.mdp-editor-section{grid-template-columns:1fr}.mdp-editor-panel,.mdp-preview-panel{height:500px}.mdp-syntax-example{grid-template-columns:1fr}}@media (max-width:768px){.mdp-container{padding:1rem}.mdp-header{align-items:stretch;flex-direction:column;gap:1rem}.mdp-header-content{align-items:flex-start;flex-direction:column}.mdp-title{font-size:1.1rem}.mdp-subtitle,.mdp-title{white-space:normal}.mdp-actions{justify-content:center;width:100%}.btn{flex:0 1 auto;min-width:120px}.mdp-examples-grid{grid-template-columns:1fr}.mdp-panel-header{align-items:flex-start;flex-direction:column;gap:1rem}.mdp-header-actions{flex-wrap:wrap;width:100%}.mdp-action-btn,.mdp-copy-btn,.mdp-upload-btn{flex:1 1;min-width:120px}.mdp-editor-panel,.mdp-preview-panel{height:400px}.usage-step{flex-direction:column}.doc-section{padding:1.5rem}}@media (max-width:480px){.mdp-title{font-size:1rem}.mdp-subtitle{font-size:.8rem}.mdp-header-actions{flex-direction:column}.mdp-action-btn,.mdp-copy-btn,.mdp-upload-btn{width:100%}.mdp-preview-content,.mdp-textarea{font-size:.875rem}}.dfc-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;margin:0 auto;max-width:1600px;padding:2rem}.dfc-header{align-items:center;display:flex;gap:1rem;justify-content:space-between;margin-bottom:2rem}.dfc-header-content{align-items:center;display:flex;flex:1 1;flex-wrap:wrap;gap:.75rem}.dfc-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;font-size:1.1rem;margin:0;white-space:nowrap}.dfc-subtitle{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-left:4px solid #667eea;border-radius:8px;color:#4a5568;font-size:.85rem;font-weight:400;line-height:1.4;padding:.4rem .8rem;white-space:nowrap}.dfc-actions{display:flex;flex-shrink:0;gap:.5rem}.btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:500;gap:.5rem;padding:.625rem 1.25rem;transition:all .2s ease}.btn-secondary{background:#f7fafc;border:1px solid #e2e8f0;color:#4a5568}.btn-secondary:hover:not(:disabled){background:#edf2f7;box-shadow:0 2px 4px #0000001a;transform:translateY(-1px)}.btn-secondary:disabled{cursor:not-allowed;opacity:.5}.dfc-panel{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;margin-bottom:1.5rem;padding:1.5rem}.dfc-panel-header{align-items:center;border-bottom:2px solid #e2e8f0;display:flex;justify-content:space-between;margin-bottom:1rem;padding-bottom:1rem}.dfc-header-left{align-items:center;display:flex;gap:.5rem}.dfc-header-left h2{color:#2d3748;font-size:1.25rem;margin:0}.dfc-header-actions{align-items:center;display:flex;gap:.5rem}.dfc-controls-grid,.dfc-controls-section{margin-bottom:1.5rem}.dfc-controls-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.dfc-control-group{display:flex;flex-direction:column;gap:.5rem}.dfc-control-group label{color:#2d3748;font-size:.9rem;font-weight:600}.dfc-button-group{display:flex;gap:.5rem}.dfc-control-btn{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#4a5568;cursor:pointer;flex:1 1;font-family:inherit;font-size:.875rem;font-weight:500;padding:.625rem 1rem;transition:all .2s ease}.dfc-control-btn:hover{background:#f7fafc;border-color:#667eea}.dfc-control-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff}.dfc-select{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#2d3748;cursor:pointer;font-family:inherit;font-size:.875rem;padding:.625rem;transition:all .2s ease}.dfc-select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.dfc-checkbox-group{display:flex;flex-direction:column;gap:.5rem}.dfc-checkbox{align-items:center;color:#4a5568;cursor:pointer;display:flex;font-size:.875rem;gap:.5rem}.dfc-checkbox input[type=checkbox]{cursor:pointer;height:16px;width:16px}.dfc-action-buttons{display:flex;gap:.5rem}.dfc-action-btn{align-items:center;background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;color:#4a5568;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;gap:.375rem;padding:.625rem 1rem;transition:all .2s ease}.dfc-action-btn:hover:not(:disabled){background:#667eea;border-color:#667eea;color:#fff}.dfc-action-btn:disabled{cursor:not-allowed;opacity:.5}.dfc-examples-section{border-top:1px solid #e2e8f0;margin-top:1.5rem;padding-top:1.5rem}.dfc-examples-section h3{color:#2d3748;font-size:1rem;margin-bottom:1rem}.dfc-examples-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.dfc-example-btn{background:linear-gradient(135deg,#667eea0d,#764ba20d);border:1px solid #e2e8f0;border-radius:8px;color:#4a5568;cursor:pointer;font-family:inherit;font-size:.875rem;padding:.75rem 1rem;text-align:left;transition:all .2s ease}.dfc-example-btn:hover{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea;box-shadow:0 2px 8px #667eea26;transform:translateY(-1px)}.dfc-stats{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.dfc-stat-item{border:2px solid;border-radius:8px;display:flex;flex:1 1;flex-direction:column;gap:.5rem;min-width:150px;padding:1rem}.dfc-stat-item.added{background:#48bb781a;border-color:#48bb78}.dfc-stat-item.removed{background:#f565651a;border-color:#f56565}.dfc-stat-item.unchanged{background:#a0aec01a;border-color:#a0aec0}.dfc-stat-label{color:#2d3748;font-size:.875rem;font-weight:600}.dfc-stat-value{color:#2d3748;font-size:1.5rem;font-weight:700}.dfc-input-section{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;margin-bottom:1.5rem}.dfc-input-panel{display:flex;flex-direction:column;height:400px}.dfc-textarea{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex:1 1;font-family:Monaco,Menlo,Courier New,monospace;font-size:.9rem;line-height:1.6;padding:1rem;resize:none;transition:all .2s ease;width:100%}.dfc-textarea:focus{background:#fff;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.dfc-copy-btn,.dfc-upload-btn{align-items:center;background:#f7fafc;border:1px solid #e2e8f0;border-radius:6px;color:#4a5568;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;gap:.375rem;padding:.5rem 1rem;transition:all .2s ease}.dfc-copy-btn:hover:not(:disabled),.dfc-upload-btn:hover{background:#667eea;border-color:#667eea;color:#fff}.dfc-copy-btn:disabled{cursor:not-allowed;opacity:.5}.dfc-output-section{margin-bottom:2rem}.dfc-diff-side-by-side{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.dfc-diff-column{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.dfc-diff-header{background:#f7fafc;border-bottom:2px solid #e2e8f0;color:#2d3748;font-weight:600;padding:.75rem 1rem}.dfc-diff-content{overflow-y:auto}.dfc-diff-content,.dfc-diff-unified{font-family:Monaco,Menlo,Courier New,monospace;font-size:.875rem;line-height:1.5;max-height:500px}.dfc-diff-unified{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;overflow-y:auto}.dfc-diff-line{display:flex;min-height:1.5rem;padding:.25rem 0}.dfc-diff-line.added{background:#48bb7826;border-left:3px solid #48bb78}.dfc-diff-line.removed{background:#f5656526;border-left:3px solid #f56565}.dfc-diff-line.modified{background:#ed893626;border-left:3px solid #ed8936}.dfc-diff-line.unchanged{background:#fff;border-left:3px solid #0000}.dfc-line-number{color:#a0aec0;display:inline-block;flex-shrink:0;padding:0 .75rem;text-align:right;-webkit-user-select:none;user-select:none;width:50px}.dfc-line-numbers{display:flex;flex-shrink:0}.dfc-line-prefix{color:#2d3748;display:inline-block;flex-shrink:0;font-weight:600;padding:0 .5rem;text-align:center;-webkit-user-select:none;user-select:none;width:30px}.dfc-line-content{color:#2d3748;flex:1 1;padding:0 .75rem;white-space:pre-wrap;word-break:break-word}.dfc-documentation{margin-top:3rem}.doc-section{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;margin-bottom:2rem;padding:2rem}.doc-section.important-note{background:linear-gradient(135deg,#f565650d,#e53e3e0d);border:2px solid #fc8181}.doc-heading{align-items:center;color:#2d3748;display:flex;font-size:1.5rem;gap:.5rem;margin-bottom:1rem}.doc-text{color:#4a5568;font-size:1rem;line-height:1.8;margin-bottom:1rem}.doc-list{list-style:none;margin:0;padding:0}.doc-list li{border-bottom:1px solid #e2e8f0;color:#4a5568;line-height:1.6;padding:.75rem 0 .75rem 1.5rem;position:relative}.doc-list li:last-child{border-bottom:none}.doc-list li:before{color:#667eea;content:"▸";font-weight:700;left:0;position:absolute}.doc-list li strong{color:#2d3748}.dfc-feature-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1.5rem}.feature-card{background:linear-gradient(135deg,#667eea0d,#764ba20d);border:1px solid #e2e8f0;border-radius:10px;padding:1.5rem;transition:all .2s ease}.feature-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26}.feature-card h4{color:#2d3748;font-size:1.1rem;margin-bottom:.75rem}.feature-card p{color:#4a5568;font-size:.9rem;line-height:1.6;margin:.5rem 0}.feature-card code{background:#2d3748;border-radius:4px;color:#f7fafc;display:block;font-size:.85rem;margin-top:.75rem;padding:.5rem}.feature-note{color:#667eea!important;font-size:.85rem!important;font-style:italic;margin-top:.5rem!important}.dfc-color-guide{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.color-item{align-items:center;border:1px solid #e2e8f0;border-radius:8px;display:flex;gap:1rem;padding:1rem}.color-item.added{background:#48bb781a}.color-item.removed{background:#f565651a}.color-item.modified{background:#ed89361a}.color-item.unchanged{background:#f7fafc}.color-box{border-radius:6px;flex-shrink:0;height:40px;width:40px}.color-item.added .color-box{background:#48bb78}.color-item.removed .color-box{background:#f56565}.color-item.modified .color-box{background:#ed8936}.color-item.unchanged .color-box{background:#e2e8f0}.color-info{flex:1 1}.color-info strong{color:#2d3748;font-size:.95rem}.usage-steps{margin-top:1.5rem}.usage-step{background:linear-gradient(135deg,#667eea0d,#764ba20d);border:1px solid #e2e8f0;border-radius:10px;display:flex;gap:1.5rem;margin-bottom:1.5rem;padding:1.5rem;transition:all .2s ease}.usage-step:hover{border-color:#667eea;box-shadow:0 2px 8px #667eea26}.step-number{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:1.1rem;font-weight:700;height:40px;justify-content:center;width:40px}.step-content h4{color:#2d3748;font-size:1.1rem;margin-bottom:.5rem}.step-content p{color:#4a5568;font-size:.9rem;line-height:1.6;margin:0}@media (max-width:1200px){.dfc-controls-grid,.dfc-diff-side-by-side,.dfc-input-section{grid-template-columns:1fr}}@media (max-width:768px){.dfc-container{padding:1rem}.dfc-header{align-items:stretch;flex-direction:column;gap:1rem}.dfc-header-content{align-items:flex-start;flex-direction:column}.dfc-title{font-size:1.1rem}.dfc-subtitle,.dfc-title{white-space:normal}.dfc-actions{justify-content:center;width:100%}.dfc-input-panel{height:300px}.dfc-stats{flex-direction:column}.dfc-feature-grid{grid-template-columns:1fr}.usage-step{flex-direction:column}.doc-section{padding:1.5rem}}@media (max-width:480px){.dfc-title{font-size:1rem}.dfc-subtitle{font-size:.8rem}.dfc-controls-grid{gap:1rem}.dfc-examples-grid{grid-template-columns:1fr}}.tc-container{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;margin:0 auto;max-width:1400px;padding:2rem}.tc-back-tools-centered{display:flex;justify-content:center;margin-bottom:1.5rem}.tc-controls{align-items:center;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;display:flex;flex-wrap:nowrap;gap:1rem;margin-bottom:2rem;padding:1.5rem}.tc-search-wrapper{align-items:center;display:flex;flex:0 0 auto;gap:.5rem;position:relative}.tc-search-input{border:2px solid #1a94ff;border-radius:6px;color:#000;font-family:inherit;font-size:.9rem;padding:.6rem .8rem;transition:all .2s;width:350px}.tc-search-input::placeholder{color:#000;font-size:.85rem;font-style:italic}.tc-search-input:focus{border-color:#1a94ff;border-radius:40px;border-width:4px;box-shadow:0 0 0 3px #1a94ff33;outline:none}.tc-search-input:focus::placeholder{color:#888}.tc-search-dropdown{animation:tc-slideDown .2s ease-out;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;left:0;max-height:300px;overflow-y:auto;position:absolute;right:0;top:calc(100% + 8px);z-index:100}@keyframes tc-slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tc-search-item{align-items:center;border-bottom:1px solid #f0f0f0;cursor:pointer;display:flex;gap:.75rem;padding:.75rem 1rem;transition:background .2s}.tc-search-item:hover{background:#f8f9fa}.tc-search-item:last-child{border-bottom:none}.tc-search-abbr{color:#1a94ff;font-size:.9rem;font-weight:600;min-width:50px}.tc-search-label{color:#333;flex:1 1;font-size:.9rem}.tc-date-time-wrapper{align-items:center;display:flex;gap:.25rem}.tc-arrow-btn{align-items:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid #dee2e6;border-radius:8px;color:#495057;cursor:pointer;display:flex;height:36px;justify-content:center;min-width:36px;padding:.5rem;transition:all .2s ease}.tc-arrow-btn:hover{background:linear-gradient(135deg,#1a94ff,#0d7ad6);border-color:#1a94ff;box-shadow:0 4px 12px #1a94ff66;color:#fff;transform:translateY(-2px)}.tc-arrow-btn:active{box-shadow:0 2px 6px #1a94ff4d;transform:translateY(0)}.tc-date-input,.tc-time-input{border:1px solid #ddd;border-radius:6px;cursor:pointer;font-family:inherit;font-size:.9rem;padding:.6rem .8rem;transition:all .2s}.tc-date-input:focus,.tc-time-input:focus{border-color:#1a94ff;box-shadow:0 0 0 3px #1a94ff1a;outline:none}.tc-date-input{width:118px}.tc-time-input{width:100px}.tc-reset-btn,.tc-submit-btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:flex;font-family:inherit;font-size:.9rem;font-weight:600;gap:.5rem;padding:.6rem 1.2rem;transition:all .2s}.tc-submit-btn{background:#10b981;color:#fff}.tc-submit-btn:hover{background:#059669;box-shadow:0 4px 8px #10b9814d;transform:translateY(-1px)}.tc-reset-btn{background:#ef4444;color:#fff}.tc-reset-btn:hover{background:#dc2626;box-shadow:0 4px 8px #ef44444d;transform:translateY(-1px)}.tc-spacer{flex:1 1}.tc-format-toggle{background:#f0f0f0;border-radius:6px;display:flex;gap:0;padding:2px}.tc-format-btn{background:#0000;border:none;border-radius:4px;color:#666;cursor:pointer;font-family:inherit;font-size:.85rem;font-weight:600;padding:.6rem 1rem;transition:all .2s}.tc-format-btn.active{background:#1a94ff;color:#fff}.tc-format-btn:hover:not(.active){background:#e0e0e0}.tc-timezone-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}.tc-tile{animation:tc-tileAppear .4s ease-out;background:#fff;border:2px solid #0000;border-radius:12px;box-shadow:0 2px 8px #0000001a;min-height:auto;padding:1rem;position:relative;transition:all .3s ease}.tc-tile-utc{background:linear-gradient(135deg,#e0f2fe,#bae6fd);border-color:#0ea5e9}.tc-tile-browser{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#f59e0b}@keyframes tc-tileAppear{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.tc-tile:hover{border-color:#1a94ff;box-shadow:0 8px 16px #00000026;transform:translateY(-4px)}.tc-tile-removing{animation:tc-tileRemove .3s ease-out forwards}@keyframes tc-tileRemove{to{opacity:0;transform:scale(.8) translateY(-20px)}}.tc-tile-remove{align-items:center;background:#fee;border:none;border-radius:50%;color:#e53935;cursor:pointer;display:flex;height:28px;justify-content:center;opacity:0;position:absolute;right:.75rem;top:.75rem;transition:all .2s;width:28px}.tc-tile:hover .tc-tile-remove{opacity:1}.tc-tile-remove:hover{background:#e53935;color:#fff;transform:rotate(90deg) scale(1.1)}.tc-tile-header{border-bottom:2px solid #f0f0f0;margin-bottom:.75rem;padding-bottom:.75rem}.tc-tile-abbr{color:#1a94ff;font-size:1.25rem;font-weight:700;margin-bottom:.15rem}.tc-tile-label{color:#666;font-size:.75rem;line-height:1.3}.tc-tile-your-tz{color:#f59e0b;font-style:italic;font-weight:600}.tc-tile-datetime{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:6px;display:flex;flex-direction:column;font-family:Courier New,monospace;gap:.25rem;padding:.5rem;transition:background .3s ease}.tc-tile-datetime.tc-tile-am{background:linear-gradient(135deg,#fef3c7,#fde68a)}.tc-tile-am .tc-tile-date-format{color:#92400e}.tc-tile-am .tc-tile-date-value{color:#78350f}.tc-tile-am .tc-tile-time-value{color:#f59e0b}.tc-tile-datetime.tc-tile-pm{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}.tc-tile-pm .tc-tile-date-format{color:#1e3a8a}.tc-tile-pm .tc-tile-date-value{color:#1e40af}.tc-tile-pm .tc-tile-time-value{color:#2563eb}.tc-tile-datetime.tc-tile-night{background:linear-gradient(135deg,#1e293b,#0f172a);overflow:hidden;position:relative}.tc-tile-night .tc-tile-date-format{color:#cbd5e1;position:relative;z-index:2}.tc-tile-night .tc-tile-date-value{color:#e2e8f0;position:relative;z-index:2}.tc-tile-night .tc-tile-time-value{color:#fbbf24;position:relative;z-index:2}.tc-tile-night .tc-tile-separator{color:#94a3b8;position:relative;z-index:2}.tc-tile-night .tc-tile-period{color:#cbd5e1;position:relative;z-index:2}.tc-night-stars{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.tc-star{animation:twinkle 2s ease-in-out infinite;font-size:1rem;position:absolute}.tc-star-1{animation-delay:0s;left:10%;top:15%}.tc-star-2{animation-delay:.4s;right:15%;top:25%}.tc-star-3{animation-delay:.8s;bottom:30%;left:20%}.tc-star-4{animation-delay:1.2s;right:25%;top:40%}.tc-star-5{animation-delay:1.6s;bottom:20%;right:10%}@keyframes twinkle{0%,to{opacity:.3;transform:scale(1)}50%{filter:drop-shadow(0 0 6px #fbbf24);opacity:1;transform:scale(1.3)}}.tc-tile-date-format{color:#000;font-size:.9rem;font-style:italic;font-weight:700;text-align:center}.tc-tile-values{align-items:center;color:#333;display:flex;font-size:1rem;font-weight:600;gap:.5rem;justify-content:center}.tc-tile-date-value{color:#333}.tc-tile-separator{color:#999;font-size:.9rem}.tc-tile-time-value{color:#1a94ff;font-size:1.1rem;font-weight:700}.tc-tile-period{align-items:center;color:#666;display:flex;font-size:.85rem;gap:.25rem;margin-left:.25rem}.tc-icon-indicator{color:#f59e0b}.tc-info-note{align-items:center;background:linear-gradient(135deg,#e0f2fe,#dbeafe);border-left:4px solid #1a94ff;border-radius:8px;box-shadow:0 2px 8px #1a94ff1a;display:flex;gap:.6rem;margin-bottom:1rem;padding:.75rem 1.25rem}.tc-info-icon{flex-shrink:0;font-size:1.2rem}.tc-info-text{color:#1e40af;font-size:.8rem;line-height:1.3}.tc-info-text strong{color:#1e3a8a;font-weight:700}@media (max-width:1200px){.tc-timezone-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:900px){.tc-timezone-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.tc-container{padding:1rem}.tc-search-input{width:100%}.tc-controls{align-items:stretch;flex-direction:column;gap:.75rem}.tc-search-wrapper{width:100%}.tc-search-input{flex:1 1;width:auto}.tc-date-input,.tc-time-input{width:100%}.tc-format-toggle,.tc-reset-btn,.tc-submit-btn{justify-content:center;width:100%}.tc-timezone-grid{gap:1rem;grid-template-columns:1fr}}@media (max-width:480px){.tc-tile-abbr{font-size:1.1rem}.tc-tile-datetime{flex-wrap:wrap;font-size:.85rem}.tc-tile-time-value{font-size:1rem}}.update-notification{animation:slideUp .4s ease-out;bottom:2rem;position:fixed;right:2rem;z-index:9999}@keyframes slideUp{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}.update-content{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;box-shadow:0 8px 32px #667eea66;color:#fff;display:flex;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;gap:1rem;max-width:550px;padding:1.5rem}.update-icon{animation:pulse 2s ease-in-out infinite;flex-shrink:0;font-size:2rem}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.update-text{flex:1 1}.update-text strong{display:block;font-size:1.1rem;font-weight:700;margin-bottom:.25rem}.update-text p{font-size:.9rem;line-height:1.4;margin:0;opacity:.95}.update-actions{display:flex;flex-direction:column;flex-shrink:0;gap:.5rem}.update-btn{border:none;border-radius:8px;cursor:pointer;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.9rem;font-weight:600;padding:.6rem 1.2rem;transition:all .2s ease;white-space:nowrap}.update-btn-primary{background:#fff;color:#667eea}.update-btn-primary:hover{box-shadow:0 4px 12px #ffffff4d;transform:translateY(-2px)}.update-btn-secondary{background:#fff3;border:1px solid #ffffff4d;color:#fff}.update-btn-secondary:hover{background:#ffffff4d}.update-countdown-text{animation:urgentPulse 1s ease-in-out infinite;background:#ffffff40;border-radius:6px;display:block;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.875rem;font-weight:600;letter-spacing:.3px;margin-top:.75rem;padding:.5rem .875rem;text-align:center}@keyframes urgentPulse{0%,to{background:#fff3}50%{background:#fff6}}.update-mini-indicator{animation:slideDown .3s ease-out;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;box-shadow:0 4px 12px #667eea4d;color:#fff;cursor:pointer;padding:.75rem 1rem;position:fixed;right:1rem;top:1rem;transition:all .2s ease;z-index:9998}@keyframes slideDown{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.update-mini-indicator:hover{box-shadow:0 6px 16px #667eea66;transform:translateY(-2px)}.update-mini-content{align-items:center;display:flex;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.9rem;font-weight:600;gap:.5rem}.update-mini-countdown{animation:urgentPulse 1s ease-in-out infinite;font-size:.85rem;opacity:.9}@media (max-width:768px){.update-notification{bottom:1rem;left:1rem;right:1rem}.update-content{flex-direction:column;padding:1.25rem;text-align:center}.update-actions{flex-direction:row;width:100%}.update-btn{flex:1 1}.update-mini-indicator{left:.5rem;padding:.6rem .8rem;right:.5rem;top:.5rem}.update-mini-content{font-size:.85rem;justify-content:center}}