#tj-app {
  --tj-bg: #171a21; --tj-panel2: #1e2129; --tj-border: #2a2e38;
  --tj-green: #26a69a; --tj-red: #ef5350; --tj-text: #e8eaed; --tj-muted: #8b909c;
  --tj-accent: #4f9eff; --tj-accent2: #ffb74d;
  max-width: 820px;
}
body.tj-frontend-page { background:#0f1115 !important; }
body.tj-frontend-page #tj-app { max-width:820px; margin:40px auto; padding:0 16px; }
#tj-app .tj-tabs { display:flex; gap:6px; margin-bottom:16px; background:var(--tj-bg); border-radius:12px; padding:4px; max-width:420px; }
#tj-app .tj-tab { flex:1; text-align:center; padding:9px; border-radius:9px; font-size:13px; cursor:pointer; color:var(--tj-muted); background:transparent; }
#tj-app .tj-tab.active { background:var(--tj-accent); color:#0f1115; font-weight:600; }

#tj-app .tj-card { background:var(--tj-bg); border:1px solid var(--tj-border); border-radius:14px; padding:18px; margin-bottom:16px; color:var(--tj-text); }
#tj-app .tj-card h2 { font-size:15px; margin:0 0 12px; color:var(--tj-text); }

#tj-app .tj-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
#tj-app .tj-field { flex:1; min-width:150px; }
#tj-app .tj-field.tj-full { flex:1 1 100%; }
#tj-app .tj-field label { font-size:11.5px; color:var(--tj-muted); display:block; margin-bottom:4px; }
#tj-app .tj-field input, #tj-app .tj-field select, #tj-app .tj-field textarea {
  width:100%; background:#11141a; border:1px solid var(--tj-border); color:var(--tj-text);
  border-radius:8px; padding:8px 10px; font-size:13px; box-shadow:none;
}
#tj-app .tj-field textarea { min-height:60px; resize:vertical; }

#tj-app .tj-checkgrid { display:flex; flex-direction:column; gap:8px; }
#tj-app .tj-checkgrid label { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tj-text); cursor:pointer; }
#tj-app .tj-checkgrid input { width:17px; height:17px; }

#tj-app .tj-btn { background:var(--tj-accent); color:#0f1115; border:none; border-radius:9px; padding:10px 18px; font-size:13.5px; font-weight:600; cursor:pointer; }
#tj-app .tj-btn.tj-secondary { background:transparent; border:1px solid var(--tj-border); color:var(--tj-muted); }
#tj-app .tj-btn.tj-danger { background:transparent; border:1px solid var(--tj-red); color:var(--tj-red); }
#tj-app .tj-btn-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }

#tj-app .tj-entry { background:var(--tj-panel2); border-radius:10px; padding:14px; margin-bottom:10px; border-left:3px solid var(--tj-border); color:var(--tj-text); }
#tj-app .tj-entry.win { border-left-color:var(--tj-green); }
#tj-app .tj-entry.loss { border-left-color:var(--tj-red); }
#tj-app .tj-entry-header { display:flex; justify-content:space-between; font-size:13.5px; font-weight:600; }
#tj-app .tj-entry-meta { font-size:11.5px; color:var(--tj-muted); margin-top:2px; }
#tj-app .tj-entry-body { font-size:12.5px; margin-top:8px; line-height:1.6; }
#tj-app .tj-entry-tag { display:inline-block; background:#242832; border-radius:12px; padding:2px 8px; font-size:10.5px; color:var(--tj-muted); margin:2px 4px 0 0; }
#tj-app .tj-entry-tag.bad { color:var(--tj-red); background:rgba(239,83,80,0.12); }
#tj-app .tj-entry-actions { margin-top:8px; display:flex; gap:10px; }
#tj-app .tj-entry-actions button { background:none; border:none; color:var(--tj-muted); font-size:11.5px; cursor:pointer; text-decoration:underline; padding:0; }

#tj-app .tj-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#tj-app .tj-stat-box { background:var(--tj-panel2); border-radius:10px; padding:14px; text-align:center; }
#tj-app .tj-stat-value { font-size:22px; font-weight:700; color:var(--tj-text); }
#tj-app .tj-stat-label { font-size:11px; color:var(--tj-muted); margin-top:2px; }

#tj-app .tj-loading, #tj-app .tj-empty { text-align:center; color:var(--tj-muted); font-size:13px; padding:30px 10px; }
#tj-app .tj-hint { color:var(--tj-muted); font-size:11.5px; margin-top:6px; }
#tj-app .tj-status { text-align:center; font-size:12.5px; padding:8px; color:var(--tj-accent2); background:var(--tj-bg); border-radius:8px; margin-bottom:14px; max-width:420px; }

#tj-app .tj-insight { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--tj-border); font-size:13px; color:var(--tj-text); }
#tj-app .tj-insight:last-child { border-bottom:none; }
#tj-app .tj-insight-icon { font-size:16px; flex-shrink:0; }
#tj-app .tj-insight.good .tj-insight-icon { color:var(--tj-green); }
#tj-app .tj-insight.warn .tj-insight-icon { color:var(--tj-accent2); }
#tj-app .tj-insight.bad .tj-insight-icon { color:var(--tj-red); }
#tj-app canvas { max-width:100%; }