@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&display=swap');

:root{
  --orange:#F47920; --black:#000000; --white:#FFFFFF;
  --walnut:#803600; --charcoal:#424242; --fog:#F4F4F4; --sand:#F0E9E3;
  --sky:#59B7D9; --sage:#5BAE91;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Red Hat Display', sans-serif; background:var(--sand); color:var(--black); min-height:100vh;}
a{color:inherit;}

/* ===== TOP BAR ===== */
.topbar{background:var(--black); color:var(--white); padding:18px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:34px; height:34px; background:var(--orange); border-radius:4px; display:flex;align-items:center;justify-content:center; font-weight:900; font-size:16px; color:var(--black); flex-shrink:0;}
.brand-text{font-weight:700; font-size:18px;}
.brand-sub{font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--orange); margin-top:1px;}
.rep-select{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.rep-select input, .rep-select select{background:#1a1a1a; border:1px solid #333; color:var(--white); padding:9px 14px; border-radius:6px; font-family:inherit; font-size:14px; width:200px;}
.rep-select input:focus, .rep-select select:focus{outline:2px solid var(--orange);}
.rep-badge{background:var(--orange); color:var(--black); font-weight:700; font-size:13px; padding:8px 14px; border-radius:6px; white-space:nowrap;}
.nav-link{background:none; border:1px solid #444; color:#ccc; font-family:inherit; font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:6px; cursor:pointer; text-decoration:none; display:inline-block;}
.nav-link:hover{border-color:var(--orange); color:var(--orange);}
.welcome-banner{display:none; margin-top:16px; background:rgba(244,121,32,0.1); border:1px solid rgba(244,121,32,0.35); border-radius:10px; padding:14px 18px; font-size:13.5px; color:#f0d9c8;}
.welcome-banner.show{display:block;}
.welcome-banner strong{color:var(--orange);}

/* ===== HERO / PLANK LINE ===== */
.hero{padding:44px 32px 30px; background:linear-gradient(180deg, #111 0%, #1c1c1c 100%); color:var(--white);}
.hero-inner{max-width:1180px; margin:0 auto;}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--orange); margin-bottom:10px;}
.hero-title{font-size:36px; font-weight:900; line-height:1.05; margin-bottom:8px; max-width:640px;}
.hero-sub{font-size:15px; color:#c9c9c9; max-width:600px; margin-bottom:20px;}
.plankline-label{display:flex; justify-content:space-between; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#999; margin-bottom:10px;}
.plankline-label span.count{color:var(--orange);}
.plankline{display:flex; gap:4px; height:64px; border-radius:6px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.4);}
.plank{flex:1; position:relative; background:#2a2a2a; border-right:2px solid #151515; cursor:pointer; transition:transform .25s ease; overflow:hidden;}
.plank:last-child{border-right:none;}
.plank:hover{transform:translateY(-4px);}
.plank-fill{position:absolute; inset:0; transform:translateX(-100%); transition:transform .9s cubic-bezier(.2,.8,.2,1); background:repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 6px), linear-gradient(100deg, #C96A2E 0%, #A6531F 45%, #803600 100%);}
.plank.done .plank-fill{transform:translateX(0%);}
.plank-grain{position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 14px); mix-blend-mode:multiply; opacity:.5;}
.plank-tip{position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#eee; opacity:0; transition:opacity .2s; pointer-events:none;}
.plank:hover .plank-tip{opacity:1;}
.plank.locked{background:#232323;}
.plank.locked .plank-tip{color:#666;}
.sync-badge{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:#9fd6b8; background:rgba(91,174,145,0.12); border:1px solid rgba(91,174,145,0.3); padding:5px 11px; border-radius:20px; margin-top:14px;}
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--sage);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ===== MAIN ===== */
main{max-width:1180px; margin:0 auto; padding:38px 32px 80px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:8px;}
.section-title{font-size:22px; font-weight:800;}
.section-note{font-size:13px; color:var(--charcoal); font-weight:500;}
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-bottom:44px;}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.grid{grid-template-columns:1fr;}}
.card{background:var(--white); border-radius:10px; padding:22px; box-shadow:0 2px 10px rgba(0,0,0,0.06); border:1px solid #eee6dc; position:relative; transition:transform .2s ease, box-shadow .2s ease; cursor:pointer;}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.12);}
.card-tag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 9px; border-radius:20px; margin-bottom:12px;}
.tag-product{background:#FCE7D6; color:var(--walnut);}
.tag-concept{background:#DDF0EC; color:#2f7a63;}
.tag-objection{background:#DFF0F7; color:#2b6f89;}
.tag-install{background:#E7EEFA; color:#33517a;}
.card-title{font-size:17px; font-weight:800; margin-bottom:5px;}
.card-desc{font-size:13.5px; color:var(--charcoal); line-height:1.4; margin-bottom:16px; min-height:38px;}
.ring-row{display:flex; align-items:center; justify-content:space-between;}
.ring{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:conic-gradient(var(--sage) calc(var(--pct)*1%), #eee 0); position:relative;}
.ring::before{content:""; position:absolute; inset:4px; background:var(--white); border-radius:50%;}
.ring span{position:relative; z-index:1;}
.start-btn{background:var(--black); color:var(--white); font-weight:700; font-size:12px; letter-spacing:.5px; text-transform:uppercase; padding:10px 16px; border-radius:6px; border:none; cursor:pointer;}
.card:hover .start-btn{background:var(--orange); color:var(--black);}

/* ===== PRODUCT LIBRARY ===== */
.lib-controls{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; align-items:center;}
.lib-controls select, .lib-controls input{font-family:inherit; font-size:13px; padding:9px 12px; border-radius:7px; border:1px solid #ddd0c2; background:var(--white); color:var(--black);}
.lib-controls label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--charcoal); display:block; margin-bottom:4px;}
.lib-field{display:flex; flex-direction:column;}
.lib-count{font-size:12.5px; color:var(--charcoal); margin-left:auto;}
.lib-table-wrap{overflow-x:auto; background:var(--white); border-radius:10px; border:1px solid #eee6dc;}
table.lib-table{width:100%; border-collapse:collapse; font-size:13px; min-width:820px;}
.lib-table th{position:sticky; top:0; background:var(--fog); text-align:left; padding:10px 14px; font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--charcoal); cursor:pointer; white-space:nowrap;}
.lib-table th:hover{color:var(--orange);}
.lib-table td{padding:10px 14px; border-bottom:1px solid #f2ede6; white-space:nowrap;}
.lib-table tr:hover td{background:#FFF8F2;}
.group-header td{background:var(--walnut); color:var(--white); font-weight:800; font-size:12.5px; letter-spacing:.5px; text-transform:uppercase; padding:8px 14px;}
.pill{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700;}
.pill-value{background:#DDF0EC; color:#2f7a63;}
.pill-mid{background:#E7EEFA; color:#33517a;}
.pill-premium{background:#FFF3E0; color:#a86414;}
.pill-luxury{background:#FCE7D6; color:var(--walnut);}
.pill-narrow, .pill-standard, .pill-wide, .pill-extra-wide{background:var(--fog); color:var(--charcoal);}

/* ===== QUIZ OVERLAY ===== */
.overlay{position:fixed; inset:0; background:rgba(20,15,10,0.7); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.overlay.active{display:flex;}
.quiz-card{width:100%; max-width:620px; background:var(--white); border-radius:14px; padding:36px; position:relative;}
.quiz-progress{display:flex; gap:5px; margin-bottom:22px;}
.quiz-progress i{flex:1; height:5px; border-radius:3px; background:#eee;}
.quiz-progress i.on{background:var(--orange);}
.quiz-close{position:absolute; top:18px; right:20px; background:none; border:none; font-size:20px; cursor:pointer; color:var(--charcoal);}
.q-module{font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); margin-bottom:10px;}
.q-text{font-size:20px; font-weight:800; line-height:1.3; margin-bottom:22px;}
.options{display:flex; flex-direction:column; gap:10px;}
.opt{text-align:left; padding:14px 16px; border:2px solid #eee; border-radius:8px; background:var(--white); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:all .15s;}
.opt:hover{border-color:var(--orange); background:#FFF8F2;}
.opt.correct{border-color:var(--sage); background:#EAF7F2; color:#1f6b52;}
.opt.wrong{border-color:#d9534f; background:#FBEAEA; color:#a83430;}
.opt:disabled{cursor:default;}
.feedback{margin-top:16px; font-size:13.5px; line-height:1.5; color:var(--charcoal); background:var(--fog); padding:12px 14px; border-radius:8px; display:none;}
.feedback.show{display:block;}
.next-row{margin-top:20px; display:flex; justify-content:flex-end;}
.next-btn{background:var(--orange); color:var(--black); border:none; font-weight:800; font-size:13px; letter-spacing:.5px; text-transform:uppercase; padding:12px 22px; border-radius:7px; cursor:pointer; display:none;}
.next-btn.show{display:inline-block;}
.result-view{display:none; text-align:center;}
.result-view.show{display:block;}
.result-score{font-size:56px; font-weight:900; color:var(--walnut); margin:8px 0;}
.result-label{font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--charcoal);}
.result-msg{font-size:14.5px; color:var(--charcoal); margin:14px 0 24px; max-width:420px; margin-left:auto; margin-right:auto;}
.result-btn{background:var(--black); color:var(--white); border:none; font-weight:700; font-size:13px; letter-spacing:.5px; text-transform:uppercase; padding:12px 24px; border-radius:7px; cursor:pointer;}

/* ===== ADMIN ===== */
.admin-stats{display:flex; gap:14px; margin-bottom:26px; flex-wrap:wrap;}
.stat-box{flex:1; min-width:140px; background:var(--white); border:1px solid #eee6dc; border-radius:10px; padding:16px 18px;}
.stat-num{font-size:26px; font-weight:900; color:var(--walnut);}
.stat-label{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--charcoal); margin-top:2px;}
table.admin-table{width:100%; border-collapse:collapse; font-size:13.5px; background:var(--white); border-radius:10px; overflow:hidden;}
.admin-table th{text-align:left; padding:10px 14px; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--charcoal); border-bottom:2px solid var(--fog); background:var(--fog);}
.admin-table td{padding:11px 14px; border-bottom:1px solid #f2ede6;}
.admin-table tr:hover td{background:#FFF8F2;}
.score-pill{display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700;}
.score-hi{background:#EAF7F2; color:#1f6b52;}
.score-mid{background:#FFF3E0; color:#a86414;}
.score-lo{background:#FBEAEA; color:#a83430;}
.empty-state{text-align:center; padding:50px 20px; color:var(--charcoal); font-size:14px; background:var(--white); border-radius:10px; border:1px solid #eee6dc;}
.trend-row{display:flex; align-items:flex-end; gap:3px; height:40px;}
.trend-bar{width:6px; background:var(--sky); border-radius:2px 2px 0 0; min-height:2px;}

/* toast */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--black); color:var(--white); padding:12px 20px; border-radius:8px; font-size:13px; font-weight:600; opacity:0; transition:all .3s; pointer-events:none; z-index:200;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}