/* Highpoint UI upgrade: calmer backdrop, sharper glass, a board that fits, a phone layout that breathes */

/* ---------- backdrop: keep the Miami night, but let the work read first ---------- */
html.hp-pro:not(.gated) .vscene::before{background:linear-gradient(180deg,rgba(9,5,18,.30) 0%,rgba(9,5,18,.55) 38%,rgba(7,4,14,.86) 70%,rgba(5,3,10,.94) 100%)!important}
html.hp-pro:not(.gated) .vscene .vsvg{filter:saturate(1.08)}

/* ---------- glass ---------- */
html.hp-pro .hero,html.hp-pro .panel,html.hp-pro .hpd .panel{
  background:linear-gradient(180deg,rgba(26,16,40,.82),rgba(11,9,20,.88))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -36px rgba(0,0,0,.95),0 0 0 1px rgba(255,46,136,.04)!important}
html.hp-pro .hero{position:relative;overflow:hidden}
html.hp-pro .hero::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,79,163,.9) 30%,rgba(255,158,61,.9) 70%,transparent);box-shadow:0 0 12px rgba(255,46,136,.8);pointer-events:none}
html.hp-pro .kpis>div{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.08)!important;transition:border-color .2s,transform .2s,box-shadow .2s}
html.hp-pro .kpis>div:hover{border-color:rgba(255,79,163,.35)!important;transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(255,46,136,.6)}

/* ---------- pipeline: all six stages fit, no duplicate count strip on wide screens ---------- */
html.hp-pro .board{grid-auto-flow:initial!important;grid-template-columns:repeat(6,minmax(176px,1fr))!important;grid-auto-columns:initial!important;scroll-snap-type:x proximity}
html.hp-pro .board>*{scroll-snap-align:start}
@media (min-width:1000px){html.hp-pro #strip{display:none!important}}
html.hp-pro .col{background:linear-gradient(180deg,rgba(18,12,30,.86),rgba(9,7,16,.86))!important;border:1px solid rgba(255,255,255,.08)!important;border-top:2px solid rgba(255,79,163,.55)!important;transition:border-color .2s,box-shadow .2s}
html.hp-pro .col.over,html.hp-pro .col[data-over]{border-color:rgba(255,79,163,.7)!important;box-shadow:0 0 0 1px rgba(255,79,163,.4),0 0 28px -8px rgba(255,46,136,.7)}
html.hp-pro .col .card{transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}
html.hp-pro .col .card:hover{transform:translateY(-2px);border-color:rgba(255,79,163,.4)!important;box-shadow:0 12px 26px -16px rgba(255,46,136,.7)}

/* ---------- forms ---------- */
html.hp-pro input:not([type=checkbox]):not([type=radio]):not([type=range]),html.hp-pro select,html.hp-pro textarea{transition:border-color .15s,box-shadow .15s,background .15s}
html.hp-pro input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,html.hp-pro select:focus,html.hp-pro textarea:focus{outline:none!important;border-color:rgba(255,79,163,.75)!important;box-shadow:0 0 0 3px rgba(255,46,136,.18),0 0 18px -6px rgba(255,46,136,.7)!important}

/* ---------- tables ---------- */
html.hp-pro table tbody tr{transition:background .15s}
html.hp-pro table tbody tr:hover{background:rgba(255,79,163,.06)}

/* ---------- scrollbars ---------- */
html.hp-pro *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
html.hp-pro ::-webkit-scrollbar{width:10px;height:10px}
html.hp-pro ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
html.hp-pro ::-webkit-scrollbar-thumb:hover{background:rgba(255,79,163,.45);background-clip:padding-box}

/* ---------- toasts ---------- */
html.hp-pro .toast{border-radius:14px!important;border:1px solid rgba(255,79,163,.55)!important;background:linear-gradient(180deg,rgba(32,14,44,.96),rgba(14,8,24,.96))!important;box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 22px -6px rgba(255,46,136,.8)!important;backdrop-filter:blur(10px)}

/* ---------- page transitions ---------- */
@media (prefers-reduced-motion:no-preference){html.hp-pro section[data-v]:not([hidden]){animation:hpViewIn .38s cubic-bezier(.2,.8,.2,1) both}}
@keyframes hpViewIn{from{opacity:0;transform:translateY(8px)}}

/* ---------- phone: one clean top row ---------- */
@media (max-width:760px){
  html.hp-pro .topbar{flex-wrap:nowrap!important;gap:8px!important;padding:8px 12px!important;align-items:center}
  html.hp-pro .topbar #crumb{display:none}
  html.hp-pro .topbar>.row{flex-wrap:nowrap!important;gap:6px!important;margin-left:auto}
  html.hp-pro .topbar>.row>.btn{padding:0!important;width:38px;height:38px;justify-content:center;font-size:0!important;gap:0!important}
  html.hp-pro .topbar>.row>.btn svg{width:18px;height:18px}
  html.hp-pro .topbar>.row>[data-goto="pipeline"]{display:none!important}
  html.hp-pro .topbar .sp-btn{font-size:0!important}
  html.hp-pro .topbar .hp-acct{margin-left:2px}
  html.hp-pro .topbar .hp-acct i{width:34px;height:34px}
  html.hp-pro .topbar .hp-acct button{font-size:0!important;padding:0!important;width:34px;height:34px;display:grid;place-items:center}
  html.hp-pro .topbar .hp-acct button::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h11'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h11'/%3E%3C/svg%3E") center/contain no-repeat}
  html.hp-pro .board{grid-template-columns:repeat(6,minmax(78vw,1fr))!important}
}