/* ============================================================
   Highpoint Pro: the desk-wide visual upgrade.
   Loaded after the desk's own styles; everything is scoped to html.hp-pro.
   ============================================================ */
html.hp-pro{
  --pro-card:rgba(13,15,24,.84);--pro-card-2:rgba(19,21,33,.9);--pro-sunk:rgba(255,255,255,.035);
  --pro-line:rgba(255,255,255,.075);--pro-line-2:rgba(255,255,255,.13);
  --pro-ink:#F3F4F7;--pro-mut:#9BA1AE;--pro-faint:#6C7383;
  --pro-a:#FF2E88;--pro-b:#FF9E3D;--pro-grad:linear-gradient(90deg,#FF2E88,#FF9E3D);
  --pro-ok:#3BD38B;--pro-warn:#FFB547;--pro-bad:#FF5A6A;
  --pro-r:16px;--pro-r-sm:11px;
  --pro-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 48px -28px rgba(0,0,0,.85);
  --pro-ui:"Inter",var(--f-ui),system-ui,sans-serif;
}
html.hp-pro body{font-family:var(--pro-ui);font-feature-settings:"cv11","ss01","tnum" 0;letter-spacing:-.005em}
html.hp-pro .num,html.hp-pro td.num,html.hp-pro .kpis .num{font-variant-numeric:tabular-nums}

/* ---- readable content over the sunset ---- */
html.gated .hp-scrim{display:none}
.hp-scrim{position:fixed;inset:0 0 0 262px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,13,.30) 0,rgba(6,7,13,.62) 260px,rgba(6,7,13,.86) 520px,rgba(6,7,13,.92) 100%)}
html.hp-pro main{position:relative;z-index:1}
html.hp-pro #sky{opacity:.55!important}
@media (max-width:900px){.hp-scrim{left:0}}

/* ---- rail ---- */
html.hp-pro .rail{background:linear-gradient(180deg,rgba(9,10,17,.97),rgba(6,7,12,.98))!important;border-right:1px solid var(--pro-line)!important;box-shadow:8px 0 30px -18px rgba(0,0,0,.9)}
html.hp-pro .rail .group{font-size:10.5px!important;letter-spacing:.16em!important;color:var(--pro-faint)!important;padding:14px 12px 6px!important}
html.hp-pro .nav{border-radius:10px!important;padding:9px 12px!important;color:#C4C8D2!important;font-weight:600!important;position:relative;transition:background .15s,color .15s,transform .15s!important}
html.hp-pro .nav svg{opacity:.75;transition:opacity .15s,color .15s}
html.hp-pro .nav:hover{background:rgba(255,255,255,.045)!important;color:#fff!important}
html.hp-pro .nav:hover svg{opacity:1}
html.hp-pro .nav[aria-current=page]{background:linear-gradient(90deg,rgba(255,46,136,.20),rgba(255,158,61,.05) 70%,transparent)!important;color:#fff!important;box-shadow:none!important}
html.hp-pro .nav[aria-current=page]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--pro-grad);box-shadow:0 0 12px var(--pro-a)}
html.hp-pro .nav[aria-current=page] svg{opacity:1;color:#FF7AB8}
html.hp-pro .nav:focus-visible{outline:2px solid var(--pro-a);outline-offset:1px}
@media (max-width:900px){html.hp-pro .nav[aria-current=page]::before{left:20%;right:20%;top:auto;bottom:-6px;width:auto;height:3px;border-radius:3px 3px 0 0}}

/* ---- top bar ---- */
html.hp-pro .topbar{background:rgba(7,8,14,.74)!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important;backdrop-filter:blur(20px) saturate(140%)!important;border-bottom:1px solid var(--pro-line)!important}
html.hp-pro #crumb{font-weight:700;letter-spacing:-.01em;color:#fff}
html.hp-pro .topbar .btn:not(.primary):not([data-new]){background:rgba(255,255,255,.04)!important;border-color:var(--pro-line-2)!important;color:#E4E6EC!important;box-shadow:none!important;background-image:none!important}
html.hp-pro .topbar .btn:not(.primary):not([data-new]):hover{background:rgba(255,255,255,.08)!important}
html.hp-pro .topbar .btn.primary:not([data-new]){background:rgba(255,255,255,.04)!important;border:1px solid var(--pro-line-2)!important;color:#E4E6EC!important;box-shadow:none!important}
html.hp-pro .topbar .btn.primary:not([data-new]):hover{background:rgba(255,255,255,.08)!important}
html.hp-pro .topbar [data-new]{background:var(--pro-grad)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 22px -10px var(--pro-a)!important}
.hp-kbd{font:600 10.5px ui-monospace,SFMono-Regular,Menlo,monospace;padding:2px 6px;border-radius:6px;border:1px solid var(--pro-line-2);color:var(--pro-mut);background:rgba(255,255,255,.04);white-space:nowrap}
html.hp-pro .hpd-srch input{padding-right:58px!important}
html.hp-pro .hpd-srch .hp-kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}
html.hp-pro .hpd-phonest{display:none!important}

/* ---- page headers ---- */
html.hp-pro section[data-v] > .head h1,html.hp-pro .hero h1{font-style:italic;font-weight:900!important;text-transform:uppercase;letter-spacing:-.015em!important;line-height:1!important;
  font-size:clamp(28px,2.7vw,40px)!important;background:linear-gradient(180deg,#fff 35%,#FFD3E6 75%,#FFB36B);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none!important;filter:drop-shadow(0 4px 18px rgba(255,46,136,.22))}
html.hp-pro .hero h1 em,html.hp-pro .hero h1 span{-webkit-text-fill-color:transparent}
html.hp-pro section[data-v] > .head{padding-bottom:16px;margin-bottom:20px!important;border-bottom:1px solid var(--pro-line);position:relative}
html.hp-pro section[data-v] > .head::after{content:"";position:absolute;left:0;bottom:-1px;width:72px;height:2px;background:var(--pro-grad);border-radius:2px}
html.hp-pro section[data-v] > .head p{color:#BFC3CC!important;max-width:70ch;line-height:1.55;margin-top:8px!important}
html.hp-pro .eyebrow{letter-spacing:.24em!important;color:#FF9E3D!important;font-weight:700!important}
html.hp-pro section[data-v]:not([hidden]){animation:proIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes proIn{from{opacity:0;transform:translateY(8px)}}

/* ---- surfaces ---- */
html.hp-pro .panel,html.hp-pro .hph-card,html.hp-pro .hph-ready,html.hp-pro .hph-usage,html.hp-pro .hph-bar,html.hp-pro .hph-sound,html.hp-pro .hph-music,html.hp-pro .hpd-kpis>div,html.hp-pro .tablewrap{
  background:var(--pro-card)!important;border:1px solid var(--pro-line)!important;border-radius:var(--pro-r)!important;box-shadow:var(--pro-shadow)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.hp-pro .hero{background:linear-gradient(135deg,rgba(24,14,34,.9),rgba(10,11,20,.92) 60%)!important;border:1px solid var(--pro-line-2)!important;border-radius:20px!important;box-shadow:var(--pro-shadow)!important}
html.hp-pro .hero::after{content:"";position:absolute;inset:auto -10% -60% 40%;height:140%;background:radial-gradient(closest-side,rgba(255,46,136,.22),transparent 70%);pointer-events:none}
html.hp-pro .kpis>div{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--pro-line)}
html.hp-pro .kpis .label,html.hp-pro .label{letter-spacing:.12em!important;font-weight:700!important;color:var(--pro-mut)!important}
html.hp-pro .card{background:var(--pro-card-2)!important;border:1px solid var(--pro-line)!important;border-radius:13px!important;box-shadow:0 10px 24px -18px rgba(0,0,0,.9)}
html.hp-pro .card:hover{border-color:rgba(255,79,163,.45)!important;transform:translateY(-2px);box-shadow:0 18px 30px -18px rgba(255,46,136,.35)!important}

/* ---- tables ---- */
html.hp-pro table th{background:rgba(10,11,18,.96)!important;color:var(--pro-faint)!important;font-size:10.5px!important;letter-spacing:.12em!important;font-weight:700!important;position:sticky;top:0;z-index:1;border-bottom:1px solid var(--pro-line)!important}
html.hp-pro table td{border-color:var(--pro-line)!important}
html.hp-pro tbody tr{transition:background .12s}
html.hp-pro tbody tr:hover td{background:rgba(255,255,255,.035)!important}

/* ---- controls ---- */
html.hp-pro .btn{border-radius:999px;font-weight:650;transition:transform .12s,background .15s,border-color .15s,box-shadow .2s,filter .15s!important}
html.hp-pro .btn:active{transform:scale(.97)}
html.hp-pro .btn:not(.primary){background:rgba(255,255,255,.045)!important;border-color:var(--pro-line-2)!important;background-image:none}
html.hp-pro .btn:not(.primary):hover{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.22)!important}
html.hp-pro .btn.primary{background:var(--pro-grad)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 26px -12px var(--pro-a)!important}
html.hp-pro .btn.primary:hover{filter:brightness(1.07);box-shadow:0 14px 30px -12px var(--pro-a)!important}
html.hp-pro .btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
html.hp-pro input:not([type=checkbox]):not([type=radio]):not([type=range]),html.hp-pro select,html.hp-pro textarea{
  background-color:rgba(255,255,255,.04)!important;border:1px solid var(--pro-line-2)!important;border-radius:var(--pro-r-sm)!important;color:var(--pro-ink)!important;transition:border-color .15s,box-shadow .15s,background-color .15s}
html.hp-pro input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,html.hp-pro select:hover,html.hp-pro textarea:hover{border-color:rgba(255,255,255,.22)!important}
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:#FF4FA3!important;box-shadow:0 0 0 3px rgba(255,79,163,.2)!important;background-color:rgba(255,255,255,.06)!important}
html.hp-pro input::placeholder,html.hp-pro textarea::placeholder{color:var(--pro-faint)!important}
html.hp-pro .hpd-status select{background-color:transparent!important;border:0!important;box-shadow:none!important}
html.hp-pro .bigseg{background:rgba(255,255,255,.035)!important;border:1px solid var(--pro-line)!important}
html.hp-pro .field>span{color:var(--pro-mut)!important;font-weight:650;letter-spacing:.01em}

/* ---- toasts, scrollbars, selection ---- */
html.hp-pro .toast{background:rgba(14,15,24,.96)!important;color:#fff!important;border:1px solid var(--pro-line-2);border-left:3px solid #FF4FA3;border-radius:12px!important;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.hp-pro ::selection{background:rgba(255,46,136,.45);color:#fff}
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:3px solid transparent;background-clip:padding-box}
html.hp-pro ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:padding-box;border:3px solid transparent}

/* ---- command palette ---- */
.hpk{position:fixed;inset:0;z-index:2147482000;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgba(3,4,8,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:hpkFade .15s}
@keyframes hpkFade{from{opacity:0}}
.hpk-box{width:min(640px,100%);max-height:70vh;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:rgba(12,13,21,.97);border:1px solid rgba(255,255,255,.13);box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 0 1px rgba(255,46,136,.08);color:#F3F4F7;font-family:var(--pro-ui,"Inter",system-ui,sans-serif);animation:hpkIn .18s cubic-bezier(.2,.8,.2,1)}
@keyframes hpkIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.hpk-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.hpk-top svg{width:18px;height:18px;color:#FF7AB8;flex:none}
.hpk-top input{all:unset;flex:1;font-size:16px;color:#fff}
.hpk-top input::placeholder{color:#6C7383}
.hpk-list{overflow-y:auto;padding:6px}
.hpk-grp{padding:10px 12px 4px;font:800 10.5px var(--pro-ui,system-ui);letter-spacing:.14em;text-transform:uppercase;color:#6C7383}
.hpk-it{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;cursor:pointer}
.hpk-it .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.06);flex:none;color:#C4C8D2}
.hpk-it .ic svg{width:16px;height:16px}
.hpk-it .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.hpk-it .tx b{font-weight:650;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpk-it .tx span{font-size:12px;color:#9BA1AE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hpk-it.act{background:linear-gradient(90deg,rgba(255,46,136,.24),rgba(255,158,61,.1))}
.hpk-it.act .ic{background:var(--pro-grad,linear-gradient(90deg,#FF2E88,#FF9E3D));color:#fff}
.hpk-empty{padding:28px 16px;text-align:center;color:#9BA1AE;font-size:14px}
.hpk-foot{display:flex;gap:14px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:#6C7383}
@media (prefers-reduced-motion:reduce){html.hp-pro section[data-v]:not([hidden]),.hpk,.hpk-box{animation:none}html.hp-pro .card:hover{transform:none}}
html.hp-pro .hpk-top input{border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;border-radius:0!important}
html.hp-pro .hpd-srch input[readonly]{cursor:pointer}