/* Leadership Toolkit — Core Stylesheet v1.0 */
:root {
    --gold: #b8963e;
    --gold-light: #d4b96a;
    --gold-bg: rgba(184,150,62,0.08);
    --dark: #1e1e1e;
    --cream: #faf7f2;
    --white: #ffffff;
    --green: #2c7a4b;
    --green-bg: rgba(44,122,75,0.08);
    --flame: #e85d26;
    --red: #c0392b;
    --text: #2d3748;
    --muted: #718096;
    --border: #e2ddd5;
    --radius: 12px;
    --shadow: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg: 0 4px 24px rgba(0,0,0,0.1);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family:var(--font); background:var(--cream); color:var(--text); font-size:15px; line-height:1.6; }
h1,h2,h3,h4 { color:var(--dark); margin:0 0 .5em; line-height:1.3; }
a { color:var(--gold); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }

/* Buttons */
.button { display:inline-block; padding:10px 24px; background:var(--gold); color:#fff; border:2px solid var(--gold); border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; text-align:center; }
.button:hover { background:#a07d2f; border-color:#a07d2f; text-decoration:none; }
.btn-outline { background:transparent; color:var(--gold); }
.btn-outline:hover { background:var(--gold); color:#fff; }
.btn-small { padding:6px 16px; font-size:13px; }
.btn-green { background:var(--green); border-color:var(--green); }
.btn-green:hover { background:#246b3e; border-color:#246b3e; }

/* ===== HEADER ===== */
.tk-header { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.tk-header-inner { max-width:1400px; margin:0 auto; padding:0 20px; height:56px; display:flex; align-items:center; justify-content:space-between; }
.tk-logo { font-size:18px; font-weight:700; color:var(--dark); }
.tk-logo:hover { text-decoration:none; color:var(--gold); }
.tk-user-bar { display:flex; align-items:center; gap:16px; }
.tk-streak { font-size:14px; color:var(--flame); font-weight:600; }
.tk-points { font-size:14px; color:var(--gold); font-weight:600; }
.tk-level { font-size:12px; color:var(--muted); background:var(--gold-bg); padding:3px 10px; border-radius:20px; }
.tk-user-menu { position:relative; }
.tk-user-btn { width:36px; height:36px; border-radius:50%; border:2px solid var(--gold); background:var(--gold-bg); color:var(--gold); font-weight:700; font-size:13px; cursor:pointer; }
.tk-dropdown { display:none; position:absolute; right:0; top:100%; padding-top:4px; background:var(--white); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-lg); min-width:160px; z-index:200; }
.tk-user-menu:hover .tk-dropdown, .tk-user-menu:focus-within .tk-dropdown { display:block; }
.tk-dropdown a { display:block; padding:10px 16px; color:var(--text); font-size:14px; }
.tk-dropdown a:hover { background:var(--gold-bg); text-decoration:none; }
.tk-mobile-toggle { display:none; background:none; border:none; font-size:24px; cursor:pointer; color:var(--dark); }

/* ===== LAYOUT ===== */
.tk-layout { display:flex; min-height:calc(100vh - 56px); max-width:1400px; margin:0 auto; }
.tk-sidebar { width:260px; background:var(--white); border-right:1px solid var(--border); padding:16px 0; overflow-y:auto; position:sticky; top:56px; height:calc(100vh - 56px); flex-shrink:0; }
.tk-main { flex:1; padding:32px 40px; min-width:0; }

/* Sidebar nav */
.tk-nav-item { display:flex; align-items:center; gap:10px; padding:10px 20px; color:var(--text); font-size:14px; font-weight:500; transition:background .15s; }
.tk-nav-item:hover { background:var(--gold-bg); text-decoration:none; }
.tk-nav-item.active { background:var(--gold-bg); color:var(--gold); font-weight:600; border-right:3px solid var(--gold); }
.tk-nav-item.completed .tk-nav-label { color:var(--green); }
.tk-nav-icon { font-size:18px; width:24px; text-align:center; flex-shrink:0; }
.tk-nav-label { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-nav-pct { font-size:11px; color:var(--muted); background:var(--gold-bg); padding:2px 6px; border-radius:10px; }
.tk-nav-sub { display:block; padding:6px 20px 6px 54px; font-size:13px; color:var(--muted); }
.tk-nav-sub:hover { text-decoration:none; color:var(--text); }
.tk-nav-sub.active { color:var(--gold); font-weight:600; }
.tk-nav-sub .tk-sec-status { display:inline-block; width:18px; font-size:12px; }
.tk-nav-sub.sec-completed .tk-sec-status { color:var(--green); }
.tk-nav-sub.sec-in_progress .tk-sec-status { color:var(--gold); }

/* ===== DASHBOARD ===== */
.tk-dash-top { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-bottom:32px; }
.tk-dash-card { background:var(--white); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); text-align:center; }
.tk-dash-card h3 { font-size:14px; color:var(--muted); font-weight:500; margin-bottom:12px; text-transform:uppercase; letter-spacing:.5px; }
.tk-dash-card .big-num { font-size:36px; font-weight:700; color:var(--dark); }

.tk-module-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; margin-top:24px; }
.tk-module-card { display:block; background:var(--white); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); transition:all .2s; border-left:4px solid var(--border); }
.tk-module-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); text-decoration:none; }
.tk-module-card.in-progress { border-left-color:var(--gold); }
.tk-module-card.completed { border-left-color:var(--green); }
.tk-mc-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.tk-mc-icon { font-size:24px; }
.tk-mc-num { font-size:12px; color:var(--muted); }
.tk-module-card h3 { font-size:16px; margin:0 0 4px; color:var(--dark); }
.tk-module-card p { font-size:13px; color:var(--muted); margin:0 0 12px; }
.tk-mc-footer { display:flex; align-items:center; gap:12px; }
.tk-mc-status { font-size:12px; font-weight:600; }
.tk-mc-status.completed { color:var(--green); }
.tk-mc-status.in-progress { color:var(--gold); }
.tk-mc-status.not-started { color:var(--muted); }

/* ===== PROGRESS RING ===== */
.tk-ring-fill { transition: stroke-dashoffset 1s ease-out; }
.tk-ring-text { font-weight:700; }

/* Progress bar */
.tk-bar-wrap { display:flex; align-items:center; gap:8px; margin:8px 0; }
.tk-bar-label { font-size:13px; color:var(--muted); min-width:80px; }
.tk-bar { flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.tk-bar-fill { height:100%; background:var(--gold); border-radius:4px; transition:width .6s ease; }
.tk-bar-pct { font-size:12px; color:var(--muted); min-width:36px; text-align:right; }

/* ===== BADGES ===== */
.tk-badges-grid { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.tk-badge { display:flex; flex-direction:column; align-items:center; width:80px; text-align:center; padding:8px; border-radius:var(--radius); transition:transform .2s; }
.tk-badge.earned { background:var(--gold-bg); }
.tk-badge.locked { opacity:.4; filter:grayscale(1); }
.tk-badge-icon { font-size:28px; margin-bottom:4px; }
.tk-badge-name { font-size:10px; color:var(--muted); line-height:1.2; }
.tk-badge.earned .tk-badge-name { color:var(--dark); font-weight:600; }

/* ===== SECTION CONTENT ===== */
.tk-section-header { margin-bottom:24px; }
.tk-section-type { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--gold); font-weight:600; }
.tk-section-header h2 { font-size:24px; margin-top:4px; }
.tk-section-subtitle { font-size:15px; color:var(--muted); margin-top:4px; }

.tk-content-card { background:var(--white); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); margin-bottom:24px; }
.tk-content-card h3 { font-size:18px; margin-bottom:12px; }
.tk-content-card p { margin:0 0 12px; }

.tk-intro-text { font-size:16px; color:var(--text); line-height:1.7; margin-bottom:24px; padding:20px; background:var(--gold-bg); border-radius:var(--radius); border-left:4px solid var(--gold); }
.tk-reference { font-size:12px; color:var(--muted); font-style:italic; margin-top:8px; }

.tk-completed-badge { display:inline-flex; align-items:center; gap:6px; padding:8px 20px; background:var(--green-bg); color:var(--green); font-weight:600; border-radius:8px; font-size:14px; }
.tk-complete-btn { margin-top:20px; }

/* ===== EXERCISES ===== */
/* Likert */
.tk-likert { margin:16px 0 20px; padding:16px; background:var(--white); border-radius:var(--radius); border:1px solid var(--border); }
.tk-likert-q { font-weight:500; margin:0 0 12px; }
.tk-likert-options { display:flex; gap:8px; flex-wrap:wrap; }
.tk-likert-opt { display:flex; flex-direction:column; align-items:center; padding:10px 14px; border:2px solid var(--border); border-radius:8px; cursor:pointer; transition:all .2s; min-width:60px; text-align:center; }
.tk-likert-opt:hover { border-color:var(--gold-light); }
.tk-likert-opt.checked, .tk-likert-opt:has(input:checked) { border-color:var(--gold); background:var(--gold-bg); }
.tk-likert-opt input { display:none; }
.tk-likert-num { font-size:18px; font-weight:700; color:var(--dark); }
.tk-likert-label { font-size:11px; color:var(--muted); margin-top:2px; }

/* Slider */
.tk-slider-wrap { margin:16px 0; padding:16px; background:var(--white); border-radius:var(--radius); border:1px solid var(--border); }
.tk-slider-label { font-weight:500; display:block; margin-bottom:8px; }
.tk-slider-row { display:flex; align-items:center; gap:12px; }
.tk-slider-anchor { font-size:12px; color:var(--muted); min-width:80px; }
.tk-slider-anchor:last-child { text-align:right; }
.tk-slider { flex:1; -webkit-appearance:none; height:8px; background:var(--border); border-radius:4px; outline:none; }
.tk-slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; background:var(--gold); border-radius:50%; cursor:pointer; border:3px solid var(--white); box-shadow:0 1px 4px rgba(0,0,0,.2); }
.tk-slider::-moz-range-thumb { width:22px; height:22px; background:var(--gold); border-radius:50%; cursor:pointer; border:3px solid var(--white); box-shadow:0 1px 4px rgba(0,0,0,.2); }
.tk-slider-val { text-align:center; font-size:13px; color:var(--muted); margin-top:4px; }

/* Drag rank */
.tk-rank { margin:16px 0; }
.tk-rank-list { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.tk-rank-item { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--white); border-bottom:1px solid var(--border); cursor:grab; transition:background .15s; user-select:none; }
.tk-rank-item:last-child { border-bottom:none; }
.tk-rank-item:hover { background:var(--gold-bg); }
.tk-rank-item.dragging { opacity:.5; background:var(--gold-bg); }
.tk-rank-pos { width:28px; height:28px; background:var(--gold); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.tk-rank-grip { color:var(--muted); font-size:18px; flex-shrink:0; }
.tk-rank-text { flex:1; font-size:14px; }
.tk-rank-fallback { display:none; }

/* Scenario */
.tk-scenario { margin:16px 0; }
.tk-scenario-text { font-size:15px; line-height:1.7; padding:16px; background:var(--gold-bg); border-radius:var(--radius); margin-bottom:12px; border-left:4px solid var(--gold); }
.tk-scenario-options { display:grid; gap:10px; }
.tk-scenario-opt { padding:14px 18px; background:var(--white); border:2px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:all .2s; }
.tk-scenario-opt:hover { border-color:var(--gold-light); }
.tk-scenario-opt.selected { border-color:var(--gold); background:var(--gold-bg); }
.tk-scenario-choice { font-weight:500; }
.tk-scenario-feedback { display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-size:14px; color:var(--muted); line-height:1.6; }
.tk-scenario-opt.selected .tk-scenario-feedback { display:block; }

/* Text area */
.tk-textarea-wrap { margin:16px 0; }
.tk-textarea-prompt { display:block; font-weight:500; margin-bottom:8px; }
.tk-textarea { width:100%; min-height:120px; padding:14px; border:2px solid var(--border); border-radius:var(--radius); font-family:var(--font); font-size:14px; resize:vertical; transition:border-color .2s; line-height:1.6; }
.tk-textarea:focus { outline:none; border-color:var(--gold); }
.tk-textarea-meta { display:flex; justify-content:space-between; margin-top:4px; }
.tk-char-count { font-size:12px; color:var(--muted); }
.tk-save-status { font-size:12px; color:var(--green); }

/* Checklist */
.tk-checklist { margin:16px 0; }
.tk-check-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; cursor:pointer; transition:background .15s; }
.tk-check-item:hover { background:var(--gold-bg); }
.tk-check-item input { display:none; }
.tk-check-box { width:22px; height:22px; border:2px solid var(--border); border-radius:6px; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.tk-check-item.checked .tk-check-box, .tk-check-item:has(input:checked) .tk-check-box { background:var(--gold); border-color:var(--gold); color:#fff; }
.tk-check-item.checked .tk-check-box::after, .tk-check-item:has(input:checked) .tk-check-box::after { content:'✓'; font-size:14px; font-weight:700; }
.tk-check-label { font-size:14px; }

/* Card sort */
.tk-card-sort { margin:16px 0; }
.tk-cs-source { display:flex; flex-wrap:wrap; gap:8px; padding:16px; background:var(--cream); border-radius:var(--radius); border:2px dashed var(--border); min-height:60px; margin-bottom:16px; }
.tk-cs-card { display:inline-block; padding:8px 16px; background:var(--white); border:2px solid var(--border); border-radius:8px; cursor:grab; font-size:13px; font-weight:500; user-select:none; transition:all .2s; }
.tk-cs-card:hover { border-color:var(--gold); background:var(--gold-bg); }
.tk-cs-card.dragging { opacity:.5; }
.tk-cs-buckets { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.tk-cs-bucket { background:var(--white); border-radius:var(--radius); border:2px solid var(--border); overflow:hidden; }
.tk-cs-bucket h4 { margin:0; padding:10px 14px; background:var(--gold-bg); font-size:14px; color:var(--dark); border-bottom:1px solid var(--border); }
.tk-cs-drop { min-height:80px; padding:8px; display:flex; flex-direction:column; gap:6px; }
.tk-cs-drop.drag-over { background:var(--gold-bg); }

/* Matrix 2x2 */
.tk-matrix { margin:16px 0; }
.tk-matrix-grid { position:relative; width:100%; max-width:400px; aspect-ratio:1; border:2px solid var(--dark); margin:0 auto 16px; }
.tk-matrix-q { position:absolute; width:50%; height:50%; display:flex; align-items:center; justify-content:center; text-align:center; font-size:12px; padding:8px; color:var(--muted); }
.tk-matrix-q.tl { top:0; left:0; background:rgba(184,150,62,0.04); }
.tk-matrix-q.tr { top:0; right:0; background:rgba(44,122,75,0.04); }
.tk-matrix-q.bl { bottom:0; left:0; background:rgba(192,57,43,0.04); }
.tk-matrix-q.br { bottom:0; right:0; background:rgba(113,128,150,0.04); }
.tk-matrix-xlabel { position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--muted); }
.tk-matrix-ylabel { position:absolute; top:50%; left:-32px; transform:translateY(-50%) rotate(-90deg); font-size:12px; color:var(--muted); }
.tk-matrix-dot { position:absolute; width:16px; height:16px; background:var(--gold); border-radius:50%; border:3px solid var(--white); box-shadow:0 1px 4px rgba(0,0,0,.3); transform:translate(-50%,50%); z-index:10; transition:all .3s; }
.tk-matrix-sliders { display:grid; gap:8px; max-width:400px; margin:0 auto; font-size:13px; }
.tk-matrix-sliders input { width:100%; }

/* Radar */
.tk-radar-wrap { display:flex; justify-content:center; margin:16px 0; }

/* Journal */
.tk-journal { margin:16px 0; }
.tk-journal-prompt { font-size:18px; font-weight:600; color:var(--dark); margin-bottom:16px; padding:16px; background:var(--gold-bg); border-radius:var(--radius); border-left:4px solid var(--gold); font-style:italic; }
.tk-journal-new { margin-bottom:24px; }
.tk-journal-meta { display:flex; align-items:center; justify-content:space-between; margin-top:8px; flex-wrap:wrap; gap:8px; }
.tk-mood-select { display:flex; gap:4px; flex-wrap:wrap; }
.tk-mood-opt { cursor:pointer; }
.tk-mood-opt input { display:none; }
.tk-mood-opt span { display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:20px; font-size:12px; transition:all .2s; }
.tk-mood-opt:has(input:checked) span, .tk-mood-opt input:checked + span { background:var(--gold-bg); border-color:var(--gold); }
.tk-journal-history { border-top:1px solid var(--border); padding-top:16px; }
.tk-journal-history h4 { color:var(--muted); font-size:14px; margin-bottom:12px; }
.tk-journal-past { padding:12px 16px; margin-bottom:8px; background:var(--white); border-radius:8px; border:1px solid var(--border); }
.tk-journal-date { font-size:12px; color:var(--muted); margin-bottom:4px; }
.tk-journal-text { font-size:14px; line-height:1.6; }

/* ===== TOAST & POPUPS ===== */
.tk-toast { position:fixed; bottom:24px; right:24px; z-index:1000; }
.tk-toast-msg { background:var(--dark); color:#fff; padding:12px 20px; border-radius:8px; margin-top:8px; font-size:14px; animation:tk-slide-up .3s ease; box-shadow:var(--shadow-lg); }
.tk-toast-msg.success { border-left:4px solid var(--green); }
.tk-toast-msg.info { border-left:4px solid var(--gold); }

.tk-achievement-popup { position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5); }
.tk-achievement-popup.show { display:flex; }
.tk-ach-inner { background:var(--white); border-radius:var(--radius); padding:40px; text-align:center; animation:tk-pop .4s ease; max-width:360px; }
.tk-ach-icon { font-size:64px; margin-bottom:8px; }
.tk-ach-title { font-size:20px; font-weight:700; color:var(--dark); margin-bottom:4px; }
.tk-ach-desc { font-size:14px; color:var(--muted); margin-bottom:16px; }
.tk-levelup-title { font-size:14px; color:var(--gold); font-weight:600; margin-bottom:4px; }
.tk-levelup-level { font-size:28px; font-weight:800; color:var(--dark); }

@keyframes tk-slide-up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes tk-pop { 0% { transform:scale(0.5); opacity:0; } 60% { transform:scale(1.05); } 100% { transform:scale(1); opacity:1; } }

/* ===== AUTH PAGES ===== */
.tk-auth { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--cream); padding:20px; }
.tk-auth-card { background:var(--white); border-radius:var(--radius); padding:40px; box-shadow:var(--shadow-lg); width:100%; max-width:400px; }
.tk-auth-card h1 { font-size:24px; text-align:center; margin-bottom:4px; }
.tk-auth-card .subtitle { text-align:center; color:var(--muted); font-size:14px; margin-bottom:24px; }
.tk-field { margin-bottom:16px; }
.tk-field label { display:block; font-size:13px; font-weight:600; color:var(--dark); margin-bottom:4px; }
.tk-field input { width:100%; padding:10px 14px; border:2px solid var(--border); border-radius:8px; font-size:14px; font-family:var(--font); transition:border-color .2s; }
.tk-field input:focus { outline:none; border-color:var(--gold); }
.tk-error { color:var(--red); font-size:13px; margin-bottom:12px; padding:8px 12px; background:rgba(192,57,43,0.06); border-radius:6px; }
.tk-auth-footer { text-align:center; margin-top:16px; font-size:13px; color:var(--muted); }

/* ===== SHAREABLE PRINTABLE ===== */
.tk-shareable { background:var(--white); border:2px solid var(--border); border-radius:var(--radius); padding:32px; margin:16px 0; }
.tk-shareable h3 { margin-bottom:4px; }
.tk-shareable .tk-share-subtitle { font-size:13px; color:var(--muted); margin-bottom:16px; }
.tk-share-actions { display:flex; gap:8px; margin-top:16px; }
@media print {
    .tk-header, .tk-sidebar, .tk-toast, .tk-share-actions, .button, .tk-complete-btn { display:none !important; }
    .tk-main { padding:0 !important; }
    .tk-shareable { border:none; box-shadow:none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .tk-mobile-toggle { display:block; }
    .tk-user-bar { display:none; }
    body.nav-open .tk-user-bar { display:flex; }
    .tk-sidebar { display:none; position:fixed; top:56px; left:0; right:0; bottom:0; width:100%; z-index:90; background:var(--white); }
    body.nav-open .tk-sidebar { display:block; }
    .tk-main { padding:20px 16px; }
    .tk-dash-top { grid-template-columns:1fr; }
    .tk-module-grid { grid-template-columns:1fr; }
    .tk-likert-options { flex-direction:column; }
    .tk-cs-buckets { grid-template-columns:1fr; }
    .tk-rank-fallback { display:block; }
    .tk-rank-list { display:none; }
}
@media (max-width: 480px) {
    .tk-header-inner { padding:0 12px; }
    .tk-main { padding:16px 12px; }
    .tk-content-card { padding:16px; }
}

/* ===== LANDING PAGE ===== */
.tk-landing { background:var(--cream); }
.tk-landing-nav { display:flex; align-items:center; gap:10px; }
.tk-landing-main { max-width:960px; margin:0 auto; padding:40px 20px 60px; }
.tk-landing-footer { text-align:center; padding:24px 20px; font-size:13px; color:var(--muted); border-top:1px solid var(--border); }

.section-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold); font-weight:600; margin-bottom:8px; }

.toolkit-hero { text-align:center; padding:48px 24px; background:linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%); color:var(--cream); border-radius:var(--radius); margin-bottom:40px; }
.toolkit-hero .section-label { color:var(--gold); }
.toolkit-hero h2 { color:var(--cream); font-size:32px; line-height:1.2; margin-bottom:12px; }
.toolkit-hero-sub { font-size:16px; line-height:1.6; color:rgba(250,247,242,0.8); max-width:640px; margin:0 auto; }

.toolkit-features { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:20px; margin-bottom:40px; }
.toolkit-feature { background:var(--white); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); text-align:center; }
.toolkit-feature-icon { font-size:36px; display:block; margin-bottom:10px; }
.toolkit-feature h3 { font-size:16px; margin-bottom:6px; }
.toolkit-feature p { font-size:14px; color:var(--muted); line-height:1.5; margin:0; }

.toolkit-modules-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; margin-bottom:40px; }
.toolkit-module-item { background:var(--white); border-radius:var(--radius); padding:20px; border-left:4px solid var(--border); box-shadow:var(--shadow); transition:all .2s; }
.toolkit-module-item:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.toolkit-module-item.featured { border-left-color:var(--gold); background:linear-gradient(135deg, var(--white) 0%, rgba(184,150,62,0.04) 100%); }
.toolkit-m-icon { font-size:28px; }
.toolkit-module-item h3 { font-size:16px; margin:8px 0 6px; }
.toolkit-module-item p { font-size:14px; color:var(--muted); line-height:1.5; margin-bottom:8px; }
.toolkit-m-ref { font-size:12px; color:var(--gold); font-style:italic; }

.toolkit-gamification { text-align:center; padding:40px 24px; background:var(--gold-bg); border-radius:var(--radius); margin-bottom:40px; }
.toolkit-gamification h2 { margin-bottom:20px; }
.toolkit-game-items { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; }
.toolkit-game-item { padding:16px; }
.toolkit-game-item span { font-size:32px; display:block; margin-bottom:6px; }
.toolkit-game-item h4 { font-size:16px; margin-bottom:4px; }
.toolkit-game-item p { font-size:14px; color:var(--muted); line-height:1.5; margin:0; }

.toolkit-cta { text-align:center; padding:40px 24px; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); }
.toolkit-cta h2 { margin-bottom:8px; }
.toolkit-cta p { color:var(--muted); max-width:500px; margin:0 auto 16px; line-height:1.6; }

@media (max-width: 480px) {
    .toolkit-hero { padding:32px 16px; }
    .toolkit-hero h2 { font-size:24px; }
    .toolkit-modules-grid { grid-template-columns:1fr; }
    .tk-landing-nav .btn-outline { display:none; }
}


/* Pre-reading section styles */
.tk-prereading-intro {
    background: var(--gold-bg);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 28px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--dark);
}
.tk-prereading-intro p { margin: 0; }

.tk-prereading-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.tk-prereading-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
}

.tk-prereading-card h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 10px;
    line-height: 1.4;
}

.tk-prereading-card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 14px;
}

.tk-prereading-card p em {
    font-style: italic;
    color: var(--dark);
}

.tk-prereading-source {
    font-size: 12px;
    color: var(--gold);
    font-style: italic;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    line-height: 1.5;
}

.tk-prereading-reflect {
    background: var(--cream);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 28px;
}

.tk-prereading-reflect h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tk-prereading-reflect ul {
    margin: 0;
    padding-left: 20px;
}

.tk-prereading-reflect li {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 8px;
}

.tk-prereading-reflect li:last-child { margin-bottom: 0; }

.tk-prereading-reflect li em {
    font-style: italic;
    color: var(--dark);
}

@media (max-width: 640px) {
    .tk-prereading-cards { grid-template-columns: 1fr; }
}

/* ── Pathway system ──────────────────────────────────────────────────────── */
.tk-pathway-chooser { margin-bottom: 8px; }

.tk-pathway-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
}

.tk-pathway-card {
    display: flex;
    flex-direction: column;
    background: var(--dark);
    border-radius: var(--radius);
    padding: 28px 28px 24px;
    text-decoration: none;
    transition: transform 0.18s, box-shadow 0.18s;
    position: relative;
    overflow: hidden;
}
.tk-pathway-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    text-decoration: none;
}
.tk-pathway-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}
.tk-pathway-ftm::before { background: #2c7a4b; }
.tk-pathway-hp::before  { background: var(--gold); }

.tk-pathway-card-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 14px;
    display: block;
}
.tk-pathway-card h3 {
    color: var(--white);
    font-size: 18px;
    margin: 0 0 10px;
    line-height: 1.3;
}
.tk-pathway-card p {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px;
    flex: 1;
}
.tk-pathway-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.02em;
}
.tk-pathway-ftm .tk-pathway-cta { color: #5cb87a; }

.tk-pathway-skip {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}
.tk-pathway-skip a { color: var(--teal); }

/* Active pathway header */
.tk-pathway-active-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 28px;
}
.tk-pathway-active-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 2px;
}
.tk-pathway-change {
    font-size: 13px;
    color: var(--muted);
    text-decoration: underline;
    white-space: nowrap;
    flex-shrink: 0;
}
.tk-pathway-change:hover { color: var(--dark); }

/* Phase label banners */
.tk-pathway-phase {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}
.tk-pathway-phase:first-of-type { border-top: none; margin-top: 0; }
.tk-pathway-phase-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tk-pathway-phase-weeks {
    font-size: 12px;
    color: var(--muted);
}

/* "Your next step" badge on module card */
.tk-module-card.tk-pathway-next {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(184,150,62,0.25);
}
.tk-pathway-next-badge {
    display: inline-block;
    background: var(--gold);
    color: var(--dark);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

/* Pathway module grid is same as regular but phase labels span full width */
.tk-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

@media (max-width: 640px) {
    .tk-pathway-cards { grid-template-columns: 1fr; }
    .tk-pathway-active-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Certificate of Completion ───────────────────────────────────────────── */
.tk-cert-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #2c4a2e 0%, #1a3020 100%);
    border: 1px solid #3d7a46;
    border-radius: var(--radius);
    padding: 18px 24px;
    margin-bottom: 28px;
    text-decoration: none;
    transition: box-shadow 0.18s;
}
.tk-cert-banner:hover {
    box-shadow: 0 4px 20px rgba(44,122,75,0.3);
    text-decoration: none;
}
.tk-cert-banner-icon { font-size: 32px; flex-shrink: 0; }
.tk-cert-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tk-cert-banner-text strong {
    color: #fff;
    font-size: 15px;
}
.tk-cert-banner-text span { color: rgba(255,255,255,0.7); font-size: 13px; }
.tk-cert-banner-cta {
    font-size: 13px;
    font-weight: 700;
    color: #5cb87a;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Certificate page */
.tk-cert-page {
    max-width: 800px;
    margin: 0 auto 32px;
}
.tk-cert-border {
    border: 3px solid var(--gold);
    border-radius: 8px;
    padding: 48px 56px;
    position: relative;
    background: #fff;
}
.tk-cert-border::before,
.tk-cert-border::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(184,150,62,0.3);
    border-radius: 5px;
}
.tk-cert-border::before { inset: 8px; }
.tk-cert-border::after  { inset: 12px; }

.tk-cert-header {
    text-align: center;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.tk-cert-programme-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--gold);
    margin-bottom: 6px;
}
.tk-cert-programme-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    letter-spacing: 0.02em;
}

.tk-cert-body { text-align: center; }
.tk-cert-presented {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 8px;
    font-style: italic;
}
.tk-cert-name {
    font-size: 36px;
    font-weight: 300;
    color: var(--dark);
    margin: 0 0 16px;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
}
.tk-cert-detail {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 4px;
}
.tk-cert-programme {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 4px 0 16px;
    letter-spacing: 0.02em;
}

.tk-cert-date-row {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.tk-cert-date, .tk-cert-ref {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.tk-cert-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.tk-cert-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

.tk-cert-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.tk-cert-signatory { line-height: 1.5; }
.tk-cert-sig-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    font-style: italic;
}
.tk-cert-sig-creds {
    font-size: 12px;
    color: var(--muted);
}
.tk-cert-sig-org {
    font-size: 12px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.tk-cert-seal {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tk-cert-seal-inner {
    text-align: center;
    line-height: 1.3;
}
.tk-cert-seal-icon { font-size: 24px; display: block; }
.tk-cert-seal-text {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold);
}

.tk-cert-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}

@media print {
    .tk-header, .tk-cert-actions, .no-print { display: none !important; }
    .tk-cert-page { max-width: 100%; margin: 0; }
    .tk-cert-border { border-color: #b8963e; padding: 24px 32px; }
    body { background: white; }
}

@media (max-width: 640px) {
    .tk-cert-border { padding: 28px 20px; }
    .tk-cert-name { font-size: 26px; }
    .tk-cert-date-row { flex-direction: column; gap: 16px; }
    .tk-cert-footer { flex-direction: column; align-items: flex-start; gap: 20px; }
    .tk-cert-banner { flex-wrap: wrap; }
}
/* ── Reading Guide CTA (in module background reading section) ──────────── */
.tk-reading-guide-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #1a2a3a 0%, #2a3a4a 100%);
    border-radius: var(--radius);
    padding: 28px 28px;
    margin: 12px 0 24px;
}
.tk-rg-icon { font-size: 40px; flex-shrink: 0; }
.tk-rg-body { flex: 1; }
.tk-rg-body h3 {
    color: #fff;
    font-size: 17px;
    margin: 0 0 6px;
    font-weight: 700;
}
.tk-rg-body p {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    margin: 0 0 12px;
    line-height: 1.55;
}
.tk-rg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.tk-rg-meta span {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    font-family: -apple-system, sans-serif;
}
.tk-rg-btn {
    font-size: 14px;
    padding: 10px 20px;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--gold);
    color: white;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 700;
}
.tk-rg-btn:hover { opacity: 0.9; text-decoration: none; }
@media (max-width: 640px) {
    .tk-reading-guide-cta { flex-direction: column; align-items: flex-start; }
    .tk-rg-btn { width: 100%; text-align: center; }
}