/* Cosmo Kurse – Frontend Neon-Design
   Alle Farben kommen aus CSS-Variablen (--ck-*), die der Admin setzt.
   Standardwerte sind als Fallback hinterlegt. */

.cosmo-lesson, .cosmo-fav {
	--ck-bg: #0d1117;
	--ck-surface: #161b22;
	--ck-surface-2: #1c2330;
	--ck-text: #ffffff;
	--ck-muted: #9aa7b8;
	--ck-border: rgba(255,255,255,0.10);
	--ck-accent: #00e5c7;
	--ck-accent2: #7c5cff;
	--ck-fav: #ff4d8d;
	--ck-prompt-bg: #10261f;
	--ck-prompt-border: #00e5c7;
	--ck-answer-bg: #1a1530;
	--ck-answer-border: #7c5cff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--ck-text);
	background: var(--ck-bg);
	border: 1px solid var(--ck-border);
	border-radius: 16px;
	overflow: hidden;
	max-width: 920px;
	margin: 0 auto;
}
.cosmo-lesson *, .cosmo-fav * { box-sizing: border-box; }

/* Topbar + Mode toggle */
.ck-topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--ck-surface); border-bottom:1px solid var(--ck-border); }
.ck-crumb { font-size:13px; color:var(--ck-muted); display:flex; align-items:center; gap:6px; }
.ck-modetoggle { display:flex; gap:6px; }
.ck-modetoggle button { font-size:12px; padding:5px 10px; border-radius:8px; border:1px solid var(--ck-border); background:transparent; color:var(--ck-muted); cursor:pointer; }
.ck-modetoggle button.active { border-color:var(--ck-accent); color:var(--ck-accent); }

/* Hero */
.ck-hero { padding:22px 24px 0; }
.ck-title { font-size:23px; font-weight:600; margin:0 0 14px; line-height:1.25; color:var(--ck-text); }
.ck-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; }
.ck-pill { font-size:12px; padding:4px 11px; border-radius:999px; border:1px solid var(--ck-border); background:var(--ck-surface-2); color:var(--ck-muted); }
.ck-pill.cat { color:var(--ck-accent); border-color:var(--ck-accent); }
.ck-pill.typ { color:var(--ck-accent2); border-color:var(--ck-accent2); }

.ck-favbtn, .ck-donebtn { display:inline-flex; align-items:center; gap:6px; background:var(--ck-surface); border:1px solid var(--ck-border); border-radius:999px; padding:6px 13px; color:var(--ck-muted); font-size:13px; cursor:pointer; }
.ck-favbtn.on { color:var(--ck-fav); border-color:var(--ck-fav); }
.ck-donebtn.on { color:var(--ck-accent); border-color:var(--ck-accent); }
.ck-favbtn .dashicons, .ck-donebtn .dashicons { font-size:17px; width:17px; height:17px; }

/* Body */
.ck-body { padding:18px 24px 26px; }
.ck-h3 { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--ck-muted); margin:24px 0 10px; font-weight:600; }
.ck-over { background:var(--ck-surface); border:1px solid var(--ck-border); border-left:3px solid var(--ck-accent); border-radius:0 10px 10px 0; padding:4px 16px; font-size:15px; line-height:1.6; }

/* Prompt box */
.ck-prompt { position:relative; background:var(--ck-prompt-bg); border:1px solid var(--ck-prompt-border); border-radius:14px; padding:18px 16px 14px; margin:14px 0; }
.ck-prompt-text { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:13.5px; line-height:1.6; color:var(--ck-text); }
.ck-tag { position:absolute; top:-10px; left:14px; font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; }
.ck-prompt .ck-tag { background:var(--ck-prompt-border); color:#00150f; }
.ck-prompt .ck-tag .dashicons { font-size:13px; width:13px; height:13px; }
.ck-copy { position:absolute; top:10px; right:10px; background:transparent; border:1px solid var(--ck-prompt-border); color:var(--ck-prompt-border); font-size:11px; padding:3px 8px; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.ck-copy .dashicons { font-size:13px; width:13px; height:13px; }

/* Answer box */
.ck-answer { position:relative; background:var(--ck-answer-bg); border:1px solid var(--ck-answer-border); border-radius:14px; padding:20px 16px 14px; margin:14px 0; font-size:14.5px; line-height:1.65; }
.ck-answer .ck-tag { background:var(--ck-answer-border); color:#fff; }
.ck-answer p { margin:8px 0; }

/* Follow-up */
.ck-follow { display:flex; flex-direction:column; gap:8px; }
.ck-followbtn { text-align:left; background:var(--ck-surface); border:1px solid var(--ck-border); border-radius:10px; padding:11px 13px; color:var(--ck-text); font-size:14px; cursor:pointer; display:flex; align-items:center; gap:9px; transition:border-color .15s; }
.ck-followbtn:hover { border-color:var(--ck-accent); }
.ck-followbtn .dashicons { color:var(--ck-accent); }

/* Note */
.ck-notewrap { }
.ck-note { width:100%; min-height:92px; background:var(--ck-surface); border:1px solid var(--ck-border); border-radius:10px; padding:12px; color:var(--ck-text); font-size:14px; line-height:1.6; resize:vertical; font-family:inherit; }
.ck-note:focus { outline:none; border-color:var(--ck-accent); }
.ck-savestate { font-size:12px; color:var(--ck-muted); margin-top:6px; height:16px; opacity:0; transition:opacity .2s; display:flex; align-items:center; gap:5px; }
.ck-savestate.show { opacity:1; color:var(--ck-accent); }
.ck-savestate .dashicons { font-size:14px; width:14px; height:14px; }
.ck-loginhint { color:var(--ck-muted); font-size:14px; padding:10px 0; }

/* Progress bar (course) */
.ck-progress { margin:16px 24px; background:var(--ck-surface); border:1px solid var(--ck-border); border-radius:10px; padding:13px 15px; }
.ck-progress-label { display:flex; justify-content:space-between; font-size:13px; color:var(--ck-muted); margin-bottom:8px; }
.ck-bar { height:9px; background:var(--ck-surface-2); border-radius:999px; overflow:hidden; }
.ck-bar > div { height:100%; background:var(--ck-accent); border-radius:999px; transition:width .3s; }

/* Accordion (course modules) */
.ck-accordion { padding:6px 18px 20px; display:flex; flex-direction:column; gap:10px; }
.ck-acc-item { border:1px solid var(--ck-border); border-radius:12px; overflow:hidden; background:var(--ck-surface); }
.ck-acc-head { width:100%; display:flex; align-items:center; gap:12px; padding:14px 16px; background:transparent; border:none; color:var(--ck-text); cursor:pointer; font-size:15px; font-weight:600; }
.ck-acc-count { margin-left:auto; font-size:12px; color:var(--ck-muted); font-weight:400; }
.ck-acc-chev { transition:transform .2s; color:var(--ck-muted); }
.ck-acc-item.open .ck-acc-chev { transform:rotate(180deg); }
.ck-acc-body { display:none; padding:0 10px 10px; flex-direction:column; gap:4px; }
.ck-acc-item.open .ck-acc-body { display:flex; }
.ck-acc-lesson { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:8px; color:var(--ck-text); text-decoration:none; font-size:14px; }
.ck-acc-lesson:hover { background:var(--ck-surface-2); }
.ck-acc-lesson .dashicons { color:var(--ck-accent); }
.ck-acc-lesson.done { color:var(--ck-muted); }
.ck-acc-lesson.done .dashicons { color:var(--ck-accent); }

/* Favorites page */
.ck-fav-top { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; background:var(--ck-surface); border-bottom:1px solid var(--ck-border); }
.ck-fav-title { display:flex; align-items:center; gap:9px; font-size:16px; font-weight:600; }
.ck-fav-title .dashicons { color:var(--ck-fav); }
.ck-fav-count { font-size:13px; color:var(--ck-muted); padding:12px 18px 4px; }
.ck-fav-list { padding:6px 14px 16px; display:flex; flex-direction:column; gap:10px; }
.ck-fav-card { background:var(--ck-surface); border:1px solid var(--ck-border); border-radius:14px; padding:13px 14px; display:flex; align-items:center; gap:13px; transition:opacity .3s, transform .3s; }
.ck-fav-card.removing { opacity:0; transform:translateX(20px); }
.ck-fav-check { flex-shrink:0; width:26px; height:26px; border-radius:7px; border:1.5px solid var(--ck-muted); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:transparent; }
.ck-fav-check .dashicons { font-size:18px; width:18px; height:18px; }
.ck-fav-check.done { background:var(--ck-accent); border-color:var(--ck-accent); color:#001a16; }
.ck-fav-main { flex:1; min-width:0; }
.ck-fav-name { font-size:15px; font-weight:600; color:var(--ck-text); text-decoration:none; display:block; margin-bottom:5px; }
.ck-fav-name.done { text-decoration:line-through; color:var(--ck-muted); }
.ck-fav-pills { display:flex; flex-wrap:wrap; gap:5px; }
.ck-fav-remove { flex-shrink:0; background:transparent; border:none; color:var(--ck-fav); cursor:pointer; padding:6px; border-radius:8px; }
.ck-fav-remove .dashicons { font-size:20px; width:20px; height:20px; }
.ck-fav-empty { text-align:center; color:var(--ck-muted); padding:40px 20px; }
.ck-fav-empty .dashicons { font-size:34px; width:34px; height:34px; opacity:.5; display:block; margin:0 auto 10px; }

@media (max-width:600px) {
	.ck-title { font-size:20px; }
	.ck-body { padding:16px 16px 22px; }
	.ck-hero { padding:18px 16px 0; }
}