:root {
    --cssp-navy: #101b3f;
    --cssp-blue: #3157e2;
    --cssp-cyan: #38c6d9;
    --cssp-bg: #f4f7fc;
    --cssp-text: #17213f;
    --cssp-muted: #6e7893;
    --cssp-line: #e1e7f1;
}
.cssp-shell, .cssp-login-wrap { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--cssp-text); }
.cssp-shell { width: min(1180px, calc(100% - 32px)); margin: 46px auto 80px; }
.cssp-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px 36px; color:#fff; border-radius:24px; background:radial-gradient(circle at 90% 15%, rgba(56,198,217,.35), transparent 32%), linear-gradient(135deg, #101b3f, #253f9e); box-shadow:0 22px 60px rgba(16,27,63,.22); }
.cssp-header h1, .cssp-login-intro h1 { margin:7px 0 6px; color:#fff; font-size:clamp(30px,4vw,48px); line-height:1.08; }
.cssp-header p, .cssp-login-intro p { margin:0; color:rgba(255,255,255,.78); }
.cssp-kicker { font-size:12px; font-weight:800; letter-spacing:.18em; color:#7de4ef; }
.cssp-logout, .cssp-action { display:inline-flex; align-items:center; justify-content:center; text-decoration:none !important; font-weight:750; border-radius:12px; transition:.2s ease; }
.cssp-logout { padding:11px 18px; color:#fff !important; border:1px solid rgba(255,255,255,.35); }
.cssp-logout:hover { background:#fff; color:var(--cssp-navy) !important; }
.cssp-tabs { display:flex; gap:8px; margin:24px 0; padding:7px; overflow:auto; border:1px solid var(--cssp-line); border-radius:16px; background:#fff; box-shadow:0 8px 30px rgba(30,51,110,.08); }
.cssp-tabs button { flex:1 0 auto; padding:12px 18px; border:0; border-radius:11px; background:transparent; color:var(--cssp-muted); font:inherit; font-weight:700; cursor:pointer; }
.cssp-tabs button.is-active { color:#fff; background:var(--cssp-blue); box-shadow:0 6px 16px rgba(49,87,226,.25); }
.cssp-panel { display:none; }
.cssp-panel.is-active { display:block; animation:csspFade .24s ease; }
@keyframes csspFade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.cssp-welcome-card, .cssp-list-card, .cssp-resource-card, .cssp-video-card, .cssp-empty { border:1px solid var(--cssp-line); background:#fff; box-shadow:0 10px 35px rgba(30,51,110,.07); }
.cssp-welcome-card { padding:38px; border-radius:22px; }
.cssp-welcome-card h2, .cssp-section-title h2 { margin:0 0 8px; font-size:clamp(24px,3vw,34px); color:var(--cssp-navy); }
.cssp-welcome-card > p, .cssp-section-title p { margin:0; color:var(--cssp-muted); }
.cssp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.cssp-stats div { padding:22px; border-radius:16px; background:var(--cssp-bg); }
.cssp-stats strong { display:block; font-size:34px; color:var(--cssp-blue); }
.cssp-stats span { color:var(--cssp-muted); font-size:14px; }
.cssp-section-title { margin:34px 0 20px; }
.cssp-list { display:grid; gap:14px; }
.cssp-list-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; padding:18px 22px; border-radius:17px; }
.cssp-date { display:flex; width:58px; height:64px; flex-direction:column; align-items:center; justify-content:center; border-radius:13px; color:#fff; background:var(--cssp-blue); }
.cssp-date strong { font-size:22px; line-height:1; }
.cssp-date span { margin-top:4px; font-size:11px; text-transform:uppercase; }
.cssp-card-copy h3, .cssp-resource-card h3, .cssp-video-copy h3 { margin:5px 0; color:var(--cssp-navy); font-size:19px; }
.cssp-card-copy p, .cssp-video-copy p { margin:0; color:var(--cssp-muted); }
.cssp-tag { display:inline-block; color:var(--cssp-blue); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.cssp-year-tabs { display:flex; gap:9px; margin:0 0 22px; }
.cssp-year-tabs button { min-width:88px; padding:9px 18px; border:1px solid #ccd6e8; border-radius:999px; color:var(--cssp-muted); background:#fff; font:inherit; font-weight:800; cursor:pointer; }
.cssp-year-tabs button.is-active { border-color:var(--cssp-blue); color:#fff; background:var(--cssp-blue); box-shadow:0 7px 18px rgba(49,87,226,.22); }
.cssp-year-panel { display:none; }
.cssp-year-panel.is-active { display:block; }
.cssp-action { padding:10px 16px; color:#fff !important; background:var(--cssp-blue); }
.cssp-action:hover { transform:translateY(-1px); background:#2444bd; }
.cssp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cssp-resource-card { padding:24px; border-radius:18px; }
.cssp-resource-card .cssp-icon { display:grid; width:44px; height:44px; margin-bottom:20px; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--cssp-blue),var(--cssp-cyan)); font-size:20px; }
.cssp-resource-card .cssp-description { min-height:48px; color:var(--cssp-muted); font-size:14px; }
.cssp-resource-card .cssp-action { margin-top:15px; }
.cssp-video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.cssp-video-card { overflow:hidden; border-radius:18px; }
.cssp-player { aspect-ratio:16/9; background:#0b1024; }
.cssp-player iframe, .cssp-player video, .cssp-player .wp-video { width:100% !important; height:100% !important; }
.cssp-no-video { display:grid; height:100%; place-items:center; color:#9ea7c1; }
.cssp-video-copy { padding:22px; }
.cssp-empty { padding:48px 20px; text-align:center; border-radius:18px; color:var(--cssp-muted); }
.cssp-empty span { display:block; margin-bottom:8px; color:var(--cssp-cyan); font-size:30px; }
.cssp-login-wrap { display:grid; grid-template-columns:1.35fr .65fr; width:min(1180px,calc(100% - 32px)); min-height:720px; margin:55px auto 80px; overflow:hidden; border-radius:26px; background:linear-gradient(135deg,#101b3f,#253f9e); box-shadow:0 28px 70px rgba(16,27,63,.25); }
.cssp-login-intro { display:flex; flex-direction:column; justify-content:center; padding:38px; background:radial-gradient(circle at 20% 10%,rgba(56,198,217,.35),transparent 30%); }
.cssp-login-hero { width:100%; margin:0 0 26px; border-radius:18px; aspect-ratio:12/5; object-fit:cover; box-shadow:0 15px 35px rgba(0,0,0,.2); }
.cssp-login-lead { max-width:700px; font-size:16px; line-height:1.7; }
.cssp-seminar-highlights { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0 14px; }
.cssp-seminar-highlights div { padding:14px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.08); }
.cssp-seminar-highlights strong, .cssp-seminar-highlights span { display:block; }
.cssp-seminar-highlights strong { margin-bottom:5px; color:#fff; font-size:15px; }
.cssp-seminar-highlights span { color:rgba(255,255,255,.75); font-size:12px; line-height:1.5; }
.cssp-seminar-awards { display:flex; gap:10px; align-items:flex-start; margin-bottom:18px; padding:13px 15px; border-radius:13px; background:rgba(56,198,217,.13); color:rgba(255,255,255,.78); font-size:12px; line-height:1.5; }
.cssp-seminar-awards strong { flex:0 0 auto; color:#7de4ef; }
.cssp-seminar-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cssp-seminar-gallery img { width:100%; aspect-ratio:16/10; border-radius:12px; object-fit:cover; background:#fff; }
.cssp-events { width:min(1180px,calc(100% - 32px)); margin:-35px auto 80px; padding:46px; border:1px solid #e1e7f1; border-radius:26px; background:#fff; box-shadow:0 20px 55px rgba(16,27,63,.1); box-sizing:border-box; }
.cssp-events-heading { max-width:720px; margin:0 auto 30px; text-align:center; }
.cssp-events-heading .cssp-kicker { color:var(--cssp-blue); }
.cssp-events-heading h2 { margin:8px 0 8px; color:var(--cssp-navy); font-size:clamp(28px,4vw,42px); }
.cssp-events-heading p { margin:0; color:var(--cssp-muted); line-height:1.7; }
.cssp-event-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cssp-event-card { overflow:hidden; border:1px solid #e1e7f1; border-radius:18px; background:#f7f9fd; box-shadow:0 9px 24px rgba(16,27,63,.08); }
.cssp-event-card img { display:block; width:100%; height:220px; object-fit:cover; background:#edf2fb; }
.cssp-event-card.cssp-event-poster img { object-fit:contain; }
.cssp-event-card div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px; }
.cssp-event-card strong { color:var(--cssp-navy); font-size:23px; }
.cssp-event-card span { color:var(--cssp-muted); font-size:13px; font-weight:700; }
.cssp-login-card { align-self:center; margin:28px; padding:38px; border-radius:21px; background:#fff; box-shadow:0 18px 40px rgba(0,0,0,.18); }
.cssp-login-card h2 { margin:0 0 6px; color:var(--cssp-navy); font-size:28px; }
.cssp-login-card > p { margin:0 0 25px; color:var(--cssp-muted); }
.cssp-login-card label { display:block; margin:15px 0 7px; color:var(--cssp-text); font-size:14px; font-weight:700; }
.cssp-login-card input[type=text], .cssp-login-card input[type=password] { width:100%; min-height:48px; padding:10px 13px; border:1px solid #ccd5e5; border-radius:11px; background:#f9fbff; box-sizing:border-box; }
.cssp-login-card input:focus { outline:3px solid rgba(49,87,226,.14); border-color:var(--cssp-blue); }
.cssp-login-card .cssp-remember { display:flex; align-items:center; gap:8px; font-weight:500; color:var(--cssp-muted); }
.cssp-login-card button { width:100%; margin-top:12px; padding:13px; border:0; border-radius:11px; color:#fff; background:var(--cssp-blue); font:inherit; font-weight:800; cursor:pointer; }
.cssp-error { margin-bottom:16px; padding:11px 13px; border-radius:10px; color:#8c1d2b; background:#fff0f2; font-size:14px; }
@media (max-width:800px) {
    .cssp-login-wrap { grid-template-columns:1fr; min-height:auto; }
    .cssp-login-intro { padding:44px 30px; }
    .cssp-login-card { margin:18px; padding:28px 22px; }
    .cssp-seminar-highlights { grid-template-columns:1fr; }
    .cssp-event-grid { grid-template-columns:repeat(2,1fr); }
    .cssp-grid, .cssp-video-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .cssp-shell { width:min(100% - 20px,1180px); margin-top:20px; }
    .cssp-header { align-items:flex-start; padding:26px 22px; flex-direction:column; }
    .cssp-stats { grid-template-columns:1fr; }
    .cssp-list-card { grid-template-columns:auto 1fr; }
    .cssp-list-card .cssp-action { grid-column:1/-1; }
    .cssp-events { margin-top:-35px; padding:30px 18px; }
    .cssp-event-grid { grid-template-columns:1fr; }
}