body{margin:0; font-family:Arial,sans-serif; background:#f0f0f0} .navbar{background-color:#333; padding:0.75rem 1rem} .nav-container{max-width:1200px; margin:0 auto; display:flex; justify-content:center; align-items:center; position:relative} .nav-links{display:flex} .nav-links a{color:white; text-decoration:none; border-radius:5px} .hamburger{display:none; flex-direction:column; justify-content:center; cursor:pointer; margin-left:auto} .hamburger span{height:3px; width:25px; background:white; margin:4px 0; border-radius:2px} @media (max-width:768px){.nav-container{justify-content:space-between} .nav-links{display:none; position:fixed; top:0; left:0; right:0; bottom:0; background-color:var(--navbar-bg); flex-direction:column; text-align:left; padding:4.5rem 1rem 1rem; gap:0.25rem; overflow-y:auto; z-index:1100} .nav-close{position:absolute; top:10px; right:10px; color:var(--navbar-text); border:1px solid rgba(255,255,255,0.25); padding:6px 10px; border-radius:10px; font-size:0.95rem; text-decoration:none} .nav-links a{border-top:none; padding:0.9rem 1rem; border-radius:10px; font-size:1.05rem} .nav-links.show{display:flex} .hamburger{display:flex; position:relative; z-index:1201} .nav-links.show + form.search-bar{display:none}} .search-bar{display:flex; max-width:400px; margin-left:auto} .search-bar input[type="search"]{flex:1; padding:0.5rem; border:1px solid #ccc; border-radius:5px 0 0 5px; outline:none} .search-bar button{padding:0.5rem 1rem; border:none; background-color:#555; color:white; border-radius:0 5px 5px 0; cursor:pointer} .search-bar button:hover{background-color:#777} @media (max-width:768px){.search-bar{display:none !important} .nav-mobile-only{display:block}} .gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:15px; padding:1rem; max-width:1200px; margin:auto} @media (max-width:1024px){.gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}} @media (max-width:640px){.gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}} @media (max-width:480px){.gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; padding:0.5rem} .gallery-item img{height:180px}} .gallery-item{position:relative; background-color:white; border:1px solid #ccc; border-radius:5px; overflow:hidden; transition:box-shadow 0.2s ease; display:flex; flex-direction:column; cursor:pointer} .gallery-item:hover,.gallery-item:focus-within{box-shadow:0 2px 10px rgba(0,0,0,0.2)} .gallery-item img{width:100%; height:200px; object-fit:cover; display:block; transition:transform 0.3s ease} .gallery-item:hover img,.gallery-item:focus-within img{transform:scale(1.05)} .gallery-item figcaption{position:absolute; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.7); color:#fff; font-size:0.9rem; padding:0.3rem 0.5rem; text-align:center; opacity:0; pointer-events:none; transition:opacity 0.3s ease; user-select:none} .gallery-item:hover figcaption,.gallery-item:focus-within figcaption{opacity:1; pointer-events:auto} .pagination{margin:1.25rem auto; text-align:center; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:0 1rem} .pagination a,.pagination span.current{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:40px; padding:6px 10px; text-decoration:none; border:1px solid #ccc; border-radius:10px} .pagination span.current{background-color:#444; color:white; font-weight:bold} .footer{background-color:#222; color:#ccc; padding:2rem 1rem 1rem; font-size:14px} .footer-container{max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem} .footer-col{min-width:150px; flex:1} .footer-col h4{margin-bottom:0.5rem; color:#fff; font-size:16px} .footer-col a{display:block; color:#ccc; text-decoration:none; margin:0.3rem 0} .footer-col a:hover{color:#fff} .footer-bottom{text-align:center; margin-top:2rem; border-top:1px solid #444; padding-top:1rem; color:#888; font-size:13px} @media (max-width:768px){.pagination{overflow-x:visible; -webkit-overflow-scrolling:touch; flex-wrap:wrap; justify-content:center; gap:6px} .footer-container{flex-direction:column; align-items:center; text-align:center} .footer-col{width:100%; margin-bottom:1rem}} .auth-container{max-width:400px; margin:2rem auto; padding:2rem; background:white; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.1)} .auth-form{display:flex; flex-direction:column} .auth-form label{margin-top:1rem; margin-bottom:0.25rem; font-weight:bold} .auth-form input{padding:0.5rem; border:1px solid #ccc; border-radius:5px} .auth-form button{margin-top:1.5rem; padding:0.75rem; background-color:#333; color:white; border:none; border-radius:5px; cursor:pointer} .auth-form button:hover{background-color:#555} .auth-form p{margin-top:1rem; font-size:14px; text-align:center} .upload-container{max-width:400px; margin:2rem auto; padding:2rem; background:white; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.1); text-align:center} .upload-message{margin-bottom:1rem; font-weight:bold; color:#007700} .upload-form{display:flex; flex-direction:column} .upload-form label{margin-bottom:0.5rem} .upload-form input[type="file"]{margin-bottom:1rem} .upload-form button{padding:0.75rem; background-color:#333; color:white; border:none; border-radius:5px; cursor:pointer} .upload-form button:hover{background-color:#555} .upload-form input[type="text"],.upload-form textarea{width:100%; padding:0.6rem 0.75rem; margin-bottom:1rem; border:1.5px solid #ccc; border-radius:6px; font-size:1rem; font-family:Arial,sans-serif; resize:vertical; transition:border-color 0.3s ease,box-shadow 0.3s ease; box-sizing:border-box} .upload-form input[type="text"]:focus,.upload-form textarea:focus{border-color:#333; box-shadow:0 0 5px rgba(51,51,51,0.5); outline:none} .upload-form textarea{min-height:100px} .upload-form input[type="file"]{padding:0.4rem 0.5rem; border:1.5px solid #ccc; border-radius:6px; cursor:pointer; font-size:1rem; transition:border-color 0.3s ease,box-shadow 0.3s ease} .upload-form input[type="file"]:focus{border-color:#333; box-shadow:0 0 5px rgba(51,51,51,0.5); outline:none} .modal{position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.5)} .modal-content{background:white; margin:10% auto; padding:20px; border-radius:8px; width:90%; max-width:400px; position:relative} .close-btn{position:absolute; right:12px; top:10px; font-size:24px; font-weight:bold; cursor:pointer}
:root{--bg: #0b1220; --surface: #0f172a; --text: #e2e8f0; --muted: #94a3b8; --border: #1f2a44; --primary: #60a5fa; --primary-contrast: #0b1220; --navbar-bg: #0b1220; --navbar-text: #e2e8f0; --hover: #1e293b} @media (prefers-color-scheme:dark){:root{--bg:#0b1220; --surface:#0f172a; --text:#e2e8f0; --muted:#94a3b8; --border:#1f2a44; --primary:#60a5fa; --primary-contrast:#0b1220; --navbar-bg:#0b1220; --navbar-text:#e2e8f0; --hover:#1e293b}} *{box-sizing:border-box} body{margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale} a{text-decoration:none} .nav-mobile-only{display:none} body.nav-open{overflow:hidden} .container{width:100%; max-width:1200px; margin:0 auto; padding:0 1rem} .navbar{background-color:var(--navbar-bg); box-shadow:0 2px 12px rgba(2,6,23,0.4)} .nav-container{gap:1rem} .nav-links a{color:var(--navbar-text); padding:0.5rem 0.75rem; border-radius:8px; transition:background-color 0.2s ease,color 0.2s ease} .nav-links a:hover{background:rgba(255,255,255,0.08)} .hamburger span{background:var(--navbar-text)} .search-bar{display:flex; align-items:center; margin-left:auto; gap:0.5rem} .search-bar input[type="search"]{flex:1; padding:0.55rem 0.75rem; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); outline:none; transition:border-color 0.2s,box-shadow 0.2s} .search-bar input[type="search"]::placeholder{color:var(--muted)} .search-bar input[type="search"]:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,0.15)}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:0.55rem 0.9rem; border-radius:10px; border:1px solid transparent; font-weight:600; cursor:pointer; min-height:40px; transition:transform 0.05s ease,box-shadow 0.2s ease,background-color 0.2s,color 0.2s} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--primary); color:var(--primary-contrast); box-shadow:0 4px 14px rgba(37,99,235,0.25)} .btn-primary:hover{filter:brightness(1.05)} .search-bar .btn.btn-primary{background:var(--primary); color:var(--primary-contrast); border:1px solid transparent; border-radius:10px; box-shadow:0 4px 14px rgba(37,99,235,0.25)} .search-bar .btn.btn-primary:hover{background:var(--primary); filter:brightness(1.05)}
.notifications-wrapper{position:relative; margin-left:1rem} .notifications-link{position:relative; display:inline-flex; align-items:center; gap:.4rem; color: var(--navbar-text);} .notif-icon{display:none;width:18px;height:18px} .notif-label{display:inline} .notification-badge{position:absolute; top:-6px; right:-12px; background:var(--primary); color:var(--primary-contrast); font-size:0.75rem; padding:2px 6px; border-radius:12px; font-weight:bold} @media (max-width:768px){.notif-label{display:none} .notifications-link{padding:0.45rem 0.55rem; min-width:36px} .notifications-link .notif-icon{display:inline-block;width:22px;height:22px} .notification-badge{top:-4px; right:-2px}} #notifications-dropdown{display:none; position:absolute; right:0; top:130%; background:var(--surface); color:var(--text); box-shadow:0 18px 40px rgba(2,6,23,0.35); width:360px; max-height:360px; overflow-y:auto; border:1px solid var(--border); border-radius:14px; z-index:1000; opacity:0; transform:translateY(8px) scale(0.98); transform-origin:top right; transition:opacity 180ms ease,transform 180ms ease} #notifications-dropdown.open{opacity:1; transform:translateY(0) scale(1)} #notifications-dropdown::-webkit-scrollbar{width:10px} #notifications-dropdown::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.5); border-radius:8px} #notifications-dropdown::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,0.7)} .notif-header{display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0.75rem; gap:0.5rem; border-bottom:1px solid var(--border)} .notif-title{font-weight:700; font-size:0.95rem} .notif-count{font-size:0.7rem; background:var(--primary); color:var(--primary-contrast); padding:2px 6px; border-radius:9999px; font-weight:700} .notif-list{list-style:none; margin:0; padding:0} .notif-item{display:grid; grid-template-columns:44px 1fr; gap:10px; padding:0.8rem 1rem; border-bottom:1px solid var(--border); cursor:pointer; transition:background-color 120ms ease,transform 80ms ease} .notif-item:focus{outline:none; box-shadow:inset 0 0 0 2px rgba(37,99,235,0.35)} .notif-item:hover{background-color:var(--hover)} .notif-avatar{width:32px; height:32px; border-radius:9999px; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%); overflow:hidden} .notif-avatar img{width:100%; height:100%; border-radius:9999px; object-fit:cover; display:block} .notif-content{min-width:0} .notif-row{display:flex; align-items:center; gap:8px} .notif-username{font-weight:700} .notif-time{margin-left:auto; color:var(--muted); font-size:0.8rem} .notif-message{margin-top:2px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .no-notifications{padding:1rem; color:var(--muted); text-align:center} .notif-item.read{opacity:0.7} .notif-header .notif-right{display:flex; align-items:center; gap:0.4rem; flex-wrap:nowrap} .notif-header .btn-sm{min-height:28px; padding:0.25rem 0.5rem; font-size:0.8rem} .notif-header .btn-ghost{border-color:var(--border)} @media (max-width:380px){.notif-header .notif-count{display:none} .notif-header .btn-sm{min-height:24px; padding:0.2rem 0.4rem; font-size:0.75rem}} .gallery{padding:1.25rem; gap:18px} .gallery-item{background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 4px 18px rgba(2,6,23,0.08); transition:transform 0.15s ease,box-shadow 0.2s ease} .gallery-item:hover,.gallery-item:focus-within{transform:translateY(-2px); box-shadow:0 12px 30px rgba(2,6,23,0.12)} .gallery-item img{width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover} .gallery-item figcaption{background:linear-gradient(to top,rgba(0,0,0,0.65),rgba(0,0,0,0)); padding:0.6rem 0.75rem} @media (max-width:640px){.gallery-item figcaption{opacity:1}}
.pagination a,.pagination span.current{border:1px solid var(--border); border-radius:10px; padding:8px 14px} .pagination span.current{background:var(--primary); color:var(--primary-contrast); border-color:transparent} .footer{background:#0b1220; color:#b6c2d6} .footer-col h4{color:#e5edff} .footer-col a{color:#b6c2d6} .footer-col a:hover{color:#fff} .footer-bottom{border-top-color:rgba(255,255,255,0.12); color:#94a3b8} .card{background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 30px rgba(2,6,23,0.08); padding:1.25rem} .card-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem} .card-title{font-weight:800; font-size:1.1rem} .card-footer{margin-top:1rem} .label{font-weight:700; display:block; margin-bottom:0.35rem} .input,.textarea,.select{width:100%; padding:0.6rem 0.75rem; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:10px; outline:none; min-height:44px; transition:border-color 0.2s,box-shadow 0.2s} .input::placeholder,.textarea::placeholder{color:var(--muted)} .input:focus,.textarea:focus,.select:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,0.15)} .form-grid{display:grid; gap:1rem} @media (min-width:720px){.form-grid.two{grid-template-columns:1fr 1fr}} .btn-secondary{background:#111827; color:#e5e7eb} .btn-secondary:hover{filter:brightness(1.1)} .btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border)} .btn-ghost:hover{background:var(--hover)} .btn-outline{background:transparent; color:var(--text); border:1px solid var(--border)} .btn-outline:hover{background:var(--hover)} .btn-danger{background:#ef4444; color:#fff} .btn-danger:hover{filter:brightness(1.05)} .btn-danger-tonal{background:rgba(239,68,68,0.1); color:#b91c1c; border:1px solid rgba(239,68,68,0.25)} .btn-danger-tonal:hover{background:rgba(239,68,68,0.15)} .btn-pill{border-radius:9999px}
.profile-card{overflow:hidden} .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin:1rem 0 .5rem; padding-bottom:.35rem; border-bottom:1px solid var(--border)} .section-title{margin:0; font-weight:800; font-size:1.15rem} .section-meta{color:var(--muted); font-size:.9rem} .gallery-title{text-align:center; margin:1.25rem 0 0.75rem; font-weight:900; font-size:1.25rem; line-height:1.2; letter-spacing:0.01em; max-width:1200px; padding:0 8px; margin-left:auto; margin-right:auto} .gallery-title::after{content:""; display:block; width:72px; height:3px; margin:8px auto 0; background:linear-gradient(90deg,var(--primary),#8b5cf6); border-radius:9999px; opacity:0.95} .profile-hero{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center; background:linear-gradient(135deg,rgba(37,99,235,0.15),rgba(99,102,241,0.15)); padding:1rem; border-radius:12px} .profile-header{display:grid; grid-template-columns:auto 1fr; gap:1.25rem; align-items:center; margin:0} .profile-avatar{width:120px; height:120px; border-radius:9999px; background-color:#cbd5e1; background-size:cover; background-position:center; border:3px solid var(--surface); box-shadow:0 6px 18px rgba(2,6,23,0.25)} .profile-info h1,.profile-username{margin:0; font-size:clamp(1.35rem,3.5vw,2rem); font-weight:800} .profile-actions{margin-top:0.5rem; display:flex; gap:0.5rem; flex-wrap:wrap} .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:0.75rem} .stat{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:0.5rem 0.8rem; text-align:center; min-width:110px} .stat-number{display:block; font-weight:800; font-size:1.1rem; color:var(--primary)} .stat-label{font-size:0.8rem; color:var(--muted)} .stat .stat-link{display:block; color:inherit; text-decoration:none} .stat .stat-link:hover{text-decoration:none} .user-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:.75rem} .user-card{display:flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.6rem .75rem; box-shadow:0 2px 10px rgba(2,6,23,0.08); color:var(--text); text-decoration:none} .user-card:hover{background:var(--hover)} .user-avatar{width:40px; height:40px; border-radius:9999px; background-size:cover; background-position:center; border:2px solid var(--surface)} .user-name{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} @media (max-width:640px){.profile-hero{grid-template-columns:1fr; text-align:center} .profile-header{grid-template-columns:1fr; text-align:center} .profile-avatar{width:96px; height:96px; margin:0 auto} .profile-actions{justify-content:center} .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .stat{min-width:0; padding:0.55rem 0.6rem} .stat-number{font-size:1rem}} .chat-wrapper{max-width:900px; margin:1rem auto; padding:0 1rem} .chat-card{height:70vh; min-height:420px; display:grid; grid-template-rows:auto 1fr auto} .chat-header{padding-bottom:.5rem; border-bottom:1px solid var(--border); font-weight:800} .chat-thread{overflow-y:auto; padding:1rem 0.5rem} .chat-composer{display:grid; grid-template-columns:1fr auto; gap:0.5rem; padding-top:.5rem; border-top:1px solid var(--border)} .msg{margin-bottom:.6rem; display:flex; gap:.5rem} .msg .sender{font-weight:700} .msg .text{color:var(--text); background:var(--hover); padding:.35rem .6rem; border-radius:10px} .container-narrow{max-width:540px; margin:2rem auto; padding:0 1rem} .alert{padding:0.75rem 1rem; border-radius:10px; border:1px solid transparent; margin:0.5rem 0} .alert-error{background:#fee2e2; color:#991b1b; border-color:#fecaca} .alert-success{background:#dcfce7; color:#166534; border-color:#bbf7d0} .view-card .card-title{font-size:1.25rem} .view-meta{color:var(--muted); font-size:0.9rem; margin:0.25rem 0 0.5rem} .view-image{width:100%; height:auto; border-radius:12px; box-shadow:0 8px 24px rgba(2,6,23,0.15)} .view-actions{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0.75rem; align-items:stretch; justify-content:stretch; margin-top:0.75rem} .view-actions form{margin:0} .view-actions .btn{display:flex; width:100%; border-radius:9999px} .view-tags{margin-top:0.75rem} .tag{display:inline-block; background:var(--hover); color:var(--text); border:1px solid var(--border); padding:4px 10px; margin:0 6px 6px 0; border-radius:9999px; font-size:0.85rem; text-decoration:none} .tag:hover{filter:brightness(1.03)} .like-count{color:var(--text); font-weight:600; margin-top:0.4rem; text-align:center} .comments-card{margin:1rem auto} .comments-list{max-height:320px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; padding:0.5rem; background:var(--surface)} .comment-item{display:flex; justify-content:space-between; align-items:flex-start; gap:0.75rem; padding:0.5rem 0; border-bottom:1px solid var(--border)} .comment-left{flex:1; min-width:0} .comment-user{font-weight:800; margin-right:0.25rem} .comment-time{font-size:0.8rem; color:var(--muted)} .comment-text{display:block; margin-top:2px} .comment-controls{display:flex; gap:0.5rem} .comment-reply{border-left:3px solid var(--border); padding-left:0.75rem; background:linear-gradient(to right,rgba(148,163,184,0.12),transparent)} @media (prefers-color-scheme:dark){.comment-reply{background:linear-gradient(to right,rgba(148,163,184,0.08),transparent)}}
.taglist{display:flex; flex-wrap:wrap; gap:10px; align-items:center} .taglist .tag-chip,#tag-explorer .tag-chip{position:relative; display:inline-flex; align-items:center; gap:10px; padding:8px 12px; min-height:38px; border-radius:9999px; background:linear-gradient(135deg,rgba(37,99,235,0.10),rgba(139,92,246,0.10)); box-shadow:inset 0 0 0 1px var(--border),0 6px 18px rgba(2,6,23,0.08); transition:box-shadow 180ms ease,transform 60ms ease,background 180ms ease} .taglist .tag-chip:hover,#tag-explorer .tag-chip:hover{box-shadow:inset 0 0 0 1px rgba(37,99,235,0.35),0 12px 28px rgba(2,6,23,0.12); transform:translateY(-1px)} .taglist .tag-chip:focus-within{box-shadow:inset 0 0 0 2px rgba(37,99,235,0.45),0 12px 28px rgba(2,6,23,0.12)} .tag,.taglist .tag{display:inline-flex; align-items:center; max-width:100%; gap:6px; background:linear-gradient(135deg,rgba(148,163,184,0.18),rgba(148,163,184,0.12)); color:var(--text); border:0; padding:6px 12px; border-radius:9999px; font-weight:800; font-size:0.92rem; line-height:1; text-decoration:none; white-space:nowrap} .tag:hover{filter:brightness(1.04)} .taglist .tag-chip .tag,#tag-explorer .tag-chip .tag{background:transparent; padding:0} .tag-follow-btn{border:1px solid var(--border) !important; background:var(--surface) !important; color:var(--text) !important; border-radius:9999px !important; padding:6px 12px !important; line-height:1 !important; font-weight:800 !important; font-size:0.88rem !important; transition:background 150ms ease,box-shadow 180ms ease,transform 60ms ease !important} .tag-follow-btn:hover{background:var(--hover) !important} .tag-follow-btn:active{transform:translateY(1px)} .tag-follow-btn:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,0.25); outline:none} .tag-follow-btn::before{content:'+'; margin-right:6px; font-weight:900} .tag-follow-btn[data-following="1"]::before{content:'✓'} .tag-follow-btn[data-following="1"]{background:var(--primary) !important; color:var(--primary-contrast) !important; border-color:transparent !important; box-shadow:0 10px 24px rgba(37,99,235,0.28)} @media (max-width:420px){.taglist{gap:8px} .tag{padding:6px 10px; font-size:0.9rem} .tag-follow-btn{padding:6px 10px !important; font-size:0.86rem !important}} .btn-sm{padding:0.35rem 0.6rem; font-size:0.85rem; border-radius:8px; min-height:34px} .btn-xs{padding:0.2rem 0.45rem; font-size:0.8rem; border-radius:8px; min-height:26px} .input-sm,.select-sm{min-height:32px; padding:0.35rem 0.6rem; font-size:0.9rem} .input.input-sm,select.input-sm{min-height:32px; padding:0.35rem 0.6rem; font-size:0.9rem} .controls-row{display:flex; gap:6px; align-items:center; flex-wrap:wrap} .btn-group{display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap} details.ipban-inline{display:inline-block} details.ipban-inline summary{list-style:none; cursor:pointer} details.ipban-inline summary::-webkit-details-marker{display:none} details.ipban-inline[open] summary{filter:brightness(0.98)} .ipban-panel{margin-top:6px; display:flex; gap:6px; align-items:center; flex-wrap:wrap} .ua-details{display:block} .ua-details summary{cursor:pointer; display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:3px 0; color:var(--text)} .ua-details[open] summary{margin-bottom:6px} .ua-panel{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px; box-shadow:0 8px 24px rgba(2,6,23,0.12)} .ua-full{margin:0 0 6px 0; white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:0.9rem; max-height:180px; overflow:auto}
 .table-wrap{width:100%; overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:12px; background:var(--surface)} .table{width:100%; border-collapse:separate; border-spacing:0; min-width:880px; font-size:0.95rem} .table th,.table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; color:var(--text); line-height:1.4} .table thead th{position:sticky; top:0; z-index:2; background:var(--surface); border-bottom:2px solid var(--border); font-weight:800; color:var(--text)} .table-striped tbody tr:nth-child(odd){background:rgba(148,163,184,0.08)} @media (prefers-color-scheme:dark){.table-striped tbody tr:nth-child(odd){background:rgba(148,163,184,0.06)}} .table-hover tbody tr:hover{background:rgba(37,99,235,0.08)} .table-dense th,.table-dense td{padding:8px 10px} .table-compact th,.table-compact td{padding:6px 8px} .table-sm th,.table-sm td{font-size:0.92rem} .table .col-id{width:68px; white-space:nowrap} .table .col-type{width:120px; white-space:nowrap} .table .col-entity{width:110px; white-space:nowrap} .table .col-actions{width:360px} .table-users{min-width:1600px} .table-users .col-username{width:220px} .table-users .col-email{width:300px} .table-users .col-role{width:120px} .table-users .col-banned{width:90px} .table-users .col-ip{width:200px} .table-users .col-ua{width:520px} .table-users .col-actions{width:580px} .truncate{max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:bottom} .code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace; font-size:0.9em} #tag-explorer .input-group{display:flex; align-items:stretch; width:100%; max-width:420px} #tag-explorer .input-group .input{flex:1; min-height:38px; border-top-right-radius:0; border-bottom-right-radius:0; border-right:0} #tag-explorer .input-group .btn{min-height:38px; padding:0 0.75rem; border-top-left-radius:0; border-bottom-left-radius:0; border:1px solid var(--border); background:var(--surface); color:var(--text)} #tag-explorer .input-group .btn:hover{background:var(--hover)} #tag-explorer .input-group .btn:active{transform:none} @media (max-width:420px){#tag-explorer .input-group{max-width:100%}} @media (max-width:640px){.container{padding:0 2px} .gallery{display:grid; align-items:center; grid-template-columns: repeat(2, 1fr); gap:2px; padding:0; margin:0; max-width:100%} .gallery-item{display:inline-block; width:100%; margin:0 0 2px; border:none; border-radius:10px; break-inside:avoid; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid} .gallery-item img{width:100%; height:auto; aspect-ratio:auto; display:block} .gallery-item figcaption{opacity:0}} @media (min-width:641px){.gallery{display:grid; align-items:center; grid-template-columns: repeat(3, 1fr); gap:12px; padding:0 8px; margin:0 auto; max-width:1200px} .gallery-item{display:inline-block; width:100%; margin:0 0 12px; border:none; border-radius:12px; break-inside:avoid; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; box-shadow:none} .gallery-item img{width:100%; height:auto; aspect-ratio:auto; display:block} .gallery-item:hover,.gallery-item:focus-within{transform:translateY(-1px); box-shadow:0 10px 24px rgba(2,6,23,0.10)}} @media (min-width:900px){.gallery{ grid-template-columns: repeat(4, 1fr); gap: 14px;} .gallery-item{margin-bottom:14px}} @media (min-width:1280px){.gallery{ grid-template-columns: repeat(5, 1fr); gap: 16px;} .gallery-item{margin-bottom:16px}}
 .username-with-badges .fa-solid,.username-with-badges .svg-inline--fa{line-height:1;vertical-align:-1px; margin-left: 3px}.username-with-badges .badge-verified,.username-with-badges .svg-inline--fa.badge-verified{color:#1DA1F2!important;--fa-primary-color:#1DA1F2}.username-with-badges .badge-staff,.username-with-badges .svg-inline--fa.badge-staff{color:#000!important;--fa-primary-color:#000}.username-with-badges .svg-inline--fa.badge-verified path{fill:#1DA1F2!important}.username-with-badges .svg-inline--fa.badge-staff path{fill:#000!important} .notif-row{display:flex; align-items:baseline; gap:6px} .notif-username{display:inline-flex; align-items:baseline; line-height:1} .notif-username .username-with-badges strong{line-height:1} .notif-message{margin-top:1px; line-height:1.25; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* Mobile nav drawer refresh */ @media (max-width:768px){.nav-links{display:none; position:fixed; inset:0; background:rgba(2,6,23,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); justify-content:flex-end; padding:0; z-index:1400} .nav-links.show{display:flex} .nav-panel{width:min(86vw,420px); height:100%; background:var(--surface); color:var(--text); border-left:1px solid var(--border); box-shadow:-24px 0 48px rgba(2,6,23,0.4); padding:16px 12px; display:flex; flex-direction:column; gap:6px; transform:translateX(100%); transition:transform 200ms ease-out} .nav-links.show .nav-panel{transform:translateX(0)} .nav-close{align-self:flex-end; background:transparent; border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:10px; margin-bottom:8px; text-decoration:none} .nav-links a{display:flex; align-items:center; gap:10px; padding:12px 10px; color:var(--text); border-radius:12px; border:1px solid transparent} .nav-links a:hover{background:var(--hover)} .nav-links a + a{margin-top:2px}} @media (min-width:769px){.nav-panel{display:contents} .nav-close{display:none}}
/* Masonry (grid + JS spans) — preserves left→right order, no overflow/stretching */ .gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; width:100%; max-width:1200px; margin:0 auto; padding:8px 12px} .gallery.is-masonry-ready{grid-auto-rows:2px} @media (max-width:640px){.gallery{grid-template-columns:repeat(2,1fr); gap:6px; padding:6px}} @media (min-width:1280px){.gallery{grid-template-columns:repeat(5,1fr)}} .gallery-item{position:relative; display:block; width:100%; margin:0; border-radius:12px; overflow:hidden} .gallery-item img{display:block; width:100%; height:auto !important; aspect-ratio:auto !important} .gallery-item.is-clamped img{height:100% !important; object-fit:cover}