@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap";:root{--bg-color: #121212;--text-color: #eee;--accent-color: #FFBADE;--border-color: #333;--dropdown-bg: #1a1a1a;--hover-bg: #333;--topbar-height: 50px;--font-family-base: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--search-btn-color: #FFBADE;--search-btn-hover: #E3A5C5;--tag-all-bg: #FFBADE;--tag-all-hover: #E3A5C5;--tag-all-text: #000000;--logo-btn-bg: transparent;--logo-btn-hover-bg: rgba(255, 186, 222, .15);--logo-btn-border: transparent;--logo-btn-hover-border: #FFBADE;--logo-btn-radius: 6px}.topbar{position:relative;width:100%;height:auto;background:var(--bg-color);border-bottom:1px solid var(--border-color);z-index:1000;padding:0 1rem;display:flex;align-items:center;font-family:var(--font-family-base);font-size:.875rem;color:var(--text-color);flex-wrap:wrap}body{margin:0;background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:.875rem}.container{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:1rem;width:100%;flex-wrap:wrap}.logo-btn{display:flex;align-items:center;gap:.5rem;background:var(--logo-btn-bg);border:1px solid var(--logo-btn-border);border-radius:var(--logo-btn-radius);padding:4px 8px;cursor:pointer;text-decoration:none;transition:background .2s ease,border-color .2s ease}.logo-btn:hover{background:var(--logo-btn-hover-bg);border-color:var(--logo-btn-hover-border)}.logo-btn:active{transform:scale(.98)}.logo{display:flex;align-items:center;font-weight:900;font-size:1.125rem;color:var(--text-color);-webkit-user-select:none;user-select:none;gap:.5rem;white-space:nowrap}.logo-img{height:37px;width:auto;display:block}.logo .divider{width:1px;height:18px;background-color:var(--text-color);margin:0 8px}.logo span.home{font-weight:500;font-size:1rem;opacity:.8}.search-wrapper{flex-grow:1;position:relative;display:flex;max-width:320px;margin:8px 0}.search-wrapper input[type=search]{width:100%;padding:.6rem 3rem .6rem 1rem;border-radius:4px;border:1px solid var(--border-color);background:#4d4d4d;color:var(--text-color);font-size:.9rem;outline:none;transition:background-color .15s ease}.search-wrapper input[type=search]:hover{background:#666}.search-wrapper input[type=search]:focus{background:#666;border-color:#666;box-shadow:none}.search-wrapper input[type=search]::placeholder{color:#ccc;font-size:.85rem}.search-wrapper .search-btn{position:absolute;right:0;top:0;bottom:0;width:50px;height:100%;border:none;border-radius:0 4px 4px 0;background-color:var(--search-btn-color);background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='34'%20viewBox='0%200%2028%2028'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3e%3c!--%20วงกลมใหญ่%20--%3e%3ccircle%20cx='10'%20cy='10'%20r='7'%20/%3e%3c!--%20ด้ามจับสั้น%20--%3e%3cline%20x1='15'%20y1='15'%20x2='20'%20y2='20'%20/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:30px 30px;cursor:pointer;transition:background-color .2s ease;z-index:2}.search-wrapper .search-btn:hover{background-color:var(--search-btn-hover)}.tags-container{position:relative;display:flex;align-items:center;width:100%;margin-top:6px}.tags-bar{display:flex;overflow-x:auto;white-space:nowrap;width:100%;padding:6px 36px;gap:8px;scrollbar-width:none}.tags-bar::-webkit-scrollbar{display:none}.tag-btn{flex:0 0 auto;background:#1f1f1f;color:var(--text-color);border:1px solid var(--border-color);border-radius:16px;padding:4px 12px;font-size:.8rem;cursor:pointer;transition:background .2s ease,color .2s ease}.tag-btn:hover{background:#ddd;color:#000}.tag-btn.active{background:var(--accent-color);color:#000;border-color:var(--accent-color)}.tag-btn.all{background:#1f1f1f;color:var(--text-color);border:1px solid var(--border-color)}.tag-btn.all.active{background:var(--tag-all-bg);color:var(--tag-all-text);border:1px solid var(--tag-all-bg)}.tag-btn.all:hover{background:var(--tag-all-hover);color:var(--tag-all-text)}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);background:#0009;color:var(--text-color);border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:1rem;z-index:10;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.scroll-btn.left{left:0}.scroll-btn.right{right:0}.scroll-btn:hover{background:#ddd;color:#000}@media (max-width: 600px){.container{flex-direction:column;align-items:center;gap:.6rem;padding-top:.6rem}.logo{order:1;width:100%;justify-content:center;margin-top:6px;font-size:1rem}.search-wrapper{order:2;width:100%;max-width:90%;margin:6px 0}.tags-container{order:3;width:100%}}.search-dropdown{position:absolute;top:100%;left:0;right:0;background:#1c1c1c;border:1px solid var(--border-color);border-top:none;border-radius:0 0 4px 4px;max-height:300px;overflow-y:auto;z-index:1000;list-style:none;margin:0;padding:0;opacity:1;transition:opacity .3s ease}.fade-in{opacity:1}.search-dropdown:not(.fade-in){opacity:0}.search-dropdown button{display:flex;align-items:center;gap:12px;padding:10px;cursor:pointer;color:var(--text-color);font-size:.9rem;border:none;background:none;width:100%;text-align:left;border-bottom:1px solid #333;transition:background-color .2s ease}.search-dropdown button:hover,.search-dropdown button.selected{background:#2a2a2a}.thumbnail{width:60px;height:90px;position:relative;flex-shrink:0}.thumbnail img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block}.thumbnail img.hidden{display:none}.skeleton{width:100%;height:100%;background:linear-gradient(90deg,#2a2a2a 25%,#333,#2a2a2a 75%);background-size:200% 100%;border-radius:4px;animation:skeleton-loading 1.2s infinite}.skeleton-text{height:12px;width:80%;margin-bottom:4px;background:linear-gradient(90deg,#2a2a2a 25%,#333,#2a2a2a 75%);background-size:200% 100%;border-radius:2px;animation:skeleton-loading 1.2s infinite}.skeleton-text.code{width:50%;height:10px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.search-dropdown .info{display:flex;flex-direction:column;flex:1}.search-dropdown .title{font-size:.95rem;font-weight:500}.search-dropdown .code{opacity:.7;font-size:.8rem}.search-dropdown mark{background-color:var(--search-btn-color);color:#000;padding:0 2px;border-radius:2px;transition:background-color .2s ease}.search-dropdown mark:hover{background-color:var(--search-btn-hover)}