:root{
  --brand-red:#8b1415;
  --brand-red-dark:#6f0f10;
  --brand-red-soft:#f7eeee;
  --brand-cream:#fffdf9;
  --dark:#1f1f1f;
  --text:#2b2b2b;
  --muted:#f7f3ef;
  --line:#e4d8d3;
  --danger:#b00020;
  --ok:#16845b;
}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--brand-cream)}.app{display:flex;min-height:100vh}.sidebar{width:260px;background:#ffffff;border-right:1px solid var(--line);padding:24px 18px;position:fixed;top:0;bottom:0}.brand{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:28px}.logo{font-size:42px;font-weight:800;line-height:.9;color:#222}.logo span{color:#d43232}.tagline{color:#d43232;font-weight:700;font-size:18px}.sidebar nav a{display:block;padding:12px 14px;margin:5px 0;color:var(--dark);text-decoration:none;border-radius:8px;border-left:4px solid transparent}.sidebar nav a:hover{background:var(--brand-red-soft);border-left-color:var(--brand-red)}.profile{position:absolute;bottom:20px;left:18px;right:18px;font-size:14px;color:#466}.content{margin-left:260px;padding:32px 44px;width:calc(100% - 260px)}h1{font-size:30px;margin:0 0 18px;color:var(--brand-red-dark)}h2{font-size:22px;margin-top:28px;color:var(--brand-red-dark)}.lead{font-size:17px;line-height:1.55;max-width:980px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}.card,.login-card,.module,.quiz fieldset{background:white;border:1px solid var(--line);border-radius:8px;padding:24px;margin-bottom:18px}.login-card{max-width:440px;margin:80px auto}.btn{display:inline-block;background:var(--brand-red);color:#fff;font-weight:700;border:0;border-radius:4px;padding:11px 16px;text-decoration:none;cursor:pointer}.btn.secondary{background:#fff;border:1px solid var(--brand-red);color:var(--brand-red)}.back{display:inline-block;margin-bottom:20px;color:var(--dark);text-decoration:none}label{display:block;font-weight:700;margin:12px 0 6px}input,textarea,select{width:100%;padding:10px;border:1px solid var(--line);border-radius:3px;font:inherit;background:white}textarea{font-family:Arial,Helvetica,sans-serif}.alert,.result{padding:14px 16px;border-radius:6px;margin:14px 0}.alert,.fail{background:#fdebed;color:var(--danger)}.pass{background:#e9f7f1;color:var(--ok)}.card-status{font-size:13px;font-weight:700;margin-bottom:10px;color:#466}.module-body{font-size:17px;line-height:1.65;max-width:980px}.module-img{max-width:100%;border:1px solid var(--line);border-radius:6px;margin:15px 0}.speak{background:#f3f7f8;padding:16px;border-radius:6px;margin-top:20px}.quiz label{font-weight:400}.quiz-edit{border:1px solid var(--line);border-radius:6px;padding:16px;margin:16px 0;background:#fbfcfc}.check{display:flex;gap:10px;align-items:center}.check input{width:auto}table{width:100%;border-collapse:collapse;background:white;border:1px solid var(--line);margin-top:18px}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:var(--brand-red-soft);color:var(--brand-red-dark)}.admin-nav{display:flex;gap:10px;margin-bottom:20px}.compact{max-width:520px}@media(max-width:800px){.sidebar{position:relative;width:100%;bottom:auto}.app{display:block}.content{margin-left:0;width:100%;padding:22px}.logo{font-size:34px}}

.brand-logo { width: 200px; max-width: 100%; height: auto; display:block; }

/* v3: multiple screenshots per module */
.screenshots {
  margin-top: 28px;
}
.screenshot-card {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid #d8e3e7;
  border-radius: 14px;
  background: #ffffff;
}
.screenshot-card h3 {
  margin-top: 0;
}
.screenshot-card img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  border: 1px solid #d8e3e7;
  border-radius: 10px;
  display: block;
  background: #f8fafb;
}
.screenshot-card figcaption {
  margin-top: 12px;
  color: #234;
}
.image-admin-list {
  display: grid;
  gap: 16px;
}
.image-admin-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
  padding: 14px;
  border: 1px solid #d8e3e7;
  border-radius: 12px;
  background: #fff;
}
.image-admin-item img {
  width: 220px;
  max-height: 160px;
  object-fit: contain;
  border: 1px solid #d8e3e7;
  border-radius: 8px;
  background: #f8fafb;
}
.new-screenshot-box {
  margin: 18px 0;
  padding: 16px;
  border: 1px dashed var(--brand-red);
  border-radius: 12px;
  background: var(--brand-red-soft);
}
.legacy-image {
  margin: 16px 0;
}
@media (max-width: 800px) {
  .image-admin-item {
    grid-template-columns: 1fr;
  }
  .image-admin-item img {
    width: 100%;
  }
}

/* v6 editor/layout improvements */
.btn.secondary { background:#ffffff; border:1px solid var(--brand-red); color:var(--brand-red); }
.module-body img, .preview-module img { max-width:100%; height:auto; border-radius:12px; border:1px solid #d7e3e6; margin:16px 0; }
.module-body table { width:100%; border-collapse:collapse; margin:18px 0; }
.module-body th, .module-body td { border:1px solid #d7e3e6; padding:10px; text-align:left; vertical-align:top; }
.module-body th { background:#eef7f8; }
.preview-badge { display:inline-block; background:var(--brand-red); color:#fff; padding:6px 10px; border-radius:8px; font-weight:700; margin-bottom:12px; }
.tox-tinymce { border-radius:10px !important; border-color:#c9dadd !important; margin-bottom:18px; }
.edit-form textarea:not(.rich-editor) { font-family:inherit; }


/* v7 Café Exit logo colour system */
body { color: var(--text); background: linear-gradient(180deg, #fffdf9 0%, #fbf7f3 100%); }
.brand { text-align:left; }
.brand-logo { width: 200px; max-width: 100%; height: auto; display:block; border:1px solid var(--brand-red); }
.card,.login-card,.module,.quiz fieldset,.screenshot-card,.image-admin-item,table { box-shadow: 0 8px 24px rgba(111,15,16,0.06); }
.card,.login-card,.module,.quiz fieldset { border-radius:12px; }
.btn:hover { background: var(--brand-red-dark); color:#fff; }
.btn.secondary:hover { background: var(--brand-red-soft); color: var(--brand-red-dark); }
a { color: var(--brand-red); }
input:focus, textarea:focus, select:focus { outline:2px solid rgba(139,20,21,0.25); border-color:var(--brand-red); }
.card-status { color:var(--brand-red-dark); }
.speak { background:var(--brand-red-soft); border-left:4px solid var(--brand-red); }
.alert,.fail{background:#fdebed;color:var(--danger);border-left:4px solid var(--danger)}
.pass{background:#edf8f1;color:var(--ok);border-left:4px solid var(--ok)}
.admin-nav .btn { margin-right:4px; }
.module-body h2, .preview-module h2 { border-bottom:1px solid var(--line); padding-bottom:8px; }
.module-body ul, .module-body ol { padding-left: 1.4rem; }

/* Local editor (v8) */
.local-editor-wrap{
  border:1px solid #d6c7c7;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  margin-bottom:18px;
}
.local-editor-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px;
  background:#f8f3f3;
  border-bottom:1px solid #e0d2d2;
}
.local-editor-toolbar button,
.local-editor-toolbar select{
  border:1px solid #d8c8c8;
  background:#fff;
  color:#123047;
  border-radius:8px;
  padding:8px 10px;
  font-size:14px;
  cursor:pointer;
}
.local-editor-toolbar button:hover,
.local-editor-toolbar select:hover{
  border-color:#8b1515;
}
.local-editor{
  min-height:420px;
  padding:22px 26px;
  outline:none;
  color:#0c2f45;
  font-size:18px;
  line-height:1.6;
  background:#fff;
}
.local-editor:focus{
  box-shadow: inset 0 0 0 2px rgba(139,21,21,.18);
}
.local-editor img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid #eadede;
}
.local-editor h2,
.local-editor h3,
.local-editor h4{
  color:#8b1515;
  margin-top:1.2em;
}

/* v9: screenshots + video media per module */
.module-media {
  margin-top: 28px;
}
.media-card {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(111,15,16,0.06);
}
.media-card h3 {
  margin-top: 0;
  color: var(--brand-red-dark);
}
.media-card img,
.media-card video {
  width: 100%;
  max-width: 1100px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: block;
  background: #111;
}
.media-card figcaption {
  margin-top: 12px;
  color: #234;
}
.media-admin-list {
  display: grid;
  gap: 16px;
}
.media-admin-item {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(111,15,16,0.06);
}
.media-preview img,
.media-preview video {
  width: 220px;
  max-height: 160px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111;
  display: block;
}
.media-preview small {
  display: inline-block;
  margin-top: 8px;
  color: var(--brand-red-dark);
  font-weight: 700;
}
.new-media-box {
  margin: 18px 0;
  padding: 16px;
  border: 1px dashed var(--brand-red);
  border-radius: 12px;
  background: var(--brand-red-soft);
}
@media (max-width: 800px) {
  .media-admin-item { grid-template-columns: 1fr; }
  .media-preview img,
  .media-preview video { width: 100%; }
}

/* v10 course structure */
.course-hero{
  display:grid;
  grid-template-columns: minmax(0,1fr) 220px;
  gap:24px;
  align-items:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
  box-shadow:0 8px 24px rgba(111,15,16,0.06);
  margin-bottom:22px;
}
.eyebrow{
  margin:0 0 6px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:800;
  color:var(--brand-red);
}
.progress-box{
  border:1px solid var(--line);
  background:var(--brand-red-soft);
  border-radius:14px;
  padding:18px;
  text-align:center;
  color:var(--brand-red-dark);
}
.progress-box strong{display:block;font-size:30px;line-height:1;margin-bottom:6px;}
.progress-box span{font-size:13px;font-weight:700;}
.course-progress{font-weight:700;color:var(--brand-red-dark);}
.course-card h2{margin-top:0;}
@media(max-width:800px){.course-hero{grid-template-columns:1fr}.progress-box{text-align:left}}