:root{
  --space-xxs:4px; --space-xs:8px; --space-s:12px; --space-m:16px;
  --space-l:24px; --space-xl:32px; --space-xxl:48px; --space-section:64px;

  --primary-lavender-ice:#F5EBFF; --primary-soft-violet:#D8B4FE;
  --primary-amethyst:#A855F7;     --primary-vivid:#6A0DAD;
  --primary-royal-grape:#5B21B6;  --primary-deep-plum:#4C1D95;

  --secondary-bright:#007BFF; --secondary-deep-azure:#0369A1;

  --tertiary-mellow-lemon:#FEF3C7; --tertiary-hot-sand:#FCD34D;
  --tertiary-gold:#FFD700;         --tertiary-harvest-gold:#D97706;

  --surface-background:#FAFAFA; --surface-border:#E0E0E0; --surface-variant:#F5F5F5;
  --text-primary:#222222; --text-secondary:#666666; --text-tertiary:#999999; --text-inverse:#FFFFFF;

  --zivvy-success-50:#ECFDF5; --zivvy-success-100:#D1FAE5;
  --zivvy-success-500:#10B981; --zivvy-success-600:#059669; --zivvy-success-700:#047857;
  --zivvy-warning-50:#FFFBEB; --zivvy-warning-200:#FDE68A;
  --zivvy-warning-500:#F59E0B; --zivvy-warning-700:#B45309;
  --zivvy-danger-50:#FEF2F2;  --zivvy-danger-100:#FEE2E2;
  --zivvy-danger-500:#EF4444; --zivvy-danger-600:#DC2626; --zivvy-danger-700:#B91C1C;

  --font-text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Menlo','Monaco',monospace;

  --type-heading-1:clamp(22px,2.5vw,28px);
  --type-heading-2:clamp(20px,2.2vw,24px);
  --type-body-lg:18px; --type-body-md:16px; --type-body-sm:14px; --type-body-xs:12px;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:900;
  --line-snug:1.25; --line-normal:1.5;
  --tracking-tight:-0.025em; --tracking-wider:0.05em;

  --shadow-2:0 2px 4px rgba(0,0,0,.08);
  --shadow-3:0 4px 8px rgba(0,0,0,.1);
  --shadow-5:0 16px 32px rgba(0,0,0,.15);

  --timing-fast:150ms; --timing-base:300ms;
  --ease-default:cubic-bezier(.4,0,.2,1);

  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;
  --focus-ring-color:var(--secondary-bright);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;margin:0;padding:0}
body{
  font-family:var(--font-text);
  font-size:var(--type-body-md);
  line-height:var(--line-normal);
  color:var(--text-primary);
  background:var(--surface-background);
  -webkit-font-smoothing:antialiased;
  
  padding:0 !important;margin:0 !important;
}
body > .navbar,
body > .navbar-fixed-top,
.navbar{display:none !important}
a{color:var(--primary-vivid);text-decoration:none;font-weight:var(--weight-medium)}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring-color);border-radius:var(--radius-sm)}

.shell{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);min-height:100vh;margin:0;padding:0}

.brand{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--space-xxl);
  background:
    radial-gradient(120% 90% at 12% 0%,#5B21B6 0%,transparent 58%),
    linear-gradient(158deg,#4C1D95 0%,#2E1065 46%,#1B0838 100%);
  color:var(--text-inverse);
  isolation:isolate;
}
.brand::before{ 
  content:'';position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 20% 10%,#000 25%,transparent 78%);
          mask-image:radial-gradient(120% 80% at 20% 10%,#000 25%,transparent 78%);
}
.sweep{
  position:absolute;left:0;right:0;height:200px;z-index:1;pointer-events:none;
  top:-200px;
  background:linear-gradient(180deg,transparent 0%,rgba(255,215,0,.07) 62%,rgba(255,215,0,.34) 88%,rgba(255,215,0,.9) 100%);
}
.sweep::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--tertiary-gold);box-shadow:0 0 22px 3px rgba(255,215,0,.55)}
.brand > *{position:relative;z-index:2}

:root{
  --logo-light:url("/images/zivvy-hpr-reverse.svg");
  --logo-dark:var(--logo-light);
}
.mark{display:flex;align-items:center}
.logo{height:32px;width:auto;display:block;user-select:none}
.logo-plate{display:inline-flex;padding:13px 22px;border-radius:var(--radius-md);
  background:linear-gradient(158deg,#4C1D95 0%,#2E1065 100%);box-shadow:var(--shadow-2)}
.logo-plate .logo{height:26px}

.brand-lede{max-width:24ch;margin:var(--space-xxl) 0 auto}
.brand-lede h1{
  font-size:clamp(30px,3.6vw,46px);font-weight:var(--weight-black);
  line-height:1.06;letter-spacing:-0.03em;
}
.brand-lede h1 em{font-style:normal;color:var(--tertiary-hot-sand)}
.brand-lede p{
  margin-top:var(--space-m);max-width:34ch;
  color:rgba(255,255,255,.68);font-size:var(--type-body-md);line-height:1.55
}

.readout{margin-top:var(--space-xxl);border-top:1px solid rgba(255,255,255,.12);padding-top:var(--space-m)}
.readout-cap{
  font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-wider);
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:var(--space-s)
}
.readout-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-m);
  padding:7px 0;font-family:var(--font-mono);font-size:var(--type-body-sm);
  color:rgba(255,255,255,.46);transition:color 420ms var(--ease-default)
}
.readout-row b{font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.72);transition:color 420ms var(--ease-default)}
.readout-row.lit{color:rgba(255,255,255,.9)}
.readout-row.lit b{color:var(--tertiary-gold)}

.brand-foot{
  margin-top:var(--space-xl);font-size:var(--type-body-xs);
  color:rgba(255,255,255,.35);display:flex;gap:var(--space-m);flex-wrap:wrap
}
.brand-foot a{color:rgba(255,255,255,.55);font-weight:var(--weight-regular)}

.auth{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xxl) var(--space-l)}
.auth-inner{width:100%;max-width:396px}
.mark-mobile{display:none;justify-content:center;margin-bottom:var(--space-xl)}

.stage{position:relative;overflow:visible}
.view{display:none}
.view.is-active{display:block}

.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-wider);
  text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--space-s)
}
h2.title{font-size:var(--type-heading-1);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);line-height:var(--line-snug)}
p.sub{margin-top:var(--space-xs);color:var(--text-secondary);font-size:var(--type-body-sm);line-height:1.55}
.spacer{height:var(--space-xl)}

.field{margin-bottom:var(--space-m)}
.label,
label.label{
  display:block;
  padding:0;
  margin:0 0 var(--space-xs);
  font-family:var(--font-text);
  font-size:var(--type-body-sm);
  font-weight:var(--weight-medium);
  line-height:var(--line-normal);
  color:var(--text-primary);
  text-align:left;
  white-space:normal;
  vertical-align:baseline;
  border-radius:0;
  background:transparent;
}
.label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-xs)}
.label-row .label{margin:0}
.label-row a{font-size:var(--type-body-sm)}
.input{
  width:100%;height:48px;padding:0 var(--space-m);
  font-family:var(--font-text);font-size:var(--type-body-md);color:var(--text-primary);
  background:#fff;border:2px solid var(--surface-border);border-radius:var(--radius-md);
  transition:border-color var(--timing-fast),box-shadow var(--timing-fast),background var(--timing-fast)
}
.input::placeholder{color:var(--text-tertiary)}
.input:hover:not(:focus){border-color:var(--text-tertiary)}
.input:focus{outline:none;border-color:var(--primary-vivid);box-shadow:0 0 0 3px var(--primary-lavender-ice)}
.input.has-error{border-color:var(--zivvy-danger-500);background:var(--zivvy-danger-50)}
.input.has-error:focus{box-shadow:0 0 0 3px var(--zivvy-danger-100)}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:64px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  height:36px;padding:0 var(--space-s);border:0;background:transparent;cursor:pointer;
  font-family:var(--font-text);font-size:var(--type-body-sm);font-weight:var(--weight-medium);
  color:var(--text-secondary);border-radius:var(--radius-sm)
}
.pw-toggle:hover{color:var(--primary-vivid)}

.msg{
  display:flex;gap:6px;align-items:flex-start;
  font-size:var(--type-body-sm);margin-top:var(--space-xs);color:var(--zivvy-danger-600)
}
.msg.ng-hide{display:none !important}
.msg svg{flex-shrink:0;margin-top:2px}

.checkbox-wrapper{
  position:relative;display:flex;align-items:flex-start;gap:var(--space-s);
  min-height:44px;padding:var(--space-xs) 0;margin-bottom:var(--space-xs)
}
.checkbox{position:absolute;opacity:0;width:20px;height:20px;top:var(--space-xs);left:0;margin:0}
.checkbox-control{
  position:relative;
  width:20px;height:20px;flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--surface-border);border-radius:var(--radius-sm);
  cursor:pointer;transition:all var(--timing-fast)
}
.checkbox-control::before{content:"";position:absolute;top:-12px;left:-12px;right:-12px;bottom:-12px}
.checkbox-icon{width:14px;height:14px;color:#fff;opacity:0;transform:scale(0);transition:all var(--timing-fast) var(--ease-spring)}
.checkbox:checked + .checkbox-control{background:var(--primary-vivid);border-color:var(--primary-vivid)}
.checkbox:checked + .checkbox-control .checkbox-icon{opacity:1;transform:scale(1)}
.checkbox:focus-visible + .checkbox-control{box-shadow:0 0 0 3px var(--primary-lavender-ice);border-color:var(--primary-vivid)}
.checkbox-control:hover{border-color:var(--text-tertiary)}
.checkbox:checked + .checkbox-control:hover{border-color:var(--primary-royal-grape)}
.checkbox-text{font-size:var(--type-body-sm);line-height:1.5;color:var(--text-secondary);padding-top:1px}
.checkbox-text a{font-weight:var(--weight-medium)}
.checkbox-wrapper.has-error .checkbox-control{border-color:var(--zivvy-danger-500);background:var(--zivvy-danger-50)}
.checkbox-wrapper.has-error .checkbox-text{color:var(--zivvy-danger-700)}
.consent[hidden]{display:none}

.chip{
  display:flex;align-items:center;gap:var(--space-s);width:100%;
  padding:10px var(--space-s) 10px 10px;margin-bottom:var(--space-m);
  background:var(--surface-variant);border:1px solid var(--surface-border);
  border-radius:var(--radius-md);text-align:left
}
.avatar{
  width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-full);
  background:linear-gradient(140deg,var(--primary-amethyst),var(--primary-vivid));
  color:#fff;display:grid;place-items:center;
  font-size:var(--type-body-xs);font-weight:var(--weight-bold);letter-spacing:.02em
}
.chip-mail{flex:1;min-width:0;font-size:var(--type-body-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-btn{
  border:0;background:transparent;cursor:pointer;flex-shrink:0;
  font-family:var(--font-text);font-size:var(--type-body-sm);font-weight:var(--weight-medium);
  color:var(--primary-vivid);padding:4px 6px;border-radius:var(--radius-sm)
}
.chip-btn:hover{text-decoration:underline}

.meter{margin-top:10px}
.meter-track{height:4px;background:var(--surface-border);border-radius:var(--radius-full);overflow:hidden}
.meter-fill{height:100%;width:0;background:var(--zivvy-danger-500);border-radius:var(--radius-full)}
.meter-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;font-size:var(--type-body-xs)}
.meter-label{font-weight:var(--weight-medium);color:var(--text-secondary)}
.meter-hint{color:var(--text-tertiary)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  width:100%;height:48px;padding:0 var(--space-l);
  font-family:var(--font-text);font-size:var(--type-body-md);font-weight:var(--weight-semibold);
  border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;
  transition:all var(--timing-fast) var(--ease-default);user-select:none;text-decoration:none
}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--primary-vivid);color:#fff;border-color:var(--primary-vivid);box-shadow:0 2px 4px rgba(106,13,173,.2)}
.btn-primary:hover{background:var(--primary-royal-grape);border-color:var(--primary-royal-grape);color:#fff;transform:translateY(-1px);box-shadow:0 4px 8px rgba(106,13,173,.25);text-decoration:none}
.btn-primary:active{background:var(--primary-deep-plum);transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--surface-border)}
.btn-ghost:hover{background:var(--surface-variant);border-color:var(--text-tertiary);color:var(--text-primary);text-decoration:none}
.btn-link{
  display:block;width:100%;margin-top:var(--space-m);padding:8px;
  border:0;background:transparent;cursor:pointer;text-align:center;
  font-family:var(--font-text);font-size:var(--type-body-sm);font-weight:var(--weight-medium);color:var(--text-secondary)
}
.btn-link:hover{color:var(--primary-vivid)}
.btn.is-busy .btn-text{opacity:.55}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.spin[hidden]{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.accounts{display:flex;flex-direction:column;gap:var(--space-xs);margin:0 0 var(--space-m);padding:0;list-style:none}
.accounts>li{margin:0;padding:0}
.acct{
  display:flex;align-items:center;gap:var(--space-s);width:100%;
  padding:var(--space-s) var(--space-m) var(--space-s) var(--space-s);
  background:#fff;border:2px solid var(--surface-border);border-radius:var(--radius-md);
  cursor:pointer;text-align:left;font-family:var(--font-text);
  transition:border-color var(--timing-fast),box-shadow var(--timing-fast),transform var(--timing-fast)
}
.acct:hover{border-color:var(--primary-soft-violet);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.acct .avatar{width:40px;height:40px;font-size:var(--type-body-sm);border-radius:var(--radius-md)}
.acct-body{flex:1;min-width:0}
.acct-name{display:block;font-size:var(--type-body-md);font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.3}
.acct-meta{display:block;font-size:var(--type-body-xs);color:var(--text-secondary);margin-top:1px}
.acct-go{color:var(--text-tertiary);flex-shrink:0;display:flex}
.acct.is-busy{border-color:var(--primary-vivid);pointer-events:none}
.acct.is-busy .acct-go .chev{display:none}
.acct-spin{width:16px;height:16px;border:2px solid var(--primary-lavender-ice);border-top-color:var(--primary-vivid);border-radius:50%;animation:spin .7s linear infinite;display:none}
.acct.is-busy .acct-spin{display:block}

.badge{
  width:56px;height:56px;border-radius:var(--radius-full);
  display:grid;place-items:center;margin-bottom:var(--space-l)
}
.badge-success{background:var(--zivvy-success-100);color:var(--zivvy-success-700)}
.badge-warning{background:var(--tertiary-mellow-lemon);color:var(--zivvy-warning-700)}
.badge-danger{background:var(--zivvy-danger-100);color:var(--zivvy-danger-700)}
.badge-neutral{background:var(--surface-variant);color:var(--text-secondary)}

.note{
  display:flex;gap:var(--space-s);padding:var(--space-s) var(--space-m);
  border-radius:var(--radius-md);font-size:var(--type-body-sm);line-height:1.5;margin-bottom:var(--space-m)
}
.note svg{flex-shrink:0;margin-top:2px}
.note-info{background:var(--surface-variant);color:var(--text-secondary)}
.note-warning{background:var(--zivvy-warning-50);color:var(--zivvy-warning-700);border:1px solid var(--tertiary-mellow-lemon)}
.note-danger{background:var(--zivvy-danger-50);color:var(--zivvy-danger-700);border:1px solid var(--zivvy-danger-100)}

.mail-out{font-weight:var(--weight-semibold);color:var(--text-primary);word-break:break-all}

.timer{
  display:flex;align-items:baseline;gap:var(--space-xs);
  margin-bottom:var(--space-l);padding:var(--space-m);
  background:var(--surface-variant);border-radius:var(--radius-md)
}
.timer-num{font-family:var(--font-mono);font-size:26px;font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.timer-cap{font-size:var(--type-body-sm);color:var(--text-secondary)}

.check-svg circle,.check-svg path{stroke-dasharray:1;stroke-dashoffset:1}

.legal{margin-top:var(--space-xl);padding-top:var(--space-m);border-top:1px solid var(--surface-border);font-size:var(--type-body-xs);color:var(--text-tertiary);text-align:center;line-height:1.6}
.legal a{color:var(--text-secondary);font-weight:var(--weight-regular)}

@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .brand{display:none}
  .mark-mobile{display:flex}
  .auth{min-height:100vh;padding:var(--space-xl) var(--space-l)}
}
@media (max-width:767px){
  .input{height:56px;font-size:var(--type-body-lg)}
  .btn{height:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .sweep{display:none}
}

.ng-hide { display: none !important; }
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
.view[hidden], .consent[hidden], .spin[hidden] { display: none !important; }
.btn.disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
a.btn, a.btn:hover { text-decoration: none; }
a.btn-link{display:block;text-decoration:none}
a.btn-link:hover{text-decoration:none;color:var(--primary-vivid)}
.msg[hidden]{display:none !important}
#authorize-form { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-error {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: var(--type-body-sm); margin-bottom: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-md);
  background: var(--zivvy-danger-50); color: var(--zivvy-danger-700);
  border: 1px solid var(--zivvy-danger-100);
}
.loading-dots {
  display: inline-flex; gap: 6px; align-items: center; margin-top: var(--space-m);
}
.loading-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary-vivid);
  animation: bounce 1.2s infinite ease-in-out both;
}
.loading-dots span:nth-child(1){ animation-delay: -0.32s }
.loading-dots span:nth-child(2){ animation-delay: -0.16s }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}
:root { --ease-spring: cubic-bezier(.34,1.56,.64,1); }