:root {
    --bg-color: #0b0616;
    --card-bg: #1c1033;
    --primary: #b77cff;
    --primary-gradient: linear-gradient(90deg, #8a2be2, #d883ff);
    --text-main: #ffffff;
    --text-sub: #9a8bb5;
    --yellow: #ffd700;
    --border-radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background-color: var(--bg-color); color: var(--text-main); padding-bottom: 70px; }
::-webkit-scrollbar { display: none; }
.page-content { padding: 20px; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
h1 { font-size: 24px; margin-bottom: 5px; }
.subtitle { color: var(--text-sub); font-size: 12px; margin-bottom: 20px; }
.card { background: var(--card-bg); border-radius: var(--border-radius); padding: 20px; margin-bottom: 20px; border: 1px solid #332255; }

.tab-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: rgba(22, 11, 42, 0.95); backdrop-filter: blur(10px); display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #332255; z-index: 100; }
.tab-item { text-align: center; color: var(--text-sub); font-size: 12px; cursor: pointer; flex: 1; text-decoration: none; }
.tab-item.active { color: var(--primary); }
.tab-icon { font-size: 20px; display: block; margin-bottom: 2px; }

.filter-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; margin-bottom: 10px; }
.filter-btn { background: #1c1033; border: 1px solid #332255; color: var(--text-sub); padding: 6px 16px; border-radius: 20px; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 200; padding: 20px;}
.modal-content { background: var(--card-bg); width: 100%; max-width: 320px; max-height: 80vh; overflow-y: auto; padding: 25px; border-radius: var(--border-radius); text-align: center; border: 1px solid var(--primary); animation: popIn 0.3s; }
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-img { width: 100%; border-radius: 8px; margin-bottom: 15px; display: none; object-fit: cover; max-height: 250px; cursor: pointer;}
.modal-title { font-size: 18px; color: var(--primary); margin-bottom: 10px; }
.modal-text { font-size: 14px; margin-bottom: 15px; line-height: 1.5; text-align: left; word-break: break-all;}
.modal-contact { background: rgba(255, 255, 255, 0.1); padding: 10px; border-radius: 8px; font-weight: bold; color: var(--yellow); cursor: pointer; word-break: break-all;}
.close-btn { margin-top: 20px; background: var(--primary-gradient); border: none; color: white; padding: 10px 30px; border-radius: 20px; font-size: 14px; cursor: pointer; width: 100%;}
#imagePreviewLayer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 999; display: none; justify-content: center; align-items: center; }
#imagePreviewLayer img { max-width: 100%; max-height: 100%; object-fit: contain; }