/* Star Relay Systems: shared CRM design layer (v38). Loaded after each page's own styles, so it restyles the existing markup. */

/* ---------- tokens ---------- */
html[data-theme="dark"]{
  --bg:#0E131A; --surface:#151C26; --surface-2:#1D2634; --border:#273244;
  --text:#E9EEF5; --muted:#8E9BB0; --gold:var(--accent-override,#C9A25B); --gold-dark:#B58C45;
  --hot:#EE7A63; --hot-bg:rgba(238,122,99,.14); --warm:#E7B04A; --warm-bg:rgba(231,176,74,.14);
  --cold:#6CB0E6; --cold-bg:rgba(108,176,230,.14); --won:#52BB8C; --won-bg:rgba(82,187,140,.14);
  --creator:#A995F2; --creator-bg:rgba(169,149,242,.16);
  --shadow:none; --ring:rgba(201,162,91,.45);
}
html[data-theme="light"]{
  --bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#EEF1F6; --border:#DCE2EB;
  --text:#111924; --muted:#5B6779; --gold:var(--accent-override,#9C762B); --gold-dark:#835F1F;
  --hot:#C2452F; --hot-bg:rgba(194,69,47,.10); --warm:#9A6B0B; --warm-bg:rgba(154,107,11,.12);
  --cold:#2B6FA8; --cold-bg:rgba(43,111,168,.10); --won:#2B8A5E; --won-bg:rgba(43,138,94,.11);
  --creator:#6B4FC0; --creator-bg:rgba(107,79,192,.11);
  --shadow:0 1px 2px rgba(17,25,36,.05), 0 6px 18px rgba(17,25,36,.05); --ring:rgba(156,118,43,.35);
}

/* ---------- 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;}
.stat .num, .value, .subscribe-box .price, td, th{font-variant-numeric:lining-nums tabular-nums;}
.brand h1, .login-box h1, .subscribe-box h1, .modal h2, .panel-box h3, .stat .num, .value{font-family:inherit;}
: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");}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* ---------- shared controls ---------- */
.btn-primary, .btn-save, .login-box button, .subscribe-box .btn-primary{background:var(--gold); color:#14110B; 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;}

/* ---------- app shell ---------- */
.app .sidebar{width:248px; background:var(--surface); border-right:1px solid var(--border); padding:22px 16px; gap:18px;}
.app .brand h1{font-size:17px; font-weight:800; letter-spacing:-.02em; margin:0;}
.app .brand p{font-size:11.5px; color:var(--muted); font-style:normal; margin-top:2px;}
.app .user-card{background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:11px 12px;}
.app .avatar{background:var(--gold); color:#14110B; font-weight:800;}
.app .user-card .name{font-size:13.5px; font-weight:700;}
.app .tabs{gap:2px;}
.app .tab{position:relative; display:flex; align-items:center; gap:12px; width:100%; padding:0 12px; min-height:42px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--muted); transition:background .15s,color .15s;}
.app .tab::before{content:""; width:18px; height:18px; flex:none; 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;}
.app .tab:hover{background:var(--surface-2); color:var(--text);}
.app .tab.active{background:var(--surface-2); color:var(--text);}
.app .tab.active::before{color:var(--gold);}
.app .tab.active::after{content:""; position:absolute; left:-16px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--gold);}
.app #logout-btn::before{content:""; width:16px; height:16px; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain;}
.app #add-lead-btn{width:100%;}
.app .sidebar-footer{gap:8px;}
.app .sidebar-footer .btn-icon{width:100%;}
.app .main{background:var(--bg);}
.app .topbar{padding:18px 32px; border-bottom:1px solid var(--border); background:var(--bg);}
.app input.search{width:min(340px,100%); padding-left:38px; background-repeat:no-repeat; background-position:13px 50%; background-size:16px;}
.app .view{padding:24px 32px 40px;}

input.search{padding-left:38px; background-repeat:no-repeat; background-position:13px 50%; background-size:16px;}

/* ---------- dashboard numbers ---------- */
.stats{background:transparent; gap:12px; margin-bottom:0; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.stat{display:flex; flex-direction:column-reverse; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow);}
.stat .num{font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.05; color:var(--text);}
.stat .lbl{font-size:12.5px; font-weight:600; color:var(--muted); margin:0;}
.stat{min-width:0;}

/* ---------- pipeline ---------- */
.board{background:transparent; gap:14px; margin-top:18px; grid-template-columns:repeat(5,minmax(192px,1fr)); overflow-x:auto; padding-bottom:6px;}
.column{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:14px 12px 8px; min-height:220px; --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:700; letter-spacing:0; text-transform:none; color:var(--text);}
.column h3::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--stage); flex:none;}
.column h3 .count{margin-left:auto; min-width:24px; text-align:center; font-size:12px; font-weight:700; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:2px 8px;}
.column.dragover{background:var(--surface-2); border-color:var(--stage);}
.lead-card{background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:12px 13px; margin-bottom:10px; transition:border-color .15s, transform .15s;}
.lead-card:hover{border-color:var(--stage,var(--muted));}
.card-top{gap:10px; margin-bottom:11px;}
.card-top .avatar{width:34px; height:34px; font-size:12px;}
.card-top .name{font-size:14px; font-weight:700; letter-spacing:-.01em;}
.card-top > div:not(.avatar){min-width:0; flex:1;}
.card-top .contact{font-size:12px; color:var(--muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.card-bottom{gap:8px;}
.value{font-size:13.5px; font-weight:800; color:var(--text); margin-left:auto; white-space:nowrap;}
.assignee{flex-basis:100%; font-size:11.5px; color:var(--muted); padding-top:8px; border-top:1px solid var(--border);}
.empty-col{font-size:12.5px; color:var(--muted); border:1px dashed var(--border); border-radius:12px; padding:22px 8px;}

/* ---------- 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);}

/* ---------- phones ---------- */
@media (max-width:760px){
  body{padding-bottom:0;}
  .app.visible{display:block; min-height:100vh;}
  .app .sidebar{display:contents;}
  .app .brand{position:fixed; top:0; left:0; right:0; z-index:40; height:60px; padding:0 112px 0 16px; background:var(--surface); border-bottom:1px solid var(--border); display:flex!important; align-items:center; gap:10px;}
  .app .brand img{height:22px!important;}
  .app .brand h1{font-size:15px;}
  .app .brand p{display:none;}
  .app .user-card{display:none;}
  .app .sidebar-footer{display:contents;}
  .app #theme-toggle-btn, .app #logout-btn{position:fixed; top:10px; z-index:41; width:40px!important; min-height:40px; padding:0; font-size:15px;}
  .app #theme-toggle-btn{right:58px;}
  .app #logout-btn{right:12px; font-size:0;}
  .app #logout-btn::before{width:18px; height:18px;}
  .app #add-lead-btn{position:fixed; right:16px; bottom:88px; z-index:45; width:auto; min-height:48px; padding:0 20px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.35);}
  .app .tabs{position:fixed; left:0; right:0; bottom:0; z-index:44; flex-direction:row; gap:0; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); background:var(--surface); border-top:1px solid var(--border); overflow-x:auto;}
  .app .tab{flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; gap:3px; min-height:54px; padding:4px 2px; font-size:10px; line-height:1.15; text-align:center; white-space:normal; border-radius:12px;}
  .app .tab::before{width:21px; height:21px;}
  .app .tab.active::after{display:none;}
  .app .main{padding-top:60px; padding-bottom:96px; width:100%;}
  .app .topbar{padding:12px 16px;}
  .app input.search{width:100%;}
  .app .view{padding:16px 16px 24px;}
  .stats{display:flex; gap:10px; margin:0 -16px; padding:0 16px 4px; overflow-x:auto; scroll-snap-type:x proximity;}
  .stat{flex:0 0 128px; padding:12px 14px; border-radius:14px; scroll-snap-align:start;}
  .stat:last-child{flex-basis:188px;}
  .stat .num{font-size:22px;}
  .board{display:flex!important; grid-template-columns:none; gap:12px; margin:16px -16px 0; padding:0 16px 8px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
  .column{flex:0 0 84%; scroll-snap-align:start; min-height:200px;}
  .panel-box{padding:18px; border-radius:16px;}
  .add-user-row{grid-template-columns:1fr!important;}
  .modal{padding:20px; border-radius:18px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ---------- icons (drawn with CSS, no extra files) ---------- */
.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%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%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='M3 5h18l-7 8v6l-4 2v-8z'/%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");}
.app #logout-btn::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='M15 4h4v16h-4'/%3E%3Cpath d='M10 8l-4 4 4 4M6 12h10'/%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='M15 4h4v16h-4'/%3E%3Cpath d='M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E");}
#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='%239AA7BA' 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");}

/* ---------- light theme touches ---------- */
html[data-theme="light"] .brand img, html[data-theme="light"] .login-box .brand-logo{filter:invert(1);}
html[data-theme="light"] .tag, html[data-theme="light"] .stat .num, html[data-theme="light"] .card-top .avatar{filter:brightness(.74) saturate(1.15);}

/* ---------- sandbox demo shell ---------- */
#app.sbx > header{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:16px 28px; background:var(--surface); border-bottom:1px solid var(--border);}
#app.sbx > header .brand h1{font-size:17px; font-weight:800; letter-spacing:-.02em; margin:0;}
#app.sbx > header .brand p{font-size:11.5px; color:var(--muted); font-style:normal; margin:2px 0 0;}
#app.sbx > header .header-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
#app.sbx > header input.search{width:260px; max-width:100%;}
#app.sbx > header #add-lead-btn{width:auto;}
.subscribe-btn{display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 18px; border-radius:10px; font-weight:700; font-size:13.5px; text-decoration:none; background:var(--text); color:var(--bg);}
#app.sbx > main{padding:24px 28px 40px;}
.demo-tabbar{display:inline-flex; gap:4px; padding:4px; background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:20px;}
.demo-tab{border:none; background:none; color:var(--muted); font-family:inherit; font-weight:600; font-size:13.5px; min-height:36px; padding:0 16px; border-radius:9px; cursor:pointer;}
.demo-tab.active{background:var(--surface-2); color:var(--text);}
@media (max-width:760px){
  #app.sbx > header{padding:12px 16px;}
  #app.sbx > header .header-right{width:100%;}
  #app.sbx > header input.search{flex:1 1 100%; width:100%;}
  #app.sbx > header #add-lead-btn, .subscribe-btn{flex:1 1 0;}
  #app.sbx > main{padding:16px;}
  .demo-tabbar{display:flex; width:100%;}
  .demo-tab{flex:1;}
}

/* ---------- header-style shell (Lead Pipeline, Meridian) ---------- */
#app.hdr > header{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:18px; padding:12px 28px; background:var(--surface); border-bottom:1px solid var(--border);}
#app.hdr .brand{flex:none;}
#app.hdr .brand h1{font-size:17px; font-weight:800; letter-spacing:-.02em; margin:0; color:var(--text);}
#app.hdr .brand p{font-size:11.5px; color:var(--muted); font-style:normal; margin:2px 0 0;}
#app.hdr .tabs{display:flex; flex-direction:row; flex-wrap:wrap; gap:2px; padding:4px; background:var(--bg); border:1px solid var(--border); border-radius:12px;}
#app.hdr .tab{width:auto; min-height:34px; padding:0 14px; border-radius:9px; font-size:13px; font-weight:600; color:var(--muted); background:none; border:none; cursor:pointer;}
#app.hdr .tab:hover{color:var(--text);}
#app.hdr .tab.active{background:var(--surface-2); color:var(--text);}
#app.hdr .tab::before{display:none;}
#app.hdr .header-right{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
#app.hdr .header-right input.search{width:230px; max-width:100%;}
#app.hdr .user-chip{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600;}
#app.hdr .user-chip .avatar{width:32px; height:32px; font-size:12px;}
@media (max-width:760px){
  #app.hdr{padding-top:60px; padding-bottom:96px;}
  #app.hdr > header, #app.hdr .header-right{display:contents;}
  #app.hdr .brand{position:fixed; top:0; left:0; right:0; z-index:40; height:60px; padding:0 112px 0 16px; background:var(--surface); border-bottom:1px solid var(--border); display:flex!important; align-items:center; gap:10px;}
  #app.hdr .brand img{height:22px!important;}
  #app.hdr .brand h1{font-size:15px;}
  #app.hdr .brand p{display:none;}
  #app.hdr .header-right input.search{display:block; width:calc(100% - 32px); margin:14px 16px 0;}
  #app.hdr .user-chip{display:none;}
  #app.hdr #theme-toggle-btn, #app.hdr #logout-btn{position:fixed; top:10px; z-index:41; width:40px; min-height:40px; padding:0; font-size:15px;}
  #app.hdr #theme-toggle-btn{right:58px;}
  #app.hdr #logout-btn{right:12px; font-size:0;}
  #app.hdr #logout-btn::before{content:""; width:18px; height:18px; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain;}
  #app.hdr #logout-btn::before{-webkit-mask-image:var(--ico-logout); mask-image:var(--ico-logout);}
  #app.hdr #add-lead-btn{position:fixed; right:16px; bottom:88px; z-index:45; min-height:48px; padding:0 20px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.35);}
  #app.hdr .tabs{position:fixed; left:0; right:0; bottom:0; z-index:44; flex-wrap:nowrap; gap:0; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); background:var(--surface); border:none; border-top:1px solid var(--border); border-radius:0; overflow-x:auto;}
  #app.hdr .tab{flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; gap:3px; display:flex; align-items:center; min-height:54px; padding:4px 2px; font-size:10px; line-height:1.15; text-align:center; white-space:normal; border-radius:12px;}
  #app.hdr .tab::before{display:block; content:""; width:21px; height:21px; 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;}
  #app.hdr .tab.active::before{color:var(--gold);}
}

.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");}