/* Star Relay Systems: CRM design v2 ("srs-ui"). One look for all four CRMs; each plan has its own accent colour. */

/* ---------- tokens ---------- */
html{--accent:var(--accent-override,#0FA89A); --on-accent:#fff; --accent-soft:rgba(15,168,154,.13);}
html[data-product="lead_pipeline"]{--accent:var(--accent-override,#2F6BFF); --accent-soft:rgba(47,107,255,.13);}
html[data-product="lead_team"]{--accent:var(--accent-override,#0FA89A); --accent-soft:rgba(15,168,154,.13);}
html[data-product="lead_suite"]{--accent:var(--accent-override,#7C5CFA); --accent-soft:rgba(124,92,250,.14);}
html[data-product="meridian"]{--accent:var(--accent-override,#C48A1E); --accent-soft:rgba(196,138,30,.15); --on-accent:#1B1405;}
html[data-theme="light"]{
  --bg:#EEF1F6; --surface:#FFFFFF; --surface-2:#F3F5F9; --border:#DEE4EC;
  --text:#0F172A; --muted:#64748B; --rail:#0B1220; --rail-muted:#8A97AE; --rail-hover:rgba(255,255,255,.07);
  --hot:#E5533C; --hot-bg:rgba(229,83,60,.11); --warm:#B9770A; --warm-bg:rgba(245,165,36,.17);
  --cold:#2B6FD6; --cold-bg:rgba(59,130,246,.12); --won:#17996A; --won-bg:rgba(34,181,115,.13);
  --creator:#6B4FC0; --creator-bg:rgba(107,79,192,.12);
  --shadow:0 1px 2px rgba(15,23,42,.05),0 10px 28px rgba(15,23,42,.05); --ring:color-mix(in srgb,var(--accent) 32%,transparent);
  --gold:var(--accent); --gold-dark:var(--accent);
}
html[data-theme="dark"]{
  --bg:#0A0F18; --surface:#111826; --surface-2:#182131; --border:#223046;
  --text:#E7ECF5; --muted:#8D9AB0; --rail:#060A11; --rail-muted:#7F8CA3; --rail-hover:rgba(255,255,255,.06);
  --hot:#F0735E; --hot-bg:rgba(240,115,94,.15); --warm:#F2B04A; --warm-bg:rgba(242,176,74,.15);
  --cold:#6CA8F0; --cold-bg:rgba(108,168,240,.15); --won:#4CC38F; --won-bg:rgba(76,195,143,.15);
  --creator:#A995F2; --creator-bg:rgba(169,149,242,.16);
  --shadow:none; --ring:color-mix(in srgb,var(--accent) 40%,transparent);
  --gold:var(--accent); --gold-dark:var(--accent);
}
html{--gold:var(--accent); --gold-dark:var(--accent);}

/* ---------- type ---------- */
body, .serif{font-family:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased;}
body{font-size:14px; line-height:1.5; letter-spacing:-.003em; background:var(--bg); color:var(--text);}
.num, .kpi .v, .value, td, th, .tabnum{font-variant-numeric:lining-nums tabular-nums;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
:root{--ico-logout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4'/%3E%3Cpath d='M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E");}

/* ---------- shared controls ---------- */
.btn-primary, .btn-save, .login-box button, .subscribe-box .btn-primary{background:var(--gold); color:var(--on-accent); border:none; border-radius:10px; font-weight:700; font-size:13.5px; min-height:40px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:filter .15s;}
.btn-primary:hover, .btn-save:hover, .login-box button:hover{filter:brightness(1.07);}
.btn-icon, .btn-cancel, .small-btn{background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:10px; font-weight:600; font-size:13px; min-height:40px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;}
.btn-icon:hover, .small-btn:hover{border-color:var(--muted);}
.small-btn{min-height:32px; padding:0 11px; font-size:12px; border-radius:8px;}
.small-btn.danger{color:var(--hot); border-color:transparent; background:var(--hot-bg);}
.btn-danger{background:var(--hot); border-radius:10px;}
.field label{font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted); margin-bottom:7px;}
input, select, textarea{font-family:inherit;}
.field input, .field select, input.search, .role-select, .modal input, .modal select, .modal textarea, .panel-box input, .panel-box select{background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:10px; font-size:14px; min-height:42px; padding:9px 13px;}
.field input:focus, .field select:focus, input.search:focus, .modal input:focus, .modal select:focus, .modal textarea:focus, .panel-box input:focus, .panel-box select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--ring);}
.role-select{min-height:32px; padding:4px 10px; font-size:12.5px; border-radius:8px;}
.tag{font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:0;}
.role-badge{font-size:10.5px; font-weight:700; letter-spacing:0; text-transform:none; padding:2px 9px; border-radius:999px; margin-top:3px;}

/* ---------- sign-in, sign-up, paywall ---------- */
#auth-screen, #subscribe-gate{background:var(--bg);}
.login-box, .subscribe-box{background:var(--surface); border:1px solid var(--border); border-radius:20px!important; box-shadow:var(--shadow);}
.login-box h1{font-size:26px; font-weight:800; letter-spacing:-.02em;}
.login-box p.sub{font-size:13.5px;}
.subscribe-box h1{font-size:24px; font-weight:800; letter-spacing:-.02em;}
.subscribe-box .price{font-size:40px; font-weight:800; letter-spacing:-.03em; margin:18px 0 12px;}
.btn-google{border-radius:10px; min-height:44px; background:var(--surface-2)!important; color:var(--text)!important; border:1px solid var(--border);}
.switch-link a{color:var(--gold); text-decoration:none; font-weight:600;}
.switch-link a:hover{text-decoration:underline;}



/* ---------- keep older per-page rules from leaking into the new shell ---------- */
h1,h2,h3,h4,h5,.display,.value,.stat .num,.panel-box h3,.modal h2,.login-box h1,.subscribe-box h1{font-family:inherit;}
.panel-box h3,.modal h2{letter-spacing:-.01em;}
#app.app{display:none;}
#app.app.visible{display:flex; min-height:100vh;}
header.topbar2{display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center; color:var(--text); background:var(--surface); padding:12px 28px; gap:20px;}
main.content{max-width:none; margin:0; padding:24px 28px 56px;}
.tabs{background:none; border-radius:0; flex-wrap:nowrap;}
.tab.active{box-shadow:none;}

/* ---------- shell: dark rail + light workspace ---------- */
.app.visible{display:flex; min-height:100vh;}
.rail{width:92px; flex:none; background:var(--rail); position:sticky; top:0; height:100vh; display:flex; flex-direction:column; align-items:center; padding:16px 0 12px; z-index:35;}
.rail-logo{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:15px; background:rgba(255,255,255,.08); margin-bottom:10px;}
.rail-logo img{width:30px; height:30px; object-fit:contain;}
.tabs{display:flex; flex-direction:column; gap:3px; width:100%; padding:6px 9px; overflow-y:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; min-height:62px; padding:9px 4px; border:none; border-radius:16px; background:none; color:var(--rail-muted); font-family:inherit; font-size:10.5px; font-weight:700; line-height:1.15; text-align:center; cursor:pointer; transition:background .15s,color .15s;}
.tab::before, .rail-more::before{content:""; width:22px; height:22px; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;}
.tab:hover{background:var(--rail-hover); color:#fff;}
.tab.active{background:var(--accent); color:var(--on-accent);}
.rail-more{display:none; flex-direction:column; align-items:center; gap:5px; border:none; background:none; color:var(--rail-muted); font-weight:700; font-size:10.5px; font-family:inherit; line-height:1.15; cursor:pointer;}

.main{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg);}
.topbar2{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:20px; padding:12px 28px; min-height:72px; background:var(--surface); border-bottom:1px solid var(--border);}
.tb-left{min-width:0; flex:none;}
.tb-eyebrow{font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;}
#page-title{margin:0; font-size:22px; font-weight:800; letter-spacing:-.025em; line-height:1.15;}
.tb-search{position:relative; flex:1 1 auto; max-width:480px; margin:0 auto;}
.tb-search input{width:100%; padding-left:42px; background-repeat:no-repeat; background-position:15px 50%; background-size:17px; border-radius:14px; min-height:46px; background-color:var(--bg);}
.tb-search kbd{position:absolute; right:12px; top:50%; transform:translateY(-50%); font-weight:700; font-size:11px; font-family:inherit; line-height:1; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:4px 7px;}
.tb-right{display:flex; align-items:center; gap:12px; margin-left:auto; flex:none;}
.tb-bell{position:relative; width:44px; height:44px; border-radius:14px; border:1px solid var(--border); background:var(--surface); color:var(--text); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}
.tb-bell:hover{border-color:var(--muted);}
.tb-bell .badge{position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--hot); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.tb-bell .badge[hidden]{display:none;}
#add-lead-btn{min-height:44px; border-radius:14px; padding:0 20px;}
.user-menu{position:relative;}
.user-card{display:flex; align-items:center; gap:10px; padding:5px 12px 5px 5px; min-height:46px; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--text); font-family:inherit; cursor:pointer; text-align:left;}
.user-card:hover{border-color:var(--muted);}
.user-card .avatar{width:36px; height:36px; font-size:13px; background:var(--accent); color:var(--on-accent);}
.user-card .name{font-size:13.5px; font-weight:800; line-height:1.2; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.user-card .role-badge{margin-top:1px;}
.um-pop{display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 18px 44px rgba(10,15,24,.22); padding:6px; z-index:60;}
.user-menu.open .um-pop{display:block;}
.um-item{display:flex; align-items:center; width:100%; min-height:42px; padding:0 12px; border:none; border-radius:10px; background:none; color:var(--text); font-weight:600; font-size:13.5px; font-family:inherit; cursor:pointer; text-align:left;}
.um-item:hover{background:var(--surface-2);}
.um-item.danger{color:var(--hot);}

.content{padding:24px 28px 56px;}
.content .view{padding:0;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:20px 22px; box-shadow:var(--shadow); min-width:0;}
.card h3{margin:0 0 14px; font-size:15px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.card h3 small{font-size:12px; font-weight:700; color:var(--muted);}
.link-btn{background:none; border:none; padding:0; color:var(--accent); font-weight:700; font-size:12.5px; font-family:inherit; cursor:pointer;}
.link-btn:hover{text-decoration:underline;}
.seg{display:inline-flex; padding:4px; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:14px;}
.seg button{border:none; background:none; color:var(--muted); font-weight:700; font-size:13px; font-family:inherit; min-height:34px; padding:0 14px; border-radius:10px; cursor:pointer;}
.seg button.on{background:var(--accent); color:var(--on-accent);}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:999px; background:var(--surface-2); color:var(--muted); white-space:nowrap;}
.chip.up{background:var(--won-bg); color:var(--won);} .chip.down{background:var(--hot-bg); color:var(--hot);}
.chip.hot{background:var(--hot-bg); color:var(--hot);} .chip.warm{background:var(--warm-bg); color:var(--warm);} .chip.cold{background:var(--cold-bg); color:var(--cold);}
.empty{padding:26px 10px; text-align:center; color:var(--muted); font-size:13.5px; line-height:1.55;}
.empty b{display:block; color:var(--text); font-size:14.5px; margin-bottom:4px;}
.locked{border:1.5px dashed var(--border); background:transparent; box-shadow:none;}
.locked .lk{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:18px 8px; color:var(--muted); font-size:13px;}
.locked .lk b{color:var(--text); font-size:14px;}

/* ---------- overview ---------- */
.ov-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px;}
.ov-head h2{margin:0; font-size:26px; font-weight:800; letter-spacing:-.03em;}
.ov-head p{margin:4px 0 0; color:var(--muted); font-size:14px;}
.ov-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;}
.kpi{padding:18px 20px;}
.kpi .k{font-size:13px; font-weight:700; color:var(--muted); display:flex; align-items:center; justify-content:space-between; gap:8px;}
.kpi .v{font-size:32px; font-weight:800; letter-spacing:-.035em; line-height:1.1; margin:8px 0 10px;}
.kpi .f{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); font-weight:600; min-height:24px;}
.kpi svg.spark{width:84px; height:30px; margin-left:auto; flex:none;}
.ov-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:14px;}
.span2{grid-column:span 2;}
.fn-row{display:grid; grid-template-columns:118px minmax(0,1fr) auto; align-items:center; gap:12px; padding:7px 0;}
.fn-row .l{font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; white-space:nowrap;}
.fn-row .dot{width:9px; height:9px; border-radius:50%; flex:none;}
.fn-track{height:12px; border-radius:999px; background:var(--surface-2); overflow:hidden;}
.fn-fill{height:100%; border-radius:999px;}
.fn-row .r{font-size:12.5px; color:var(--muted); font-weight:700; text-align:right; min-width:92px;}
.fn-row .r b{color:var(--text); font-size:13.5px; margin-right:6px;}
.donut-wrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.donut{width:150px; height:150px; flex:none; position:relative;}
.donut svg{width:100%; height:100%; transform:rotate(-90deg);}
.donut .mid{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:12px; color:var(--muted); font-weight:700;}
.donut .mid b{font-size:26px; color:var(--text); letter-spacing:-.03em; line-height:1.1;}
.legend{flex:1; min-width:140px; display:flex; flex-direction:column; gap:9px;}
.legend div{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600;}
.legend .sw{width:10px; height:10px; border-radius:3px; flex:none;}
.legend .n{margin-left:auto; color:var(--muted); font-weight:800; white-space:nowrap; padding-left:8px;}
.chart{width:100%; height:auto; display:block;}
.chart text{font:600 11px Manrope,system-ui,sans-serif; fill:var(--muted);}
.li{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); cursor:pointer;}
.li:last-child{border-bottom:none; padding-bottom:0;}
.li:first-child{padding-top:2px;}
.li .av{width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; background:var(--accent-soft); color:var(--accent);}
.li .t{min-width:0; flex:1;}
.li .t b{display:block; font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.li .t span{display:block; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.li .m{text-align:right; font-size:12px; color:var(--muted); font-weight:700; flex:none;}
.li .m b{display:block; color:var(--text); font-size:13.5px;}
.lb-bar{height:6px; border-radius:999px; background:var(--surface-2); margin-top:6px; overflow:hidden;}
.lb-bar i{display:block; height:100%; background:var(--accent); border-radius:999px;}

/* ---------- leads: board and list ---------- */
.lv-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.lv-bar select{min-height:40px; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:12px; padding:0 12px; font-weight:600; font-size:13px; font-family:inherit;}
.lv-bar .sp{flex:1;}
#view-board .stats{display:none;}
.board{background:transparent; display:grid; grid-template-columns:repeat(5,minmax(230px,1fr)); gap:14px; margin:0; overflow-x:auto; padding-bottom:8px;}
.column{background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:14px 12px 6px; min-height:240px; --stage:var(--cold);}
.board .column:nth-child(1){--stage:var(--cold);} .board .column:nth-child(2){--stage:var(--creator);} .board .column:nth-child(3){--stage:var(--warm);} .board .column:nth-child(4){--stage:var(--won);} .board .column:nth-child(5){--stage:var(--muted);}
.column h3{display:flex; align-items:center; gap:8px; margin:2px 4px 12px; font-size:13.5px; font-weight:800; letter-spacing:0; text-transform:none; color:var(--text);}
.column h3::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--stage); flex:none;}
.column h3 .count{margin-left:auto; min-width:26px; text-align:center; font-size:12px; font-weight:800; color:var(--muted); background:var(--surface); border-radius:999px; padding:2px 9px;}
.column.dragover{border-color:var(--stage); background:var(--surface);}
.lead-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:13px 14px; margin-bottom:10px; box-shadow:var(--shadow); cursor:grab; transition:border-color .15s;}
.lead-card:hover{border-color:var(--stage);}
.card-top{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.card-top .avatar{width:36px; height:36px; font-size:12px; flex:none;}
.card-top > div:not(.avatar){min-width:0; flex:1;}
.card-top .name{font-size:14px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.card-top .contact{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.card-bottom{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.value{font-size:13.5px; font-weight:800; margin-left:auto; white-space:nowrap; color:var(--text);}
.assignee{flex-basis:100%; font-size:11.5px; color:var(--muted); padding-top:9px; border-top:1px solid var(--border);}
.empty-col{font-size:12.5px; color:var(--muted); border:1.5px dashed var(--border); border-radius:14px; padding:22px 8px; text-align:center;}
.lv-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.lv-table th{cursor:pointer; user-select:none; white-space:nowrap;}
.lv-table tbody tr{cursor:pointer;}
.lv-table td.v{font-weight:800;}

/* ---------- follow-ups ---------- */
.fu-group{margin-bottom:18px;}
.fu-group h4{margin:0 0 8px; font-size:13px; font-weight:800; color:var(--muted); display:flex; align-items:center; gap:8px;}
.fu-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:16px; margin-bottom:8px;}
.fu-row .t{flex:1 1 220px; min-width:0; cursor:pointer;}
.fu-row .t b{display:block; font-size:14px; font-weight:800;}
.fu-row .t span{display:block; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fu-row .acts{display:flex; gap:6px; flex-wrap:wrap;}
.fu-row.over{border-color:color-mix(in srgb,var(--hot) 45%,var(--border));}

/* ---------- lead sources (integrations) ---------- */
.src-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px;}
.src{display:flex; flex-direction:column; gap:12px;}
.src .top{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.src .top b{font-size:15.5px; font-weight:800;}
.src .meta{font-size:12.5px; color:var(--muted); font-weight:600;}
.code{position:relative; background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:12px 14px; font:500 12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--text); white-space:pre-wrap; word-break:break-all; max-height:210px; overflow:auto;}
.code-row{display:flex; gap:8px; align-items:stretch;}
.code-row .code{flex:1; min-width:0; padding-right:14px; max-height:none; white-space:nowrap; overflow:auto; word-break:normal;}
.howto{font-size:13px; color:var(--muted); line-height:1.6;}
.howto b{color:var(--text);}
details.d{border-top:1px solid var(--border); padding-top:10px;}
details.d summary{cursor:pointer; font-weight:800; font-size:13px; list-style:none; display:flex; align-items:center; justify-content:space-between;}
details.d summary::-webkit-details-marker{display:none;}
details.d summary::after{content:"+"; color:var(--muted); font-size:18px; line-height:1;}
details.d[open] summary::after{content:"\2013";}
.add-src{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;}
.add-src .field{margin:0; flex:1 1 180px;}

/* ---------- tables, panels, modals ---------- */
.panel-box{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:22px 24px; box-shadow:var(--shadow);}
.panel-box h3{font-size:16px; font-weight:800; letter-spacing:-.01em; margin-bottom:14px;}
table{font-size:13.5px;}
th{font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--muted); padding:10px 12px;}
td{padding:12px; border-bottom:1px solid var(--border);}
tbody tr:hover td{background:var(--surface-2);}
.overlay{background:rgba(6,9,14,.62);}
.modal{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px; box-shadow:0 24px 60px rgba(0,0,0,.35);}
.modal h2{font-size:20px; font-weight:800; letter-spacing:-.02em;}
.toggle-row, .my-leads-row{border-bottom-color:var(--border);}
.section-label{font-size:12px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--muted);}


.panel-box{border-radius:22px;}

/* ---------- phones: rail becomes a bottom bar ---------- */
@media (max-width:1100px){ .ov-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .span2{grid-column:span 2;} .tb-search{max-width:320px;} }
@media (max-width:860px){ .user-card .uc-text{display:none;} .user-card{padding:4px;} .tb-eyebrow{display:none;} }
@media (max-width:760px){
  #app.app.visible{display:block; min-height:100vh;}
  header.topbar2{flex-wrap:wrap; gap:10px 12px; padding:10px 16px 12px;}
  main.content{padding:16px 16px 120px;}
  .rail{position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; height:auto; flex-direction:row; align-items:stretch; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); z-index:50; border-top:1px solid rgba(255,255,255,.08);}
  .rail-logo{display:none;}
  .tabs{flex-direction:row; padding:0; gap:2px; overflow:visible; flex:1;}
  .tab{flex:1 1 0; min-width:0; min-height:54px; padding:5px 2px; font-size:10px; border-radius:14px;}
  .tab:not([data-pri="1"]){display:none!important;}
  .tab{white-space:nowrap; letter-spacing:-.01em;}
  .tab::before, .rail-more::before{width:21px; height:21px;}
  .rail-more{display:flex; flex:0 0 58px; align-items:center; justify-content:center; min-height:54px; border-radius:14px;}
  .rail.sheet-open .rail-more{background:var(--rail-hover); color:#fff;}
  .more-sheet{position:fixed; left:10px; right:10px; bottom:calc(76px + env(safe-area-inset-bottom,0px)); z-index:49; background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:0 20px 50px rgba(0,0,0,.4); padding:8px; display:none;}
  .more-sheet.open{display:block;}
  .more-sheet button{display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:0 14px; border:none; border-radius:14px; background:none; color:var(--text); font-weight:700; font-size:14.5px; font-family:inherit; cursor:pointer; text-align:left;}
  .more-sheet button:hover{background:var(--surface-2);}
  .more-sheet button.on{background:var(--accent-soft); color:var(--accent);}
  .topbar2{flex-wrap:wrap; gap:10px 12px; padding:10px 16px 12px; min-height:0;}
  .tb-left{flex:1;}
  #page-title{font-size:20px;}
  .tb-search{order:3; flex:1 1 100%; max-width:none; margin:0;}
  .tb-search kbd{display:none;}
  .tb-right{margin-left:0; gap:8px;}
  #add-lead-btn{position:fixed; right:16px; bottom:calc(86px + env(safe-area-inset-bottom,0px)); z-index:48; min-height:50px; padding:0 22px; border-radius:999px; box-shadow:0 10px 28px rgba(0,0,0,.35);}
  .content{padding:16px 16px 120px;}
  .ov-head h2{font-size:22px;}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .kpi{padding:14px 15px;}
  .kpi .v{font-size:25px;}
  .kpi svg.spark{display:none;}
  .ov-grid{grid-template-columns:minmax(0,1fr); gap:12px;}
  .span2{grid-column:auto;}
  .fn-row{grid-template-columns:96px minmax(0,1fr) auto;}
  .fn-row .r{min-width:64px;} .fn-row .r span{display:none;}
  .card{padding:16px; border-radius:20px;}
  .board{display:flex!important; gap:12px; margin:0 -16px; padding:0 16px 8px; overflow-x:auto; scroll-snap-type:x mandatory;}
  .column{flex:0 0 84%; scroll-snap-align:start; min-height:200px;}
  .lv-bar .sp{display:none;}
  .lv-table thead{display:none;}
  .lv-table, .lv-table tbody, .lv-table tr, .lv-table td{display:block; width:100%;}
  .lv-table tr{padding:12px 0; border-bottom:1px solid var(--border);}
  .lv-table td{border:none; padding:2px 0;}
  .src-grid{grid-template-columns:minmax(0,1fr);}
  .add-user-row{grid-template-columns:1fr!important;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ---------- icons (drawn with CSS, no extra files) ---------- */
.tab[data-view="overview"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='9' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='5.5' rx='2'/%3E%3Crect x='13.5' y='11.5' width='7.5' height='9.5' rx='2'/%3E%3Crect x='3' y='15' width='7.5' height='6' rx='2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='9' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='5.5' rx='2'/%3E%3Crect x='13.5' y='11.5' width='7.5' height='9.5' rx='2'/%3E%3Crect x='3' y='15' width='7.5' height='6' rx='2'/%3E%3C/svg%3E");}
.tab[data-view="board"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='5' height='16' rx='1.6'/%3E%3Crect x='9.5' y='4' width='5' height='10' rx='1.6'/%3E%3Crect x='16' y='4' width='5' height='13' rx='1.6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='5' height='16' rx='1.6'/%3E%3Crect x='9.5' y='4' width='5' height='10' rx='1.6'/%3E%3Crect x='16' y='4' width='5' height='13' rx='1.6'/%3E%3C/svg%3E");}
.tab[data-view="followups"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");}
.tab[data-view="calendar"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");}
.tab[data-view="integrations"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 14.5l5-5'/%3E%3Cpath d='M11 6.5l1.2-1.2a3.6 3.6 0 015.1 5.1L16 11.7'/%3E%3Cpath d='M13 17.5l-1.2 1.2a3.6 3.6 0 01-5.1-5.1L8 12.3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 14.5l5-5'/%3E%3Cpath d='M11 6.5l1.2-1.2a3.6 3.6 0 015.1 5.1L16 11.7'/%3E%3Cpath d='M13 17.5l-1.2 1.2a3.6 3.6 0 01-5.1-5.1L8 12.3'/%3E%3C/svg%3E");}
.tab[data-view="profile"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");}
.tab[data-view="notes"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 12h7M9 16h7'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 12h7M9 16h7'/%3E%3C/svg%3E");}
.tab[data-view="team"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.5 3-5.5 6.5-5.5s6.5 2 6.5 5.5'/%3E%3Ccircle cx='17.5' cy='9' r='2.5'/%3E%3Cpath d='M17 14.5c3 0 4.5 1.8 4.5 4.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.5 3-5.5 6.5-5.5s6.5 2 6.5 5.5'/%3E%3Ccircle cx='17.5' cy='9' r='2.5'/%3E%3Cpath d='M17 14.5c3 0 4.5 1.8 4.5 4.5'/%3E%3C/svg%3E");}
.tab[data-view="admin"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E");}
.tab[data-view="finance"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='3'/%3E%3Cpath d='M3 10h18'/%3E%3Ccircle cx='16.5' cy='14.5' r='1.2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='3'/%3E%3Cpath d='M3 10h18'/%3E%3Ccircle cx='16.5' cy='14.5' r='1.2'/%3E%3C/svg%3E");}
.rail-more::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3C/svg%3E");}
.tb-search input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");}

/* ---------- v40: connect a source, goal gauge ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px;}
.tile{display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; padding:16px; border:1px solid var(--border); background:var(--surface); border-radius:16px; font:inherit; color:var(--text); cursor:pointer; transition:border-color .15s, transform .15s;}
.tile:hover:not(.locked):not(.other){border-color:var(--accent); transform:translateY(-1px);}
.tile b{font-size:14px; font-weight:800;}
.tile > span:not(.tic):not(.chip){font-size:12.5px; color:var(--muted); line-height:1.5;}
.tile .tic{width:40px; height:40px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:4px;}
.tile .tic svg{width:20px; height:20px;}
.tile.locked{cursor:default; opacity:.72; background:var(--surface-2);}
.tile.other{cursor:default; justify-content:center;}
.card.src.fresh{outline:2px solid var(--accent); outline-offset:2px;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.small-btn.primary{background:var(--accent); color:var(--on-accent); border-color:transparent;}
a.small-btn{text-decoration:none;}
.howto.ok{background:var(--won-bg); color:var(--won); border-radius:12px; padding:9px 12px; font-weight:600; margin:0;}
ol.steps{margin:10px 0 4px; padding-left:20px; font-size:13px; line-height:1.65; color:var(--muted);}
ol.steps li{margin-bottom:8px;} ol.steps b{color:var(--text);}
.gauge{display:block; width:100%; max-width:260px; margin:4px auto 0;}
.gauge-meta{text-align:center; font-size:13px; color:var(--muted); margin-top:-6px;}
.gauge-meta b{color:var(--text); font-size:18px; font-weight:800;}
.goal-set{display:flex; gap:8px; margin-top:14px;}
.goal-set input{flex:1; min-width:0; min-height:36px; border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:10px; padding:0 12px; font:inherit; font-size:13px;}

/* ---------- v42: QR code window ---------- */
.qr-modal{position:fixed; inset:0; z-index:200; background:rgba(6,9,14,.6); display:flex; align-items:center; justify-content:center; padding:20px;}
.qr-box{position:relative; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:22px; padding:26px; width:100%; max-width:380px; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.35);}
.qr-box h3{margin:0 0 6px; font-size:18px; font-weight:800;}
.qr-x{position:absolute; top:10px; right:14px; border:none; background:none; color:var(--muted); font-size:26px; line-height:1; cursor:pointer;}
.qr-img{background:#fff; border-radius:16px; padding:10px; margin:16px auto; width:max-content; max-width:100%;}
.qr-img svg{display:block; width:100%; max-width:260px; height:auto;}

/* ---------- v43: appearance panel (looks and dials) ---------- */
.lk-sec{font-size:12px; font-weight:700; color:var(--muted); margin:18px 0 10px; letter-spacing:.02em;}
.lk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px;}
.lk-preset{position:relative; display:flex; flex-direction:column; gap:7px; padding:8px 8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:14px; font:inherit; color:var(--text); text-align:left; cursor:pointer; transition:border-color .15s, transform .15s;}
.lk-preset:hover:not(:disabled){border-color:var(--muted); transform:translateY(-1px);}
.lk-preset.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}
.lk-preset:disabled{cursor:not-allowed; opacity:.55;}
.lk-name{font-size:12.5px; font-weight:700; padding:0 2px;}
.lk-lock{position:absolute; top:14px; right:14px; background:rgba(0,0,0,.6); color:#fff; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px;}
.lk-x{position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:15px; line-height:22px; text-align:center;}
.lk-thumb{position:relative; display:block; aspect-ratio:16/10; border-radius:9px; overflow:hidden; background:var(--p-bg); border:1px solid rgba(128,128,128,.28);}
.lk-thumb i{position:absolute; display:block;}
.lk-thumb .r{left:0; top:0; bottom:0; width:15%; background:var(--p-rail);}
.lk-thumb .b1{left:21%; top:14%; width:35%; height:30%; border-radius:4px; background:var(--p-surface);}
.lk-thumb .b2{left:60%; top:14%; width:30%; height:30%; border-radius:4px; background:var(--p-surface);}
.lk-thumb .b3{left:21%; top:52%; width:69%; height:34%; border-radius:4px; background:var(--p-surface);}
.lk-thumb .a{left:25%; top:63%; width:22%; height:6%; border-radius:3px; background:var(--accent);}
.lk-knobs{display:flex; gap:26px; flex-wrap:wrap;}
.knob{width:84px; text-align:center; cursor:ns-resize; touch-action:none; user-select:none; outline-offset:4px; border-radius:12px;}
.knob .k-dial svg{width:64px; height:64px; display:block; margin:0 auto 4px;}
.knob .k-label{display:block; font-size:12px; font-weight:700;}
.knob .k-val{display:block; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.knob.locked{cursor:not-allowed; opacity:.45;}
.lk-opts{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:20px;}
.lk-switch{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; cursor:pointer;}
.lk-switch input{width:18px; height:18px; accent-color:var(--accent);}
.lk-save{display:inline-flex; gap:8px; align-items:center;}
.lk-save input{min-height:36px; border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:10px; padding:0 12px; font:inherit; font-size:13px; width:150px;}

/* ---------- v44: simpler website embed, questions, quality, help, rail footer ---------- */
.snips{display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 6px;}
.snip{border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:999px; padding:7px 13px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;}
.snip.on{border-color:var(--accent); background:var(--accent-soft);}
.qual{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.qchip{font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px;}
.qchip.hot{background:var(--hot-bg); color:var(--hot);} .qchip.warm{background:var(--warm-bg); color:var(--warm);} .qchip.cold{background:var(--cold-bg); color:var(--cold);}
.qrow{border:1px solid var(--border); border-radius:14px; padding:12px; margin-bottom:10px; background:var(--surface-2);}
.qtop{display:grid; grid-template-columns:1fr 150px; gap:8px;}
.qrow input[type=text], .qrow input:not([type]), .qrow textarea, .qrow select{width:100%; min-height:40px; border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:10px; padding:8px 12px; font:inherit; font-size:13px;}
.qrow textarea{margin-top:8px; resize:vertical;}
.qbot{display:flex; justify-content:space-between; align-items:center; margin-top:8px; gap:8px;}
.chk{display:inline-flex; gap:8px; align-items:center; font-size:12.5px; font-weight:600; cursor:pointer;}
.chk input{width:16px; height:16px; accent-color:var(--accent);}
.faq p{margin:8px 0; font-size:13px; line-height:1.55; color:var(--muted);} .faq b{color:var(--text);}
ul.plain{margin:8px 0 4px; padding-left:20px; font-size:13.5px; line-height:1.7;}
@media (max-width:520px){ .qtop{grid-template-columns:1fr;} }
:root{--ico-help:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.6 2.2c-.8.4-1.1 1-1.1 1.8'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");}
.rail-foot{margin-top:auto; width:100%; padding:8px 9px 0; display:flex; flex-direction:column; gap:3px; border-top:1px solid rgba(255,255,255,.07);}
.rail-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; min-height:52px; padding:7px 4px; border:none; border-radius:14px; background:none; color:var(--rail-muted); font-family:inherit; font-size:10.5px; font-weight:700; line-height:1.15; cursor:pointer; transition:background .15s,color .15s;}
.rail-btn::before{content:""; width:20px; height:20px; background-color:currentColor; -webkit-mask:var(--ico-help) center/contain no-repeat; mask:var(--ico-help) center/contain no-repeat;}
.rail-btn.logout::before{-webkit-mask-image:var(--ico-logout); mask-image:var(--ico-logout);}
.rail-btn:hover{background:var(--rail-hover); color:#fff;}
.rail-btn.logout:hover{color:#ff9a8a;}
@media (max-width:760px){ .rail-foot{display:none;} }
/* help assistant */
.hp-back{position:fixed; inset:0; z-index:190; background:rgba(6,9,14,.45);}
.hp{position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); z-index:191; background:var(--surface); color:var(--text); border-left:1px solid var(--border); display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(0,0,0,.25);}
.hp-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border);}
.hp-head b{font-size:16px; font-weight:800;} .hp-head small{display:block; color:var(--muted); font-size:12px; font-weight:600; margin-top:2px;}
.hp-x{border:none; background:none; color:var(--muted); font-size:26px; line-height:1; cursor:pointer;}
.hp-log{flex:1; overflow:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px;}
.hp-msg{max-width:92%; padding:11px 14px; border-radius:16px; font-size:13.5px; line-height:1.55;}
.hp-msg.bot{background:var(--surface-2); border-top-left-radius:6px; align-self:flex-start;}
.hp-msg.me{background:var(--accent-soft); align-self:flex-end; border-top-right-radius:6px; font-weight:600;}
.hp-msg ol{margin:8px 0 0; padding-left:20px;} .hp-msg li{margin-bottom:5px;}
.hp-chips{display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 12px;}
.hp-chip{border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:999px; padding:8px 13px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;}
.hp-chip:hover{border-color:var(--accent);}
.hp-act{display:inline-block; margin:10px 8px 0 0; padding:8px 14px; border-radius:10px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:13px; border:none; cursor:pointer; text-decoration:none;}
.hp-act.alt{background:var(--surface); color:var(--text); border:1px solid var(--border);}
.hp-in{display:flex; gap:8px; padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--border);}
.hp-in input{flex:1; min-width:0; min-height:44px; border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:12px; padding:0 14px; font:inherit; font-size:14px;}
.hp-in button{min-height:44px; border:none; border-radius:12px; background:var(--accent); color:var(--on-accent); font:inherit; font-weight:800; padding:0 16px; cursor:pointer;}
.hp-foot{padding:0 18px 14px; font-size:12px; color:var(--muted);} .hp-foot a{color:var(--text); font-weight:700;}
@media (max-width:760px){ .hp{top:auto; left:0; right:0; width:auto; height:84vh; border-left:none; border-top:1px solid var(--border); border-radius:20px 20px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.3);} }