.tf-portal-page { display: flex; flex-direction: column; gap: 22px; }
.tf-portal-hero {
    background: radial-gradient(circle at 90% 10%, rgba(255,122,0,.32), transparent 28%), linear-gradient(135deg, var(--tf-blue), var(--tf-blue-3));
    border-radius: 30px; padding: 30px; color: #fff; box-shadow: var(--tf-shadow); display: flex; justify-content: space-between; gap: 20px; align-items: flex-start;
}
.tf-portal-hero h2 { font-size: clamp(30px,3vw,46px); font-weight: 950; margin: 0 0 10px; letter-spacing: -.8px; }
.tf-portal-hero p { max-width: 780px; color: rgba(255,255,255,.74); margin: 0; font-size: 16px; }
.tf-portal-hero-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.tf-portal-hero-tags span { display: inline-flex; gap: 7px; align-items: center; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 850; }
.tf-portal-hero-tags i { color: var(--tf-orange-2); }
.tf-portal-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.tf-portal-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.tf-portal-stat-card { border: 1px solid var(--tf-border); background: #fff; border-radius: 24px; padding: 18px; display: flex; gap: 14px; align-items: center; box-shadow: 0 12px 26px rgba(7,30,61,.05); }
.tf-portal-stat-icon, .tf-portal-action-icon { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,122,0,.12); color: var(--tf-orange); font-size: 22px; flex: 0 0 auto; }
.tf-portal-stat-card span { display: block; color: var(--tf-muted); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .6px; }
.tf-portal-stat-card strong { color: var(--tf-blue); font-weight: 950; font-size: 26px; display: block; line-height: 1.05; }
.tf-portal-stat-card small { color: var(--tf-muted); display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-portal-actions-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.tf-portal-action-card { border: 1px solid var(--tf-border); background: #fff; border-radius: 24px; padding: 18px; display: flex; gap: 14px; box-shadow: 0 12px 26px rgba(7,30,61,.04); }
.tf-portal-action-card span { display: inline-flex; color: var(--tf-orange); font-size: 11px; font-weight: 950; text-transform: uppercase; margin-bottom: 4px; }
.tf-portal-action-card h4 { color: var(--tf-blue); font-size: 16px; font-weight: 950; margin: 0 0 5px; }
.tf-portal-action-card p { color: var(--tf-muted); font-size: 13px; margin: 0; line-height: 1.45; }
.tf-portal-table-card { border: 1px solid var(--tf-border); background: #fff; border-radius: 26px; padding: 22px; box-shadow: 0 12px 30px rgba(7,30,61,.05); }
.tf-portal-table-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.tf-portal-table-head h3 { color: var(--tf-blue); font-size: 20px; font-weight: 950; margin: 0 0 4px; }
.tf-portal-table-head h3 i { color: var(--tf-orange); margin-right: 8px; }
.tf-portal-table-head p { color: var(--tf-muted); margin: 0; }
.tf-portal-table-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.tf-data-table thead th { background: #F8FAFC; color: var(--tf-blue); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--tf-border) !important; }
.tf-data-table td { color: var(--tf-text); font-size: 13px; vertical-align: middle; }
.tf-dt-top, .tf-dt-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.dt-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.dt-button { border: none !important; border-radius: 12px !important; background: rgba(7,30,61,.08) !important; color: var(--tf-blue) !important; padding: 8px 12px !important; font-weight: 850 !important; font-size: 12px !important; }
.dt-button:hover { background: rgba(255,122,0,.14) !important; color: var(--tf-orange) !important; }
.dataTables_filter input, .dataTables_length select { border: 1px solid var(--tf-border); border-radius: 12px; padding: 8px 10px; outline: none; }
.tf-json-box { margin: 0; white-space: pre-wrap; word-break: break-word; color: #D1E7FF; background: #071E3D; border-radius: 18px; padding: 18px; font-size: 13px; max-height: 560px; overflow: auto; }
@media (max-width:1200px) { .tf-portal-stats { grid-template-columns: repeat(2,1fr); } .tf-portal-actions-grid { grid-template-columns: 1fr; } .tf-portal-hero { flex-direction: column; } }
@media (max-width:680px) { .tf-portal-stats { grid-template-columns: 1fr; } .tf-portal-table-head, .tf-dt-top, .tf-dt-bottom { flex-direction: column; align-items: stretch; } }