/* Sales OS design · public tour and sample report (preview.php). Part of the design/ folder. */
:root{--navy:#0F1929;--green:#10B981;--g2:#0E7A5F;--line:#E3E8EF;--mute:#64748B;--bg:#F4F6FA;--amber:#B45309}
*{box-sizing:border-box}body{margin:0;font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;background:var(--bg);color:var(--navy);font-size:15px;line-height:1.7}
a{color:var(--g2)}.wrap{max-width:1120px;margin:0 auto;padding:18px 16px 40px}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;text-decoration:none;color:var(--navy)}
.logo i{width:38px;height:38px;border-radius:11px;background:var(--navy);color:var(--green);display:grid;place-items:center;font-style:normal}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy);font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.btn.pri{background:var(--navy);color:#fff;border-color:var(--navy)}.btn.go{background:var(--green);border-color:var(--green);color:#06281f}
.tabs{display:flex;gap:6px;margin:18px 0 14px;border-bottom:1px solid var(--line)}.tabs a{padding:10px 14px;text-decoration:none;color:var(--mute);font-weight:700;border-bottom:3px solid transparent}.tabs a.on{color:var(--navy);border-color:var(--green)}
.note{font-size:12.5px;color:var(--mute);background:#fff;border:1px dashed var(--line);border-radius:10px;padding:6px 10px;display:inline-block}
/* tour */
.tour{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}
.step-n{font-size:12px;color:var(--mute);font-weight:700}.step-t{font-size:21px;font-weight:800;margin:4px 0 8px}.step-d{color:#334155}
.dots{display:flex;gap:6px;margin:14px 0}.dots button{width:10px;height:10px;border-radius:50%;border:0;background:#CBD5E1;cursor:pointer;padding:0}.dots button.on{background:var(--green);width:26px;border-radius:6px}
.nav{display:flex;gap:8px}.app{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:190px 1fr;min-height:470px;box-shadow:0 20px 50px rgba(15,25,41,.08)}
.side{background:var(--navy);color:#CBD5E1;padding:14px 10px;font-size:13.5px}.side b{display:block;color:#fff;font-size:16px;margin:0 6px 12px}.side div{padding:8px 10px;border-radius:10px;margin:2px 0}.side div.on{background:#163a36;color:#fff}
.main{padding:16px;position:relative}.mh{font-weight:800;font-size:18px;margin-bottom:10px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.c{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}.c b{font-size:24px;display:block}.c span{font-size:12.5px;color:var(--mute)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.chip{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 9px}.chip.g{color:var(--g2);border-color:#9FDCC6;background:#E7F7F0}.chip.a{color:var(--amber);border-color:#F0CF8E;background:#FFF6E3}
.li{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0}
.mini{font-size:12.5px;color:var(--mute)}.msg{border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13.5px;background:#FBFCFE}
.hl{position:relative;outline:3px solid var(--green);outline-offset:3px;border-radius:12px;animation:pulse 1.6s ease-in-out infinite}
.hl::after{content:attr(data-tip);position:absolute;inset-inline-start:0;top:calc(100% + 10px);background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:9px;white-space:nowrap;z-index:2}
@keyframes pulse{0%,100%{outline-color:var(--green)}50%{outline-color:rgba(16,185,129,.35)}}
@media (prefers-reduced-motion:reduce){.hl{animation:none}}
.scr{display:none}.scr.on{display:block}
/* sample report */
.rep{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;max-width:860px;margin:0 auto}.rep h2{font-size:16px;margin:18px 0 8px;border-bottom:1px solid var(--line);padding-bottom:6px}
.k6{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.k6 div{border:1px solid var(--line);border-radius:10px;padding:8px}.k6 span{display:block;font-size:11px;color:var(--mute)}.k6 b{font-size:16px}.k6 .dec{background:var(--green);color:#fff;border-color:var(--green)}.k6 .dec span{color:#E7F7F0}
.gate{background:#E7F7F0;border:1px solid #9FDCC6;color:#0E5A45;border-radius:10px;padding:8px 12px;margin:10px 0;font-weight:700}
.nba{background:var(--navy);color:#fff;border-radius:10px;padding:10px 12px;font-size:14px}.ev{font-size:12px;color:#475569}.inf{font-size:12px;color:var(--amber)}
.lv{font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;border:1px solid;margin-inline-start:6px}.lv.v{color:var(--g2);border-color:#9FDCC6;background:#E7F7F0}.lv.l{color:#9A5B00;border-color:#F0CF8E;background:#FFF6E3}
.verify{border:1px dashed #F0CF8E;background:#FFFBF2;border-radius:10px;padding:10px 12px}
table{width:100%;border-collapse:collapse;font-size:13.5px}td,th{border-bottom:1px solid var(--line);padding:7px 6px;text-align:start}
.cta{margin:22px auto 0;max-width:860px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:16px;padding:16px 18px}
@media (max-width:900px){.tour{grid-template-columns:1fr}.app{grid-template-columns:1fr}.side{display:none}.cards{grid-template-columns:repeat(3,1fr)}.k6{grid-template-columns:repeat(3,1fr)}.hl::after{white-space:normal;max-width:220px}}