/* IWCA-STYLES-VERSION: v17-v2skin-2026-06-18 (v1 default; [data-skin=v2] refresh) */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f0f2f5;min-height:100vh}
:root{
  --navy:#1c2333;--navy-light:#2a3347;--blue:#1a7abf;--blue-light:#2389d4;
  --cyan:#00b8d9;--cyan-light:#00d4f7;--surface:#f8f9fb;
  --border:#e2e6ed;--text:#1a202c;--text-muted:#64748b;--text-light:#94a3b8;
  --green:#16a34a;--amber:#d97706;--red:#dc2626;--red-light:#fef2f2;
  --shadow:0 2px 8px rgba(0,0,0,0.08);--shadow-lg:0 8px 32px rgba(0,0,0,0.12);
}
input,select,textarea,button{font-family:inherit;font-size:15px}
.app{min-height:100vh;display:flex;flex-direction:column}
.header{background:var(--navy);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.header-top{padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:56px}
.header-logo{display:flex;align-items:center;gap:10px}
.header-logo-mark{width:32px;height:32px;background:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px}
.header-title{color:#fff;font-size:15px;font-weight:600;line-height:1.2}
.header-sub{color:var(--cyan);font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:0.5px}
.header-actions{display:flex;align-items:center;gap:10px}
.header-identity{color:rgba(255,255,255,0.85);font-size:13px}
.header-nav{display:flex;align-items:stretch;border-top:1px solid rgba(255,255,255,0.08)}
.nav-item{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:rgba(255,255,255,0.65);font-size:13px;font-weight:400;line-height:1.2;padding:10px 4px;cursor:pointer;transition:all 0.15s;font-family:inherit}
.nav-item:hover{color:#fff;background:rgba(255,255,255,0.04)}
.nav-item-active{color:#fff;font-weight:500;border-bottom-color:var(--cyan)}
.btn-icon{background:none;border:1px solid rgba(255,255,255,0.15);border-radius:8px;padding:6px 10px;color:#fff;font-size:12px;cursor:pointer;transition:all 0.15s}
.btn-icon:hover{background:rgba(255,255,255,0.1)}
.main{flex:1;padding:20px;max-width:680px;margin:0 auto;width:100%}
.main.chat-fullheight{display:flex;flex-direction:column;height:calc(100vh - 95px);height:calc(100dvh - 95px);padding-bottom:0} /* 95px = 56px top row + 39px nav row */
.main.chat-fullheight .card-chat-wrap{flex:1;display:flex;flex-direction:column;min-height:0;margin-bottom:0}
.main.chat-fullheight .card-chat-wrap .card-chat-main{flex:1;display:flex;flex-direction:column;min-height:0;margin-bottom:0}
.main.chat-fullheight .card-chat-wrap .card-chat-main .chat-messages{flex:1;min-height:0;max-height:none}
.card{background:#fff;border-radius:16px;border:1px solid var(--border);padding:24px;margin-bottom:16px;box-shadow:var(--shadow)}
.card-sm{padding:16px}
.card-title{font-size:17px;font-weight:600;color:var(--text);margin-bottom:4px}
.card-sub{font-size:13px;color:var(--text-muted);margin-bottom:20px}
.section-label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.form-group{margin-bottom:18px}
.form-group:last-child{margin-bottom:0}
.label{display:block;font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px}
.label-hint{font-size:12px;color:var(--text-muted);font-weight:400;margin-left:4px}
.label-opt{font-size:12px;color:var(--text-light);font-weight:400;margin-left:4px}
.input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;color:var(--text);background:#fff;transition:border 0.15s;outline:none}
.input:focus{border-color:var(--blue)}
.input::placeholder{color:var(--text-light)}
.input.warn{border-color:var(--amber)}
.input.error{border-color:var(--red)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
textarea.input{resize:vertical;line-height:1.5}
.char-row{display:flex;justify-content:space-between;align-items:center;margin-top:4px;min-height:18px}
.char-hint{font-size:12px}
.char-hint.ok{color:var(--text-light)}
.char-hint.warn{color:var(--amber)}
.char-hint.over{color:var(--red)}
.toggle-group{display:grid;gap:8px}
.toggle-group.cols-2{grid-template-columns:1fr 1fr}
.toggle-group.cols-3{grid-template-columns:1fr 1fr 1fr}
.toggle-btn{padding:12px 16px;border-radius:12px;border:1.5px solid var(--border);background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.15s;text-align:center;color:var(--text-muted)}
.toggle-btn:hover{border-color:var(--blue);color:var(--blue)}
.toggle-btn.active-green{background:#f0fdf4;border-color:var(--green);color:var(--green)}
.toggle-btn.active-red{background:var(--red-light);border-color:var(--red);color:var(--red)}
.toggle-btn.active-blue{background:#eff6ff;border-color:var(--blue);color:var(--blue)}
.conditional{background:var(--surface);border-radius:12px;padding:16px;border:1px solid var(--border);margin-top:10px}
.btn{padding:12px 24px;border-radius:12px;border:none;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-light)}
.btn-primary:disabled{opacity:0.5;cursor:default}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--border)}
.btn-danger{background:var(--red-light);color:var(--red);border:1px solid #fca5a5}
.btn-danger:hover{background:#fee2e2}
.btn-cyan{background:var(--cyan);color:#fff}
.btn-cyan:hover{background:var(--cyan-light)}
.btn-full{width:100%}
.btn-sm{padding:8px 16px;font-size:13px;border-radius:9px}
.err-msg{color:var(--red);font-size:12px;margin-top:4px}
.warn-msg{color:var(--amber);font-size:12px;margin-top:4px}
.steps{display:flex;align-items:center;gap:0;margin-bottom:24px}
.step{display:flex;align-items:center;gap:6px;flex:1}
.step-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.step-dot.done{background:var(--green);color:#fff}
.step-dot.active{background:var(--blue);color:#fff}
.step-dot.pending{background:var(--border);color:var(--text-muted)}
.step-label{font-size:12px;font-weight:500}
.step-label.active{color:var(--blue)}
.step-label.done{color:var(--green)}
.step-label.pending{color:var(--text-muted)}
.step-line{flex:1;height:2px;background:var(--border);margin:0 4px}
.step-line.done{background:var(--green)}
.score-circle{width:100px;height:100px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 12px;border:4px solid}
.score-green{border-color:var(--green);color:var(--green)}
.score-amber{border-color:var(--amber);color:var(--amber)}
.score-red{border-color:var(--red);color:var(--red)}
.score-bars{display:flex;flex-direction:column;gap:10px}
.score-bar-row{display:flex;align-items:center;gap:10px}
.score-bar-label{font-size:12px;color:var(--text-muted);width:140px;flex-shrink:0;font-weight:500}
.score-bar-track{flex:1;height:8px;background:var(--surface);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
.score-bar-fill{height:100%;border-radius:4px;transition:width 1s ease}
.score-bar-val{font-size:12px;font-weight:600;width:40px;text-align:right}
.flag-banner{background:#fff5f5;border:1.5px solid #fca5a5;border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.flag-icon{width:32px;height:32px;background:var(--red);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.flag-text{font-size:13px;color:#991b1b;font-weight:500}
.bullet-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.bullet-list li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--text);line-height:1.5}
.bullet-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:6px}
.dot-green{background:var(--green)}
.dot-amber{background:var(--amber)}
.dot-blue{background:var(--blue)}
.section-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.section-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.section-title{font-size:15px;font-weight:600;color:var(--text)}
.chat-messages{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;min-height:200px;max-height:420px;overflow-y:auto;padding:4px 0}
@media(max-width:480px){.chat-messages{min-height:120px;max-height:38vh;max-height:38dvh}}
.chat-msg{display:flex;gap:8px;align-items:flex-start}
.chat-msg.user{flex-direction:row-reverse}
.chat-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0;margin-top:2px;line-height:1}
.avatar-ai{background:var(--blue);color:#fff}
.avatar-user{background:#94a3b8;color:#fff;font-size:14px}
.chat-bubble{max-width:88%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.6}
.bubble-ai{background:var(--surface);border:1px solid var(--border);color:var(--text);border-top-left-radius:4px}
.bubble-user{background:var(--blue);color:#fff;border-top-right-radius:4px}
.bubble-ai p{margin-bottom:8px}
.bubble-ai p:last-child{margin-bottom:0}
.bubble-ai strong{font-weight:600;color:var(--text)}
.bubble-ai ul{margin:6px 0 8px;padding-left:22px}
.bubble-ai ol{margin:6px 0 8px;padding-left:22px}
.bubble-ai li{font-size:14px;line-height:1.5}
.bubble-ai li+li{margin-top:4px}
.bubble-ai h3{font-size:14px;font-weight:600;margin-bottom:4px;margin-top:8px;color:var(--text)}
.bubble-ai h3:first-child{margin-top:0}
.bubble-ai hr{border:none;border-top:1px solid var(--border);margin:8px 0}
.chat-input-row{display:flex;gap:8px}
.chat-input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;color:var(--text);outline:none;background:#fff;min-width:0}
.chat-input:focus{border-color:var(--blue)}
.chat-send{width:40px;height:40px;padding:0;background:var(--blue);color:#fff;border:none;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-send:disabled{opacity:0.4;cursor:default}
.typing{display:flex;gap:4px;align-items:center;padding:10px 14px;background:var(--surface);border-radius:14px;border-top-left-radius:4px;border:1px solid var(--border);width:fit-content}
.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:bounce 1.2s infinite}
.typing-dot:nth-child(2){animation-delay:0.2s}
.typing-dot:nth-child(3){animation-delay:0.4s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.chat-resumed-notice{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:10px 14px;font-size:12px;color:#1e40af;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.insight-card{background:linear-gradient(135deg,#1c2333,#2a3347);border-radius:14px;padding:16px;margin-bottom:10px}
.insight-card .principle{font-size:12px;font-weight:600;color:var(--cyan);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.insight-card .insight-text{font-size:13px;color:rgba(255,255,255,0.85);line-height:1.5}
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--navy);padding:24px}
.login-card{background:#fff;border-radius:20px;padding:32px 28px;width:100%;max-width:380px;box-shadow:var(--shadow-lg)}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo-img{width:100%;height:auto;display:block}
.login-logo-sub{font-size:12px;color:var(--text-muted);margin-top:2px}
.login-logo-platform{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:12px;font-weight:600;color:var(--navy);text-transform:uppercase;letter-spacing:1.6px}
/* Stat grid */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.stat-card{background:var(--surface);border-radius:12px;padding:14px;text-align:center;border:1px solid var(--border)}
.stat-val{font-size:22px;font-weight:700;color:var(--text);line-height:1;display:flex;align-items:center;justify-content:center;gap:4px}
.stat-lbl{font-size:12px;color:var(--text-muted);margin-top:4px;font-weight:500;text-transform:uppercase;letter-spacing:0.3px}
/* Trend arrow */
.trend-up{color:var(--green);font-size:18px;font-weight:700;line-height:1}
.trend-down{color:var(--red);font-size:18px;font-weight:700;line-height:1}
.trend-flat{color:var(--text-light);font-size:20px;font-weight:300;line-height:1}
.badge{display:inline-flex;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:600}
.badge-green{background:#f0fdf4;color:var(--green)}
.badge-amber{background:#fffbeb;color:var(--amber)}
.badge-red{background:var(--red-light);color:var(--red)}
.divider{height:1px;background:var(--border);margin:16px 0}
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th{text-align:left;padding:8px 12px;color:var(--text-muted);font-weight:500;border-bottom:1px solid var(--border);font-size:12px;text-transform:uppercase;letter-spacing:0.3px}
.admin-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text)}
.admin-table tr:last-child td{border-bottom:none}
/* Phase 4A — leaderboard Badges column. Stacked 18px circles with -6px overlap,
   most-recent on left. Each circle is sized 22px (18px icon + 2px breathing
   room each side) and uses the badge's colourFamily background, mirroring the
   .lesson-marker-icon convention. The overflow "×N" pill sits to the right of
   the stack. */
.leaderboard-badges-stack{display:inline-flex;align-items:center}
.leaderboard-badges-stack-item{
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  margin-left:-6px;
}
.leaderboard-badges-stack-item:first-child{margin-left:0}
.leaderboard-badges-overflow{
  margin-left:6px;font-size:11px;color:var(--text-muted);font-weight:600;
}
.session-row{display:flex;align-items:center;justify-content:space-between;padding:12px 8px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.1s;border-radius:8px;margin:0 -8px}
.session-row:last-child{border-bottom:none}
.session-row:hover{background:var(--surface)}
.session-row-chevron{color:var(--text-light);font-size:16px;flex-shrink:0}
.detail-back{display:flex;align-items:center;gap:6px;color:var(--blue);font-size:14px;font-weight:500;cursor:pointer;margin-bottom:16px;background:none;border:none;padding:0}
.detail-back:hover{opacity:0.75}
.detail-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:0}
.detail-meta-item{background:var(--surface);border-radius:10px;padding:10px 12px;border:1px solid var(--border)}
.detail-meta-label{font-size:12px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.3px;margin-bottom:2px}
.detail-meta-value{font-size:14px;font-weight:500;color:var(--text)}
.detail-notes-block{background:var(--surface);border-radius:10px;padding:12px 14px;border:1px solid var(--border);margin-bottom:8px}
.detail-notes-label{font-size:12px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.3px;margin-bottom:4px}
.detail-notes-value{font-size:14px;color:var(--text);line-height:1.5}
.detail-tab-bar{display:flex;background:var(--surface);border-radius:12px;padding:4px;margin-bottom:16px;border:1px solid var(--border);gap:4px}
.detail-tab{flex:1;padding:8px 10px;border:none;background:none;border-radius:9px;font-size:13px;font-weight:500;color:var(--text-muted);transition:all 0.15s;cursor:pointer}
.detail-tab.active{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.admin-tab-bar{display:flex;background:var(--surface);border-radius:12px;padding:4px;margin-bottom:20px;border:1px solid var(--border);gap:4px}
.admin-tab{flex:1;padding:9px 10px;border:none;background:none;border-radius:9px;font-size:13px;font-weight:500;color:var(--text-muted);transition:all 0.15s;cursor:pointer}
.admin-tab.active{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.method-editor{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;color:var(--text);background:#fff;transition:border 0.15s;outline:none;resize:vertical;line-height:1.6;min-height:320px;font-family:inherit}
.method-editor:focus{border-color:var(--blue)}
.method-editor::placeholder{color:var(--text-light)}
.method-status{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:8px 12px;border-radius:8px;margin-bottom:16px}
.method-status.active{background:#f0fdf4;color:var(--green);border:1px solid #86efac}
.method-status.empty{background:#fffbeb;color:var(--amber);border:1px solid #fcd34d}
.method-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.method-dot.active{background:var(--green)}
.method-dot.empty{background:var(--amber)}
.notice-banner{border-radius:12px;padding:12px 16px;display:flex;align-items:flex-start;gap:10px;margin-bottom:16px}
.notice-banner.amber{background:#fffbeb;border:1px solid #fcd34d}
.notice-banner.blue{background:#eff6ff;border:1px solid #bfdbfe}
.notice-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.notice-text{font-size:13px;line-height:1.5}
.notice-text strong{font-weight:600}
/* Instructor name manager */
.name-tag-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.name-tag-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.name-tag-text{flex:1;font-size:14px;color:var(--text);font-weight:500}
.name-tag-del{background:none;border:none;color:var(--text-light);cursor:pointer;font-size:18px;line-height:1;padding:0 2px;flex-shrink:0}
.name-tag-del:hover{color:var(--red)}
.add-name-row{display:flex;gap:8px}
.add-name-input{flex:1;padding:9px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;color:var(--text);outline:none;background:#fff}
.add-name-input:focus{border-color:var(--blue)}
/* Chart container */
.chart-wrap{height:200px;position:relative;margin-top:8px}
/* Staff tab */
.staff-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.staff-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.staff-avatar{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.staff-info{flex:1;min-width:0}
.staff-name{font-size:14px;font-weight:600;color:var(--text)}
.staff-email{font-size:12px;color:var(--text-muted);margin-top:1px}
/* Delete confirm popup */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.popup-card{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:340px;box-shadow:var(--shadow-lg)}
.popup-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px}
.popup-body{font-size:14px;color:var(--text-muted);margin-bottom:20px;line-height:1.5}
.popup-actions{display:flex;gap:10px;justify-content:flex-end}
/* Batch input */
.batch-textarea{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;color:var(--text);background:#fff;outline:none;resize:vertical;line-height:1.6;min-height:100px;font-family:inherit}
.batch-textarea:focus{border-color:var(--blue)}
/* Debug panel */
.debug-panel{background:#0f172a;border:1px solid #334155;border-radius:12px;padding:14px 16px;margin-top:12px;font-family:'Courier New',monospace}
.debug-panel-title{font-size:11px;font-weight:700;color:#f87171;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.debug-row{display:flex;gap:8px;margin-bottom:4px;font-size:12px;line-height:1.5}
.debug-key{color:#94a3b8;flex-shrink:0;width:110px}
.debug-val{color:#e2e8f0;word-break:break-all}
.debug-val.red{color:#f87171}
.debug-val.amber{color:#fbbf24}
.debug-val.green{color:#4ade80}
@keyframes spin{to{transform:rotate(360deg)}}
.app-footer{transition:opacity 0.15s}
.keyboard-open .app-footer{display:none}
@media(max-width:480px){
  .main{padding:12px}
  .card{padding:16px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .score-bar-label{width:110px;font-size:12px}
  .detail-meta-grid{grid-template-columns:1fr}
  .admin-tab{font-size:12px;padding:8px 4px}
}
/* Focus Areas panel */
.focus-panel{background:linear-gradient(135deg,#0f1e38,#1a3358);border-radius:16px;padding:20px;margin-bottom:16px;border:1px solid rgba(0,184,217,0.25);box-shadow:0 4px 24px rgba(0,0,0,0.18)}
.focus-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.focus-icon{font-size:20px;flex-shrink:0}
.focus-title{font-size:16px;font-weight:700;color:#fff}
.focus-sub{font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:16px;line-height:1.4}
.focus-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.focus-item:last-child{margin-bottom:0}
.focus-number{width:24px;height:24px;border-radius:50%;background:var(--cyan);color:#0f1e38;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;margin-top:1px}
.focus-content{flex:1}
.focus-area-name{font-size:12px;font-weight:700;color:var(--cyan);margin-bottom:3px;text-transform:uppercase;letter-spacing:0.5px}
.focus-tip{font-size:13px;color:rgba(255,255,255,0.85);line-height:1.5}
.focus-generating{display:flex;align-items:center;gap:8px;justify-content:center;padding:20px 0;color:rgba(255,255,255,0.6);font-size:13px}
.focus-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.2);border-top-color:var(--cyan);border-radius:50%;animation:spin 0.8s linear infinite;flex-shrink:0}
/* Revert-to-default button */
.btn-revert{background:none;border:1px solid var(--border);border-radius:7px;padding:4px 10px;font-size:11px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all 0.15s}
.btn-revert:hover{border-color:var(--amber);color:var(--amber);background:#fffbeb}
.btn-revert:disabled{opacity:0.45;cursor:default;border-color:var(--border);color:var(--text-muted);background:none}
.btn-revert:disabled:hover{border-color:var(--border);color:var(--text-muted);background:none}

/* ── Phase 3A — Badges page + Badge detail (spec 7.2, 7.3, 7.8) ── */

/* Back-link used at the top of badge pages */
.back-link{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--blue);font-weight:600;margin-bottom:12px;cursor:pointer;text-decoration:none}
.back-link:hover{text-decoration:underline}

/* Revised 'How to earn' card (spec 7.3) — criterion panel + explanation paragraph */
.criterion{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--text);line-height:1.5}
.explain-text{font-size:14px;color:var(--text-muted);line-height:1.6;margin-bottom:16px}
.explain-text:empty{display:none}

/* Stat grid 3-up — used on detail pages and Badges page stats card.
   Uses fixed 28px row height to align textual + numeric values across cards. */
.stat-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.stat-card-3a{background:var(--surface);border-radius:12px;padding:14px 10px;border:1px solid var(--border);display:grid;grid-template-rows:28px auto;row-gap:8px;text-align:center}
.stat-card-3a .stat-val{font-size:22px;font-weight:700;color:var(--text);line-height:28px;display:flex;align-items:baseline;justify-content:center;gap:2px;margin:0}
.stat-card-3a .stat-val .small{font-size:14px;color:var(--text-muted);font-weight:500}
.stat-card-3a .stat-val.is-text{font-size:16px;font-weight:700;letter-spacing:-0.1px;line-height:28px;display:flex;align-items:center;justify-content:center}
.stat-card-3a .stat-lbl{font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.3px;line-height:1.4;margin:0}

/* Badge-tile grid (Earned/Not yet earned sections) */
.badge-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.badge-tile{transition:transform 0.15s,box-shadow 0.15s}
.badge-tile:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.06)}
.badge-tile:focus{outline:2px solid var(--blue);outline-offset:2px}

/* Pip row on detail header */
.pip-row{display:flex;justify-content:center;gap:3px;margin-bottom:8px}

/* Earn-history rows */
.history-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.history-row:last-child{border-bottom:none}

/* Mobile: shrink the badge grid to 2-up below 380px */
@media (max-width:380px){
  .badge-grid-3{grid-template-columns:1fr 1fr}
}

/* ── Phase 3B — End-of-month modal ───────────────────────────── */
.eom-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(28,35,51,0.55);
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
  overflow-y:auto;
}
.eom-modal{
  background:#fff;border-radius:16px;
  width:100%;max-width:420px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation:eom-fade-in 200ms ease-out;
}
@keyframes eom-fade-in{
  from{opacity:0;transform:translateY(8px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.eom-modal-hero{
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  padding:28px 20px 22px;
  text-align:center;
  position:relative;
}
.eom-modal-hero-label{
  font-size:11px;font-weight:600;color:var(--cyan);
  text-transform:uppercase;letter-spacing:0.6px;
  margin-bottom:10px;
}
.eom-modal-hero-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--green);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
  box-shadow:0 4px 16px rgba(22,163,74,0.4);
}
.eom-modal-hero-title{
  font-size:20px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:4px;
}
.eom-modal-hero-sub{
  font-size:13px;color:rgba(255,255,255,0.75);line-height:1.4;
}

.eom-modal-body{padding:20px}

.eom-section-label{
  font-size:12px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.6px;
  margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}

/* Earn rows (Challenge complete + Didn't land non-featured) */
.eom-earn-row{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:10px 12px;margin-bottom:8px;
}
.eom-earn-icon{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.eom-earn-info{flex:1;min-width:0}
.eom-earn-name{font-size:14px;font-weight:600;color:var(--text);line-height:1.2}
.eom-earn-meta{font-size:12px;color:var(--text-muted);margin-top:2px}

/* Miss row (Didn't land featured) */
.eom-miss-row{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px;
}
.eom-miss-icon{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.eom-miss-title{font-size:14px;font-weight:600;color:var(--text);line-height:1.2}
.eom-miss-meta{font-size:12px;color:var(--text-muted);margin-top:3px;margin-bottom:8px}
.eom-miss-progress{
  height:6px;background:var(--border);
  border-radius:3px;overflow:hidden;
}
.eom-miss-progress-fill{
  height:100%;background:var(--amber);
  transition:width 300ms ease-out;
}

/* Insight card — reuses styling pattern from FeaturedDetailCard */
.eom-insight-card{
  background:linear-gradient(135deg,#0f1e38,#1a3358);
  border-radius:14px;padding:14px 16px;margin-bottom:18px;
  border:1px solid rgba(0,184,217,0.25);
}
.eom-insight-label{
  font-size:11px;font-weight:600;color:var(--cyan);
  text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;
}
.eom-insight-text{
  font-size:13px;color:rgba(255,255,255,0.9);line-height:1.55;
}

/* Next month's challenge card */
.eom-next-card{
  border:2px solid var(--blue);border-radius:14px;
  padding:14px;margin-bottom:16px;
}
.eom-next-card-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.eom-next-card-body{display:flex;align-items:center;gap:12px}
.eom-next-icon{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  border:2px solid var(--border);
}
.eom-next-name{
  font-size:15px;font-weight:700;color:var(--text);line-height:1.2;margin-bottom:2px;
}
.eom-next-desc{font-size:12px;color:var(--text-muted);line-height:1.4}
.eom-days-label{font-size:12px;color:var(--text-light);font-weight:500}

/* CTA row */
.eom-cta-row{display:flex;flex-direction:column;gap:8px}
.eom-btn-primary{padding:12px 16px;font-size:14px;font-weight:600;border-radius:10px;border:none;cursor:pointer;width:100%}
.eom-btn-ghost{
  padding:10px 16px;font-size:14px;font-weight:500;
  border-radius:10px;cursor:pointer;width:100%;
  background:transparent;color:var(--text-muted);border:1px solid var(--border);
}
.eom-btn-ghost:hover{background:var(--surface)}

/* ── Phase 3C — lesson markers + Home empty state ────────────────── */

/* Lesson detail marker (spec 7.6). Renders between header card and tabs
   when session.id is in _currentChallenge.qualifyingSessionIds. */
.lesson-marker{
  background:#fffbeb;border:1px solid #fde68a;border-radius:10px;
  padding:10px;margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.lesson-marker-icon{
  width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.lesson-marker-text{flex:1;min-width:0;}
.lesson-marker-title{font-size:13px;font-weight:600;color:var(--text);}
.lesson-marker-sub{font-size:11px;color:var(--text-muted);margin-top:1px;}

/* Empty-state Focus Areas placeholder (spec 7.8). Replaces the regular
   FocusAreasPanel for brand-new staff. */
.focus-empty-placeholder{
  border:2px dashed var(--border);border-radius:10px;
  padding:16px;text-align:center;
}
.focus-empty-text{
  font-size:13px;color:var(--text-light);
}

/* ── Phase 4B — Admin individual staff member badges view (spec 7.7) ── */

/* Outer wrapper — gives the 6 cards a slight visual separation from the
   leaderboard above and the lessons table below. Cards inherit .card
   spacing; only the panel-level scope is set here. */
.admin-staff-badges-panel{margin-bottom:8px;}

/* Staff header card — avatar circle + name + meta line. Uses the avatar
   pattern from StaffUserCard but inline with header content. */
.admin-staff-header{
  display:flex;align-items:center;gap:14px;
}
.admin-staff-header-avatar{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue) 0%,var(--cyan) 100%);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;letter-spacing:0.3px;
}
.admin-staff-header-body{flex:1;min-width:0;}
.admin-staff-header-name{
  font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px;
}
.admin-staff-header-meta{
  font-size:13px;color:var(--text-muted);line-height:1.4;
}

/* Empty-state placeholder (DDL §27 Q4) — admin-voiced muted card replacing
   staff hero + grids when viewed user has 0 debriefs and 0 badges. */
.admin-staff-empty{
  text-align:center;padding:28px 16px;
}
.admin-staff-empty-title{
  font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px;
}
.admin-staff-empty-body{
  font-size:13px;color:var(--text-muted);
}

/* Loading + error chrome for the per-staff fetch. */
.admin-staff-loading,.admin-staff-error{padding:16px;}
.admin-staff-error{border:1px solid #fca5a5;}

/* Recent earns row icon — 24px circular tile, matches lesson-marker-icon
   visual register but smaller. Reuses .history-row from Phase 3A. */
.admin-recent-earns-icon{
  width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* Narrow-viewport responsiveness — admin is desktop-primary but shouldn't
   break on tablet/mobile. The .badge-grid-3 already collapses to 2-up at
   380px (Phase 3A); here we tighten the header card and stat-grid-3 spacing
   below 480px so the 6-card stack doesn't feel cramped. */
@media (max-width:480px){
  .admin-staff-header{gap:10px;}
  .admin-staff-header-avatar{width:40px;height:40px;font-size:14px;}
  .admin-staff-header-name{font-size:16px;}
  .admin-staff-header-meta{font-size:12px;}
}

/* ── Phase 5 — Progress page redesign (spec §7.4) ─────────────────────
   DDL §35 Pin 1 / Pin 5 / Pin 5.b / Pin 5.c / Pin 7 / Pin 9.
   Three new class families:
     .progress-hero-*   — hero card typography on .insight-card gradient
     .card-sub-stats    — 2x2 sub-stats grid under chart cards (Pin 5)
     .progress-badges-* — stacked-icons row + summary line for badges card
*/

/* Hero card — composes .insight-card gradient with bigger typography.
   No precedent in codebase for white-on-dark hero typography (the EOM
   modal hero is purpose-built for the modal); .progress-hero-* is the
   first general-purpose family. */
.progress-hero{
  padding:20px 18px 18px;
}
.progress-hero-label{
  font-size:11px;font-weight:600;color:var(--cyan);
  text-transform:uppercase;letter-spacing:0.6px;margin-bottom:8px;
}
.progress-hero-value{
  font-size:40px;font-weight:700;color:#fff;line-height:1;
  display:inline-flex;align-items:baseline;gap:10px;margin-bottom:6px;
}
.progress-hero-pill{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:999px;
  letter-spacing:0.3px;
  vertical-align:middle;
}
/* Pill arrow colours intentionally lighter than .trend-up / .trend-down
   (designed for white backgrounds). On the dark gradient, full-saturation
   green/red read too harshly; tailwind-300 equivalents. */
.progress-hero-pill.up{color:#86efac;}
.progress-hero-pill.down{color:#fca5a5;}
.progress-hero-pill.flat{color:rgba(255,255,255,0.7);}
.progress-hero-context{
  font-size:13px;color:rgba(255,255,255,0.75);line-height:1.4;
}

/* Sub-stats 2x2 inline grid (Pin 5). Replaces literal .card-sub
   one-liners under chart cards. Departure from spec wording per F4 +
   Pin 5; the new class name preserves the .card-sub family intent. */
.card-sub-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;
  border-top:1px solid var(--border);
  padding-top:14px;margin-top:14px;
}
.card-sub-stat{
  display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;
  text-align:center;
}
.card-sub-stat-lbl{
  font-size:11px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.3px;
}
.card-sub-stat-val{
  font-size:18px;font-weight:700;color:var(--text);
  display:flex;align-items:baseline;justify-content:center;gap:6px;
}
.card-sub-stat-val .qual{
  font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:0;
}
/* Inline trend indicators inside sub-stat values — tightened from
   .trend-up's default 18px (which was sized for the existing six-card
   stat-grid-2 cells). */
.card-sub-stat-val .trend-up,
.card-sub-stat-val .trend-down,
.card-sub-stat-val .trend-flat{
  font-size:14px;
}
/* Helper line under the 2x2 grid (Pin 5.c). Italic muted body, with the
   coloured arrow non-italic. Spans both columns. */
.card-sub-helper{
  grid-column:1 / -1;
  text-align:center;
  font-size:12px;font-style:italic;color:var(--text-muted);
  margin-top:4px;
}
.card-sub-helper .sym{font-style:normal;font-weight:700;margin-right:4px;}
.card-sub-helper .sym.up{color:var(--green);}
.card-sub-helper .sym.down{color:var(--red);}
.card-sub-helper .sym.flat{color:var(--text-light);}

/* Progress page badges card (Pin 2 / 2.a / 7).
   Stacked icons row + summary line + 3-up stat grid. The 3-up grid
   reuses .stat-grid-3 + .stat-card-3a (lines 302–307). */
.progress-badges-summary{
  text-align:center;
  font-size:13px;color:var(--text-muted);
  margin-bottom:14px;
}

/* ── Genie (G3, DDL §114) — pre-lesson coaching card ─────────────────────────── */
/* Home partials panel */
.genie-panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
.genie-panel-title{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:12px}
.genie-panel-row{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.genie-panel-row:last-child{margin-bottom:0}
.genie-panel-row:hover{border-color:var(--cyan);box-shadow:var(--shadow)}
.genie-expiry{font-size:12px;color:var(--text-muted)}
.genie-expiry-urgent{color:var(--red);font-weight:600}

/* Card header — name · location · driver pill (reused across surfaces) */
.genie-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.genie-header-name{font-size:16px;font-weight:700;color:var(--text)}
.genie-header-dot{color:var(--text-light)}
.genie-header-loc{font-size:14px;color:var(--text-muted)}
.genie-pill{margin-left:auto;font-size:11px;font-weight:600;color:#fff;padding:3px 10px;border-radius:999px;white-space:nowrap;text-transform:uppercase;letter-spacing:0.4px}
.genie-pill-selfdefence{background:var(--navy)}
.genie-pill-martialart{background:var(--blue)}
.genie-pill-fitness{background:var(--green)}
.genie-pill-coordination{background:var(--amber)}
.genie-pill-confidence{background:var(--cyan)}
.genie-pill-offstandard{background:var(--text-muted)}
.genie-pill-unknown{background:var(--text-light)}

/* Card page + card body */
.genie-page{max-width:560px;margin:0 auto}
.genie-page-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.genie-page-saved{font-size:12px;color:var(--green);font-weight:600}
.genie-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.genie-section-label{font-size:12px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.7px;margin:20px 0 10px}
.genie-disclaimer{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.5;margin-top:14px}
.genie-driver-note{font-size:15px;line-height:1.5;color:var(--text);margin-top:12px;font-weight:500}

/* Inferred reading + "Looks off?" flag */
.genie-reading{margin-top:8px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:4px}
.genie-reading-line{font-size:13px;color:var(--text-muted);line-height:1.5}
.genie-reading-label{font-weight:600;color:var(--text)}
.genie-flag-trigger{margin-top:0;background:none;border:none;padding:0;color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline}
.genie-flag-shown{margin-top:6px;font-size:13px;color:var(--amber);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.genie-flag-undo{background:none;border:none;padding:0;color:var(--text-muted);font-size:12px;cursor:pointer;text-decoration:underline}
.genie-flag-edit{margin-top:4px;flex-basis:100%;display:flex;flex-direction:column;gap:8px}
.genie-flag-input{font-size:13px}
.genie-flag-edit-btns{display:flex;gap:8px;justify-content:flex-end}

/* Reinforce beats */
.genie-beat{background:#eff6ff;border:none;border-radius:12px;padding:14px 16px;margin-bottom:10px}
.genie-beat:last-child{margin-bottom:0}
.genie-beat-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.genie-beat-name{font-size:15px;font-weight:700;color:var(--text)}
.genie-beat-do{font-size:14px;line-height:1.5;color:var(--text)}
.genie-beat-link{font-size:14px;line-height:1.55;color:var(--text);margin-top:5px}
.genie-beat-link-label{font-weight:600;color:var(--blue)}

/* Close block — numbered, 1/4/5 fixed, 2/3 personalised */
.genie-close{background:#f1f5f9;border:none;border-radius:12px;padding:15px 17px;margin-top:4px}
.genie-close-step{display:flex;gap:10px;align-items:flex-start;padding:7px 0}
.genie-close-num{flex-shrink:0;width:23px;height:23px;border-radius:50%;background:#fff;color:var(--navy);border:1px solid #cbd5e1;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;margin-top:1px}
.genie-close-label{font-weight:700}
.genie-close-text{font-size:14px;line-height:1.5;color:var(--text)}
.genie-close-do{font-size:14px;line-height:1.5;color:var(--text)}
.genie-close-say{margin-top:4px;font-size:13px;line-height:1.5;color:var(--text-muted);font-style:italic}
.genie-close-tag{font-style:normal;color:var(--text-muted)}
.genie-close-tag b{color:var(--navy);font-weight:700}

/* Page-2 fork + soft-stop */
.genie-fork{margin-top:6px}
.genie-fork-prompt{font-size:14px;line-height:1.5;color:var(--text-muted);margin-bottom:14px}
.genie-softstop{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.5;margin-top:10px}

/* Genie G4a (§115): re-entry action bar + card-exists page-2 controls */
.genie-page-nav{display:flex;gap:8px}
.genie-page-actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.genie-delete-trigger{background:none;border:none;padding:0;color:var(--red);font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline}
.genie-delete-confirm{display:flex;flex-direction:column;gap:8px}
.genie-delete-confirm-msg{font-size:13px;color:var(--text-muted)}
.genie-delete-confirm-btns{display:flex;gap:8px}
.genie-card-controls{display:flex;gap:8px;align-items:center;margin-top:14px;margin-bottom:6px}
.genie-card-toggle{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--cyan);font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.genie-card-toggle:hover{border-color:var(--cyan)}
.genie-card-inline{margin:6px 0 12px}
.genie-relaunch-note{background:#ecfeff;border:1px solid #a5f3fc;color:#155e75;border-radius:10px;padding:8px 12px;font-size:12px;margin-bottom:10px}

/* ============================================================
   v2 REFRESH SKIN — opt-in via [data-skin="v2"] on <html>.
   Azure + Slate + IBM-vibrant semantics + Inter + flat cards
   + AA-clearing greys + inputs>=16px (iOS focus-zoom fix) + de-italic.
   :root above stays v1 (default). Font-size enlargement and the
   long-tail inline-tint conversion are a scheduled follow-up.
   ============================================================ */
:root[data-skin="v2"]{
  --navy:#0f172a;--navy-light:#1e293b;
  --blue:#0f62fe;--blue-light:#3b82f6;--cyan:#ff832b;--cyan-light:#ff9d5c;
  --surface:#f8fafc;--border:#e2e8f0;
  --text:#0f172a;--text-muted:#475569;--text-light:#64748b;
  --green:#198038;--amber:#ba4e00;--red:#da1e28;--red-light:#fff1f1;
  --shadow:none;--shadow-lg:0 4px 16px rgba(15,23,42,0.10);
}
:root[data-skin="v2"] body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f1f5f9}
:root[data-skin="v2"] input,
:root[data-skin="v2"] textarea,
:root[data-skin="v2"] select{font-size:16px}
:root[data-skin="v2"] .genie-close-say,
:root[data-skin="v2"] .card-sub-helper{font-style:normal}
:root[data-skin="v2"] .badge-green,
:root[data-skin="v2"] .toggle-btn.active-green,
:root[data-skin="v2"] .method-status.active{background:#defbe6}
:root[data-skin="v2"] .badge-amber,
:root[data-skin="v2"] .method-status.empty,
:root[data-skin="v2"] .btn-revert:hover{background:#fff8e8}
/* v2 accent system (2026-06-18):
   --cyan is the ON-DARK accent -> orange #ff832b (header-sub, nav underline,
   insight/focus/hero/eom labels read on navy, AA ~5.1-7.3).
   --blue (azure) is the ON-LIGHT action colour. Per-actor identity in coach chat:
   azure = the user (avatar #0043ce + bubble #0043ce); coach = neutral grey avatar.
   Numbered circles use vivid azure (white numerals). .btn-cyan + admin avatar stay
   azure (white text needs a dark fill). Genie-card-toggle text -> azure on light. */
:root[data-skin="v2"] .btn-cyan{background:var(--blue)}
:root[data-skin="v2"] .btn-cyan:hover{background:#0043ce}
:root[data-skin="v2"] .bubble-user{background:#0043ce}
:root[data-skin="v2"] .focus-number{background:var(--blue);color:#fff}
:root[data-skin="v2"] .avatar-user{background:#0043ce}
:root[data-skin="v2"] .avatar-ai{background:#64748b}
:root[data-skin="v2"] .admin-staff-header-avatar{background:linear-gradient(135deg,var(--blue) 0%,#0043ce 100%)}
:root[data-skin="v2"] .genie-card-toggle{color:var(--blue)}
/* v2 home-hero dark tiles: trend arrows/values need light tints on rgba(255,255,255,0.08)
   over navy (deep --green/--red read ~2.9:1 there). Scoped to .home-hero so light cards keep deep semantics. */
:root[data-skin="v2"] .home-hero .trend-up{color:#86efac}
:root[data-skin="v2"] .home-hero .trend-down{color:#fca5a5}
:root[data-skin="v2"] .home-hero .trend-flat{color:rgba(255,255,255,0.7)}
/* ============================================================
   v2 LEGIBILITY LAYER (v1.8.29 / §165) — additive, v2-scoped only.
   v1 :root + every existing rule above is byte-identical (the §162
   strict-additive idiom). header/nav + coach chat HELD per operator.
   ============================================================ */
/* Leg 1 — vivid score tier: the feedback score circle (border + number).
   Bar fills + val numbers go vivid via scoreColorVivid() in app.js (inline,
   can't be CSS-overridden). .score-green/amber/red are used only on circles. */
:root[data-skin="v2"] .score-green{border-color:#24a148;color:#24a148}
:root[data-skin="v2"] .score-amber{border-color:#ff832b;color:#ff832b}
:root[data-skin="v2"] .score-red{border-color:#fa4d56;color:#fa4d56}
/* Leg 2 — font enlargement (+1px on the <=15px band), body surfaces only.
   HELD at shipped: header/nav, coach-chat bubbles, card-title, circle 40px, hero 20px. */
:root[data-skin="v2"] .card-sub{font-size:14px}
:root[data-skin="v2"] .score-bar-label{font-size:13px}
:root[data-skin="v2"] .score-bar-val{font-size:13px}
:root[data-skin="v2"] .admin-table{font-size:14px}
:root[data-skin="v2"] .admin-table th{font-size:13px}
:root[data-skin="v2"] .genie-close-text,
:root[data-skin="v2"] .genie-close-do{font-size:15px}
:root[data-skin="v2"] .genie-close-say{font-size:14px}
:root[data-skin="v2"] .genie-close-num{font-size:13px}
/* ============================================================
   v2 DARK-PANEL UNIFICATION (v1.8.30 / §166) —
   additive, v2-scoped only. v1 :root + every existing rule byte-identical.
   ============================================================ */
/* A — all dark feature surfaces -> the focus-panel deep-blue gradient (one tone).
   .focus-panel / .eom-insight-card already use it; listed for completeness.
   NOT included: .genie-pill-selfdefence (a pill, not a surface — stays as-is). */
:root[data-skin="v2"] .header,
:root[data-skin="v2"] .login-wrap,
:root[data-skin="v2"] .insight-card,
:root[data-skin="v2"] .eom-modal-hero,
:root[data-skin="v2"] .focus-panel,
:root[data-skin="v2"] .eom-insight-card{background:linear-gradient(135deg,#0f1e38,#1a3358)}
/* B — focus-panel accent border: v1 cyan -> v2 orange (same 0.25 alpha).
   Also covers the Sales Psychology Insights panel (G), which reuses .focus-panel. */
:root[data-skin="v2"] .focus-panel{border-color:rgba(255,131,43,0.25)}
/* G — Sales Psychology Insights: app.js renders it under v2 using the .focus-*
   classes (a literal twin of Top 3 Focus Areas), so NO new CSS is needed here;
   it inherits A + B. v1 keeps the white-card + .insight-card structure (byte-identical). */
/* §168 B — feedback-card bullets, v2 only (v1 byte-identical; .bullet-* used only by the
   Strengths/Improvements/Action cards). Dot centres on the icon (28px, centre 14px) and on
   its first text line; gap widened from the base 8px. */
:root[data-skin="v2"] .bullet-list{padding-left:11px}
:root[data-skin="v2"] .bullet-list li{gap:12px}
:root[data-skin="v2"] .bullet-dot{margin-top:7.5px}