:root { 
    --tg-blue: #0088cc; 
    --tg-bg: #f5f7fa;
    --border-lt: #eff2f6;
    --text-dark: #1a1a1b;
    --text-grey: #65676b;
    --success-grn: #00c853;
    --rank-gold: #f1c40f;
}

.twg-app-shell { 
    width: 100%; max-width: 800px; margin: 0 auto 45px; 
    background: #fff; border: 1px solid var(--border-lt); 
    border-radius: 2px; overflow: hidden; position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.twg-top-widget {
    position: absolute; top: 15px; right: 15px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    z-index: 10;
}

.twg-type-link { 
    font-size: 10px; font-weight: 600; color: #fff; background: var(--tg-blue); 
    padding: 1px 10px 2px 10px; border-radius: 3px; letter-spacing: 0.5px; text-decoration: none;
}

.twg-type-link:hover { color: #fff !important; background: #000000; }

.twg-lang-pill { 
    font-size: 10px; font-weight: 700; color: #666; 
    background: #f1f2f6; padding: 3px 10px; border-radius: 4px;
    display: flex; align-items: center; gap: 4px; border: 1px solid var(--border-lt);
}

.twg-lang-pill svg { width: 12px; height: 12px; fill: var(--tg-blue); }

.twg-header-main { padding: 20px 20px 5px 20px; display: flex; gap: 20px; align-items: flex-start; text-align: left; }

.twg-logo-img { width: 75px !important; height: 75px !important; border-radius: 3px !important; border: 1px solid var(--border-lt); object-fit: cover; margin: 0 !important; }

.twg-title-area { flex: 1; }

.twg_entry_title { display: inline-block; font-size: 18px !important; font-weight: 800; color: var(--text-dark); margin: 0 0 8px !important; line-height: 1.2; }

.twg-meta-pills { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 12px; }

.twg-pill.cat { font-size: 10px; color: #7b1fa2; text-decoration: underline; text-decoration-color: #f3e5f5; text-decoration-thickness: 3px; font-weight: 800; text-transform: uppercase; }

.twg-pill.tag { font-size: 11px; font-style: italic; color: #1976d2; font-weight: 500; }

.twg-pill a { color: inherit; text-decoration: none; }

.twg-desc-area { padding: 0 20px 20px; }

.twg-stats-grid { display: grid; grid-template-columns: 4fr 3fr 3fr; gap: 10px; padding: 0 15px 20px; }

.twg-stat-box { 
    background: #ffffff; border: 1px solid var(--border-lt); border-radius: 5px; 
    padding: 7px 5px; text-align: center; display: flex; flex-direction: column; align-items: center;
}

.twg-stat-box.highlight { background: #f0faff; border-color: #cceeff; }

.twg-stat-rank { font-size: 9px; font-weight: 800; color: var(--text-grey); margin-bottom: 6px; display: flex; align-items: center; gap: 3px; }

.rank-text { color: #9a7d1a;}

.twg-stat-rank i { color: var(--rank-gold); font-size: 8px; }

.twg-stat-val { font-size: 17px; font-weight: 800; color: var(--text-dark); line-height: 1; margin: 2px 0; }

.twg-stat-lbl { font-size: 8px; font-weight: 700; color: var(--text-grey); text-transform: uppercase; margin-top: 4px; letter-spacing: 0.5px; }

.twg-stat-box .subs { font-size: 10px; color: #B40000;}

.twg-stat-grow { font-size: 9px; font-weight: 800; color: var(--success-grn); margin-top: 4px; background: #e8f5e9; padding: 1px 6px; border-radius: 10px; }



.twg-action-wrapper { padding: 0 15px 20px; display: flex; align-items: center; gap: 7px; }

.twg-action-btn { flex: 1; }

.twg-action-btn a { width: 100%; background: var(--tg-blue); color: #fff !important; height: 45px; border-radius: 2px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 15px; text-decoration: none !important; }

.twg-action-btn a:hover { background: #000000; }

@media (max-width: 600px) {
    .twg-header-main { flex-direction: column; gap: 10px; }
    .twg-top-widget { right: 15px; top: 15px; }
}

.twg-lang-pill svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.twg-app-shell svg{
    max-width:20px;
    max-height:20px;
}

.twg-app-shell img{
    max-width:100%;
    height:auto;
}