/* tSCG Assessment Tool — Design System */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f4f0;--surface:#fff;--border:#e0ddd6;--border-strong:#c8c5bc;
  --text:#1a1918;--text2:#6b6860;--text3:#9b998f;
  --blue:#1a6fbb;--blue-dark:#0c447c;--blue-mid:#378ADD;
  --blue-bg:#e8f2fb;--blue-border:#a8ccee;
  --green:#2a7a45;--green-bg:#eaf4ee;
  --amber:#8a5c0a;--amber-bg:#fdf3e0;
  --red:#a32020;--red-bg:#fbeaea;
  --radius:8px;--radius-lg:12px;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:14px;min-height:100vh}
.app{max-width:520px;margin:0 auto;padding:12px}

/* ── Header ── */
.header{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.header-sub{font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back-btn{font-size:11px;color:var(--blue);background:none;border:1px solid var(--blue-border);border-radius:var(--radius);padding:5px 10px;cursor:pointer;white-space:nowrap;flex-shrink:0;text-decoration:none;display:inline-block}
.back-btn:hover{background:var(--blue-bg)}
.clock{font-size:10px;color:var(--text3);text-align:right;line-height:1.6;flex-shrink:0}
.logo{height:34px;width:auto;display:block;flex-shrink:0}

/* ── Module Nav ── */
.nav{display:flex;gap:5px;margin-bottom:10px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{height:2px}.nav::-webkit-scrollbar-thumb{background:var(--border)}
.nav-btn{flex-shrink:0;font-size:11px;font-weight:500;padding:6px 11px;border:1px solid var(--border);border-radius:99px;background:var(--surface);color:var(--text2);cursor:pointer;white-space:nowrap;transition:all 0.15s;text-decoration:none;display:inline-block}
.nav-btn:hover,.nav-btn.active{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue)}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:8px}
.card-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:12px}

/* ── Form Fields ── */
.field{margin-bottom:10px}
.field label{display:block;font-size:11px;color:var(--text2);margin-bottom:4px;font-weight:500}
.field input,.field select,.field textarea{width:100%;padding:8px 10px;font-size:13px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);outline:none;-webkit-appearance:none;appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* ── Buttons ── */
.btn-primary{width:100%;padding:10px;font-size:13px;font-weight:600;background:var(--blue);color:#fff;border:none;border-radius:var(--radius);cursor:pointer}
.btn-primary:hover{opacity:0.9}
.btn-outline{width:100%;padding:9px;font-size:13px;font-weight:500;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;margin-bottom:6px;text-align:center;display:block;text-decoration:none}
.btn-outline:hover{background:var(--bg)}
.btn-add{width:100%;padding:9px;font-size:13px;font-weight:600;background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);border-radius:var(--radius);cursor:pointer}
.btn-add:hover{background:#d4e8f8}
.btn-cancel{padding:9px 14px;font-size:13px;font-weight:500;background:#fbeaea;color:#a32020;border:1px solid #e24b4a;border-radius:var(--radius);cursor:pointer}
.btn-sm{padding:4px 9px;font-size:11px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text2);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.btn-sm:hover{background:var(--bg)}
.btn-sm.danger{border-color:#e24b4a;color:#a32020;background:var(--red-bg)}
.btn-danger{padding:9px;font-size:13px;font-weight:500;background:var(--red-bg);color:var(--red);border:1px solid #e24b4a;border-radius:var(--radius);cursor:pointer}

/* ── Counter ── */
.counter-block{display:flex;align-items:center;gap:10px;padding:8px 0}
.counter-label{flex:1;font-size:13px;color:var(--text)}
.cnt-btn{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cnt-btn:active{background:var(--bg)}
.cnt-val{font-size:18px;font-weight:600;min-width:34px;text-align:center}

/* ── Metrics ── */
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.metric{background:var(--bg);border-radius:var(--radius);padding:10px 12px}
.metric-lbl{font-size:10px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px}
.metric-val{font-size:22px;font-weight:700;color:var(--text)}
.metric-sub{font-size:10px;color:var(--text3);margin-top:2px}

/* ── Impact / Impression Rows ── */
.imp-section{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;margin:10px 0 6px;padding-top:6px;border-top:1px solid var(--border)}
.imp-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:13px}
.imp-row:last-child{border-bottom:none}
.imp-label{color:var(--text2)}.imp-val{font-weight:600;color:var(--text)}

/* ── Tables ── */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{padding:6px 8px;text-align:left;font-weight:600;color:var(--text2);border-bottom:1px solid var(--border);font-size:10px;text-transform:uppercase;letter-spacing:0.04em}
.tbl td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{text-align:right}
.tbl-actions{display:flex;gap:4px}

/* ── Badges ── */
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600}
.b-ok{background:var(--green-bg);color:var(--green)}
.b-warn{background:var(--amber-bg);color:var(--amber)}
.b-danger{background:var(--red-bg);color:var(--red)}
.b-cs{background:var(--blue-bg);color:var(--blue)}
.b-fresh{background:#eaf4ee;color:#2a7a45}
.b-dsd{background:#fdf3e0;color:#8a5c0a}
.b-neutral{background:var(--bg);color:var(--text2);border:1px solid var(--border)}

/* ── Toggle ── */
.toggle{position:relative;width:36px;height:20px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:var(--border-strong);border-radius:99px;cursor:pointer;transition:0.2s}
.toggle-slider:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:0.2s}
.toggle input:checked + .toggle-slider{background:var(--blue)}
.toggle input:checked + .toggle-slider:before{transform:translateX(16px)}

/* ── Session Banner ── */
.session-banner{background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--radius-lg);padding:10px 14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.banner-label{font-size:10px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:2px}
.banner-name{font-size:13px;font-weight:600;color:var(--blue-dark)}
.banner-meta{font-size:11px;color:var(--blue-mid);margin-top:1px}
.banner-change-btn{font-size:11px;color:var(--blue);background:none;border:1px solid var(--blue-border);border-radius:var(--radius);padding:5px 10px;cursor:pointer;white-space:nowrap;flex-shrink:0;text-decoration:none;display:inline-block}
.banner-change-btn:hover{background:#d4e8f8}

/* ── Info Banner ── */
.info-banner{font-size:11px;color:var(--text2);background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--radius);padding:8px 12px;margin-bottom:6px}
.warn-banner{font-size:11px;color:var(--amber);background:var(--amber-bg);border:1px solid #e8c87a;border-radius:var(--radius);padding:8px 12px;margin-bottom:6px}

/* ── Timers ── */
.ts-task-card{background:var(--surface);border:2px solid var(--blue-border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:10px}
.ts-task-name{font-size:14px;font-weight:700;color:var(--text)}
.ts-step{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:6px}
.ts-step-label{font-size:12px;font-weight:600;color:var(--text)}
.ts-timer-display{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);min-width:80px;font-family:monospace}
.ts-timer-display.running{color:var(--blue)}
.ts-timer-display.done{color:var(--green)}
.btn-timer-start{padding:7px 14px;font-size:12px;font-weight:600;background:var(--green-bg);color:var(--green);border:1px solid var(--green);border-radius:var(--radius);cursor:pointer;white-space:nowrap}
.btn-timer-start.running{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.btn-timer-reset{padding:7px 10px;font-size:12px;background:var(--bg);color:var(--text2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer}

/* ── Charts ── */
.chart-wrap{position:relative;height:200px;margin-top:4px}

/* ── Home ── */
.home-hero{text-align:center;padding:20px 0 16px}
.home-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px}
.home-sub{font-size:13px;color:var(--text2)}
.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.module-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 14px;cursor:pointer;transition:border-color 0.15s,background 0.15s;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.module-card:hover{border-color:var(--blue-border);background:var(--blue-bg)}
.module-icon{font-size:26px;line-height:1}
.module-name{font-size:13px;font-weight:700;color:var(--text)}
.module-desc{font-size:11px;color:var(--text2);line-height:1.45}
.home-footer{text-align:center;font-size:11px;color:var(--text3);padding:10px 0 4px}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);background:#2a2825;color:#f5f4f0;padding:9px 18px;border-radius:99px;font-size:12px;opacity:0;transition:opacity 0.25s,transform 0.25s;z-index:999;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Messages ── */
.messages{list-style:none;margin-bottom:8px}
.messages li{padding:8px 12px;border-radius:var(--radius);font-size:12px;margin-bottom:4px}
.messages .success{background:var(--green-bg);color:var(--green);border:1px solid var(--green)}
.messages .error{background:var(--red-bg);color:var(--red);border:1px solid #e24b4a}
.messages .warning{background:var(--amber-bg);color:var(--amber);border:1px solid #e8c87a}
.messages .info{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border)}

/* ── Empty State ── */
.empty{text-align:center;padding:24px 12px;color:var(--text3);font-size:12px}

/* ── Library Rows ── */
.session-row{display:flex;justify-content:space-between;align-items:center;padding:10px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px;gap:8px;background:var(--surface)}
.session-row-info{flex:1;min-width:0}
.session-row-title{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.session-row-meta{font-size:11px;color:var(--text2)}
.session-row-actions{display:flex;gap:4px;flex-shrink:0}
.session-row.active-session{border-color:var(--blue-border);background:var(--blue-bg)}

/* ── Settings Table ── */
.settings-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.settings-row:last-child{border-bottom:none}

/* ── Responsive ── */
@media(max-width:400px){
  .header{padding:8px 10px;gap:6px}
  .back-btn{padding:4px 8px;font-size:10px}
  .clock{font-size:9px}
  .nav-btn{font-size:10px;padding:5px 9px}
  .metric-val{font-size:18px}
  .card{padding:12px 12px}
  .module-grid{grid-template-columns:1fr 1fr}
}

/* ── Login Page ── */
.login-wrap{max-width:360px;margin:60px auto;padding:12px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px}
.login-logo{text-align:center;margin-bottom:20px}
.login-title{font-size:18px;font-weight:700;color:var(--text);text-align:center;margin-bottom:4px}
.login-sub{font-size:12px;color:var(--text2);text-align:center;margin-bottom:20px}

/* ── PCA Module ── */
.pca-map-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.pca-map-shelf-lbl{font-size:10px;font-weight:600;color:var(--text2);min-width:48px;flex-shrink:0}
.pca-map-dots{display:flex;flex-wrap:wrap;gap:3px;flex:1}
.pca-dot{display:inline-block;width:18px;height:18px;border-radius:3px;border:1px solid transparent;cursor:pointer;flex-shrink:0;transition:transform .1s}
.pca-dot:hover{transform:scale(1.2)}
.pca-dot-not_started{background:var(--border-strong);border-color:var(--border)}
.pca-dot-present{background:var(--green);border-color:#1a5c30}
.pca-dot-issues{background:var(--amber);border-color:#6a3f00}
.pca-dot-not_present{background:var(--red);border-color:#7a1010}
.pca-dot-current{outline:2px solid var(--blue);outline-offset:1px;transform:scale(1.35);z-index:1;position:relative}
.pca-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:10px;color:var(--text2);margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.pca-leg-dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:2px;vertical-align:middle}
.pca-progress-track{height:6px;background:var(--border);border-radius:99px;margin-top:8px;overflow:hidden}
.pca-progress-fill{height:100%;background:var(--green);border-radius:99px;transition:width .3s}
.pca-status-group{display:flex;gap:6px;margin-bottom:14px}
.pca-status-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;font-size:12px;font-weight:600;color:var(--text2);transition:all .15s;text-align:center}
.pca-status-btn:hover{border-color:var(--border-strong);background:var(--bg)}
.pca-status-icon{font-size:18px;line-height:1;margin-bottom:2px}
.pca-sel-present{border-color:var(--green)!important;background:var(--green-bg)!important;color:var(--green)!important}
.pca-sel-issues{border-color:#d4960a!important;background:var(--amber-bg)!important;color:var(--amber)!important}
.pca-sel-not-present{border-color:#c62828!important;background:var(--red-bg)!important;color:var(--red)!important}
.pca-check-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pca-check-lbl{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;background:var(--surface);color:var(--text2);transition:all .15s;user-select:none}
.pca-check-lbl input[type=checkbox]{width:15px;height:15px;accent-color:var(--green);flex-shrink:0}
.pca-check-ok{border-color:var(--green)!important;background:var(--green-bg)!important;color:var(--green)!important}

/* ── Product Picker ── */
.picker-wrap{position:relative}
.picker-dropdown{position:absolute;top:100%;left:0;right:0;z-index:200;background:var(--surface);border:1px solid var(--blue-border);border-top:none;border-radius:0 0 var(--radius) var(--radius);max-height:260px;overflow-y:auto;box-shadow:0 4px 14px rgba(0,0,0,.13)}
.picker-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);font-size:13px}
.picker-item:last-child{border-bottom:none}
.picker-item.active,.picker-item:hover{background:var(--blue-bg)}
.picker-item-name{flex:1;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-item-meta{font-size:11px;color:var(--text3);white-space:nowrap;flex-shrink:0}
.picker-item-upc{font-family:monospace;font-size:11px;color:var(--text3);flex-shrink:0}
.picker-pill{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--radius);margin-top:4px;font-size:12px}
.picker-pill-name{flex:1;font-weight:500;color:var(--blue-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-pill-upc{font-family:monospace;font-size:11px;color:var(--blue-mid);flex-shrink:0}
.picker-clear{background:none;border:none;cursor:pointer;color:var(--text3);font-size:18px;line-height:1;padding:0 2px;flex-shrink:0}
.picker-clear:hover{color:var(--red)}
.picker-loading{font-size:11px;color:var(--text3);padding:3px 0}
.picker-create{color:var(--blue);font-weight:500;font-size:12px;justify-content:center;background:var(--blue-bg);border-top:1px solid var(--blue-border)}
.picker-input-row{display:flex;gap:6px;align-items:stretch}
.picker-input-row input{flex:1;min-width:0}
.picker-scan-btn{flex-shrink:0;padding:0 11px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.picker-scan-btn:hover{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue)}
.picker-scan-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.picker-scan-box{position:relative;width:min(90vw,340px);aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;background:#000}
.picker-scan-video{width:100%;height:100%;object-fit:cover;display:block}
.picker-scan-aim{position:absolute;inset:20%;border:2px solid rgba(255,255,255,.75);border-radius:var(--radius);pointer-events:none}
.picker-scan-aim::before,.picker-scan-aim::after{content:'';position:absolute;width:18px;height:18px;border-color:#fff;border-style:solid}
.picker-scan-aim::before{top:-2px;left:-2px;border-width:3px 0 0 3px;border-radius:4px 0 0 0}
.picker-scan-aim::after{bottom:-2px;right:-2px;border-width:0 3px 3px 0;border-radius:0 0 4px 0}
.picker-scan-hint{color:rgba(255,255,255,.75);font-size:13px;margin-top:16px;text-align:center}
.picker-scan-cancel{margin-top:20px;padding:11px 32px;font-size:14px;font-weight:600;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);cursor:pointer}
.picker-scan-cancel:hover{background:rgba(255,255,255,.22)}