/* general */
/* topicks */
/* promoter */
html,body{
    /* Disable scroll anchoring: async content injected above the fold (e.g. the home
       suggested-topics stories row) must not push the viewport down. */
    overflow-anchor:none;
}
body{
    /* font-family:Comic Sans MS,'Comic Neue', cursive,Futura,Helvetica Neue,Roboto;font-family: 'Bebas Neue', cursive;font-family: 'Teko', sans-serif;font-family: 'Noto Serif', serif; */
    background-color: whitesmoke!important;
    padding-bottom: 30px;
}
.logo{
    font-family: 'Marhey', cursive!important;
    color: black;
}
.navbar-brand{
    font-family: 'Lora', serif;
    color: black;
    font-size: 1rem;
    margin-bottom: 0!important;
    font-weight: 500;
}
.tab-text{
    /* font-family:Comic Sans MS,'Comic Neue', cursive,Futura,Helvetica Neue,Roboto; */
    color: inherit;
}
.title{
    color: inherit;
}
.lang{
    font-size: 0.8rem;
    background-color: rgb(65, 91, 236)!important;
    color: #f8f9fa!important;
    border-radius: 0.25rem!important;
    text-align: center;
    user-select: none;
    line-height: 1.5;
    padding-left: 0.25rem!important;
    padding-right: 0.25rem!important;
    width: fit-content;
}
.bg-primary{
    background-color: rgb(65, 91, 236)!important;
}
.bg-light{
    background-color: whitesmoke!important;
}
.bg-black{
    background-color: black;
}
::placeholder{
    color: black;
}
::-webkit-scrollbar{
    display: none;
}
.btn:focus, .btn:active, .btn:active:focus{
    box-shadow: none!important;
}
.thidescroll,.bhidescroll{
    transition: 1s;
}
.scrollup{
    transform: translateY(0);
}
.scrolldown{
    transform: translateY(-100%);
}
.bscrollup{
    transform: translateY(0);
}
.bscrolldown{
    transform: translateY(100%);
}
.tw,.tw:hover{
    color: white!important;
    text-decoration: none;
}
.td,td:hover{
    color:#343a40!important;
    text-decoration: none;
}
pre{
    word-wrap: break-word!important;
    white-space: normal!important;
    font: inherit;
}
.bottomappbar{
    display: flex!important;
    flex-direction: row!important;
    align-items: flex-end;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 540px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px 18px 0 0;
    padding: 0!important;
    z-index: 100;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.06);
}
.bab-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 8px 0 6px;
    color: #888;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none!important;
    position: relative;
    transition: color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.bab-item i{
    font-size: 1.25rem;
    margin-bottom: 2px;
    transition: transform 0.2s ease;
}
.bab-item span{
    line-height: 1;
}
.bab-item:hover{
    color: #667eea;
}
.bab-item:active{
    transform: scale(0.92);
}
.bab-item.bab-active{
    color: #667eea;
}
.bab-item.bab-active i{
    transform: scale(1.12);
}
.bab-item.bab-active::before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(135deg, #667eea, #764ba2);
}
.bab-center{
    padding-top: 0;
    padding-bottom: 10px;
}
.bab-fab{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff!important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -18px;
    box-shadow: 0 4px 14px rgba(102,126,234,0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bab-fab i{
    font-size: 1.3rem;
    color: #fff!important;
    margin-bottom: 0;
}
.bab-center:hover .bab-fab{
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102,126,234,0.45);
}
.bab-center:active .bab-fab{
    transform: scale(0.95);
}
.bab-center.bab-active::before{
    display: none;
}
.bab-badge{
    position: absolute;
    top: 4px;
    right: 50%;
    transform: translateX(14px);
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    text-align: center;
}
/* Bottom bar scroll hide */
.bottomappbar.bscrolldown{
    transform: translateX(-50%) translateY(100%);
}
.bottomappbar.bscrollup{
    transform: translateX(-50%) translateY(0);
}
/* Match Bootstrap container widths at each breakpoint */
@media(min-width:576px){
    .bottomappbar{ max-width: 540px; }
}
@media(min-width:768px){
    .bottomappbar{ max-width: 720px; }
    .bab-item{ padding: 10px 0 8px; font-size: 0.72rem; }
    .bab-item i{ font-size: 1.35rem; }
    .bab-fab{ width: 52px; height: 52px; margin-top: -22px; }
}
@media(min-width:992px){
    .bottomappbar{ max-width: 960px; }
}
@media(min-width:1200px){
    .bottomappbar{ max-width: 1140px; }
}
.puser{
    font-size: 0.9rem;
}
.posttitle{
    font-size: 1rem;
    word-wrap: break-word;
    white-space: normal;
}
.postedon{
    font-size: 0.7rem;
}
pre{
    font: inherit;
}
.sticky-bottom{
    position: sticky;
    bottom: 0;
}
.tdcoverimage{
    height: 300px!important;
    background-size: cover!important;
    background-position: center!important;
    border-radius: 10px!important;
}
.carousel{
    max-width:560px;
    height: max-content;
    margin-right: auto;
    margin-left: auto;
}
.postcoverimage{
    margin-top: 0.5rem;
    height:auto!important;
    max-width: 100%!important;
    border-radius: 30px!important;
}
.youtube{
    border-radius: 40px;
    height: 315px;
    max-width: 560px;
    padding: 0;
}
.fixed-center{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 600px;
    min-width: 100px;
}
.opacity{
    opacity: 0.2;
}
.topicimage{
    height: 49px;
    width: 49px;
    background-size: cover!important;
    border-radius: 50%;
    margin-right: 0.25rem;
}
.postuserimage{
    height: 25px;
    width: 25px;
    min-width: 25px;
    background-size: cover!important;
    border-radius: 50%;
    margin-right: 0.25rem;
    flex-shrink: 0;
}
.noti-text{
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0;
    line-height: 1.4;
}
#newpostsbtn{
    position:absolute;
    top:105%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    display: none;
}
.pptxt{
    white-space: pre-wrap!important;
    word-wrap: break-word;
}
.cusr{
    color: #007bff!important;
    font-size: 13px;
}
.cmsg{
    white-space: pre-wrap!important;
    word-wrap: break-word;
    max-width: 80%;
    background-color: whitesmoke!important;
    border: 1px solid #dee2e6!important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    padding: .25rem!important;
    margin-top: .25rem!important;
    display: flex!important;
    flex-direction: column!important;
    border-radius: .25rem!important;
}
.rmsg{
    padding: .5rem;
    width: 100%;
    background-color: rgb(236, 231, 224);
}
.scrolltb{
    position: absolute;
    bottom: 101%;
    left: 50%;
    transform: translateX(-50);
    border-radius: 50%;
    border: 1px solid #dee2e6!important;
    background-color: whitesmoke!important;
    color: #007bff!important;
    padding: .5rem;
}
/* Topic Chat – Modern Dark UI */
.tc-header{display:flex;align-items:center;padding:10px 14px;gap:10px;position:fixed;top:0;left:0;right:0;z-index:10;background:rgba(255,255,255,0.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #4a5568}
.tc-back{color:#c9d1d9;font-size:18px;padding:6px;text-decoration:none}
.tc-back:hover{color:#667eea}
.tc-topic-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:#fff}
.tc-topic-info:hover{color:#fff;text-decoration:none}
.tc-topic-img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #667eea;flex-shrink:0}
.tc-topic-text{min-width:0}
.tc-topic-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Marhey',cursive}
.tc-topic-lang{font-size:11px;color:#8b949e}
.tc-header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tc-active-users{background:rgba(102,126,234,0.15);color:#667eea;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600}
.tc-header-btn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid #4a5568;color:#c9d1d9;display:flex;align-items:center;justify-content:center;font-size:14px;text-decoration:none;transition:all .2s}
.tc-header-btn:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent;text-decoration:none}
.tc-messages{padding:10px 12px 0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.tc-date-divider{text-align:center;padding:14px 0 8px;position:relative;align-self:center}
.tc-date-divider span{background:rgba(102,126,234,0.12);color:#8b949e;font-size:11px;font-weight:600;padding:4px 14px;border-radius:12px;letter-spacing:.3px}
.tc-bubble{background:rgba(255,255,255,0.06);border:1px solid #4a5568;border-radius:14px;padding:10px 12px 6px;min-width:140px;max-width:75%;display:flex;flex-direction:column;position:relative;word-wrap:break-word;white-space:pre-wrap;transition:background .15s}
.tc-bubble:hover{background:rgba(255,255,255,0.09)}
.tc-own{align-self:flex-end;background:rgba(102,126,234,0.12);border:1px solid rgba(102,126,234,0.4)}
.tc-own:hover{background:rgba(102,126,234,0.18)}
.tc-bubble-row{display:flex;flex-direction:row;gap:8px;align-items:flex-start}
.tc-bubble-top{display:flex;align-items:center;gap:0;margin-bottom:2px}
.tc-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-top:2px}
.tc-bubble-body{display:flex;flex-direction:column;flex:1;min-width:0}
.tc-sender{font-size:12px;font-weight:700;color:#667eea;text-decoration:none}
.tc-sender:hover{color:#764ba2;text-decoration:none}
.tc-msg-text{font-size:14px;color:#e0e0e0;line-height:1.45;cursor:pointer}
.tc-time{font-size:10px;color:#8b949e;text-align:right;margin-top:4px}
.tc-reply-ref{background:rgba(255,255,255,0.06);border-left:3px solid #667eea;border-radius:6px;padding:6px 10px;margin-bottom:6px;font-size:12px;color:#8b949e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-post-ref{cursor:pointer;border-left-color:#764ba2;color:#667eea}
.tc-post-ref:hover{background:rgba(102,126,234,0.12)}
.tc-load-more{text-align:center;padding:12px;align-self:center;width:100%}
.tc-spinner{color:#667eea;font-size:20px}
.tc-scroll-btn{position:fixed;bottom:80px;right:16px;width:40px;height:40px;border-radius:50%;background:rgba(102,126,234,0.9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.3);z-index:10;transition:transform .2s}
.tc-scroll-btn:hover{transform:scale(1.1)}
.tc-new-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:9px;background:#e53935;color:#fff;font-size:10px;font-weight:700;text-align:center}
.tc-input-bar{position:fixed;bottom:0;left:0;right:0;z-index:10;background:rgba(13,17,23,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid #4a5568;padding:0}
.tc-reply-bar{padding:8px 14px 0}
.tc-reply-preview{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.06);border:1px solid #4a5568;border-radius:10px;padding:8px 12px;font-size:12px;color:#8b949e;cursor:pointer}
.tc-reply-preview span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-reply-close{color:#8b949e;font-size:14px;cursor:pointer;padding:2px}
.tc-reply-close:hover{color:#e53935}
.tc-input-row{display:flex;align-items:center;gap:8px;padding:10px 14px}
.tc-input{flex:1;background:rgba(255,255,255,0.06);border:1px solid #4a5568;border-radius:22px;padding:10px 16px;color:#e0e0e0;font-size:14px;outline:none;transition:border-color .2s}
.tc-input::placeholder{color:#6e7681}
.tc-input:focus{border-color:#667eea}
.tc-send-btn{width:42px;height:42px;border-radius:50%;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s;flex-shrink:0}
.tc-send-btn:hover{transform:scale(1.08)}
.tc-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:50;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.tc-popup-panel{position:fixed;top:70px;right:12px;width:280px;max-height:60vh;background:rgba(22,27,34,0.97);border:1px solid #4a5568;border-radius:16px;z-index:51;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.tc-popup-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #4a5568;font-size:14px;font-weight:700;color:#c9d1d9}
.tc-popup-close{cursor:pointer;color:#8b949e;font-size:16px;padding:4px;transition:color .2s}
.tc-popup-close:hover{color:#fff}
.tc-popup-list{overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.tc-p-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.04);border:1px solid #4a5568;border-radius:12px;padding:8px 12px;text-decoration:none;color:#c9d1d9;font-size:13px;transition:all .2s}
.tc-p-item:hover{background:rgba(102,126,234,0.12);color:#fff;text-decoration:none}
.tc-p-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #667eea}
.tc-p-avatar-placeholder{width:32px;height:32px;border-radius:50%;background:rgba(102,126,234,0.15);display:flex;align-items:center;justify-content:center;font-size:12px;color:#667eea;flex-shrink:0}
.tc-p-name{font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-p-online{width:8px;height:8px;border-radius:50%;background:#3fb950;flex-shrink:0}
a{
    text-decoration: none!important;
}
.tag{
    text-decoration: none!important;
    margin-right: 0.6rem;
}
.olink{
    cursor: pointer;
}
.purl{
    display: block;
    box-shadow: 0 .5rem .5rem rgba(0,0,0,.15)!important;
    font-size: 0.8rem;
    margin-left: 0.5rem!important;
    padding: 0.5rem;
    border-radius: 0.25rem;
    text-align: center;
    color: #007bff;
}
.promotion-list{
    color: inherit!important;
    min-width: 200px;
    text-align: center!important;
    padding: 0.5rem!important;
    margin: 0.25rem!important;
    border: 1px solid #dee2e6!important;
    border-radius: 0.25rem!important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    display: flex!important;
    flex: 1 1 auto!important;
    flex-direction: column!important;
}
/* ── Date-Time Picker ──────────────────────────────── */
.skar-dtp{max-width:100%;margin:10px 8px;background:#fff;border:1px solid #dee2e6;border-radius:12px;padding:12px;font-family:inherit}
.skar-dtp-toggle{font-size:.95rem;font-weight:600;padding:10px 14px;border-radius:8px;margin-bottom:8px;text-align:left}
.skar-dtp-panel{background:#fff;border-radius:8px}
.skar-dtp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.skar-dtp-nav button{background:none;border:none;font-size:1rem;padding:4px 10px;cursor:pointer;color:#495057;border-radius:6px;transition:background .15s}
.skar-dtp-nav button:hover{background:#e9ecef}
.skar-dtp-title{font-weight:600;font-size:.95rem}
.skar-dtp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:.75rem;color:#6c757d;font-weight:600;margin-bottom:2px}
.skar-dtp-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:2px}
.skar-dtp-days span{padding:7px 0;border-radius:8px;cursor:pointer;font-size:.88rem;transition:background .15s,color .15s}
.skar-dtp-blank{cursor:default!important}
.skar-dtp-day:hover{background:#e9ecef}
.skar-dtp-sel{background:#dc3545!important;color:#fff!important;font-weight:700}
.skar-dtp-today{border:2px solid #dc3545;font-weight:600}
.skar-dtp-disabled{color:#ccc!important;cursor:not-allowed!important;pointer-events:none}
.skar-dtp-time{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.skar-dtp-time-row{display:flex;flex-direction:column;align-items:center;gap:2px}
.skar-dtp-time-row button{background:none;border:none;font-size:.85rem;cursor:pointer;color:#495057;padding:2px 8px;border-radius:6px;transition:background .15s}
.skar-dtp-time-row button:hover{background:#e9ecef}
.skar-dtp-hval,.skar-dtp-mval{font-size:1.3rem;font-weight:700;min-width:36px;text-align:center;background:#f8f9fa;border-radius:8px;padding:4px 0}
.skar-dtp-colon{font-size:1.3rem;font-weight:700}
.skar-dtp-ampm{font-size:.85rem;font-weight:700;padding:6px 12px;border-radius:8px;background:#f8f9fa;border:1px solid #dee2e6;cursor:pointer;transition:background .15s}
.skar-dtp-ampm:hover{background:#e2e6ea}

/* Wizard & Step UI */
.wizard-card{background:rgba(255,255,255,0.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.12);border-radius:20px;padding:24px;max-width:500px;margin:30px auto}
.wizard-title{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:2px;text-align:center;color:#fff;margin-bottom:6px}
.wizard-subtitle{text-align:center;font-size:0.85rem;color:rgba(255,255,255,0.5);margin-bottom:18px}
.step{display:none}
.step.active{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.step-counter{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:0.75rem;font-weight:700;padding:3px 12px;border-radius:20px;margin-bottom:10px}
.question-text{font-size:1.15rem;font-weight:600;color:#fff;margin-bottom:10px}
.achievement-badge{background:linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,165,0,0.1));border:1px solid rgba(255,215,0,0.3);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:0.85rem;color:#ffd700;display:flex;align-items:center;gap:8px}
.achievement-badge i{font-size:1.1rem}
.addtopic-label{font-size:0.8rem;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.45);margin-bottom:6px}

/* Progress Bar */
.progress-bar-track{height:4px;background:rgba(255,255,255,0.1);border-radius:4px;margin-bottom:20px;overflow:hidden}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:4px;transition:width .3s ease}

/* Search & Topic Chips */
.searchtopic-input{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);border-radius:12px;color:#fff;padding:10px 14px;transition:border-color .2s}
.searchtopic-input::placeholder{color:rgba(255,255,255,0.35)}
.searchtopic-input:focus{background:rgba(255,255,255,0.12);border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.2);color:#fff}
.selected-topics-container .topic-chip,.all-selected-topics .sel-topic{background:rgba(102,126,234,0.2);border:1px solid rgba(102,126,234,0.4);border-radius:20px;padding:5px 12px;margin:3px;display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;color:#c8d6ff;transition:all .2s}
.selected-topics-container .topic-chip:hover,.all-selected-topics .sel-topic:hover{background:rgba(102,126,234,0.35)}
.topic-chip input[type=checkbox],.sel-topic input[type=checkbox]{accent-color:#667eea;width:15px;height:15px}
.all-selected-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:14px;margin-top:14px}
.all-selected-card>label{font-size:0.8rem;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.5);margin-bottom:8px}

/* Nav Buttons */
.nav-btn{border-radius:12px;padding:8px 20px;font-weight:600;font-size:0.9rem;transition:transform .15s}
.nav-btn:active{transform:scale(0.96)}
.btn-back{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff}
.btn-back:hover{background:rgba(255,255,255,0.18);color:#fff}
.btn-next{background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff}
.btn-next:hover{opacity:0.9;color:#fff}
.btn-submit{background:linear-gradient(135deg,#11998e,#38ef7d);border:none;color:#fff;border-radius:12px;padding:10px 28px;font-weight:700}
.btn-submit:hover{opacity:0.9;color:#fff}

/* Suggested Topics */
.suggest-topic-item{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:10px 14px;margin:4px 0;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s}
.suggest-topic-item:hover,.suggest-topic-item.selected{background:rgba(102,126,234,0.2);border-color:rgba(102,126,234,0.5)}
.suggest-topic-item input[type=checkbox]{accent-color:#667eea;width:16px;height:16px;flex-shrink:0}
.suggest-topic-img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}
.suggest-topic-info{flex:1}
.suggest-topic-title{font-weight:600;color:#fff;font-size:0.95rem}
.suggest-topic-meta{font-size:0.75rem;color:rgba(255,255,255,0.45);margin-top:2px}
.suggest-topic-meta .badge{font-size:0.7rem;padding:2px 8px;border-radius:10px}

/* Misc Reusable */
.subyoutube-bar{background:rgba(255,0,0,0.15);border:1px solid rgba(255,0,0,0.3);border-radius:12px;padding:10px;margin-top:14px;text-align:center;cursor:pointer;transition:background .2s;color:#ff6b6b;font-weight:600}
.subyoutube-bar:hover{background:rgba(255,0,0,0.25)}

/* Dark Glass Card & Form */
.details-card{background:rgba(255,255,255,0.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.12);border-radius:20px;padding:24px;max-width:480px;margin:30px auto}
.details-title{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:2px;text-align:center;color:#fff;margin-bottom:4px}
.details-subtitle{text-align:center;font-size:0.85rem;color:rgba(255,255,255,0.5);margin-bottom:20px}
.details-card label{color:rgba(255,255,255,0.75)!important;font-size:0.85rem;font-weight:600;margin-bottom:4px}
.details-card .form-control,.details-card select{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);border-radius:12px;color:#fff;padding:10px 14px;transition:border-color .2s}
.details-card .form-control::placeholder{color:rgba(255,255,255,0.35)}
.details-card .form-control:focus,.details-card select:focus{background:rgba(255,255,255,0.12);border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.2);color:#fff}
.details-card select option{background:#302b63;color:#fff}
.details-card .form-check-label,.details-card .checkbox label{color:rgba(255,255,255,0.8)!important;font-weight:400}
.details-card input[type=checkbox],.details-card input[type=radio]{accent-color:#667eea}
.details-card .helptext,.details-card .form-text,.details-card .asteriskField{color:rgba(255,255,255,0.4)!important;font-size:0.78rem}
.details-card .invalid-feedback,.details-card .alert{color:#ff6b6b}

/* Join / Action Button */
.join-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;border-radius:12px;padding:12px 28px;font-weight:700;font-size:1rem;width:100%;margin-top:14px;transition:opacity .2s,transform .15s;cursor:pointer}
.join-btn:hover{opacity:0.9}
.join-btn:active{transform:scale(0.97)}

/* YouTube Promo Card */
.yt-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:18px;max-width:480px;margin:16px auto;text-align:center;color:rgba(255,255,255,0.7);font-size:0.9rem}
.yt-card h5{color:#fff;font-size:1rem;margin-bottom:10px}
.yt-card .subyoutube{background:rgba(255,0,0,0.15);border:1px solid rgba(255,0,0,0.3);border-radius:10px;color:#ff6b6b;font-weight:600;padding:6px 16px;transition:background .2s}
.yt-card .subyoutube:hover{background:rgba(255,0,0,0.25)}
.yt-card .target-num{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:#ffd700;margin:4px 0;letter-spacing:2px}

/* OTP Dialog */
.otp-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9999;display:none}
.otp-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);border-radius:16px;padding:28px;min-width:300px;text-align:center;color:#fff}
.otp-box h5{margin-bottom:6px}
.otp-box p{font-size:0.85rem;color:rgba(255,255,255,0.55)}
.otp-box input{width:100%;padding:12px;font-size:1.3rem;text-align:center;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);border-radius:12px;color:#fff;letter-spacing:8px}
.otp-box input:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.2);outline:none}
#otpError{color:#ff6b6b;font-size:0.8rem;margin-top:6px}
.otp-actions{margin-top:16px;display:flex;gap:10px;justify-content:center}
.otp-actions .btn-cancel{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:10px;padding:8px 20px;font-weight:600}
.otp-actions .btn-verify{background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;border-radius:10px;padding:8px 20px;font-weight:600}

/* Avatar Picker */
.avatar-picker{display:flex;flex-direction:column;align-items:center;margin-bottom:18px}
.avatar-circle{width:100px;height:100px;border-radius:50%;border:3px solid rgba(102,126,234,0.5);background:rgba(255,255,255,0.08);overflow:hidden;cursor:pointer;position:relative;transition:border-color .2s,transform .15s;display:flex;align-items:center;justify-content:center}
.avatar-circle:hover{border-color:#667eea;transform:scale(1.04)}
.avatar-circle img{width:100%;height:100%;object-fit:cover}
.avatar-circle .avatar-placeholder{color:rgba(255,255,255,0.35);font-size:2.2rem}

/* Create Topic Page */
.ct-header{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.ct-back{color:rgba(255,255,255,0.7);font-size:1.2rem;cursor:pointer;padding:8px;border-radius:50%;transition:background .2s,color .2s}
.ct-back:hover{background:rgba(255,255,255,0.1);color:#fff}
.ct-cover-picker{width:100%;height:160px;border-radius:14px;border:2px dashed rgba(255,255,255,0.2);background:rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;margin-bottom:18px;transition:border-color .2s,background .2s;position:relative}
.ct-cover-picker:hover{border-color:rgba(102,126,234,0.5);background:rgba(255,255,255,0.08)}
.ct-cover-picker img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
.ct-cover-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,0.35);font-size:0.85rem}
.ct-notes{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:14px;margin-top:16px;margin-bottom:6px}
.ct-notes-title{font-size:0.85rem;font-weight:700;color:rgba(255,255,255,0.7);margin-bottom:10px}
.ct-note-item{font-size:0.8rem;color:rgba(255,255,255,0.5);padding:3px 0}
.ct-note-item .fa{color:rgba(102,126,234,0.7);width:16px;text-align:center}

/* Login Page */
.login-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px;position:relative}
.login-wrapper::before,.login-wrapper::after{content:'';position:fixed;border-radius:50%;filter:blur(80px);opacity:0.3;pointer-events:none;z-index:0}
.login-wrapper::before{width:300px;height:300px;background:#667eea;top:-60px;right:-60px;animation:loginFloat 8s ease-in-out infinite alternate}
.login-wrapper::after{width:250px;height:250px;background:#764ba2;bottom:-40px;left:-40px;animation:loginFloat 10s ease-in-out infinite alternate-reverse}
@keyframes loginFloat{from{transform:translate(0,0)}to{transform:translate(30px,-30px)}}
.login-card{position:relative;z-index:1;background:rgba(255,255,255,0.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:40px 32px 32px;max-width:400px;width:100%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.login-logo{width:80px;height:80px;border-radius:20px;object-fit:cover;margin-bottom:16px;box-shadow:0 4px 20px rgba(102,126,234,0.3)}
.login-brand{font-family:'Marhey',cursive;font-size:2.2rem;font-weight:600;background:linear-gradient(135deg,#667eea,#a78bfa,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px;letter-spacing:1px}
.login-tagline{font-family:'Lora',serif;font-size:1rem;color:rgba(255,255,255,0.55);margin-bottom:28px;line-height:1.5}
.login-tagline em{color:rgba(255,255,255,0.8);font-style:normal;font-weight:600}
.login-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px 24px;background:#fff;color:#333;font-family:'Kanit',sans-serif;font-size:1rem;font-weight:600;letter-spacing:0.5px;border:none;border-radius:14px;text-decoration:none;transition:transform .15s,box-shadow .2s;box-shadow:0 4px 16px rgba(0,0,0,0.2);cursor:pointer}
.login-google:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.3);text-decoration:none;color:#333}
.login-google:active{transform:scale(0.97)}
.login-google img{width:22px;height:22px}
.login-divider{display:flex;align-items:center;gap:12px;margin:24px 0 20px;color:rgba(255,255,255,0.25);font-size:0.78rem;text-transform:uppercase;letter-spacing:2px}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.12)}
.login-features{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.login-feat{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:0.72rem;color:rgba(255,255,255,0.45)}
.login-feat i{font-size:1.1rem;color:rgba(102,126,234,0.7)}
.login-install{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:10;background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;padding:8px 20px;border-radius:12px;font-weight:600;font-size:0.85rem;box-shadow:0 4px 16px rgba(102,126,234,0.4);cursor:pointer;transition:transform .15s}
.login-install:hover{transform:translateX(-50%) scale(1.04)}
.login-footer{position:fixed;bottom:0;left:0;right:0;text-align:center;padding:12px 16px;z-index:1}
.login-footer a{color:rgba(255,255,255,0.45);text-decoration:none;font-size:0.8rem;transition:color .2s}
.login-footer a:hover{color:rgba(255,255,255,0.8)}
.login-footer small{display:block;color:rgba(255,255,255,0.25);font-size:0.7rem;margin-top:4px}

/* Search Results (search.html partial) */
.search-section-title{font-weight:700;font-size:.85rem;padding:8px 8px 4px;color:#888;text-transform:uppercase;letter-spacing:.8px}
.search-hint{font-size:.78rem;color:#999;padding:2px 8px 6px;font-style:italic;width:100%;flex-shrink:0}
.topiclists{display:flex;flex-wrap:wrap;padding:0;margin:0;gap:4px;list-style:none}
.search-result-item{list-style:none;display:inline-flex;align-items:center;padding:5px 10px 5px 5px;margin:3px;border-radius:22px;border:1px solid rgba(128,128,128,0.15);cursor:pointer;transition:all .2s ease;gap:6px}
.search-result-img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}
.search-result-item:hover{background:rgba(102,126,234,0.1);border-color:rgba(102,126,234,0.3)}
.search-result-lang{font-size:.65rem;padding:1px 7px;border-radius:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;white-space:nowrap}
.search-result-link{display:flex;align-items:center;padding:10px 14px;margin:4px 2px;border-radius:12px;border:1px solid rgba(128,128,128,0.15);text-decoration:none;color:inherit;transition:all .2s ease;gap:10px;flex:1 1 auto}
.search-result-link:hover{background:rgba(102,126,234,0.1);border-color:rgba(102,126,234,0.3);text-decoration:none;color:inherit;transform:translateX(3px)}
.search-result-link .topicimage{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;background-size:cover;background-position:center}
.search-result-info{display:flex;flex-direction:column;flex:1;min-width:0;gap:4px}
.search-result-title{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.topick-edit-icon{flex-shrink:0;color:#667eea;font-size:14px;padding:6px;border-radius:8px;background:rgba(102,126,234,0.12)}
.search-result-user .postuserimage{width:32px;height:32px;border-radius:50%;flex-shrink:0;background-size:cover;background-position:center}
.search-result-post{font-weight:500}
.search-create-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;font-size:.85rem;text-decoration:none;transition:all .2s;border:none}
.search-create-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.35);color:#fff;text-decoration:none}
.search-no-results{text-align:center;padding:12px 8px}

/* Enriched Topic Chips (with image) */
.topic-chip-rich{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border-radius:22px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.07);margin:3px;transition:background .2s;cursor:pointer}
.topic-chip-rich:hover{background:rgba(255,255,255,0.12)}
.topic-chip-rich img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}
.topic-chip-rich .chip-title{font-size:.82rem;font-weight:500;color:#fff}
.topic-chip-rich .chip-lang{font-size:.65rem;padding:1px 7px;border-radius:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600}
.sel-topic-rich{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:20px;border:1px solid rgba(255,255,255,0.12);background:rgba(102,126,234,0.1);margin:3px;cursor:pointer}
.sel-topic-rich img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0}
.sel-topic-rich .chip-title{font-size:.8rem;color:#fff}
.sel-topic-rich .chip-lang{font-size:.6rem;padding:1px 6px;border-radius:10px;background:rgba(102,126,234,0.3);color:#ccd}

/* Profile page */
.prof-topbar{display:flex;align-items:center;padding:12px 16px;gap:10px}
.prof-back{color:#c9d1d9;font-size:20px;cursor:pointer;padding:6px}
.prof-status{font-size:12px;color:#8b949e}
.prof-online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3fb950;margin-right:4px}
.prof-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.prof-action-btn{background:rgba(255,255,255,0.08);border:1px solid #4a5568;color:#c9d1d9;padding:6px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;min-height:34px;min-width:34px}
.prof-action-btn:hover{background:rgba(102,126,234,0.2);color:#fff;text-decoration:none}

.prof-hero{text-align:center;padding:8px 20px 20px}
.prof-avatar{width:110px;height:110px;border-radius:50%;margin:0 auto 14px;background-size:cover;background-position:center;cursor:pointer;border:3px solid #667eea;box-shadow:0 4px 24px rgba(102,126,234,0.3);transition:transform .3s}
.prof-avatar:hover{transform:scale(1.05)}
.prof-avatar-placeholder{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);color:#8b949e}
.prof-name{font-size:22px;font-weight:700;color:#fff;margin-bottom:2px;font-family:'Marhey',cursive}
.prof-handle{font-size:14px;color:#8b949e;margin-bottom:10px}
.prof-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:10px}
.prof-tag{background:rgba(255,255,255,0.06);border:1px solid #4a5568;padding:3px 10px;border-radius:14px;font-size:11px;color:#8b949e}
.prof-socials{display:flex;justify-content:center;gap:16px;margin-top:6px}
.prof-social-icon{font-size:20px;color:#8b949e;cursor:pointer;transition:color .2s}
.prof-social-icon:hover{color:#667eea}

.prof-stats{display:flex;justify-content:center;gap:4px;padding:0 12px 16px;flex-wrap:wrap}
.prof-stat{background:rgba(255,255,255,0.04);border:1px solid #4a5568;border-radius:12px;padding:12px 6px;text-align:center;flex:1;min-width:60px}
.prof-stat-val{font-size:20px;font-weight:800;color:#fff;font-family:'Marhey',cursive}
.prof-stat-label{font-size:10px;color:#8b949e;margin-top:2px}
.prof-stat-label i{margin-right:2px}

.prof-section{padding:0 16px 14px}
.prof-section-title{font-size:14px;font-weight:700;color:#c9d1d9;margin-bottom:10px}

.prof-role-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.05);border:1px solid #4a5568;border-radius:14px;padding:14px 16px;transition:background .2s}
.prof-role-card:hover{background:rgba(102,126,234,0.08)}
.prof-role-icon{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0}
.prof-role-info{flex:1;min-width:0}
.prof-role-title{font-size:16px;font-weight:700;color:#fff;font-family:'Marhey',cursive}
.prof-role-desc{font-size:12px;color:#8b949e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-role-by{font-size:11px;color:#58a6ff;white-space:nowrap}
.prof-promote-btn{width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s;flex-shrink:0}
.prof-promote-btn:hover{transform:scale(1.1)}
.prof-hier-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;margin-top:10px}
.prof-hier-row .prof-hier-btn-outer,.prof-hier-row .prof-strip-btn{margin-top:0}
.prof-hier-btn-outer{display:inline-flex;align-items:center;margin-top:10px;padding:8px 16px;border-radius:10px;border:1px solid #4a5568;background:rgba(255,255,255,0.05);color:#667eea;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s}
.prof-hier-btn-outer:hover{background:rgba(102,126,234,0.12);border-color:#667eea;color:#667eea;text-decoration:none}

.prof-badges{display:flex;flex-wrap:wrap;gap:8px}
.prof-badge-card{background:rgba(255,255,255,0.05);border:1px solid #4a5568;border-radius:12px;padding:14px 16px;flex:1;min-width:140px;transition:background .2s}
.prof-badge-card:hover{background:rgba(102,126,234,0.08)}
.prof-badge-icon{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffd700,#ff8c00);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;margin-bottom:8px}
.prof-badge-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px}
.prof-badge-desc{font-size:11px;color:#8b949e}

.prof-action-strip{display:flex;gap:8px;padding:0 16px 14px;flex-wrap:wrap}
.prof-strip-btn{background:rgba(255,255,255,0.06);border:1px solid #4a5568;color:#c9d1d9;padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center}
.prof-strip-btn:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent;text-decoration:none}

.prof-topics-bar{display:flex;gap:8px;padding:0 16px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;position:sticky;top:0;z-index:5;background:rgba(255,255,255,0.04);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding-top:10px;padding-bottom:10px}
.prof-topics-bar::-webkit-scrollbar{height:0}
.prof-topic-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.06);border:1px solid #4a5568;color:#c9d1d9;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s}
.prof-topic-chip:hover,.prof-topic-chip.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}
.prof-topic-img{width:22px;height:22px;border-radius:50%;object-fit:cover}

.prof-posts-area{padding:0 12px 100px;min-height:120px}
.prof-posts-empty{text-align:center;color:#8b949e;padding:40px 0;font-size:14px}

/* Events page */
.ev-page{min-height:100vh;padding-bottom:80px;color:#e0e0e0}
.ev-topbar{display:flex;align-items:center;padding:14px 16px;margin:0 16px;background:transparent}
.ev-back{color:rgba(255,255,255,.7);font-size:1.1rem;padding:8px;border-radius:50%;transition:background .2s}
.ev-back:hover{background:rgba(255,255,255,.1);text-decoration:none;color:#fff}
.ev-topbar-title{flex:1;text-align:center;font-weight:700;font-size:1.1rem;color:#fff}
.ev-add{color:#667eea;font-size:1.1rem;padding:8px;border-radius:50%;transition:background .2s;text-decoration:none}
.ev-add:hover{background:rgba(102,126,234,.15);color:#8b9cf7}
.ev-today{text-align:center;padding:10px 0 4px;font-size:.8rem;color:rgba(255,255,255,.45);letter-spacing:1px;text-transform:uppercase}
.ev-group{margin:12px 16px}
.ev-group-header{display:flex;align-items:center;margin-bottom:10px;gap:10px}
.ev-date-badge{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);padding:6px 14px;border-radius:20px}
.ev-date-badge.today{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}
.ev-countdown{font-size:.75rem;color:rgba(255,255,255,.4);margin-left:auto}
.ev-card{background:rgba(38,36,66,.82);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;margin-bottom:10px;transition:border-color .2s,box-shadow .2s;position:relative;overflow:hidden;transform:translateZ(0)}
.ev-card:hover{border-color:rgba(255,255,255,.2);box-shadow:0 4px 20px rgba(0,0,0,.2)}
.ev-card-row{display:flex;align-items:flex-start;gap:12px}
.ev-left-col{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:2px}
.ev-share-btn{display:inline-flex;align-items:center;justify-content:center;min-width:70px;padding:10px;border:none;border-radius:8px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:1rem;cursor:pointer;transition:transform .15s,box-shadow .15s}
.ev-share-btn:hover{color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(102,126,234,.5)}
.ev-time-pill{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:.75rem;font-weight:700;padding:7px 10px;border-radius:8px;white-space:nowrap;min-width:70px;text-align:center;margin-top:0;text-decoration:none;transition:transform .15s,box-shadow .15s}
.ev-time-pill:hover{color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 14px rgba(102,126,234,.5)}
.ev-time-cam{font-size:.85rem}
.ev-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ev-title{display:block;font-size:1rem;font-weight:600;color:#fff;margin:0;word-break:break-word;text-decoration:none}
.ev-title:hover{color:#8b9cf7;text-decoration:none}
.ev-creator{font-size:.78rem;color:rgba(255,255,255,.5)}
.ev-creator a{color:#667eea;text-decoration:none;font-weight:600}
.ev-creator a:hover{text-decoration:underline}
.ev-desc{font-size:.82rem;line-height:1.35;color:rgba(255,255,255,.62);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;cursor:pointer}
.ev-desc.expanded{-webkit-line-clamp:unset;overflow:visible}
.ev-home-section .ev-desc{color:#666}
.ev-topics{display:flex;flex-wrap:wrap;gap:5px}
.ev-topic-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(102,126,234,.12);border:1px solid rgba(102,126,234,.25);color:#8b9cf7;padding:3px 10px;border-radius:14px;font-size:.72rem;font-weight:600;text-decoration:none;transition:all .2s}
.ev-topic-chip:hover{background:rgba(102,126,234,.22);border-color:#667eea;color:#fff;text-decoration:none}
.ev-topic-chip img{width:15px;height:15px;border-radius:50%;object-fit:cover}
.post-topics{gap:8px;margin-top:.5rem}
.post-topics .ev-topic-chip{padding:6px 14px}
.ev-like-btn{display:flex;align-items:center;gap:5px;background:none;border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:6px 12px;color:rgba(255,255,255,.5);font-size:.85rem;cursor:pointer;transition:all .2s;flex-shrink:0;align-self:flex-start}
.ev-like-btn:hover{border-color:rgba(235,87,87,.5);color:#eb5757}
.ev-like-btn.liked{color:#eb5757;border-color:rgba(235,87,87,.4);background:rgba(235,87,87,.1)}
.ev-like-btn i{font-size:.9rem}
.ev-empty{text-align:center;padding:60px 20px}
.ev-empty-icon{font-size:3rem;margin-bottom:16px;color:rgba(255,255,255,.2)}
.ev-empty-text{color:rgba(255,255,255,.5);font-size:.95rem;margin-bottom:20px}
.ev-empty-btn{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 28px;border-radius:12px;text-decoration:none;font-weight:600;transition:all .2s}
.ev-empty-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,.4);color:#fff;text-decoration:none}
.ev-filter-chip{display:inline-flex;align-items:center;background:rgba(102,126,234,.18);border:1px solid rgba(102,126,234,.4);color:#cfd6ff;padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:600;margin:0 16px 8px}
.ev-filter-clear{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:8px;border-radius:50%;background:rgba(255,255,255,.12);color:#cfd6ff;text-decoration:none}
.ev-filter-clear:hover{background:rgba(255,255,255,.25);color:#fff;text-decoration:none}
.ev-pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding:20px 16px 8px}
.ev-page-btn{display:inline-flex;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:8px 18px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.9rem;transition:all .2s}
.ev-page-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,.4);color:#fff;text-decoration:none}
.ev-page-info{color:rgba(255,255,255,.6);font-size:.9rem;font-weight:600}
@keyframes evPulse{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes avatar-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ev-like-anim i{animation:evPulse .3s ease}

/* Events home section (expandable) */
.ev-home-section{margin:8px 12px 12px;border:1px solid #e8e8e8;border-radius:12px;background:#fff;overflow:hidden}
.ev-home-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer;user-select:none;transition:background .15s}
.ev-home-header:hover{background:#f8f9fa}
.ev-home-header-left{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:#333}
.ev-home-header-left .fa-calendar{color:#667eea;font-size:.95rem}
.ev-home-count{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:10px;min-width:20px;text-align:center}
.ev-home-arrow{color:#999;font-size:.8rem;transition:transform .25s}
.ev-home-section.collapsed .ev-home-arrow{transform:rotate(-90deg)}
.ev-home-body{padding:4px 8px 8px}
.ev-home-section.collapsed .ev-home-body{display:none}

/* Event cards inside home page (light bg overrides) */
.ev-home-section .ev-card{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid #e8e8e8;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.ev-home-section .ev-card:hover{border-color:#d0d0d0;box-shadow:0 3px 12px rgba(0,0,0,.08);transform:translateY(-1px)}
.ev-home-section .ev-title{color:#222}
.ev-home-section .ev-creator{color:#888}
.ev-home-section .ev-creator a{color:#667eea}
.ev-home-section .ev-topic-chip{background:rgba(102,126,234,.08);border-color:rgba(102,126,234,.2);color:#667eea}
.ev-home-section .ev-topic-chip:hover{background:rgba(102,126,234,.15);border-color:#667eea;color:#5a6fd6}
.ev-home-section .ev-like-btn{border-color:#dee2e6;color:#888}
.ev-home-section .ev-like-btn:hover{border-color:rgba(235,87,87,.5);color:#eb5757}
.ev-home-section .ev-like-btn.liked{color:#eb5757;border-color:rgba(235,87,87,.4);background:rgba(235,87,87,.06)}

/* Calling dialog */
.calling-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);z-index:99999;display:flex;align-items:center;justify-content:center;animation:onbFadeIn .3s ease}
.calling-card{text-align:center;padding:40px 24px;position:relative}
.calling-avatar-wrap{position:relative;width:120px;height:120px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.calling-avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.3);position:relative;z-index:2}
.calling-avatar-placeholder{width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:rgba(255,255,255,.4);border:3px solid rgba(255,255,255,.2);position:relative;z-index:2}
.calling-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);border-radius:50%;border:2px solid rgba(102,126,234,.6);animation:callingDrop 2.4s ease-out infinite;opacity:0}
.calling-ring-1{width:90px;height:90px;animation-delay:0s}
.calling-ring-2{width:90px;height:90px;animation-delay:.8s}
.calling-ring-3{width:90px;height:90px;animation-delay:1.6s}
.calling-name{font-size:1.5rem;font-weight:700;color:#fff;margin-top:20px}
.calling-label{font-size:.9rem;color:rgba(255,255,255,.5);margin-top:4px}
.calling-actions{display:flex;justify-content:center;gap:48px;margin-top:48px}
.calling-btn{width:64px;height:64px;border-radius:50%;border:none;font-size:1.5rem;color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center}
.calling-btn:hover{transform:scale(1.1)}
.calling-accept{background:linear-gradient(135deg,#43e97b,#38f9d7);box-shadow:0 4px 20px rgba(67,233,123,.4)}
.calling-reject{background:linear-gradient(135deg,#f5576c,#ff6b6b);box-shadow:0 4px 20px rgba(245,87,108,.4)}
@keyframes callingDrop{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}

/* hierarchy */
.hier-container{max-width:600px;margin:0 auto;padding:16px}
.hier-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.hier-back{width:36px;height:36px;border-radius:50%;border:1px solid #4a5568;background:rgba(255,255,255,0.05);color:#c9d1d9;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:16px;transition:all .2s}
.hier-back:hover{background:rgba(102,126,234,0.2);color:#fff;text-decoration:none}
.hier-title{font-size:20px;font-weight:700;color:#fff;font-family:'Marhey',cursive}
.hier-section{margin-bottom:24px}
.hier-section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#8b949e;margin-bottom:10px;padding-left:4px}
.hier-tree{position:relative;padding-left:24px}
.hier-tree::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#667eea,#764ba2);border-radius:2px}
.hier-node{position:relative;margin-bottom:12px;animation:hierFadeIn .3s ease forwards;opacity:0}
@keyframes hierFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.hier-node::before{content:'';position:absolute;left:-4px;top:22px;width:12px;height:2px;background:#667eea}
.hier-node::after{content:'';position:absolute;left:-6px;top:22px;width:8px;height:8px;background:#667eea;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #0f0c29;z-index:1}
.hier-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.05);border:1px solid #4a5568;border-radius:14px;padding:12px 14px;margin-left:12px;transition:all .2s;text-decoration:none;color:inherit}
.hier-card:hover{background:rgba(102,126,234,0.1);border-color:#667eea;transform:translateX(4px);text-decoration:none;color:inherit}
.hier-card.hier-current{border-color:#667eea;background:rgba(102,126,234,0.12);box-shadow:0 0 20px rgba(102,126,234,0.15)}
.hier-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #4a5568;flex-shrink:0}
.hier-card.hier-current .hier-avatar{border-color:#667eea}
.hier-card-info{flex:1;min-width:0}
.hier-card-userid{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hier-card-role{font-size:11px;color:#8b949e;display:flex;align-items:center;gap:4px}
.hier-card-role i{color:#667eea;font-size:10px}
.hier-card-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.hier-card-level{font-size:10px;font-weight:600;color:#667eea;background:rgba(102,126,234,0.15);padding:2px 8px;border-radius:10px}
.hier-card-count{font-size:10px;color:#8b949e}
.hier-you-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#667eea;background:rgba(102,126,234,0.15);padding:1px 6px;border-radius:6px;margin-left:6px}
.hier-empty{text-align:center;padding:24px 16px;color:#8b949e;font-size:13px}
.hier-empty i{display:block;font-size:28px;margin-bottom:8px;color:#4a5568}
.hier-summary{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.hier-stat{flex:1;min-width:100px;background:rgba(255,255,255,0.05);border:1px solid #4a5568;border-radius:12px;padding:14px;text-align:center}
.hier-stat-val{font-size:22px;font-weight:700;color:#fff;font-family:'Marhey',cursive}
.hier-stat-label{font-size:11px;color:#8b949e;margin-top:2px}
.hier-subtree{margin-left:20px;padding-left:16px;border-left:2px solid rgba(102,126,234,0.3);margin-top:8px}
.hier-toggle{display:inline-block;font-size:10px;color:#667eea;cursor:pointer;margin-left:12px;margin-top:4px;padding:2px 8px;border-radius:8px;border:1px solid rgba(102,126,234,0.3);background:rgba(102,126,234,0.08);transition:all .2s;user-select:none}
.hier-toggle:hover{background:rgba(102,126,234,0.2)}
.hier-level-group{margin-bottom:14px}
.hier-level-header{font-size:11px;font-weight:700;color:#667eea;text-transform:uppercase;letter-spacing:.8px;padding:6px 12px;margin-bottom:6px;display:flex;align-items:center;gap:6px;background:rgba(102,126,234,0.06);border-radius:8px;cursor:pointer;user-select:none;transition:background .2s}
.hier-level-header:hover{background:rgba(102,126,234,0.12)}
.hier-level-header i{font-size:10px}
.hier-level-header .hier-level-count{color:#8b949e;font-weight:400;margin-left:auto}
.hier-level-header .hier-level-chevron{margin-left:6px;transition:transform .2s;font-size:10px}
.hier-level-header.collapsed .hier-level-chevron{transform:rotate(-90deg)}
.hier-level-items.collapsed{display:none}

/* ── Home Navbar ──────────────────────────────────── */
.hm-navbar{display:flex;align-items:center;padding:6px 12px;position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,0.06);border-radius:0 0 14px 14px;transition:transform 0.3s ease;gap:6px}
.hm-brand{font-family:'Marhey',cursive!important;font-size:1.2rem;font-weight:600;color:#1a1a2e;cursor:pointer;margin-right:auto;padding:2px 4px;letter-spacing:.5px;text-decoration:none!important}
.hm-nav-actions{display:flex;align-items:center;gap:6px}
.hm-nav-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#555;font-size:1.05rem;text-decoration:none;transition:all .2s;position:relative;-webkit-tap-highlight-color:transparent}
.hm-nav-btn:hover{background:rgba(102,126,234,0.1);color:#667eea;text-decoration:none}
.hm-nav-btn:active{transform:scale(0.9)}
.hm-nav-badge{position:absolute;top:1px;right:1px;min-width:14px;height:14px;line-height:14px;padding:0 3px;border-radius:7px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:.55rem;font-weight:700;text-align:center}
.hm-nav-profile{display:flex;align-items:center;gap:5px;padding:3px 8px 3px 3px;border-radius:18px;background:rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.06);text-decoration:none;color:#555;transition:all .2s;-webkit-tap-highlight-color:transparent}
.hm-nav-profile:hover{background:rgba(102,126,234,0.08);border-color:rgba(102,126,234,0.2);text-decoration:none;color:#555}
.hm-nav-profile:active{transform:scale(0.96)}
.hm-nav-avatar{width:24px;height:24px;border-radius:50%;background-size:cover!important;background-position:center!important;border:1.5px solid rgba(102,126,234,0.25);flex-shrink:0}
.hm-nav-role{font-size:.62rem;font-weight:700;color:#667eea;letter-spacing:.3px;white-space:nowrap}

/* ── Topics Page extras ───────────────────────────── */
.tcp-create{display:flex;gap:10px;margin:8px}
.tcp-create-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:15px;font-size:.95rem;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .2s,opacity .2s;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 14px rgba(102,126,234,0.25)}
.tcp-create-btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 18px rgba(102,126,234,0.32)}
.tcp-create-btn:active{transform:scale(0.97)}
.tcp-create-post{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}
.tcp-create-post:hover{color:#fff}
.tcp-create-topic{background:linear-gradient(135deg,#f472b6,#e05c7a);color:#fff;box-shadow:0 4px 14px rgba(224,92,122,0.25)}
.tcp-create-topic:hover{color:#fff;box-shadow:0 6px 18px rgba(224,92,122,0.32)}

.tcp-sec-head{display:flex;align-items:center;margin:14px 8px 2px;text-decoration:none!important}
.tcp-sec-head:hover{text-decoration:none}
.tcp-sec-title{font-family:'Lora',serif;font-size:1.15rem;font-weight:500;color:#1a1a2e;display:flex;align-items:center}
.tcp-sec-title i{margin-left:8px;color:#667eea}
.tcp-sec-all{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:#667eea;background:rgba(102,126,234,0.1);padding:5px 12px;border-radius:20px;transition:all .2s}
.tcp-sec-head:hover .tcp-sec-all{background:rgba(102,126,234,0.18);gap:8px}
.tcp-sec-all i{font-size:.66rem}
.topic-card-title{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;line-height:1.2}
.topic-card{border-radius:14px!important}
.tcp-lastmsg{font-size:.78rem;color:#6b7280;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
.tcp-lastmsg .fa{color:#415bec}
.tcp-topicimg{border-radius:14px!important}

.tcp-footer{margin:60px 10px 10px;display:flex;flex-direction:row;gap:8px}
.tcp-foot-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;border-radius:12px;font-size:.78rem;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .2s;-webkit-tap-highlight-color:transparent;box-shadow:0 3px 10px rgba(0,0,0,0.1)}
.tcp-foot-btn:hover{text-decoration:none;transform:translateY(-2px)}
.tcp-foot-btn:active{transform:scale(0.95)}
.tcp-foot-invite{background:linear-gradient(135deg,#25d366,#128c4f);color:#fff}
.tcp-foot-invite:hover{color:#fff}
.tcp-foot-whatsapp{background:#fff;color:#128c4f;border:1.5px solid #25d366;box-shadow:0 3px 10px rgba(37,211,102,0.12)}
.tcp-foot-whatsapp:hover{color:#128c4f}
.tcp-foot-play{background:linear-gradient(135deg,#34a853,#1a73e8);color:#fff}
.tcp-foot-play:hover{color:#fff}
.tcp-foot-btn i{font-size:.92rem}

/* ── Chat List (tchats & uchats) ──────────────────── */
.cl-page{min-height:100vh;padding-bottom:80px}
.cl-header{display:flex;align-items:center;padding:8px 14px;position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,0.05);gap:10px}
.cl-header-avatar{flex-shrink:0;text-decoration:none}
.cl-avatar{width:28px;height:28px;border-radius:50%;background-size:cover!important;background-position:center!important;border:2px solid rgba(102,126,234,0.2);transition:border-color .2s,transform .2s;flex-shrink:0}
.cl-avatar:hover{border-color:#667eea;transform:scale(1.08)}
.cl-avatar-placeholder{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0}
.cl-trophy{color:#ffd700;font-size:13px;flex-shrink:0;animation:clBreathe 2s ease-in-out infinite}
@keyframes clBreathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}

.cl-tabs{display:flex;flex:1;justify-content:center;gap:4px;background:rgba(0,0,0,0.04);border-radius:10px;padding:3px}
.cl-tab{flex:1;text-align:center;padding:6px 0;font-size:.8rem;font-weight:600;color:#888;border-radius:8px;cursor:pointer;transition:all .2s;text-decoration:none;max-width:120px}
.cl-tab:hover{color:#667eea;text-decoration:none}
.cl-tab.active{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px rgba(102,126,234,0.25)}

.cl-list{padding:6px 12px;display:flex;flex-direction:column;gap:4px}

.cl-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,0.04);text-decoration:none!important;color:inherit;transition:all .2s ease;position:relative;overflow:hidden}
.cl-item::before{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(135deg,rgba(102,126,234,0.06),rgba(118,75,162,0.04));opacity:0;transition:opacity .2s}
.cl-item:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.06);border-color:rgba(102,126,234,0.15);color:inherit}
.cl-item:hover::before{opacity:1}
.cl-item:active{transform:scale(0.985);box-shadow:none}

.cl-item-img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(102,126,234,0.15);transition:border-color .2s;position:relative;z-index:1}
.cl-item:hover .cl-item-img{border-color:rgba(102,126,234,0.4)}
.cl-item-img-placeholder{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:700;flex-shrink:0;position:relative;z-index:1}

.cl-item-body{flex:1;min-width:0;position:relative;z-index:1}
.cl-item-name{font-size:.95rem;font-weight:600;color:#1a1a2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.cl-item-msg{font-size:.8rem;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}

.cl-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;position:relative;z-index:1}
.cl-badge{min-width:22px;height:22px;line-height:22px;padding:0 6px;border-radius:11px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:.7rem;font-weight:700;text-align:center;animation:clPulse 2s ease-in-out infinite}
@keyframes clPulse{0%,100%{box-shadow:0 0 0 0 rgba(102,126,234,0.3)}50%{box-shadow:0 0 0 6px rgba(102,126,234,0)}}
.cl-badge-users{background:rgba(102,126,234,0.12);color:#667eea;animation:none}
.cl-status{font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:10px;white-space:nowrap}
.cl-status-online{background:rgba(63,185,80,0.12);color:#2da44e}
.cl-status-offline{background:rgba(0,0,0,0.04);color:#999}

.cl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:#999}
.cl-empty-icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,rgba(102,126,234,0.1),rgba(118,75,162,0.08));display:flex;align-items:center;justify-content:center;font-size:24px;color:#667eea;margin-bottom:16px}
.cl-empty-text{font-size:.95rem;font-weight:500;color:#555;margin-bottom:6px}
.cl-empty-sub{font-size:.8rem;color:#aaa;margin-bottom:16px}
.cl-empty-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;font-size:.85rem;text-decoration:none;transition:transform .15s,box-shadow .2s}
.cl-empty-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(102,126,234,0.3);color:#fff;text-decoration:none}
.cl-time{font-size:.7rem;color:#999;white-space:nowrap}
.avatar-hint{font-size:0.75rem;color:rgba(255,255,255,0.4);margin-top:6px}
.avatar-error{font-size:0.8rem;color:#ff6b6b;margin-top:5px;text-align:center}

/* Topicks listing page (topickspage.html) */
.topick-section{margin:10px 6px 18px;padding:12px;border-radius:16px;background:linear-gradient(135deg,rgba(102,126,234,0.06),rgba(118,75,162,0.05));border:1px solid rgba(102,126,234,0.12)}
.topick-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap;cursor:pointer;user-select:none}
.topick-title{font-weight:700;font-size:1.05rem;color:#6c7ae0;display:inline-flex;align-items:center}
.topick-header-right{display:flex;align-items:center;gap:8px}
.topick-meta{font-size:.72rem;color:#999;white-space:nowrap}
.topick-arrow{color:#6c7ae0;font-size:.8rem;transition:transform .25s}
.topick-section.collapsed .topick-arrow{transform:rotate(-90deg)}
.topick-section.collapsed .topick-topics-row{display:none!important}
.topick-topics-row{margin:0 -2px}
.topick-empty{font-size:.82rem;color:#aaa;padding:8px 4px}
.topick-none{text-align:center;color:#888;padding:48px 16px;display:flex;flex-direction:column;align-items:center}
.topick-fab{position:fixed;right:18px;bottom:78px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;box-shadow:0 6px 18px rgba(102,126,234,0.45);z-index:50;text-decoration:none;transition:transform .15s}
.topick-fab:hover{transform:scale(1.06);color:#fff;text-decoration:none}
.topick-fab:active{transform:scale(0.95)}
.avatar-circle-error{border-color:#ff6b6b!important;animation:avatar-shake .25s ease}

/* Topic "follow this topic" dialog (shared by topic chat and topic page) */
.tc-dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);animation:tcFadeIn .3s ease}
.tc-dialog{background:linear-gradient(135deg,#1e1b3c,#302b63);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px 24px;max-width:320px;width:90%;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.5);animation:tcSlideUp .3s ease}
.tc-dialog img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:12px;border:2px solid rgba(255,255,255,.15)}
.tc-dialog-title{font-size:18px;font-weight:600;color:#fff;margin-bottom:4px}
.lang-badge{display:inline-block;font-size:11px;font-weight:600;color:#c5b8ff;background:rgba(124,77,255,.15);border:1px solid rgba(124,77,255,.25);border-radius:10px;padding:2px 10px;letter-spacing:.3px}
.tc-dialog-lang .lang-badge{font-size:12px;padding:3px 14px;margin-bottom:8px}
.tc-dialog-desc{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:18px;line-height:1.5}
.tc-dialog-follow{background:linear-gradient(135deg,#7c4dff,#448aff);border:none;color:#fff;border-radius:24px;padding:10px 32px;font-size:15px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.tc-dialog-follow:hover{transform:scale(1.04);box-shadow:0 4px 20px rgba(124,77,255,.4)}
.tc-dialog-close{position:absolute;top:12px;right:14px;background:none;border:none;color:rgba(255,255,255,.4);font-size:18px;cursor:pointer}
.tc-dialog-close:hover{color:#fff}
@keyframes tcFadeIn{from{opacity:0}to{opacity:1}}
@keyframes tcSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* SkarCompare popup (rendered inside .skar-popup-body) */
.skar-cmp-body{padding:0 0 12px}
.skar-cmp-loading,.skar-cmp-empty{text-align:center;color:#999;padding:24px 12px;font-size:.9rem}
.skar-cmp-loading i{color:#4e7cff}
.skar-cmp-avatars{display:flex;align-items:flex-start;justify-content:center;gap:14px;padding:14px 12px 18px;flex-wrap:wrap}
.skar-cmp-ava{display:flex;flex-direction:column;align-items:center;width:72px;cursor:pointer;transition:margin .25s ease,transform .15s ease}
.skar-cmp-ava:hover{transform:translateY(-2px)}
.skar-cmp-ava-img{width:56px;height:56px;border-radius:50%;background-size:cover;background-position:center;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.skar-cmp-ava-noimg{display:flex;align-items:center;justify-content:center;background:#6c7ae0;color:#fff;font-weight:700;font-size:1.3rem}
.skar-cmp-ava-name{margin-top:6px;font-size:.78rem;font-weight:600;color:#1a1a2e;max-width:72px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skar-cmp-ava-crush{margin-top:2px;font-size:.72rem;font-weight:600;color:#e0245e}
.skar-cmp-ava-crush i{font-size:.66rem}
/* stacked (overlapping) avatar group — first tap spreads it out via .expanded */
.skar-cmp-avatars.stacked{gap:0;flex-wrap:nowrap}
.skar-cmp-avatars.stacked .skar-cmp-ava{margin-left:-22px}
.skar-cmp-avatars.stacked .skar-cmp-ava:first-child{margin-left:0}
.skar-cmp-avatars.stacked .skar-cmp-ava-name,.skar-cmp-avatars.stacked .skar-cmp-ava-crush{opacity:0;height:0;margin-top:0;pointer-events:none;transition:opacity .2s}
.skar-cmp-avatars.stacked.expanded{gap:14px;flex-wrap:wrap}
.skar-cmp-avatars.stacked.expanded .skar-cmp-ava{margin-left:0}
.skar-cmp-avatars.stacked.expanded .skar-cmp-ava-name{opacity:1;height:auto;margin-top:6px}
.skar-cmp-avatars.stacked.expanded .skar-cmp-ava-crush{opacity:1;height:auto;margin-top:2px}
.skar-cmp-sec{padding:6px 14px}
.skar-cmp-sec-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.85rem;color:#1a1a2e;margin:8px 0 4px;cursor:pointer;user-select:none;-webkit-user-select:none}
.skar-cmp-sec-head>span:first-child i{color:#4e7cff;margin-right:5px}
.skar-cmp-head-right{display:flex;align-items:center;gap:8px}
.skar-cmp-count{background:#eef2ff;color:#4e7cff;border-radius:10px;padding:1px 9px;font-size:.75rem;font-weight:700}
.skar-cmp-caret{color:#aaa;font-size:.75rem;transition:transform .15s}
.skar-cmp-sec-head[data-collapsed="1"] .skar-cmp-caret{transform:rotate(-90deg)}
.skar-cmp-list{display:flex;flex-direction:column}
.skar-cmp-item{display:flex;align-items:center;padding:8px 8px;border-radius:10px;transition:background .15s}
.skar-cmp-item:hover{background:#f5f7ff}
.skar-cmp-item-ic{width:34px;height:34px;border-radius:9px;flex-shrink:0;margin-right:10px;display:flex;align-items:center;justify-content:center;background:#eef2ff;color:#4e7cff;font-size:.9rem}
.skar-cmp-item-info{flex:1;min-width:0}
.skar-cmp-item-title{font-weight:600;font-size:.88rem;color:#1a1a2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skar-cmp-item-sub{font-size:.74rem;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skar-cmp-chips{margin-top:3px;display:flex;flex-wrap:wrap;gap:4px}
.skar-cmp-chip{background:#f0f0f5;color:#666;border-radius:8px;padding:1px 7px;font-size:.7rem;font-weight:600}
.skar-cmp-toggle{text-align:center;color:#4e7cff;font-weight:600;font-size:.8rem;cursor:pointer;padding:6px;border-radius:8px}
.skar-cmp-toggle:hover{background:#f5f7ff}