:root{
  --bg:#f5f7fb;--panel:#fff;--line:#e7eaf3;--text:#182033;--muted:#6d7688;
  --primary:#4b2aad;--primary-2:#6b4fe6;--accent:#efe9ff;
  --shadow:0 16px 40px rgba(31,36,48,.08);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Arial,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
.app-shell{display:grid;grid-template-columns:224px 1fr;height:100vh}
body.sidebar-collapsed .app-shell{grid-template-columns:78px 1fr}
.right-column{display:grid;grid-template-rows:76px 1fr;height:100vh;min-width:0}
.page-content{overflow:auto;min-height:0;padding:20px}

.sx-page{display:grid;gap:18px;max-width:1320px;margin:0 auto}
.sx-hero{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 26px;box-shadow:var(--shadow);display:grid;gap:12px}
.sx-hero-top{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;justify-content:space-between}
.sx-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.sx-hero h1{margin:6px 0 4px;font-size:24px;letter-spacing:-.02em}
.sx-hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.55;max-width:720px}
.sx-hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.k-btn{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:14px;padding:10px 14px;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:.16s ease}
.k-btn:hover{transform:translateY(-1px);border-color:#d8cdfc;background:#faf8ff}
.k-btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(75,42,173,.20)}

.hero-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);padding:6px 0 0;margin:0;overflow-x:auto;scrollbar-width:none}
.hero-tabs::-webkit-scrollbar{display:none}
.hero-tab{flex:0 0 auto;padding:8px 14px;border-radius:12px 12px 0 0;color:var(--muted);text-decoration:none;font-size:13px;font-weight:700;border:1px solid transparent;border-bottom:none}
.hero-tab:hover{color:var(--text);background:#faf8ff}
.hero-tab.active{background:var(--accent);color:var(--primary);border-color:var(--line);border-bottom-color:transparent}

.sx-status-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.sx-status-chip{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#64748b;background:#f1f5f9;border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.sx-status-chip.live{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.sx-status-chip.warn{background:#fef3c7;color:#92400e;border-color:#fde68a}
.sx-status-chip.err{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.sx-count{font-size:13px;color:var(--muted);font-weight:600}

.sx-summary{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-summary-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;gap:6px}
.sx-summary-k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sx-summary-v{font-size:24px;font-weight:800;color:#0f172a;line-height:1.05}
.sx-summary-meta{font-size:12px;color:var(--muted);line-height:1.45}
.sx-summary-card.warn .sx-summary-v{color:#92400e}
.sx-summary-card.danger .sx-summary-v{color:#b91c1c}
.sx-summary-card.soft .sx-summary-v{color:#5b21b6}

.sx-safety-note{display:flex;align-items:flex-start;gap:10px;background:#faf8ff;border:1px solid #ddd3fa;border-radius:16px;padding:12px 14px;color:#5b4c78;font-size:12.5px;line-height:1.5}
.sx-safety-note strong{color:#3d247e}
.sx-safety-icon{flex:0 0 auto;width:28px;height:28px;border-radius:9px;background:var(--accent);display:grid;place-items:center}

.sx-filter-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:grid;gap:10px}
.sx-pill-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sx-pill-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.sx-pill{appearance:none;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer;transition:.15s ease}
.sx-pill:hover{border-color:#d8cdfc;background:#faf8ff;color:var(--text)}
.sx-pill.active{background:var(--accent);color:var(--primary);border-color:#d8cdfc}
.sx-search{flex:1 1 260px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:#fafbfd}
.sx-search input{flex:1;border:0;background:transparent;font-size:13px;color:var(--text);outline:0;min-width:0}

.sx-table-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.sx-table-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.sx-table-head h2{margin:0;font-size:15px;color:#0f172a}
.sx-table-head p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.sx-table-wrap{overflow-x:auto}
.sx-table{width:100%;border-collapse:collapse;font-size:13px;min-width:860px}
.sx-table th,.sx-table td{padding:12px 16px;text-align:left;vertical-align:middle;border-bottom:1px solid #f1f5f9}
.sx-table th{background:#f8fafc;color:#475569;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;position:sticky;top:0;z-index:1}
.sx-table tbody tr:hover{background:#f8fafc}

.sx-student{display:flex;align-items:center;gap:10px}
.sx-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ede9fe,#dbeafe);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--primary);font-size:13px;flex-shrink:0}
.sx-name{font-weight:700;color:#0f172a}
.sx-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.sx-course-list,.sx-signal-list,.sx-actions{display:flex;flex-wrap:wrap;gap:5px}
.sx-course-chip,.sx-signal{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#f1f5f9;color:#475569}
.sx-signal.alert{background:#fee2e2;color:#991b1b}
.sx-signal.missing{background:#fff7ed;color:#9a3412}
.sx-signal.attendance{background:#fef3c7;color:#92400e}
.sx-signal.support{background:#ede9fe;color:#5b21b6}
.sx-priority{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.sx-priority.high{background:#fee2e2;color:#991b1b}
.sx-priority.review{background:#fef3c7;color:#92400e}
.sx-priority.monitor{background:#eef2ff;color:#3730a3}
.sx-action{appearance:none;border:1px solid var(--line);background:#fff;color:var(--primary);font-weight:700;font-size:11.5px;padding:6px 10px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:.15s ease}
.sx-action:hover{border-color:#d8cdfc;background:#faf8ff}
.sx-action.primary{background:var(--primary);color:#fff;border-color:transparent}
.sx-state{padding:34px 22px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6;display:grid;gap:10px}
.sx-state h3{margin:0;font-size:16px;color:#0f172a}
.sx-state-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

@media(max-width:1120px){.sx-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){
  .page-content{padding:16px}
  .sx-page{gap:14px}
  .sx-hero{padding:18px 16px;border-radius:18px}
  .sx-hero-actions{width:100%}
  .sx-hero-actions .k-btn{flex:1 1 150px;min-height:44px}
  .hero-tab,.sx-pill{min-height:44px;display:inline-flex;align-items:center}
  .sx-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sx-summary-card{padding:12px}
  .sx-summary-v{font-size:21px}
  .sx-search{min-height:44px}
  .sx-search input{font-size:16px}
  .sx-table-wrap{overflow-x:visible;padding:10px}
  .sx-table{min-width:0}
  .sx-table thead{display:none}
  .sx-table,.sx-table tbody,.sx-table tr,.sx-table td{display:block;width:100%}
  .sx-table tr{border:1px solid var(--line);border-radius:14px;margin:0 0 10px;padding:5px 2px;background:#fff}
  .sx-table td{border:0;padding:7px 12px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:right}
  .sx-table td::before{flex:0 0 auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left}
  .sx-table td:nth-child(1){display:block;text-align:left;padding-top:11px}
  .sx-table td:nth-child(1)::before{content:"Student";display:block;margin-bottom:7px}
  .sx-table td:nth-child(2)::before{content:"Courses"}
  .sx-table td:nth-child(3)::before{content:"Signals"}
  .sx-table td:nth-child(4)::before{content:"Priority"}
  .sx-table td:nth-child(5)::before{content:"Last activity"}
  .sx-table td:nth-child(6){display:block;text-align:left;padding-bottom:11px}
  .sx-table td:nth-child(6)::before{content:"Actions";display:block;margin-bottom:7px}
  .sx-actions{width:100%}
  .sx-action{min-height:40px;flex:1 1 auto;justify-content:center}
}