main .head{border-bottom:1px solid var(--color-border);background:linear-gradient(#e7f0fd 0%,#faf9f6 100%);justify-content:center;align-items:center;min-height:calc(50vh - 50px);margin-top:50px;display:flex}main .head .desc{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}main .head .desc h1{color:var(--color-primary);font-size:2.5rem}main .head .desc p{max-width:70%;margin-top:10px}main .box{padding:0 var(--padding-g)}main .browse h1{color:var(--color-menu);margin:0;font-size:1.8rem}main .browse .form{justify-content:center;align-items:center;padding:40px 20px 20px;display:flex}main .browse .form .search-box{border:1.5px solid var(--color-border);width:55%;box-shadow:var(--shadow-md);background:#fff;border-radius:5px;align-items:center;padding:6px 6px 6px 20px;transition:border .2s;display:flex}main .browse .form .search-box:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 4px #1877f21a}main .browse .form .search-box .user-icon{color:var(--color-text-muted);margin-right:10px;font-size:1.1rem;line-height:1.5}main .browse .form .search-box input{color:var(--color-text-primary);font-size:.95rem;font-style:inherit;background:0 0;border:none;outline:none;flex:1}main .browse .spinner-wrap{flex-direction:row;justify-content:center;align-items:center;gap:7px;margin:30px 0;display:flex}main .browse .spinner{border:2px solid #0000;border-top-color:var(--color-accent);border-radius:50%;width:30px;height:30px;animation:.8s linear infinite spin;display:flex}main .browse .form .search-box input:disabled{opacity:.6!important}main .browse .form .search-box button{color:#fff;cursor:pointer;border:none;border-radius:5px;justify-content:center;align-items:center;padding:10px 22px;font-size:.9rem;font-weight:500;line-height:1.1;transition:background .2s;display:flex}main .browse .form .search-box button:hover{background:var(--color-primary-hover)}main .browse .form .search-box #f{background:var(--color-primary)}main .browse .form .search-box #g{background:var(--color-text-muted)}main .browse .form .search-box #g:hover,main .browse .form .search-box #f:hover{opacity:.8}main .browse .form .search-box .btn{flex-direction:row;gap:5px;display:flex}main .browse .form button:disabled{opacity:.6;cursor:default}main .browse .form button:disabled:hover{opacity:.6!important}main .browse .result{padding:0 40px}main .browse .result .card-list{flex-wrap:wrap;gap:20px;margin-top:10px;display:flex}main .browse .result .no-result{text-align:center;color:var(--color-text-muted);margin:20px 0 50px;display:block}main .browse .result .card{border:1.5px solid var(--color-border);box-shadow:var(--shadow-md);background:#fff;border-radius:5px;min-width:35%;max-width:35%;padding:20px;transition:transform .2s,box-shadow .2s}main .browse .result .card .profile{flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:10px;line-height:1.1;display:flex}main .browse .result .card .profile .left{flex-direction:row;align-items:center;gap:10px;display:flex}main .browse .result .card .profile .left .info{flex-direction:column;gap:2px;display:flex}main .browse .result .card .profile .left .info span{font-weight:var(--font-semibold);color:var(--color-menu)}main .browse .result .card .profile .left .info #t{color:var(--color-text-muted);font-size:12px;font-weight:var(--font-medium)}main .browse .result .card .profile .left img{object-fit:cover;border-radius:50%;width:40px;height:40px}main .browse .result .card .content{background:var(--color-bg-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:5px;margin-top:20px;padding:10px;font-family:Playwrite NZ Guides,cursive;font-style:normal;font-weight:400;transition:all .1s ease-in-out}main .browse .result .card .content:hover{transition:all .1s ease-in-out;transform:scale(1.02)}main .browse .result .card .content a{color:#000;text-decoration:none}main .browse .result .card .bottom{flex-direction:row;justify-content:space-between;display:flex}main .browse .result .card .bottom .date,main .browse .result .card .bottom span{color:var(--color-text-muted);margin-top:10px;font-size:12px}main .browse .result .card .bottom span{color:var(--color-text-primary);align-items:center;gap:3px;display:flex}main .browse .result .card .bottom span i{font-size:17px}main .features{margin:var(--padding-g) auto;box-shadow:var(--shadow-md);background:linear-gradient(135deg,#dbeafe 0%,#ede9fe 100%);border:1px solid #1877f233;border-radius:10px;flex-direction:column;gap:20px;padding:32px 36px;display:flex}main .features h1{color:var(--color-menu);margin:0;font-size:1.8rem}main .features .list{flex-direction:row;gap:16px;display:flex}main .features .item{flex-direction:row;align-items:flex-start;gap:16px;width:50%;display:flex}main .features .item i{color:var(--color-accent);flex-shrink:0;margin-top:2px;font-size:1.4rem}main .features .item .text{flex-direction:column;gap:2px;display:flex}main .features .item span{color:var(--color-text-primary);font-size:.95rem;font-weight:600}main .features .item p{color:var(--color-text-secondary);margin:0;font-size:.9rem;line-height:1.5}main .features .more{flex-direction:column;justify-content:center;align-items:center;gap:5px;display:flex}main .features .more p{color:var(--color-text-muted);margin:10px 0;font-size:1rem}main .features .more button{background:var(--color-primary);color:#fff;cursor:pointer;border:none;border-radius:5px;padding:12px 32px;font-size:.95rem;font-weight:500;transition:background .2s}main .features .more button:hover{background:var(--color-primary-hover)}@media (width<=400px){main .box{padding:0 8px}main .browse .form{padding:20px 0 12px}main .browse .form .search-box{box-sizing:border-box;width:100%;padding:4px 4px 4px 10px}main .browse .form .search-box button{padding:8px 10px}main .browse .form .search-box .btn{margin-left:-10px}main .browse .form .search-box input{max-width:fit-content}}@media (width>=1800px){main .box{padding:0 10%}main .browse .form .search-box{width:40%}main .features{max-width:900px}main .browse .result .card{max-width:28%}}@media (width>=1024px) and (width<=1279px){main .browse .form .search-box{width:65%}main .features{max-width:650px}main .browse .result .card{max-width:45%}}@media (width>=768px) and (width<=1023px){main .head .desc h1{font-size:2rem}main .head .desc p{max-width:90%}main .browse .form .search-box{width:80%}main .browse .result{padding:0 20px}main .browse .result .card{max-width:46%}main .features{max-width:100%;margin:var(--padding-g) 20px}main .features .list{flex-direction:column}main .features .item{width:100%}}@media (width<=767px){main .head{min-height:calc(50vh - 70px)}main .head .desc h1{font-size:1.8rem}main .head .desc p{max-width:90%;font-size:.95rem}main .box{padding:0 16px}main .browse .form{padding:24px 14px 16px}main .browse .form .search-box{width:100%}main .browse .result{padding:0 16px}main .browse .result .card-list{flex-direction:column}main .browse .result .card{max-width:100%}main .features{margin:16px;padding:24px 20px}main .features h1{font-size:1.5rem}main .features .list{flex-direction:column}main .features .item,main .features .more button{width:100%}main .browse .form .search-box button{padding:8px 12px;font-size:.85rem}}
