*{margin:0;padding:0;box-sizing:border-box;}
body{
 background:#fafafa;
 font-family:'Segoe UI',Arial,sans-serif;
 color:#333;
 overflow:hidden;
 height:100vh;
 
 &::-webkit-scrollbar{
 display:none;
 }
 
 -ms-overflow-style:none;
 scrollbar-width:none;
}
a{text-decoration:none;color:inherit;}


.sr-only{
 position:absolute;
 width:1px;height:1px;
 padding:0;margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 white-space:nowrap;border:0;
}


.sidebar{
 position:fixed;
 top:0;left:0;
 width:250px;
 height:100vh;
 background:transparent;
 border-right:none;
 z-index:1000;
 display:flex;
 flex-direction:column;
 transition:width 0.3s ease,transform 0.3s ease;
 overflow:hidden;
 font-family:'Inter',sans-serif;
}
.sidebar.collapsed{
 width:62px;
}
.sidebar.collapsed .sidebar-logo .logo-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-category-title,
.sidebar.collapsed .sidebar-footer-text{
 display:none;
}
.sidebar.collapsed .sidebar-logo{
 justify-content:center;
 padding:24px 0 20px;
}
.sidebar.collapsed .sidebar-nav a{
 justify-content:center;
 padding:10px 0;
}
.sidebar.collapsed .sidebar-nav a .nav-icon{
 margin-right:0;
 font-size:20px;
}


.sidebar-logo{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:20px 20px 14px;
 border-bottom:none;
 min-height:auto;
}
.sidebar-logo .logo-text{
 font-size:22px;
 font-weight:700;
 color:#111;
 font-family:'Inter',sans-serif;
 letter-spacing:-0.6px;
}
.sidebar-logo .logo-icon-right{
 color:#666;
 display:flex;
 align-items:center;
 cursor:pointer;
 padding:6px;
 border-radius:6px;
 transition:all 0.2s ease;
}
.sidebar-logo .logo-icon-right:hover{
 background:#f0f0f0;
 color:#111;
}


.sidebar-nav{
 flex:1;
 overflow-y:auto;
 padding:10px 14px;
 -ms-overflow-style:none;
 scrollbar-width:none;
}
.sidebar-nav::-webkit-scrollbar{
 display:none;
}
.nav-category-title{
 font-size:12.5px;
 font-weight:500;
 color:#a0a0a0;
 padding:24px 12px 10px;
 white-space:nowrap;
 display:flex;
 justify-content:space-between;
 align-items:center;
}
.nav-category-title.has-dropdown{
 cursor:pointer;
}
.sidebar-nav a{
 display:flex;
 align-items:center;
 padding:10px 12px;
 margin-bottom:4px;
 font-size:14px;
 color:#555;
 font-weight:500;
 transition:all 0.2s;
 border-radius:999px;
 border-left:none;
}
.sidebar-nav a:hover{
 background:#f7f7f7;
 color:#111;
}
.sidebar-nav a.active{
 background:#f2f2f2;
 color:#111;
 font-weight:600;
}
.nav-icon{
 margin-right:12px;
 width:20px;
 text-align:center;
 display:flex;
 align-items:center;
 justify-content:center;
 flex-shrink:0;
 color:#666;
}
.sidebar-nav a.active .nav-icon{
 color:#111;
}


.mobile-topbar{
 display:none;
 position:fixed;
 top:0;left:0;right:0;
 height:56px;
 background:#fff;
 border-bottom:1px solid #e8e8e8;
 z-index:999;
 align-items:center;
 padding:0 16px;
 gap:12px;
}
.hamburger{
 width:36px;height:36px;
 background:none;
 border:1px solid #e0e0e0;
 border-radius:8px;
 cursor:pointer;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:4px;
 transition:all 0.2s;
}
.hamburger span{
 width:18px;height:2px;
 background:#333;
 border-radius:2px;
 transition:all 0.3s;
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);}
.mobile-logo{
 font-size:18px;
 font-weight:700;
 color:#1a1a2e;
}
.sidebar-overlay{
 display:none;
 position:fixed;
 inset:0;
 background:rgba(0,0,0,0.4);
 z-index:998;
}
.sidebar-overlay.active{display:block;}


.main-wrapper{
 margin-left:250px;
 margin-top:16px;
 margin-right:16px;
 height:calc(100vh - 16px);
 overflow-y:auto;
 overflow-x:hidden;
 background:#fff;
 border-radius:20px 20px 0 0;
 border:1px solid #ebebeb;
 border-bottom:none;
 box-shadow:0 4px 12px rgba(0,0,0,0.02);
 transition:margin-left 0.3s ease,margin-right 0.3s ease;
 display:flex;
 flex-direction:column;
 -ms-overflow-style:none;
 scrollbar-width:none;
}
.main-wrapper::-webkit-scrollbar{
 display:none;
}
.sidebar.collapsed ~ .main-wrapper{
 margin-left:62px;
}


.input-section{
 background:rgba(255,255,255,0.95);
 backdrop-filter:blur(8px);
 border-bottom:1px solid #f0f0f0;
 padding:24px 32px;
 position:sticky;
 top:0;
 z-index:100;
 border-radius:20px 20px 0 0;
}
.input-container{
 position:relative;
 max-width:100%;
}
.input-container input{
 width:100%;
 border:none;
 padding:0 44px 0 0;
 font-size:24px;
 font-weight:500;
 outline:none;
 background:transparent;
 color:#111;
 font-family:'Inter',sans-serif;
 letter-spacing:-0.4px;
}
.input-container input:focus{
 box-shadow:none;
 border:none;
 background:transparent;
}
.input-container input::placeholder{
 color:#999;
}
#clear-input{
 position:absolute;
 right:0px;top:50%;
 transform:translateY(-50%);
 background:none;border:none;
 color:#ccc;font-size:20px;
 cursor:pointer;padding:5px;
 width:32px;height:32px;
 display:flex;align-items:center;justify-content:center;
 transition:all 0.2s;
}
#clear-input:hover{
 color:#111;
}


.content-area{
 flex:1;
 padding:20px 24px;
 max-width:1400px;
 width:100%;
 margin:0 auto;
}


.thefancy{
 display:block;
 width:100%;
 margin:0;
}
.the-fancy-text{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
 gap:10px;
}
.fancy-text{
 position:relative;
 margin-bottom:0;
}
.fancy-text p{
 background:#fff;
 padding:14px 16px;
 margin:0;
 font-size:18px;
 cursor:pointer;
 transition:all 0.25s ease;
 border:1px solid #e8e8e8;
 border-radius:10px;
 height:auto;
 min-height:52px;
 display:flex;
 align-items:center;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 color:#333;
}
.fancy-text p:hover{
 border-color:#6f0eb9;
 background:#faf5ff;
 box-shadow:0 2px 8px rgba(111,14,185,0.08);
 transform:translateY(-1px);
}


.copied{
 color:#fff;
 font-size:11px;
 position:absolute;
 padding:4px 10px;
 background:#6f0eb9;
 top:14px;
 right:8px;
 border-radius:6px;
 z-index:10;
 font-weight:600;
 letter-spacing:0.3px;
}


#random{
 position:fixed;
 right:32px;
 bottom:88px;
 width:48px;height:48px;
 border:none;
 font-size:18px;
 background:#111;
 color:#fff;
 cursor:pointer;
 outline:none;
 border-radius:14px;
 z-index:999;
 box-shadow:0 4px 12px rgba(0,0,0,0.15);
 transition:all 0.3s;
}
#random:hover{
 transform:translateY(-2px);
 background:#333;
 box-shadow:0 6px 18px rgba(0,0,0,0.2);
}
#random:active{transform:scale(0.95);}


#scroll-to-top{
 display:none;
 position:fixed;
 bottom:28px;
 right:32px;
 z-index:999;
 border:none;outline:none;
 background:#111;
 color:white;
 cursor:pointer;
 padding:0;
 border-radius:14px;
 font-size:18px;
 width:48px;height:48px;
 text-align:center;
 box-shadow:0 4px 12px rgba(0,0,0,0.15);
 transition:all 0.3s;
 line-height:48px;
}
#scroll-to-top:hover{
 transform:translateY(-2px);
 background:#333;
 box-shadow:0 6px 18px rgba(0,0,0,0.2);
}


footer{
 background:transparent;
 padding:40px 24px 30px;
 text-align:left;
 color:#444;
 clear:both;
}

.seo-content{
 max-width:1000px;
 margin:0 auto;
 text-align:left;
 padding:24px;
}
.seo-content h1,.seo-content h2{
 color:#111;
 font-size:20px;
 text-transform:capitalize;
 margin-top:28px;
 margin-bottom:12px;
}
.seo-content h1{
 font-size:24px;
 font-weight:700;
}
.seo-content h3{
 color:#333;
 font-size:16px;
 margin-top:20px;
 margin-bottom:8px;
}
.seo-content p{
 color:#555;
 font-size:15px;
 line-height:1.7;
 margin-bottom:16px;
}
.seo-content .thumb{
 max-width:100%;
 border-radius:10px;
 margin:16px 0;
}
.seo-content ol,.seo-content ul{
 color:#555;
 padding-left:20px;
 margin-bottom:16px;
}
.seo-content ol li,.seo-content ul li{
 list-style-type:disc;
 margin-bottom:8px;
 font-size:15px;
 line-height:1.6;
}
.seo-content ol li{list-style-type:decimal;}
footer nav{
 background:transparent;
 text-align:left;
 border-top:none;
 max-width:100%;
 padding:0;
 margin-bottom:30px;
 display:flex;
 flex-wrap:wrap;
 gap:8px;
}
footer nav a{
 display:inline-block;
 padding:8px 16px;
 color:#555;
 font-size:14px;
 background:#f0f0f0;
 border-radius:8px;
 transition:all 0.2s;
 font-weight:500;
}
footer nav a:hover{
 background:#111;
 color:#fff;
}
footer .copyright{
 text-align:center;
 color:#888;
 font-size:14px;
 margin-top:40px;
 padding-top:24px;
 border-top:1px solid #ebebeb;
}




@media (max-width:1024px){
 .the-fancy-text{
 grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
 }
}


@media (max-width:768px){
 .sidebar{
 transform:translateX(-100%);
 width:260px;
 box-shadow:4px 0 20px rgba(0,0,0,0.15);
 }
 .sidebar.mobile-open{
 transform:translateX(0);
 }
 .sidebar.collapsed{
 width:260px;
 }
 .sidebar.collapsed .sidebar-logo .logo-text,
 .sidebar.collapsed .nav-label,
 .sidebar.collapsed .nav-category-title{
 display:block;
 }
 .sidebar.collapsed .sidebar-logo{
 justify-content:flex-start;
 padding:18px;
 }
 .sidebar.collapsed .sidebar-nav a{
 justify-content:flex-start;
 padding:9px 18px;
 }
 .sidebar.collapsed .sidebar-nav a .nav-icon{
 margin-right:10px;
 font-size:18px;
 }
 #sidebar-toggle{display:none;}
 .mobile-topbar{
 display:flex;
 }
 .main-wrapper{
 margin-left:0;
 margin-top:56px;
 margin-right:0;
 padding-top:0;
 border-radius:20px 20px 0 0;
 height:calc(100vh - 56px);
 }
 .sidebar.collapsed ~ .main-wrapper{
 margin-left:0;
 }
 .the-fancy-text{
 grid-template-columns:1fr;
 }
 .content-area{
 padding:0 16px 14px;
 }
 .input-section{
 padding:20px 20px 16px;
 top:56px;
 }
 .input-container input{
 height:auto;
 font-size:20px;
 }
 .fancy-text p{
 font-size:16px;
 padding:12px 14px;
 }
 footer{
 padding:30px 16px 20px;
 }
 footer nav{
 flex-direction:column;
 }
 #random{
 right:16px;
 bottom:80px;
 width:42px;height:42px;
 font-size:16px;
 border-radius:12px;
 }
 #scroll-to-top{
 right:16px;
 bottom:24px;
 width:42px;height:42px;
 font-size:16px;
 border-radius:12px;
 line-height:42px;
 }
}


@media (max-width:480px){
 .mobile-logo{font-size:16px;}
 .input-container input{
 height:42px;
 font-size:14px;
 border-radius:10px;
 }
 .fancy-text p{
 font-size:14px;
 padding:10px 12px;
 min-height:44px;
 }
}