.blogs-page{padding:30px 60px}.blogs-title{text-align:center;letter-spacing:-.5px;font-size:64px;font-weight:700}.blogs-title span{background:linear-gradient(90deg,#8b5cf6,#22d3ee);color:#0000;-webkit-background-clip:text}.blogs-subtitle{text-align:center;opacity:.7;margin-top:10px;font-size:.95rem}.blogs-grid{grid-template-columns:repeat(auto-fit,minmax(340px,380px));justify-content:center;gap:32px;margin-top:60px;display:grid}.blog-card{cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:18px;flex-direction:column;justify-content:space-between;padding:26px;transition:transform .35s,box-shadow .35s,border-color .35s;display:flex}.blog-card:hover{border-color:#8b5cf673;transform:translateY(-6px);box-shadow:0 0 0 1px #8b5cf640,0 0 12px #22d3ee59}.blog-title{margin-bottom:8px;font-size:1.12rem;font-weight:600}.blog-desc{opacity:.75;font-size:.95rem;line-height:1.45}.blog-tags{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.blog-tags span{opacity:.85;background:#ffffff14;border-radius:999px;padding:4px 10px;font-size:.7rem}.blog-footer{justify-content:space-between;align-items:center;margin-top:18px;display:flex}.blog-meta{opacity:.6;font-size:.75rem}.blog-share{opacity:.6;font-size:.85rem;transition:opacity .25s,transform .25s}.blog-card:hover .blog-share{opacity:1;transform:translateY(-2px)}.blog-modal-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:999;background:#000000a6;place-items:center;display:grid;position:fixed;inset:0}.blog-modal{background:#0b0b0b;border-radius:22px;flex-direction:column;width:720px;max-height:80vh;padding:28px;display:flex;position:relative;overflow:hidden auto;box-shadow:0 0 0 2px #8b5cf640,0 0 12px #8b5cf640,0 40px 80px #000000e6;height:auto!important}.blog-header h2{margin-bottom:4px;font-size:1.4rem}.blog-header .blog-meta{opacity:.6;font-size:.8rem}.blog-divider{background:linear-gradient(90deg,#0000,#8b5cf659,#22d3ee59,#0000);border-radius:999px;height:1px;margin:22px 0}.blog-body{opacity:.9;white-space:pre-line;flex:1;min-height:0;padding-right:10px;font-size:.95rem;line-height:1.7;overflow-y:auto}.blog-body::-webkit-scrollbar{width:6px}.blog-body::-webkit-scrollbar-thumb{background:#8b5cf659;border-radius:10px}.blog-body::-webkit-scrollbar-track{background:0 0}.modal-tags{flex-wrap:wrap;gap:10px;display:flex}.modal-tags span{background:#ffffff14;border-radius:999px;padding:4px 12px;font-size:.7rem}.close-btn,.share-btn{cursor:pointer;color:#fff;opacity:.7;background:0 0;border:none;transition:opacity .25s,transform .25s;position:absolute;top:18px}.close-btn:hover,.share-btn:hover{opacity:1;transform:scale(1.05)}.close-btn{right:18px}.share-btn{right:52px}.share-page{place-items:center;min-height:70vh;display:grid}.share-card{text-align:center;background:#ffffff0d;border:1px solid #ffffff14;border-radius:20px;width:520px;padding:32px;box-shadow:0 0 0 1px #8b5cf640,0 0 12px #22d3ee73}.share-card h1{margin-bottom:18px;font-size:1.4rem}.share-card input{color:#fff;background:#0b0b0b;border:1px solid #ffffff1f;border-radius:10px;width:100%;margin-bottom:22px;padding:12px}.share-actions{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.share-actions a{color:#fff;background:#ffffff14;border-radius:999px;padding:10px 16px;font-size:.85rem;text-decoration:none;transition:transform .25s,box-shadow .25s}.share-actions a:hover{transform:translateY(-3px);box-shadow:0 0 18px #8b5cf673}.blog-modal h2{margin-bottom:14px;font-size:1.2rem}.blog-modal input{color:#fff;background:#0b0b0b;border:1px solid #ffffff1f;border-radius:10px;width:100%;padding:12px 14px;font-size:.85rem}.share-actions a{background:#ffffff14;box-shadow:none!important;transform:none!important}.share-actions a:hover{background:#ffffff1f;box-shadow:none!important;transform:none!important}.close-btn:hover,.share-btn:hover{box-shadow:none!important;transform:none!important}.blog-modal.share-only{box-shadow:0 0 0 1px #8b5cf640,0 0 12px #22d3ee73}.blog-modal-overlay{overflow:hidden}.blog-modal{overscroll-behavior:contain;height:85vh;overflow-x:hidden;overflow-y:auto!important}.blog-scroll{overflow:visible!important}.blog-body{padding-right:0;max-height:none!important;overflow:visible!important}.blog-modal::-webkit-scrollbar{width:12px}.blog-modal::-webkit-scrollbar-track{background:0 0;margin-block:20px}.blog-modal::-webkit-scrollbar-thumb{background-color:#ffffff40;background-clip:content-box;border:3px solid #0000;border-radius:20px}.blog-modal::-webkit-scrollbar-thumb:hover{background-color:#fff6}.blog-modal{scrollbar-width:thin;scrollbar-color:#ffffff59 transparent}.close-btn,.share-btn{opacity:.8;box-shadow:none!important;filter:none!important;background:0 0!important;border:none!important;outline:none!important;transition:none!important;transform:none!important}.close-btn:hover,.share-btn:hover{box-shadow:none!important;opacity:.8!important;background:0 0!important;transform:none!important}.close-btn:active,.share-btn:active{box-shadow:none!important;background:0 0!important;transform:none!important}.close-btn:focus,.share-btn:focus,.close-btn:focus-visible,.share-btn:focus-visible{box-shadow:none!important;outline:none!important}.blog-modal .close-btn,.blog-modal .share-btn{cursor:pointer;box-shadow:none!important;opacity:.7!important;background:0 0!important;border:none!important;transition:opacity .2s,transform .2s,filter .2s!important}.blog-modal .close-btn:hover,.blog-modal .share-btn:hover{opacity:1!important;filter:drop-shadow(0 0 6px #22d3eeb3)drop-shadow(0 0 10px #8b5cf68c)!important;transform:translateY(-3px)!important}.blog-modal .close-btn:active,.blog-modal .share-btn:active{filter:drop-shadow(0 0 4px #22d3ee80)!important;transform:translateY(-1px)!important}.blog-card{flex-direction:column;display:flex}.blog-title{min-height:48px}.blog-desc{min-height:68px;font-size:.86rem;line-height:1.4}.blog-tags{margin-top:6px}.blog-footer{margin-top:14px}.blog-card:hover .blog-title{color:#22d3ee;text-shadow:0 0 6px #22d3ee73,0 0 12px #8b5cf659}.blog-card:hover .blog-share{color:#22d3ee}.blog-share{transition:color .25s,transform .25s}.blog-card:hover .blog-share{transform:translateY(-2px)}.blog-card .blog-desc{align-self:flex-start;text-align:left!important}
