:root {
   --accountDockW: 62px;
   --accountDockH: 62px;
   --accountDockR: 999px;
 }
 
 .accountDock {
   position: fixed;
   right: 18px;
   bottom: 18px;
   z-index: 980;
   filter: contrast(3);
 }
 
 .accountDockFrame {
   --w: var(--accountDockW);
   --h: var(--accountDockH);
   --r: var(--accountDockR);
   width: var(--w);
   height: var(--h);
   border-radius: var(--r);
   position: relative;
   border: 3px double rgba(255, 255, 255, 0.55);
   background:
     linear-gradient(
       45deg,
       rgba(255, 255, 255, 0.8) 0%,
       transparent 25%,
       transparent 75%,
       rgba(255, 255, 255, 0.8) 100%
     ),
     radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.18), transparent 44%),
     radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.14), transparent 48%),
     rgba(255, 255, 255, 0.14);
   box-shadow:
     inset 2px -2px 1px -1px rgba(255, 255, 255, 0.9),
     inset -2px 2px 1px -1px rgba(255, 255, 255, 0.9),
     inset 6px -6px 1px -6px rgba(255, 255, 255, 0.55),
     inset -6px 6px 1px -6px rgba(255, 255, 255, 0.55),
     inset 0 0 2px rgba(0, 0, 0, 0.8),
     0 4px 8px rgba(0, 0, 0, 0.2);
   filter: drop-shadow(0 25px 3px rgba(102, 102, 102, 0.15));
   overflow: hidden;
 }
 
 .accountDockFrame::before {
   content: "";
   position: absolute;
   z-index: 1;
   top: 35%;
   left: 50%;
   transform: translateX(-50%);
   width: calc(var(--w) - 16px);
   height: calc(var(--h) - 16px);
   border-radius: var(--r);
   border: 1px solid rgba(0, 0, 0, 0.9);
   filter: blur(8px);
   pointer-events: none;
 }
 
 .accountDockCircleOverlay {
   position: absolute;
   inset: 4px;
   z-index: 2;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: var(--r);
   filter: blur(1px);
   pointer-events: none;
 }
 
 .accountDockBtn {
   position: relative;
   z-index: 3;
   width: 100%;
   height: 100%;
   border: 0;
   background: transparent;
   display: grid;
   place-items: center;
   padding: 0;
   cursor: pointer;
   font: inherit;
   color: rgba(15, 23, 42, 0.92);
 }
 
 .accountDockBtn:focus-visible {
   outline: 2px solid rgba(147, 177, 255, 0.95);
   outline-offset: 3px;
 }
 
 .accountDockAvatar {
   width: 46px;
   height: 46px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.24);
   border: 2px solid rgba(255, 255, 255, 0.55);
   overflow: hidden;
   position: relative;
   flex-shrink: 0;
 }
 
 .accountDockAvatarImg {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 
 .accountDockAvatarFallback {
   position: absolute;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   font-size: 0.9rem;
   color: rgba(15, 23, 42, 0.75);
   letter-spacing: 0.02em;
 }
 
 .accountPopover {
   position: fixed;
   z-index: 985;
   width: min(320px, calc(100vw - 18px));
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(226, 232, 240, 0.9);
   border-radius: 16px;
   box-shadow: 0 20px 60px rgba(8, 15, 30, 0.18);
   padding: 12px;
   backdrop-filter: blur(12px) saturate(1.08);
 }
 
 .accountPopoverInner {
   display: grid;
   gap: 10px;
 }
 
 .accountPopoverTop {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
 }
 
 .accountPopoverTitle {
   font-size: 0.92rem;
   font-weight: 800;
   color: rgba(15, 23, 42, 0.92);
 }
 
 .accountPopoverCloseBtn {
   border: 1px solid rgba(203, 213, 225, 0.9);
   background: rgba(255, 255, 255, 0.75);
   border-radius: 10px;
   width: 32px;
   height: 32px;
   cursor: pointer;
   color: rgba(51, 65, 85, 0.95);
   font-size: 1.1rem;
   line-height: 1;
 }
 
 .accountPopoverCloseBtn:hover {
   border-color: rgba(148, 163, 184, 0.9);
   background: rgba(255, 255, 255, 1);
 }
 
 .accountPopoverRow {
   display: grid;
   gap: 6px;
 }
 
 .accountPopoverLabel {
   font-size: 0.78rem;
   color: rgba(71, 85, 105, 0.9);
 }
 
 .accountPopoverValue {
   font-size: 0.9rem;
   color: rgba(15, 23, 42, 0.92);
   font-weight: 700;
 }
 
 .accountPopoverInput {
   border: 1px solid rgba(203, 213, 225, 0.95);
   border-radius: 12px;
   padding: 10px 10px;
   font-size: 0.9rem;
   background: rgba(255, 255, 255, 0.8);
   color: rgba(15, 23, 42, 0.92);
 }
 
 .accountPopoverInput:focus {
   outline: none;
   border-color: rgba(147, 177, 255, 0.95);
   box-shadow: 0 0 0 3px rgba(233, 241, 255, 0.85);
 }
 
 .accountPopoverActions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
 }
 
 .accountPopoverBtn {
   border: 1px solid rgba(203, 213, 225, 0.95);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.82);
   color: rgba(51, 65, 85, 0.95);
   padding: 11px 12px;
   font-size: 0.9rem;
   cursor: pointer;
 }
 
 .accountPopoverBtn:hover {
   border-color: rgba(148, 163, 184, 0.95);
   background: rgba(255, 255, 255, 1);
 }
 
 .accountPopoverBtnPrimary {
   border-color: rgba(37, 99, 235, 0.75);
   background: rgba(37, 99, 235, 0.12);
   color: rgba(30, 58, 138, 0.95);
 }
 
 .accountPopoverBtnPrimary:hover {
   border-color: rgba(37, 99, 235, 0.9);
   background: rgba(37, 99, 235, 0.16);
 }